Når ting går galt i en applikasjon, kan det være både frustrerende og forvirrende – spesielt hvis du som bruker ikke får beskjed om hva som skjedde, eller hvordan du kan rette opp i feilen. Feil kommer til å skje, men må det bety at hele løsningen stopper opp? I denne workshopen skal vi utforske hvordan du kan håndtere feil på en grasiøs og brukervennlig måte, lage robuste løsninger som tåler en knekk, og gi brukerne tydelige tilbakemeldinger som bygger tillit.
Hvorfor bry deg om feilhåndtering?
Feilhåndtering handler om to ting: robusthet og kommunikasjon.
Feil kommer til å skje. Selv om vi ofte koder for happy-path, kan også "feilfri" kode føre til at løsningen knekker. Tenk for eksempel på brukeren som kjører inn i en tunnel og mister nett. Skal hele løsningen feile, eller bare delen som krever nett?
I tillegg til at løsningen tåler en knekk, må brukeren også få vite om hen kan gjøre noe med feilen. Som vi så i forrige workshop om skjemaer, viste vi en valideringsfeil om brukeren skrev inn feil input. På samme måte må vi håndtere og kommunisere andre typer feil, som for eksempel når en innsending feiler på grunn av en serverfeil, og brukeren må prøve igjen senere.
Workshop i feilhåndtering
I denne workshopen skal vi utforske hvordan vi håndterer feil som oppstår ved henting og oppdatering av data, og hvordan vi kan gjøre løsningen både robust og forståelig. Vi ser nærmere på ulike tilnærminger til feilhåndtering, inkludert hvordan du kan bruke error boundaries, ulike typer feiltilstander, og hvordan TanStack Query kan hjelpe deg med å håndtere feil i databehandling.
Vi ser også på hvordan du kan type feilen, så du er sikrere på hva feil-objektet faktisk består av - og hvordan du kan gi brukeren din mer brukervennlige feilmeldinger.
Før du starter, er det noen ting du bør vite om workshopen:
- Oppgavene ligger i src/[oppgave]: Det er kun disse filene du trenger å endre. Du leser oppgave1 i
Oppgave1.tsx, og ser fasit i Fasit1.tsxog så videre. - Løs bonusspørsmål: I tillegg til å løse de rene kodeoppgavene, prøv også å besvare bonusspørsmålene på hver oppgave. Da lærer du mer kontekst til feilhåndtering. Det fins ingen fasit i løsningen for disse oppgavene.
- Hvordan ta workshopen videre: Reflekter også over forskjeller i din løsning, "fasiten" og kode i eget prosjekt. Er det noen scenarier "fasiten" ikke tar hensyn til mangelfull? Er det noen forenklinger i "fasiten" du har lyst til å ta i bruk?
- Jeg blir veldig glad for tilbakemeldinger: Om du finner noen feil eller har forslag til forbedringer, gjerne lag et issue, lag en PR eller send meg en melding på LinkedIn.
👉 For å starte workshopen, kloner du GitHub-repository, leser readme, kjører opp applikasjonen og leser av oppgavene. Workshopen finner du her: https://github.com/haalmarc/error-workshop
Videre lesing
- For videre lesing, anbefaler jeg deg å se på lesestoffet jeg refererer til i oppgavene. Du kan også se nærmere på feilhåndtering i rammeverket du bruker, for eksempel Next.js: https://nextjs.org/docs/app/building-your-application/routing/error-handling