Pokud jste s Reactem nějakou dobu pracovali, možná jste narazili na zprávu, která zní „Zvažte přidání hranice chyby do váš strom, abyste přizpůsobili chování při zpracování chyb.“ Možná jste to viděli v konzole prohlížeče, kdykoli vaše komponenty pád.
Společnost React doporučuje použít hranici chyb, aby poskytla lepší uživatelský zážitek, když dojde k chybě.
Co je hraniční třída chyb v Reactu?
Hranice chyb fungují jako zkuste/chytit blok ve vanilkovém JavaScriptu. Rozdíl je v tom, že zachycují chyby, které se vyskytují v komponentách React. Pokud dojde k chybě v komponentě uživatelského rozhraní, React odpojí strom v této komponentě a nahradí jej záložním uživatelským rozhraním, které jste definovali. To znamená, že chyba se týká pouze součásti, ve které se vyskytuje, a zbytek aplikace funguje podle očekávání.
Podle Dokumentace React, třídy hranic chyb nezachytí chyby v:
- Obslužné programy událostí.
- Asynchronní kód.
- Kód na straně serveru.
- Chyby vyvolané v samotné hranici chyb (spíše než v jejích potomcích).
Pro výše uvedené chyby můžete použít blok try/catch.
Chcete-li například zachytit chybu, která nastane v obsluha události, použijte následující kód:
funkceEventComponent() {
konst [chyba, setError] = useState(nula)konst handleClick = () => {
Snaž se {
// Dělej něco
} chytit (chyba) {
setError (chyba)
}
}
vrátit se (
<>
<div>{chyba? chyba: ""}div>
<knoflíkpři kliknutí={handleClick}>Knoflíkknoflík>
)
}
Hranice chyb použijte k zachycení chyb pouze v komponentách React.
Vytvoření třídy hranice chyb
Hranici chyby můžete vytvořit definováním třídy, která obsahuje jednu nebo obě z následujících metod:
- statické getDerivedStateFromError()
- komponentDidCatch()
Funkce getDerivedStateFromError() aktualizuje stav komponenty, jakmile je chyba zachycena, zatímco můžete použít componentDidCatch() k protokolování informací o chybě do konzoly. Chyby můžete také odeslat službě hlášení chyb.
Níže je uveden příklad, který ukazuje, jak vytvořit jednoduchou třídu hranice chyb.
třídaErrorBoundaryrozšiřujeReagovat.Komponent{
konstruktér(rekvizity) {
super(rekvizity);
tento.state = { chyba: Nepravdivé };
}statickýgetDerivedStateFromError(chyba){
// Aktualizujte stav, aby další vykreslení zobrazilo záložní uživatelské rozhraní.
vrátit se { chyba: chyba };
}componentDidCatch (error, errorInfo) {
// Přihlaste chybu do služby hlášení chyb
}poskytnout() {
-li (tento.Stát.chyba) {
// Zde vytvořte vlastní záložní uživatelské rozhraní
vrátit se<h1>Zdá se, že nastal problém.h1>;
}
vrátit setentorekvizity.děti;
}
}
vývoznívýchozí ErrorBoundary;
Když dojde k chybě, getDerivedStateFromError() aktualizuje stav a následně spustí opětovné vykreslení, které zobrazí záložní uživatelské rozhraní.
Pokud nechcete vytvořit třídu hranice chyb od začátku, použijte balíček NPM s hranicí reakce na chybu. Tento balíček poskytuje komponentu ErrorBoundary, která obklopuje komponenty, o kterých si myslíte, že by mohly způsobit chyby.
Použití třídy Error Boundary Class
Chcete-li zpracovat chyby, obalte komponenty komponentou třídy hranice chyb. Můžete zabalit komponentu nejvyšší úrovně nebo jednotlivé komponenty.
Pokud zabalíte komponentu nejvyšší úrovně, třída error boundary zpracuje chyby vyvolané všemi komponentami v aplikaci React.
<ErrorBoundary>
<Aplikace/>
ErrorBoundary>
Pokud zalomíte jednotlivou komponentu ErrorBoundary, chyba v této komponentě neovlivní způsob vykreslení jiné komponenty.
<ErrorBoundary>
<Profil/>
ErrorBoundary>
Například chyba v komponentě profilu neovlivní způsob vykreslení jiné komponenty, jako je komponenta Hero. Zatímco komponenta profilu může selhat, zbytek aplikace bude fungovat dobře. To je mnohem lepší než vykreslování obecné bílé záložní obrazovky poskytované Reactem.
Ošetření chyb v JavaScriptu
Chyby v programování mohou být pro vývojáře a uživatele frustrující. Neschopnost zpracovat chyby může vystavit vaše uživatele ošklivému uživatelskému rozhraní s těžko pochopitelnými chybovými zprávami.
Při sestavování komponenty React vytvořte třídu hranice chyb buď od začátku, nebo použijte balíček reakce-error-boundary k zobrazení uživatelsky přívětivých chybových zpráv.
