Ha egy ideje dolgozott a Reacttel, előfordulhat, hogy a következő üzenetet kapta: „Fontolja meg egy hibahatár hozzáadását a fa a hibakezelési viselkedés testreszabásához." Lehet, hogy ezt láthatta a böngésző konzoljában, amikor az összetevőket összeomlik.
A React hibahatárok használatát javasolja, hogy hiba esetén jobb felhasználói élményt nyújtson.
Mi a React hibahatár osztálya?
A hibahatárok úgy működnek, mint a try/catch blokk vanília JavaScriptben. A különbség az, hogy felfogják a React összetevőkben előforduló hibákat. Ha hiba történik egy UI-összetevőben, a React leválasztja a fát az adott összetevőn belül, és lecseréli az Ön által meghatározott tartalék felhasználói felületre. Ez azt jelenti, hogy a hiba csak azt az összetevőt érinti, amelyben előfordul, és az alkalmazás többi része a várt módon működik.
Szerint a Reagálni a dokumentációt, a hibahatárosztályok nem észlelik a hibákat a következőkben:
- Eseménykezelők.
- Aszinkron kód.
- Szerver oldali kód.
- Magában a hibahatárban (nem pedig annak gyermekeiben) dobott hibák.
A fenti hibákhoz használhatja a try/catch blokkot.
Például egy hiba elkapásához, amely a eseménykezelő, használja a következő kódot:
funkcióEventComponent() {
const [hiba, setError] = useState(nulla)const handleClick = () => {
próbáld ki {
// Csinálj valamit
} fogás (hiba) {
setError (hiba)
}
}
Visszatérés (
<>
<div>{hiba? hiba: ""}div>
<gombkattintásra={handleClick}>Gombgomb>
)
}
A hibahatárok használatával csak a React összetevők hibáit észlelheti.
Hibahatár osztály létrehozása
Hibahatárt úgy hozhat létre, hogy meghatároz egy osztályt, amely a következő módszerek egyikét vagy mindkettőt tartalmazza:
- statikus getDerivedStateFromError()
- komponentDidCatch()
A getDerivedStateFromError() függvény frissíti az összetevő állapotát a hiba észlelése után, miközben a componentDidCatch() segítségével naplózhatja a hibainformációkat a konzolon. A hibákat elküldheti egy hibabejelentő szolgáltatásnak is.
Az alábbiakban egy példa bemutatja, hogyan lehet egyszerű hibahatárosztályt létrehozni.
osztályErrorBoundarykiterjedReagál.Összetevő{
konstruktőr(kellékek) {
szuper(kellékek);
ez.state = { hiba: hamis };
}statikusgetDerivedStateFromError(hiba){
// Frissítse az állapotot, hogy a következő renderelés a tartalék felhasználói felületet jelenítse meg.
Visszatérés { hiba: hiba };
}componentDidCatch (hiba, errorInfo) {
// A hiba naplózása egy hibabejelentő szolgáltatásba
}Vakol() {
ha (ez.állapot.hiba) {
// Itt hozhat létre egyéni tartalék felhasználói felületet
Visszatérés<h1>Úgy tűnik, hogy probléma van.h1>;
}
Visszatérésez.props.children;
}
}
exportalapértelmezett ErrorBoundary;
Ha hiba történik, a getDerivedStateFromError() frissíti az állapotot, és ennek következtében újrarenderelést indít, amely megjeleníti a tartalék felhasználói felületet.
Ha nem szeretné a hibahatár osztályt a semmiből létrehozni, használja a react-error-boundary NPM csomag. Ez a csomag tartalmazza az ErrorBoundary összetevőt, amely körülveszi azokat az összetevőket, amelyekről úgy gondolja, hogy hibákat okozhatnak.
A hibahatár osztály használata
A hibák kezeléséhez csomagolja be az összetevőket a hibahatár osztály összetevőjébe. Becsomagolhatja a legfelső szintű komponenst vagy az egyes alkatrészeket.
Ha becsomagolja a legfelső szintű komponenst, a hibahatár osztály kezeli a React alkalmazás összes összetevője által okozott hibákat.
<ErrorBoundary>
<App/>
ErrorBoundary>
Ha egy egyedi komponenst ErrorBoundary-vel csomagol be, akkor az adott összetevő hibája nem befolyásolja a másik összetevő megjelenítését.
<ErrorBoundary>
<Profil/>
ErrorBoundary>
Például a profilkomponens hibája nem befolyásolja egy másik összetevő, például a Hero összetevő megjelenítését. Bár a profilösszetevő összeomolhat, az alkalmazás többi része jól fog működni. Ez sokkal jobb, mint a React által biztosított általános fehér tartalék képernyő megjelenítése.
A JavaScript hibáinak kezelése
A programozási hibák frusztrálóak lehetnek a fejlesztők és a felhasználók számára. A hibák kezelésének elmulasztása csúnya felhasználói felületnek teheti ki a felhasználókat nehezen érthető hibaüzenetekkel.
A React összetevő összeállításakor hozzon létre egy hibahatárosztályt a semmiből, vagy használja a react-error-boundary csomagot a felhasználóbarát hibaüzenetek megjelenítéséhez.