Kako ispraviti grešku u aplikaciji napravljenoj uz AI: praktična metoda

Da biste ispravili grešku u aplikaciji napravljenoj uz AI, prvo izazovite grešku namerno, pa prikupite dokaze: tačne korake, poruku o grešci i šta pokazuju konzola pregledača i kartica Network. Zatim AI-ju dajte formulaciju „uradio sam X, očekivao sam Y, dobio sam Z”. Ako popravka pogorša stvari, vratite se na poslednju radnu verziju umesto da dodajete popravke jednu na drugu. Ne morate da čitate kod da biste sve ovo dobro uradili.

Ovaj vodič pokriva ceo ciklus, uključujući kratak obilazak alata za programere u pregledaču za one koji nisu programeri.

Petlja za ispravljanje grešaka

Svaka ispravka, bilo da je radi čovek ili AI, prati istu petlju:

1. Reprodukujte — izazovite grešku pouzdano.
2. Posmatrajte — zabeležite poruku o grešci i šta je aplikacija radila.
3. Opišite — dajte AI-ju precizne korake, očekivani i stvarni rezultat.
4. Popravite — neka AI promeni jednu stvar.
5. Proverite — ponovite tačno iste korake i potvrdite da je popravljeno i da ništa u blizini nije pokvareno.
6. Vratite se unazad po potrebi — ako je postalo gore, poništite i pokušajte ponovo sa boljim informacijama.

Većina vremena izgubljenog na aplikacijama napravljenim uz AI nastaje zato što se preskaču koraci 1, 2 i 5: kaže se „pokvarilo se”, prihvati se izmena bez testiranja, pa se traži još jedna popravka na vrhu pokvarene.

Korak 1: Reprodukujte grešku

Greška koju možete izazvati na zahtev je već napola popravljena. Pokušajte da nađete najkraći niz koraka koji je izaziva.

Zapitajte se:

• Da li se dešava svaki put? Ako se dešava samo ponekad, šta je drugačije kada se desi: određeni zapis, spora veza, odjavljen korisnik?
• Da li se dešava svakom korisniku? Prijavite se sa drugim nalogom. Mnoge greške se pojavljuju samo kod novih korisnika bez podataka, ili kod korisnika sa drugom ulogom.
• Da li se dešava na svakom uređaju? Probajte ekran širine telefona i drugi pregledač.
• Da li je počela posle određene izmene? Ako je radilo juče, poslednje izmene su glavni osumnjičeni.

Zapišite korake kao kratku numerisanu listu. Kasnije ćete je nalepiti u upit.

Korak 2: Pročitajte poruku o grešci

Poruke o greškama deluju zastrašujuće, ali treba vam samo nekoliko delova.

Ne morate da je razumete; treba da je kopirate tačno. „Cannot read properties of undefined (reading 'name')” govori AI-ju da je kod očekivao neke podatke (verovatno rezervaciju ili korisnika) koji nisu stigli. Parafraza kao „neka undefined greška” gubi to.

Nekoliko čestih, otprilike 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 greška u putanji ili link ka stranici koja je preimenovana.
• 401 Unauthorized / 403 Forbidden — zahtev nije bio prijavljen, ili korisnik nema pravo na to.
• 500 Internal Server Error — serverski kod je pao. Pravi razlog je u serverskim logovima, a ne u pregledaču.
• Greške CORS — pregledač je blokirao zahtev ka drugom domenu. Obično je reč o konfiguraciji na serverskoj strani.

Korak 3: Koristite alate za programere u pregledaču

Svaki stoni pregledač ima ugrađene alate za programere („devtools”). Prikazuju šta stranica radi iza scene. U Chrome-u, Edge-u i Firefox-u desnim klikom bilo gde na stranici izaberite Inspect, ili pritisnite F12 (Cmd+Option+I na Mac-u). U Safari-ju prvo uključite meni Develop u podešavanjima Safari-ja.

Potrebne su vam samo tri kartice.

Console

Kartica Console prikazuje greške i poruke iz koda stranice. Greške su crvene. Ako dugme ne radi kad na njega kliknete, konzola će vrlo često pokazati crvenu grešku u trenutku klika. Kopirajte ceo tekst greške (u većini pregledača desni klik nudi opciju za kopiranje).

Network

Kartica Network prikazuje svaki zahtev koji stranica šalje: učitavanje podataka, čuvanje forme, prijavu. Otvorite je, pa ponovite korake koji izazivaju grešku.

• Tražite redove u crvenom ili sa statusom 400 i više.
• Kliknite na neuspeli red da vidite njegov Response. Serverska greška često tu sadrži poruku koja je korisnija od bilo čega na ekranu.
• Zapišite URL zahteva i statusni kod: rečenica „POST na /api/bookings vratio je 500” je veoma korisna za AI.

Uključite Preserve log ako greška uključuje osvežavanje stranice ili preusmeravanje, da zahtevi ne nestanu.

Elements

Kartica Elements (ili Inspector) prikazuje strukturu i stilove stranice. Najkorisnija je za greške u rasporedu: prelazak mišem preko elementa pokazuje njegovu veličinu i razmak. Ne morate ništa da menjate ovde; dovoljno je reći „podnožje je na mobilnom široko 2.000 piksela i gura stranicu u stranu”.

Korak 4: Proverite serverske logove

Neke greške se dešavaju na serveru, gde pregledač ne može da ih vidi. Greška 500 u kartici Network je klasičan znak. Serverski logovi (tekstualni izlaz vašeg backend-a dok radi) obično sadrže pravu grešku sa stack trace-om (listom funkcija koje su radile kad je pukao).

Gde ih nalazite zavisi od alata. U većini alata za pravljenje aplikacija možete otvoriti terminal ili prikaz logova za projekat, ili jednostavno pitati AI: „Proveri serverske logove za greške iz poslednjeg zahteva i reci mi šta je palo.”

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

Stavite ono što ste prikupili u ovaj oblik:

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

Zašto je svaki deo važan:

• Gde i kao ko sužava problem na jedan ekran i jednu ulogu.
• Tačni koraci omogućavaju AI-ju da reprodukuje grešku.
• Očekivano naspram stvarnog definiše šta znači „popravljeno”.
• Tekst greške i neuspeli zahtev upućuju pravo na uzrok.
• „Proveri da…” traži od AI-ja da proveri, a ne samo da menja.

Ako je AI dva puta pokušao popravku i nije uspeo, zamolite ga da objasni pre nego što bilo šta menja:

Ne menjaj kod još. Šta misliš da uzrokuje ovo, i koji dokazi to podržavaju?

Pogrešna pretpostavka se lako uoči kada je zapisana, i mnogo je jeftinije da je ispravite nego da popravljate pogrešno.

Korak 6: Proverite, pa proverite okolinu

Kada AI kaže da je popravljeno, ponovite tačno korake iz Koraka 1. Zatim proverite stvari oko toga:

• Istu radnju za drugu korisničku ulogu
• Istu radnju bez podataka i sa mnogo podataka
• Stranice koje dele komponente sa onom koju ste popravili
• Ekran širine telefona, ako je popravka dirala raspored

Izmene koje AI pravi ponekad poprave jedan put, a tiho pokvare drugi. Dvominutna provera sada štedi zbunjen sat kasnije.

Korak 7: Vratite se unazad umesto da gomilate

Ako je popravka pogoršala stvari, ili ste prošli tri runde bez napretka, vratite se. Povratak na poslednju verziju koja je radila i ponovno formulisanje sa boljim dokazima skoro uvek je bolje od četvrte popravke na vrhu tri pogrešne. Svaki neuspeli pokušaj ostavlja kod za sobom, a taj kod zbunjuje sledeći pokušaj.

Dobre navike koje olakšavaju povratak:

• Testirajte posle svake izmene, da znate koja je izmena pokvarila stvari.
• Držite izmene malim: jedna funkcija ili popravka po poruci.
• Zabeležite poslednju dobru verziju pre nego što pokrenete nešto rizično.
• Ako je kod u Git-u, komitujte radne verzije da se možete vratiti na njih.

Česti obrasci grešaka u aplikacijama napravljenim uz AI

Kada problem nije greška

Neke „greške” su AI koji pravi tačno ono što mu je rečeno, a opis je bio dvosmislen. Ako je popravka koju tražite zapravo promena ponašanja, recite to jasno: „Promeni tako da…”. Ako ne znate šta je ispravno ponašanje, prvo to odlučite. Naš vodič o pisanju upita za AI alate za pravljenje aplikacija pokriva kako jasno navesti pravila. A ako pripremate aplikaciju za prave korisnike, odvođenje AI prototipa u produkciju pokriva provere koje vredi uraditi pre lansiranja.

Ispravljanje grešaka u Mythex-u

Mythex ima alate za svaki korak petlje:

• Pregled za reprodukciju greške, uključujući okvir veličine telefona.
• /test agent klikne kroz vaš živi pregled kao korisnik i prijavi pokvarene tokove.
• /fix usmerava agenta direktno na kvar.
• Plan režim omogućava agentu da istraži i objasni pre nego što menja bilo šta.
• Code → terminal prikazuje serverske logove vaše aplikacije.
• Revert to this point na bilo kojem odgovoru vraća projekat na tu kontrolnu tačku.

Ako objavljivanje ne uspe, dijalog za objavljivanje obično nudi Fix with AI, koji čita izlaz builda ili logove aplikacije. Pogledajte Ispravljanje grešaka u aplikaciji i Rešavanje problema pri objavljivanju u dokumentaciji.

Pitanja