Fehlergrenzen in React beherrschen: Ein Leitfaden zur effektiven Fehlerbehandlung

Was ist eine Fehlergrenze?

Beim Erstellen von Anwendungen sind Fehler unvermeidlich. Sie können von APIs, der Benutzeroberfläche oder von mehreren anderen Orten stammen.

Es ist sehr wichtig, diese Fehler ordnungsgemäß zu behandeln und trotz dieser Fehler eine gute UX aufrechtzuerhalten.

Error Boundary ist eine solche Möglichkeit der Fehlerbehandlung in React.

---

Wie hilft die Fehlergrenze?

Um dies zu verstehen, betrachten wir zunächst die Situation vor der Einführung der Fehlergrenze.

Vor Error Boundaries breiteten sich die Fehler, die innerhalb von Komponenten auftraten, schließlich aus und zerstörten die Benutzeroberfläche oder stellten den weißen Bildschirm dar.

Dies hat zu einer wirklich schlechten UX geführt.

Error Boundary hilft uns, solche Fehler zu behandeln und eine Fallback-Benutzeroberfläche anzuzeigen, anstatt die Benutzeroberfläche zu beschädigen oder einen weißen Bildschirm anzuzeigen.

---

Wie verwende ich die Fehlergrenze?

React v16 hat offiziell die Fehlergrenze eingeführt.

Es handelt sich um eine klassenbasierte Komponente, die zum Verpacken Ihrer Anwendung verwendet werden kann.

Es akzeptiert die Anzeige einer Fallback-Benutzeroberfläche für den Fall, dass Ihre Anwendung Fehler aufweist, oder aus anderen Gründen rendert es einfach die untergeordnete Komponente, um den normalen Ablauf Ihrer Anwendung fortzusetzen.

So empfiehlt die React-Dokumentation die Verwendung,

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return this.props.fallback;
    }

    return this.props.children;
  }
}

---

Was ist das Problem mit der Fehlergrenze von React?

Es können keine Fehler erkannt werden, die in

auftreten

• Ereignishandler (diese Fehler müssen mit Try-Catch-Blöcken behandelt werden)
• Asynchroner Code (APIs, setTimeout, requestAnimationFrame usw.)
• Serverseitiges Rendering
• Der Fehler, der in Error Boundary selbst auftritt
• Es funktioniert nicht mit Funktionskomponenten. Obwohl wir es mit ein paar Codeänderungen zum Laufen bringen können.
• Haken können darin nicht verwendet werden.

---

Was ist die Lösung?

Es gibt ein npm-Paket namens „react-error-boundary“, das ein Wrapper auf der traditionellen Error Boundary-Komponente ist.

Mit diesem Paket sind wir in der Lage, alle Probleme zu überwinden, mit denen die herkömmliche Fehlergrenzenkomponente konfrontiert ist.

---

Wie benutzt man es?

Sie können Ihre gesamte Anwendung mit umschließen oder einzelne Komponenten mit .

Die Granularität der Umsetzung liegt bei Ihnen.

Lassen Sie uns verstehen, wie man es verwendet.

import React from 'react';
import { ErrorBoundary } from "react-error-boundary";

const App = () => {
return <ErrorBoundary fallback={<div>Something went wrong</div>}>
/* rest of your component */
</ErrorBoundary>
}

Dies ist das einfachste Beispiel für die Verwendung von ErrorBoundary. Es gibt noch mehr in dieser Bibliothek.

---

Grundlegendes zur React-Error-Boundary-API

Versuchen wir, die API in verschiedenen Szenarien zu verstehen.

1. Ich möchte eine generische Fallback-Benutzeroberfläche für Fehler in der Anwendung anzeigen

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 const App = () => {
 return <ErrorBoundary fallback={<div>Something went wrong</div>}>
 /* rest of your component */
 </ErrorBoundary>
 }

2. Ich möchte spezifische Fehlerdetails in meiner Fallback-Komponente anzeigen

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 function fallbackRender({ error, resetErrorBoundary }) {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     <div role="alert">
       <p>Something went wrong:</p>
       <pre style={{ color: "red" }}>{error.message}