Wenn Sie eine Weile mit React gearbeitet haben, sind Sie möglicherweise auf eine Meldung gestoßen, die lautet: „Erwägen Sie das Hinzufügen einer Fehlergrenze zu Ihren Baum, um das Fehlerbehandlungsverhalten anzupassen.“ Möglicherweise haben Sie dies in Ihrer Browserkonsole gesehen, als Ihre Komponenten Absturz.
React empfiehlt die Verwendung einer Fehlergrenze, um eine bessere Benutzererfahrung zu bieten, wenn ein Fehler auftritt.
Was ist die Error Boundary Class in React?
Fehlergrenzen funktionieren wie die Try/Catch-Block in Vanilla-JavaScript. Der Unterschied besteht darin, dass sie die Fehler abfangen, die in React-Komponenten auftreten. Wenn in einer UI-Komponente ein Fehler auftritt, hängt React den Baum innerhalb dieser Komponente aus und ersetzt ihn durch die von Ihnen definierte Fallback-UI. Das bedeutet, dass ein Fehler nur die Komponente betrifft, in der er auftritt, und der Rest der Anwendung wie erwartet funktioniert.
Entsprechend der Dokumentation reagieren, Fehlergrenzklassen fangen keine Fehler ab in:
- Ereignishandler.
- Asynchroner Code.
- Serverseitiger Code.
- Fehler, die in die Fehlergrenze selbst (und nicht in ihre untergeordneten Elemente) geworfen werden.
Für die oben genannten Fehler können Sie den Try/Catch-Block verwenden.
Um beispielsweise einen Fehler abzufangen, der in der Ereignishandler, verwenden Sie den folgenden Code:
FunktionEreigniskomponente() {
konst [Fehler, setError] = useState(Null)konst handleClick = () => {
versuchen {
// Etwas tun
} fangen (Fehler) {
setError (Fehler)
}
}
zurückkehren (
<>
<div>{Fehler? Fehler: ""}div>
<TasteonClick={handleClick}>TasteTaste>
)
}
Verwenden Sie Fehlergrenzen, um Fehler nur in React-Komponenten abzufangen.
Erstellen einer Fehlergrenzklasse
Sie können eine Fehlergrenze erstellen, indem Sie eine Klasse definieren, die eine oder beide der folgenden Methoden enthält:
- statisch getDerivedStateFromError()
- KomponenteDidCatch()
Die getDerivedStateFromError()-Funktion aktualisiert den Komponentenstatus, sobald der Fehler abgefangen wurde, während Sie componentDidCatch() verwenden können, um Fehlerinformationen in der Konsole zu protokollieren. Sie können die Fehler auch an einen Fehlerberichterstattungsdienst senden.
Unten sehen Sie ein Beispiel, das zeigt, wie Sie eine einfache Fehlergrenzklasse erstellen.
KlasseFehlergrenzeerweitertReagieren.Komponente{
Konstrukteur(Requisiten) {
super(Requisiten);
Das.Zustand = { Fehler: FALSCH };
}statischgetDerivedStateFromError(Fehler){
// Status aktualisieren, damit beim nächsten Rendern die Fallback-Benutzeroberfläche angezeigt wird.
zurückkehren { Fehler: Fehler };
}KomponenteDidCatch (Fehler, Fehlerinfo) {
// Fehler bei einem Fehlerberichterstattungsdienst protokollieren
}rendern() {
Wenn (Das.Zustand.Fehler) {
// Erstellen Sie hier eine benutzerdefinierte Fallback-Benutzeroberfläche
zurückkehren<h1>Es scheint ein Problem zu geben.h1>;
}
zurückkehrenDas.requisiten.kinder;
}
}
ExportStandard Fehlergrenze;
Wenn ein Fehler auftritt, aktualisiert getDerivedStateFromError() den Status und löst folglich ein erneutes Rendern aus, das die Fallback-Benutzeroberfläche anzeigt.
Wenn Sie die Fehlerbegrenzungsklasse nicht von Grund auf neu erstellen möchten, verwenden Sie die React-Error-Boundary-NPM-Paket. Dieses Paket stellt die ErrorBoundary-Komponente bereit, die Komponenten umschließt, von denen Sie glauben, dass sie Fehler auslösen könnten.
Verwenden der Error Boundary-Klasse
Um Fehler zu behandeln, umschließen Sie Komponenten mit der Fehlerbegrenzungsklassenkomponente. Sie können die Komponente der obersten Ebene oder einzelne Komponenten umschließen.
Wenn Sie die Komponente der obersten Ebene umschließen, behandelt die Fehlerbegrenzungsklasse die Fehler, die von allen Komponenten in der React-Anwendung ausgegeben werden.
<Fehlergrenze>
<App/>
Fehlergrenze>
Wenn Sie eine einzelne Komponente mit einer ErrorBoundary umschließen, wirkt sich ein Fehler in dieser Komponente nicht darauf aus, wie eine andere Komponente gerendert wird.
<Fehlergrenze>
<Profil/>
Fehlergrenze>
Beispielsweise wirkt sich ein Fehler in der Profilkomponente nicht darauf aus, wie eine andere Komponente wie die Hero-Komponente rendert. Während die Profilkomponente abstürzen kann, funktioniert der Rest der Anwendung einwandfrei. Dies ist viel besser als das Rendern des generischen weißen Fallback-Bildschirms, der von React bereitgestellt wird.
Umgang mit Fehlern in JavaScript
Programmierfehler können für Entwickler und Benutzer frustrierend sein. Wenn Sie Fehler nicht behandeln, können Ihre Benutzer einer hässlichen Benutzeroberfläche mit schwer verständlichen Fehlermeldungen ausgesetzt werden.
Erstellen Sie beim Erstellen Ihrer React-Komponente eine Fehlergrenzenklasse entweder von Grund auf neu oder verwenden Sie das React-Error-Boundary-Paket, um benutzerfreundliche Fehlermeldungen anzuzeigen.