Kapseln Sie eine einfachste ErrorBoundary-Komponente zur Behandlung von React-Ausnahmen

Vorwort

Ab React 16 wurde das Konzept der Fehlergrenzen eingeführt, mit dem in den untergeordneten Komponenten generierte Fehler erfasst, Fehlerprotokolle aufgezeichnet und Downgrade-Inhalte angezeigt werden können. Die spezifische offizielle Website-Adresse

Fehlergrenzen verhindern, dass ein Komponentenfehler dazu führt, dass die gesamte Seite mit einem leeren Bildschirm unbrauchbar wird. Sie verwenden eine sanfte Verschlechterung, um eine alternative Benutzeroberfläche bereitzustellen. Fehlergrenzen können Fehler während des Renderings, im Lebenszyklus und im Konstruktor des gesamten Komponentenbaums erfassen. Seit React 16 führt jeder Fehler, der nicht von einer Fehlergrenze erfasst wird, dazu, dass der gesamte React-Komponentenbaum ausgehängt wird.

Bedeutung von ErrorBoundary

• Einige Benutzeroberflächen stürzen ab, aber nicht die gesamte Webanwendung stürzt ab

Beim Durchsuchen einer Seite kann die Benutzererfahrung aufgrund von Ausnahmen, die vom Backend zurückgegeben werden, oder einiger Fehlerprüfungen im Frontend schlecht sein. Stellen Sie sich vor, Sie sitzen mit Ihrer Frau im Zug, essen Hot Pot und singen Lieder, und plötzlich werden Sie von Banditen ausgeraubt und es erscheint eine Fehlermeldung. In einigen Szenarien, beispielsweise beim Einstellen des Betrags oder beim Anzeigen wichtiger Seiten, ist die Erfahrung sehr schlecht. Sie haben beispielsweise im Spiel 500 aufgeladen, aber aus Gründen der Benutzeroberfläche wird das Auflade- NaN angezeigt. Diese Anzeige ist ärgerlicher als keine Anzeige. Ich glaube jedoch, dass jeder mit der Ausnahmeerfassung von JS vertraut ist und ein try-catch -Paket mit Geschäftscode ausreicht. Um Ausnahmen in Komponenten zu erfassen, müssen Sie jedoch die von React bereitgestellte Error Boundary verwenden und componentDidCatch zum Erfassen von Seitenausnahmen verwenden, damit sich die Ausnahmen nicht auf die gesamte Seite ausbreiten und effektiv verhindert wird, dass auf der Seite ein leerer Bildschirm angezeigt wird.

So implementieren Sie die offizielle Website

👉 Wenn eine Klassenkomponente eine (oder beide) der beiden Lebenszyklusmethoden static getDerivedStateFromError() oder componentDidCatch() definiert, wird sie zu einer Fehlergrenze. Wenn ein Fehler auftritt, verwenden Sie static getDerivedStateFromError(), um die alternative Benutzeroberfläche zu rendern, und componentDidCatch(), um die Fehlermeldung auszudrucken 👈

Klasse ErrorBoundary erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten);
    dieser.Zustand = { hasError: false };
  }
  statisch getDerivedStateFromError(Fehler) {
    // Aktualisieren Sie den Status, damit beim nächsten Rendering die verschlechterte Benutzeroberfläche angezeigt werden kann.
    return { hatFehler: true };
  }
  componentDidCatch(Fehler, Fehlerinfo) {
    // Sie können Fehlerprotokolle auch an den Server melden logErrorToMyService(error, errorInfo);
  }
  rendern() {
    wenn (dieser.Zustand.hatFehler) {
      // Sie können die heruntergestufte Benutzeroberfläche anpassen und das Rendering zurückgeben <h1>Etwas ist schiefgelaufen.</h1>;
    }
    gib diese.Eigenschaften.Kinder zurück;
  }
}

Dann können Sie es als reguläre Komponente verwenden:

<Fehlergrenze>
  <MeinWidget />
</Fehlergrenze>

Fehlergrenzen funktionieren ähnlich catch {} in JavaScript, außer dass sie nur für React Komponenten gelten. Nur class können zu Fehlergrenzkomponenten werden. In den meisten Fällen müssen Sie eine Fehlergrenzkomponente nur einmal deklarieren und können sie dann in Ihrer gesamten Anwendung verwenden. Bei Verwendung können Fehler in der umschlossenen Komponente oder von throw new Error() ausgelöste Ausnahmen von der Fehlergrenzkomponente abgefangen und als Fallback-Benutzeroberfläche angezeigt werden.

Kapselt eine konfigurierbare ErrorBoundary

Nachdem wir verstanden haben, wie die offizielle Website die Fehlergrenzkomponente implementiert, können wir eine ErrorBoundary Komponente kapseln, um ein nützliches Rad zu erstellen, anstatt direkt return <h1>Something went wrong</h1> zu schreiben. Nachdem wir die Prinzipien von react-redux gelernt haben, wissen wir, dass wir High-Order-Komponenten verwenden können, um react Komponenten zu verpacken und Daten und Methoden global in store einzufügen. In ähnlicher Weise können wir auch High-Order-Komponenten verwenden, um sie in eine React-Komponente zu verpacken, die Fehler erfassen kann.

1. Erstellen Sie eine konfigurierbare ErrorBoundary-Klassenkomponente

Im Vergleich zum ErrorBoundary auf der offiziellen Website können wir die Protokollberichtsmethode und die angezeigte UI dynamisch konfigurieren, indem wir Parameter akzeptieren. Für die eingehende UI können wir festlegen, dass sie als react Komponente oder React Element akzeptiert wird. Und über die Komponente können wir Parameter übergeben, sodass wir spezifische Fehlerinformationen in der zugrunde liegenden Benutzeroberfläche erhalten.

• componentDidCatch(): Hook-Funktion zur Fehlerprotokollverarbeitung
• static getDerivedStateFromError() : Es nimmt den ausgelösten Fehler als Parameter und gibt einen Wert zurück, um den Status zu aktualisieren

Klasse ErrorBoundary erweitert React.Component {
  Zustand = { Fehler: falsch };
  statisch getDerivedStateFromError(Fehler) {
    Rückgabe { Fehler };
  }
  componentDidCatch(Fehler, Fehlerinfo) {
    wenn (this.props.onError) {
      //Das Berichtsprotokoll wird durch die von der übergeordneten Komponente eingefügte Funktion this.props.onError(error, errorInfo.componentStack); ausgeführt.
    }
  }
  rendern() {
    const { fallback, FallbackComponent } = this.props;
    const { Fehler } = dieser.Zustand;
    if (Fehler) {
      const fallbackProps = { Fehler };
      //Feststellen, ob es sich um ein React-Element handelt
      wenn (React.isValidElement(fallback)) {
        Fallback zurückgeben;
      }
      //Komponentenmethode if (FallbackComponent) {
        return <FallbackComponent {...fallbackProps} />;
      }
      throw new Error("Die ErrorBoundary-Komponente muss an die Fallback-Benutzeroberfläche übergeben werden");
    }
    gib diese.Eigenschaften.Kinder zurück;
  }
}

Auf diese Weise können die zugrunde liegende UI Anzeige und錯誤日志dynamisch abgerufen werden, was die Komponente flexibler macht. Es gibt jedoch ein weiteres Problem. Manchmal fällt der Server plötzlich mit 503 oder 502 aus und das Frontend kann keine Antwort erhalten. Zu diesem Zeitpunkt meldet eine Komponente einen Fehler, kehrt jedoch nach einer Weile zum Normalzustand zurück. Ein besserer Ansatz besteht darin, dass der Benutzer auf eine Methode in der von ErrorBoundary gekapselten Komponente klickt, um die Fehlerkomponente neu zu laden, ohne die Seite zu aktualisieren. Zu diesem Zeitpunkt sollte die abzudeckende Komponente eine Methode bereitstellen, die ErrorBoundary verarbeiten kann.

1. Fügen Sie eine Methode in ErrorBoundary hinzu, um festzustellen, ob eine eingefügte Reset-Methode vorhanden ist. Wenn eine Reset-Methode vorhanden ist, führen Sie sie aus und setzen Sie den Fehler im Status zurück, um den Fehlerstatus auf „false“ zu setzen.

Fehlergrenze zurücksetzen = () => {
  wenn (this.props.onReset) this.props.onReset();
  this.setState({ Fehler: false });
};

2. Fügen Sie zum Rendern einen Funktionskomponententyp in Render hinzu. Die Reset-Methode und die Fehlerinformationen können als Parameter zur Verarbeitung an die aktuelle Komponente übergeben werden.

 rendern() {
    const { fallback, FallbackComponent, fallbackRender } = this.props;
    const { Fehler } = dieser.Zustand;
    if (Fehler) {
      const fallbackProps = {
        Fehler,
        resetErrorBoundary: this.resetErrorBoundary,
      };
      ...
      wenn (Typ von FallbackRender === "Funktion") returniere FallbackRender(FallbackProps);
      ...
    }
    gib diese.Eigenschaften.Kinder zurück;
  }

2. Umhüllen Sie ErrorBoundary mit einer höherwertigen Funktion und geben Sie diese zurück

importiere React von „react“;
importiere DefaultErrorBoundary aus "./core";
const catchreacterror = (Boundary = DefaultErrorBoundary) => InnerComponent => {
  Requisiten zurückgeben => (
    <Grenze {...Eigenschaften}>
      <InnerComponent {...props} />
    </Grenze>
  );
};

Nutzung und Tests

In einer Click-to-Increment-Demo wird eine Ausnahme ausgelöst, wenn die Zahl einen bestimmten Wert erreicht. Hier werden die Klassenkomponente und die Funktionskomponente als Komponenten getestet, die die Ausnahme auslösen.

• Die Komponente, die die Ausnahme verursacht hat

//Funktionskomponente const fnCount1 = ({ count }) => {
  if (Anzahl == 3) throw new Error("Anzahl ist drei");
  gibt <span>{Anzahl}</span> zurück;
};
//Klassenkomponente class fnCount2 extends React.Component {
  rendern() {
    const { count } = diese.props;
    if (Anzahl == 2) throw new Error("Anzahl ist zwei");
    gibt <span>{Anzahl}</span> zurück;
  }
}

• Funktionsbaustein zur Behandlung von Fehlerausnahmen

const errorbackfn = ({ Fehler: { Nachricht }, resetErrorBoundary }) => (
  <div>
    <p>Etwas ist schiefgelaufen</p>
    <pre>{Nachricht}</pre>
    <button onClick={resetErrorBoundary}>Erneut versuchen</button>
  </div>
);

• Allgemeine Komponenten zur Behandlung von Fehlerausnahmen

const errorbackcom = () => <h1>Ein Fehler ist aufgetreten und kann nicht rückgängig gemacht werden</h1>;

• Testkomponenten

//Umschließe die Komponente, die die Ausnahme initiiert hat, und gib eine Komponente höherer Ordnung zurück, die die Fehlerbearbeitung verarbeiten kann. const SafeCount1 = catchreacterror()(fnCount1);
const SafeCount2 = catchreacterror()(fnCount2);
//Hauptkomponente testen const App = () => {
  const [Anzahl, Anzahl festlegen] = useState(0);
  const ListenError = (arg, info) => console.log("Error: " + arg.message, info); //Rückruf, wenn ein Fehler auftritt const onReset = () => setCount(0); //Rückruf, wenn auf Zurücksetzen geklickt wird return (
    <div Klassenname="App">
      <Abschnitt>
        <button bei Klick={() => setCount(Anzahl => Anzahl + 1)}>+</button>
        <button bei Klick = {() => setCount(Anzahl => Anzahl - 1)}>-</button>
      </Abschnitt>
      <hr />
      <div>
        Klassenkomponente:
        <Sicherheitsanzahl2
          Anzahl={Anzahl}
          fallbackRender={errorbackfn}
          beim Zurücksetzen={beim Zurücksetzen}
          beiFehler={ListenError}
        />
      </div>
      <div>
        Funktionskomponente:
        <SichereAnzahl1
          Anzahl={Anzahl}
          FallbackComponent={errorbackcom}
          beiFehler={ListenError}
        />
      </div>
    </div>
  );
}; 

Mission erfüllt!

Aufgetretene Probleme und Zusammenfassung

Es gibt viele Fälle, in denen Fehlergrenzen bei React nicht allmächtig sind, wie zum Beispiel

• Ereignisfehler

Im obigen Beispiel existiert this.o nicht, daher wird ein Fehler gemeldet. Window.onerror kann es erfassen, die Fehlergrenze jedoch nicht.

• Asynchroner Code

Serverseitiges Rendering und Fehlergrenzen selbst

Zusammenfassen

• Komponenten extrahieren✔
• Fehlerbericht✔
• UI-Abstraktion ✔
• Fehler zurücksetzen ✔
• Abhebemodus ✖
• Server ✖

Vielen Dank, dass Sie sich die Zeit genommen haben, diesen Artikel zu lesen. Ich hoffe, er kann Ihnen weiterhelfen. Ich gehe davon aus, dass Sie ein allgemeines Verständnis der Fehlergrenzen in React haben und eine einfache ErrorBoundary Generell gibt es noch viele Punkte zur Optimierung. Wenn Sie Fragen haben, können Sie mich gerne korrigieren. Weitere Informationen zu ErrorBoundary und React finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM. Wir hoffen, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!