Prilagođene stranice s pogreškama u React with GraphQL i Granične pogreške

GitHub stranica ima nevjerojatnih 500 pogrešaka

Ako vam se sviđa ovaj članak, podržite me tako što ćete provjeriti Pull Podsjetnike, Slack bot koji vašem timu šalje automatske podsjetnike za GitHub zahtjeve za povlačenjem.

Jedan od izazova s ​​kojima sam se nedavno suočio tijekom rada s GraphQL-om i Reactom bio je kako podnijeti pogreške. Kao programeri, vjerovatno smo već implementirali zadane stranice 500, 404 i 403 u poslužiteljskim programima, ali smisliti kako to učiniti s Reactom i GraphQL-om je poprilično teško.

U ovom postu govorit ću o načinu na koji je naš tim pristupio ovom problemu, konačnom rješenju koje smo implementirali i zanimljivim lekcijama iz GraphQL spec.

pozadina

Projekt na kojem sam radio bio je prilično tipična CRUD aplikacija izgrađena u React-u pomoću GraphQL-a, Apollo klijenta i express-graphQL-a. Željeli smo obraditi određene vrste pogrešaka - na primjer, poslužitelj koji je u padu - pokazujući korisniku standardnu ​​stranicu s pogreškama.

Naš početni izazov bio je pronalazak najboljeg načina slanja pogrešaka klijentu. GraphQL ne koristi HTTP kodove statusa kao što su 500, 400 i 403. Umjesto toga, odgovori sadrže niz pogrešaka s popisom stvari koje su krenule po zlu (pročitajte više o pogreškama u GraphQL specifikaciji).

Na primjer, evo kako je izgledao naš GraphQL odgovor kada se nešto pokvarilo na poslužitelju:

Budući da odgovori GraphQL pogreške vraćaju HTTP statusni kod 200, jedini način za prepoznavanje vrste pogreške bio je uvid u niz pogrešaka. To se činilo kao loš pristup jer je svojstvo poruke pogreške sadržavalo iznimku bačenu na poslužitelj. Specifikacija GraphQL kaže da je vrijednost poruke namijenjena programerima, ali ne određuje treba li vrijednost biti poruka koja se može čitati ljudima ili nešto dizajnirano za programsko rukovanje:

Svaka pogreška mora sadržavati unos s ključnom porukom s nizom opisa pogreške namijenjene programeru kao upute za razumijevanje i ispravljanje pogreške.

Dodavanje kodova pogrešaka u odgovore GraphQL-a

Da bismo to riješili, dodali smo standardizirane kodove pogrešaka našim objektima pogrešaka koje bi klijenti mogli koristiti za programsko prepoznavanje pogrešaka. To me je inspiriralo kako Stripeov REST API vraća niz kodova grešaka uz poruke koje su razumljive ljudima.

Odlučili smo se za tri koda greške za pokretanje: provjera identiteta_izjava, izvor_not_znaka i server_error.

Da bismo ih dodali našim GraphQL odgovorima, proslijedili smo vlastitu formatError funkciju express-graphql koja preslikava iznimke bačene na poslužitelj u standardne kodove koji se dodaju odgovoru. Specifikacija GraphQL općenito obeshrabruje dodavanje svojstava objektima pogreške, ali to dopušta gniježđenjem tih unosa u objekt proširenja.

Naše pogreške u odgovoru GraphQL-a tada je lako klasificirati:

Dok smo razvili vlastiti način dodavanja kodova odgovorima generiranim express-graphql, čini se da apollo server nudi slična ugrađena ponašanja.

Prikazivanje stranica s pogreškama s React Granice pogreške

Nakon što smo smislili dobar način postupanja s pogreškama na našem poslužitelju, skrenuli smo pažnju na klijenta.

Prema zadanom, htjeli smo da naša aplikacija prikazuje globalnu stranicu s pogreškama (na primjer, stranicu s porukom "da, nešto je pošlo po zlu") kad god smo naišli na server_error, Author_error ili autorizaciju_not_found. Međutim, željeli smo da fleksibilnost možemo upravljati pogreškom u određenoj komponenti ako to želimo.

Na primjer, ako je korisnik upisao nešto u traku za pretraživanje i nešto pođe po zlu, htjeli smo prikazati poruku o pogrešci u kontekstu, a ne bljesnuti na stranicu s pogreškama.

Da bismo to postigli, prvo smo stvorili komponentu koja se zove GraphqlErrorHandler koja će sjesti između komponenti upita i mutacije apollo-klijenta i njihove djece koja će se prikazati. Ova komponenta koja je u odgovoru provjerila kodove pogrešaka izbacila je iznimku ako je identificirala kôd do kojeg nam je stalo:

Da bismo koristili GraphqlErrorHandler, umotali smo komponente upita i mutacije apollo-klijenta:

Naša komponenta značajke tada je koristila vlastitu komponentu upita umjesto da izravno pristupi react-apollo:

Sada kada je naša React aplikacija bacala iznimke kad je poslužitelj vratio pogreške, htjeli smo obraditi te iznimke i preslikati ih u odgovarajuće ponašanje.

Ne zaboravite od ranije da nam je cilj bio zadati prikazivanje globalnih stranica s pogreškama (na primjer, stranica s porukom „da, nešto je pošlo po zlu“), ali ipak imamo fleksibilnost za rješavanje pogreške lokalno u bilo kojoj komponenti ako želimo.

Granice reakcijske pogreške pružaju fantastičan način za to. Granice pogrešaka su React komponente koje mogu uhvatiti pogreške JavaScripta bilo gdje u njihovom podređenom stablu komponenata pa ih možete rukovati prilagođenim ponašanjem.

Stvorili smo granicu pogreške koja se zove GraphqlErrorBoundary koja bi uhvatila sve iznimke povezane s poslužiteljem i prikazala odgovarajuću stranicu s pogreškama:

Koristimo granicu pogreške kao omotač za sve komponente naše aplikacije:

Granice pogrešaka mogu se koristiti dublje u stablu komponenata ako želimo obraditi pogreške u komponenti umjesto da prikazujemo stranicu pogreške.

Na primjer, evo kako bi izgledalo da smo željeli prilagođeno ponašanje u rukovanju pogreškama u našoj komponenti od ranije:

Zamotati

GraphQL je i dalje relativno nov, a rukovanje s pogreškama uobičajen je izazov s kojim su izgleda programeri. Korištenjem standardiziranih kodova grešaka u našim GraphQL odgovorima, klijentima možemo korisno i intuitivno komunicirati o pogreškama. U našim aplikacijama React granice pogreške pružaju izvrstan način za standardizaciju ponašanja u postupanju s pogreškama u našoj aplikaciji, a svejedno imaju fleksibilnost kada nam je potrebna.