Kako ispraviti pogreške u aplikaciji izrađenoj uz AI: praktična metoda

Da biste ispravili grešku u aplikaciji izrađenoj uz AI, prvo je namjerno ponovno izazovite, zatim prikupite dokaze — točne korake, poruku o greški i što pokazuju konzola preglednika i kartica mreže — te to predajte AI-ju kao „Napravio sam X, očekivao Y, dobio Z”. Ako ispravak pogorša stvari, vratite se na zadnju radnu verziju umjesto da slažete ispravke jednu na drugu. Za sve ovo ne morate čitati kod.

Ovaj vodič pokriva cijeli ciklus, uključujući kratak pregled alata za developere u pregledniku za nekoder.

Ciklus ispravljanja grešaka

Svaki ispravak greške, bilo da ga radi osoba ili AI, prati isti ciklus:

1. Reproducirajte — izazovite grešku pouzdano.
2. Promatrajte — prikupite poruku o greški i što je aplikacija radila.
3. Opišite — dajte AI-ju precizne korake, očekivani rezultat i stvarni rezultat.
4. Ispravite — neka AI promijeni jednu stvar.
5. Provjerite — ponovite točne korake i potvrdite da je ispravljeno te da ništa u blizini nije pokvareno.
6. Vratite se ako treba — ako je postalo gore, poništite i pokušajte ponovno s boljim informacijama.

Većina vremena izgubljenog na aplikacijama izrađenim uz AI dolazi od preskakanja koraka 1, 2 i 5: govorenja „nešto ne radi”, prihvaćanja promjene bez testiranja, a zatim traženja još jednog ispravka na vrhu pokvarenog.

Korak 1: Reproducirajte grešku

Greška koju možete izazvati na zahtjev je napola ispravljena. Pokušajte pronaći najkraći niz koraka koji je uzrokuje.

Pitajte se:

• Događa li se svaki put? Ako se događa samo ponekad, što je drugačije kada se dogodi — određeni zapis, spora veza, odjavljen korisnik?
• Događa li se svakom korisniku? Prijavite se kao drugi račun. Mnoge greške se pokažu samo novim korisnicima bez podataka ili korisnicima druge uloge.
• Događa li se na svakom uređaju? Isprobajte ekran širine mobitela i drugi preglednik.
• Je li počela nakon određene promjene? Ako je radilo jučer, zadnje promjene su glavni osumnjičenici.

Zapišite korake kao kratak numerirani popis. Kasnije ćete ga zalijepiti u upit.

Korak 2: Pročitajte poruku o greški

Poruke o greškama djeluju zastrašujuće, ali trebaju vam samo neki dijelovi.

Ne morate je razumjeti; trebate je točno kopirati. „Cannot read properties of undefined (reading 'name')” govori AI-ju da je kod očekivao neke podatke (vjerojatno rezervaciju ili korisnika) koji nisu bili tu. Parafraza poput „neka undefined greška” gubi taj podatak.

Nekoliko čestih, grubo prevedenih:

• Greške undefined / null — kod je očekivao podatke koji nisu stigli. Često stanje učitavanja ili prazna lista koju kod nije obradio.
• 404 Not Found — stranica ili API adresa ne postoji. Često pogreška u putanji ili poveznica na stranicu koja je preimenovana.
• 401 Unauthorized / 403 Forbidden — zahtjev nije bio prijavljen, ili korisnik nema pravo to napraviti.
• 500 Internal Server Error — serverski kod je pao. Pravi razlog je u serverskim zapisnicima, a ne u pregledniku.
• Greške CORS — preglednik je blokirao zahtjev prema drugoj domeni. Obično je riječ o konfiguraciji na serveru.

Korak 3: Koristite alate za developere u pregledniku

Svaki desktop preglednik ima ugrađene alate za developere ("devtools"). Pokazuju što stranica radi iza kulisa. U Chromeu, Edgeu i Firefoxu desnom tipkom kliknite bilo gdje na stranici i odaberite Inspect (Pregledaj), ili pritisnite F12 (Cmd+Option+I na Macu). U Safariju najprije uključite izbornik Develop u postavkama Safarija.

Trebaju vam samo tri kartice.

Console

Kartica Console prikazuje greške i poruke iz koda stranice. Greške su crvene. Ako gumb ne radi kada kliknete, konzola će vrlo često pokazati crvenu grešku u trenutku klika. Kopirajte cijeli tekst greške (u većini preglednika desnom tipkom za opciju kopiranja).

Network

Kartica Network prikazuje svaki zahtjev koji stranica šalje — učitavanje podataka, spremanje obrasca, prijava. Otvorite je, zatim ponovite korake koji uzrokuju grešku.

• Tražite retke u crvenoj boji ili sa statusom 400 ili većim.
• Kliknite neuspjeli redak da vidite njegov Response (odgovor). Serverska greška često tu ima poruku korisniju od svega na ekranu.
• Zabilježite URL zahtjeva i statusni kod — rečenica „POST na /api/bookings vratio je 500” vrlo je korisna za AI.

Uključite Preserve log ako greška uključuje ponovno učitavanje stranice ili preusmjeravanje, kako zahtjevi ne bi nestali.

Elements

Kartica Elements (ili Inspector) prikazuje strukturu i stilove stranice. Najkorisnija je za greške u rasporedu: zadržavanje miša na elementu prikazuje njegovu veličinu i razmake. Ne trebate ništa mijenjati ovdje; dovoljno je reći „podnožje je na mobitelu široko 2.000 piksela i gura stranicu u stranu”.

Korak 4: Provjerite serverske zapisnike

Neke greške se događaju na serveru, gdje ih preglednik ne vidi. Greška 500 na kartici mreže je klasičan znak. Serverski zapisnici — tekstualni izlaz vašeg backenda dok radi — obično sadrže pravu grešku sa stack traceom (popis funkcija koje su se izvršavale kada je pala).

Gdje ih nalazite ovisi o alatu. U većini alata za izradu aplikacija uz AI možete otvoriti terminal ili prikaz zapisnika za projekt, ili jednostavno pitati AI: „Provjeri serverske zapisnike za greške iz zadnjeg zahtjeva i reci mi što nije uspjelo.”

Korak 5: Opišite grešku AI-ju

Prikupljeno stavite u ovaj oblik:

Na stranici Rezervacije, prijavljen kao član: kliknuo sam Cancel na sutrašnji čas u 9:00. Očekivano: rezervacija nestaje i čas pokazuje jedno slobodno mjesto više. Stvarno: na ekranu se ništa ne mijenja. Konzola pokazuje TypeError: Cannot read properties of undefined (reading 'id') u BookingCard.tsx:31, a kartica mreže pokazuje da je DELETE /api/bookings/123 vratio 500. Pronađi uzrok, ispravi ga i provjeri radi li otkazivanje za člana s jednom rezervacijom i s više njih.

Zašto je svaki dio važan:

• Gdje i kao tko sužava problem na jedan ekran i jednu ulogu.
• Točni koraci omogućuju AI-ju da ga reproducira.
• Očekivano naspram stvarnog definira što znači „ispravljeno”.
• Tekst greške i neuspjeli zahtjev upućuju ravno na uzrok.
• „Provjeri da…” traži od AI-ja da provjeri, a ne samo da uredi.

Ako je AI dvaput pokušao ispraviti i nije uspio, zamolite ga da objasni prije bilo kakve promjene:

Nemoj još mijenjati kod. Što misliš da uzrokuje ovo i koji dokazi to potkrepljuju?

Kriva teorija se lako uoči kada je napisana, i mnogo je jeftinije ispraviti je nego pogrešan ispravak.

Korak 6: Provjerite, zatim pogledajte okolinu

Kada AI kaže da je ispravljeno, ponovite točne korake iz koraka 1. Zatim provjerite stvari oko toga:

• Istu radnju za drugu ulogu korisnika
• Istu radnju bez podataka i s puno podataka
• Stranice koje dijele komponente s onom koju ste ispravili
• Ekran širine mobitela, ako je ispravak dirao raspored

AI promjene ponekad isprave jedan put i tiho pokvare drugi. Dvije minute provjere sada štede zbunjen sat kasnije.

Korak 7: Vratite se umjesto da nagomilavate

Ako je ispravak pogoršao stvari, ili ste prošli tri kruga bez napretka, vratite se. Povratak na zadnju verziju koja je radila i preformuliranje s boljim dokazima gotovo uvijek nadmašuje traženje četvrtog ispravka na vrhu tri pogrešna. Svaki neuspjeli pokušaj ostavlja kod za sobom, a taj kod zbunjuje sljedeći pokušaj.

Dobre navike koje olakšavaju povratak:

• Testirajte nakon svake promjene, da znate koja je promjena pokvarila stvari.
• Držite promjene malima — jedna značajka ili ispravak po poruci.
• Zabilježite zadnju dobru verziju prije nego što pokrenete nešto rizično.
• Ako je kod u Gitu, commitajte radne verzije da se možete vratiti na njih.

Česti obrasci grešaka u aplikacijama izrađenima uz AI

Kada problem nije greška

Neke „greške” su AI koji gradi točno ono što mu je rečeno, a opis je bio dvosmislen. Ako je ispravak koji tražite zapravo promjena ponašanja, recite to jasno: „Promijeni tako da…”. Ako ne znate ni koje je ispravno ponašanje, prvo to odlučite. Naš vodič o pisanju upita za AI alate za izradu aplikacija pokriva kako jasno navesti pravila. A ako pripremate aplikaciju za prave korisnike, prijelaz AI prototipa u produkciju pokriva provjere koje vrijedi napraviti prije lansiranja.

Ispravljanje grešaka u Mythexu

Mythex ima alate za svaki korak ciklusa:

• Preview za reprodukciju greške, uključujući okvir veličine mobitela.
• /test agent klikće kroz vaš live pregled kao korisnik i prijavljuje pokvarene tokove.
• /fix usmjerava agenta posebno na kvarove.
• Plan način rada omogućuje agentu da istraži i objasni prije nego što išta uredi.
• Code → terminal prikazuje serverske zapisnike vaše aplikacije.
• Revert to this point na bilo kojem odgovoru vraća projekt na tu kontrolnu točku.

Ako objava ne uspije, dijalog za objavu obično nudi Fix with AI, koji čita izlaz builda ili zapisnike aplikacije. Pogledajte Debug your app i Publish troubleshooting u dokumentaciji.

Pitanja