Ak ste nejaký čas pracovali s Reactom, možno ste narazili na správu, ktorá znie: „Zvážte pridanie hranice chyby do váš strom na prispôsobenie správania pri spracovaní chýb.“ Možno ste to videli v konzole prehliadača vždy, keď sú vaše komponenty havarovať.
React odporúča použiť hranicu chýb na poskytnutie lepšieho používateľského zážitku, keď sa vyskytne chyba.
Čo je hraničná trieda chýb v React?
Hranice chýb fungujú ako skúste/chytte blok vo vanilkovom JavaScripte. Rozdiel je v tom, že zachytávajú chyby, ktoré sa vyskytujú v komponentoch React. Ak sa vyskytne chyba v komponente používateľského rozhrania, React odpojí strom v rámci tohto komponentu a nahradí ho záložným používateľským rozhraním, ktoré ste definovali. To znamená, že chyba ovplyvní iba komponent, v ktorom sa vyskytuje a zvyšok aplikácie funguje podľa očakávania.
Podľa Reagovať dokumentáciu, triedy hraníc chýb nezachytia chyby v:
- Ovládače udalostí.
- Asynchrónny kód.
- Kód na strane servera.
- Chyby vyvolané v samotnej hranici chýb (a nie v jej potomkoch).
Pre vyššie uvedené chyby môžete použiť blok try/catch.
Napríklad na zachytenie chyby, ktorá sa vyskytne v obsluha udalosti, použite nasledujúci kód:
funkciuEventComponent() {
konšt [chyba, setError] = useState(nulový)konšt handleClick = () => {
skúste {
// Urob niečo
} chytiť (chyba) {
setError (chyba)
}
}
vrátiť (
<>
<div>{chyba? chyba: ""}div>
<tlačidlopo kliknutí={handleClick}>Tlačidlotlačidlo>
)
}
Použite hranice chýb na zachytenie chýb iba v komponentoch React.
Vytvorenie triedy hranice chýb
Hranicu chyby môžete vytvoriť definovaním triedy, ktorá obsahuje jednu alebo obe z nasledujúcich metód:
- statický getDerivedStateFromError()
- komponentDidCatch()
Funkcia getDerivedStateFromError() aktualizuje stav komponentu, keď je chyba zachytená, zatiaľ čo vy môžete použiť componentDidCatch() na protokolovanie informácií o chybe do konzoly. Chyby môžete odoslať aj službe hlásenia chýb.
Nižšie je uvedený príklad, ktorý ukazuje, ako vytvoriť jednoduchú triedu hraníc chýb.
triedaErrorBoundarypredlžujeReagovať.Komponent{
konštruktér(rekvizity) {
Super(rekvizity);
toto.state = { chyba: falošný };
}statickégetDerivedStateFromError(chyba){
// Aktualizujte stav, aby sa pri ďalšom vykreslení zobrazilo záložné používateľské rozhranie.
vrátiť { chyba: chyba };
}componentDidCatch (error, errorInfo) {
// Zapíšte chybu do služby hlásenia chýb
}render() {
ak (toto.štát.chyba) {
// Tu vytvorte vlastné záložné používateľské rozhranie
vrátiť<h1>Zdá sa, že nastal problém.h1>;
}
vrátiťtoto.rekvizity.deti;
}
}
exportpredvolená ErrorBoundary;
Keď sa vyskytne chyba, getDerivedStateFromError() aktualizuje stav a následne spustí opätovné vykreslenie, ktoré zobrazí záložné používateľské rozhranie.
Ak nechcete vytvoriť triedu hraníc chýb od začiatku, použite balík NPM na hranici reakcie na chybu. Tento balík poskytuje komponent ErrorBoundary, ktorý obklopuje komponenty, o ktorých si myslíte, že by mohli spôsobiť chyby.
Použitie triedy hranice chýb
Na spracovanie chýb zabaľte komponenty komponentom triedy hranice chýb. Môžete zabaliť komponent najvyššej úrovne alebo jednotlivé komponenty.
Ak zabalíte komponent najvyššej úrovne, trieda hraníc chýb bude spracovávať chyby vyvolané všetkými komponentmi v aplikácii React.
<ErrorBoundary>
<App/>
ErrorBoundary>
Ak zabalíte jednotlivý komponent do ErrorBoundary, chyba v tomto komponente neovplyvní spôsob vykreslenia iného komponentu.
<ErrorBoundary>
<Profil/>
ErrorBoundary>
Napríklad chyba v komponente profilu neovplyvní spôsob vykreslenia iného komponentu, ako je komponent Hero. Zatiaľ čo komponent profilu môže zlyhať, zvyšok aplikácie bude fungovať dobre. Je to oveľa lepšie ako vykresľovanie všeobecnej bielej záložnej obrazovky, ktorú poskytuje React.
Riešenie chýb v JavaScripte
Chyby v programovaní môžu byť pre vývojárov a používateľov frustrujúce. Zlyhanie pri riešení chýb môže vystaviť vašich používateľov škaredému používateľskému rozhraniu s ťažko pochopiteľnými chybovými správami.
Pri zostavovaní komponentu React vytvorte triedu hraníc chýb buď od začiatku, alebo pomocou balíka React-error-boundary na zobrazenie užívateľsky prívetivých chybových správ.
