GlobalErrorHandler: Fangen Sie die Fehler auf, die ErrorBoundary durch die Finger fallen!

ErrorBoundary ist ein großartiges Tool zum Erfassen von Fehlern, die von React-Komponenten ausgelöst werden. Sie können je nach Art und Ort des Fehlers benutzerdefinierte Fehlermeldungen bereitstellen. Aber nicht alle Fehler werden von der ErrorBoundary behandelt! Was macht man damit?

Wenn man sowohl asynchrone Fehler als auch von außerhalb von React ausgelöste Fehler berücksichtigt, ist die ErrorBoundary unzureichend. Um dies zu mildern, habe ich in meinen Anwendungen einen sogenannten GlobalErrorHandler erstellt. Eine funktionale Komponente, die einfach A) einen Fehlerdialog öffnet und dem Benutzer mitteilt, dass etwas schief gelaufen ist, B) den Fehler auf dem Server protokolliert, damit wir ihn untersuchen und Lösungen finden können.

Die Idee ist einfach. Wir möchten einen GlobalErrorHandler im Stammverzeichnis unserer Anwendung. Dieser Handler sollte nur Fehler verarbeiten, die nicht von der ErrorBoundary abgefangen werden. Darüber hinaus sollte es vom Benutzer leicht verworfen werden können und wir sollten davon ausgehen, dass die Anwendung weiterhin verwendbar ist.

Die Strategie ist also folgende: Der GlobalErrorHandler macht überhaupt nichts, außer standardmäßig das Rendern seiner untergeordneten Elemente. Es richtet jedoch zwei Ereignis-Listener ein, die auf alle Fehler- und nicht behandelten Ablehnungsereignisse im Browser warten. Anschließend wird der Fehler untersucht und festgestellt, ob er bereits von ErrorBoundaries behandelt wurde. Wenn dies nicht der Fall ist, wird schließlich ein Dialogfeld angezeigt, das dem Benutzer mitteilt, dass irgendwo ein Fehler aufgetreten ist, und dem Benutzer die Möglichkeit gibt, das Dialogfeld zu schließen und die Anwendung weiter zu verwenden.

Wurde der Fehler bereits behoben?

Bevor wir Endbenutzer zusätzlich zu der von ErrorBoundary durchgeführten Bearbeitung mit unnötigen Dialogen belästigen, müssen wir zunächst mit der Frage nach dem Fehler beginnen: Wurden Sie bereits bearbeitet? Meine Lösung hierfür besteht darin, ein neues Feld für das Fehlerobjekt isHandledByBoundary einzuführen. Dies wird innerhalb von ErrorBoundary:
auf true gesetzt

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    (error as any).isHandledByBoundary = true;
    ....
  }

Da dies in allen ErrorBoundary-Komponenten (und anderen Maschinen, die nicht erfasste Fehler verarbeiten) vorhanden ist, können wir mit der Definition unseres GlobalErrorHandlers beginnen.

Das nackte Skelett

Dann können wir das Grundgerüst unseres GlobalErrorHandlers aufbauen. Es rendert seine untergeordneten Elemente direkt und rendert auch einen an anderer Stelle definierten „ErrorDialog“. (Wenn Sie diese Komponente anwendungsübergreifend teilen möchten, könnte stattdessen der ErrorDialog eine Requisite sein.)

import { useState, useEffect, ReactNode } from 'react';
import { ErrorDialog } from '../Components/ErrorDialog';

type Props = {
  children: ReactNode;
};

export function GlobalErrorHandler({ children }: Props) {
  const [error, setError] = useState<Error | string | null>(null);
  const [isDialogOpen, setDialogOpen] = useState(false);

  useEffect(() => {
    ....
  }, []);

  function handleCloseDialog() {
    setDialogOpen(false);
    setError(null);
  }

  return (
    <>
      {children}

      {isDialogOpen && error && (
        <ErrorDialog
          actionName="Unhandled error"
          error={error}
          loggFeilmelding={true}
          onClose={handleCloseDialog}
        />
      )}
    </>
  );
}

Das Einzige, was uns jetzt fehlt, ist die Fehlerbehandlung selbst, definiert in useEffect.

Umgang mit den Fehlern

Der gesamte Code in diesem Abschnitt sollte sich innerhalb der useEffect-Funktion befinden!

Zuerst definieren wir handleWindowError. Dies muss an den Fehlerereignishandler des Fensterobjekts übermittelt werden. Hier ist nichts Geheimnisvolles, aber sehen Sie, dass das Fehlerereignis auch Informationen über Quelle, Zeilennummer und Spaltennummer enthält. Was zum Sammeln wertvoll sein könnte.

Normalerweise sind diese Informationen auch im Fehlerobjekt zu finden, aber ich muss diesbezüglich weitere empirische Untersuchungen durchführen. Vielleicht sollten wir immer die vom Fehlerereignis gemeldeten Zeilen- und Spaltennummern beibehalten? In diesem Fall könnten wir auch einen Status dafür im GlobalErrorHandler haben (und sicherstellen, dass dieser beim Protokollieren des Fehlers gesendet wird).

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    (error as any).isHandledByBoundary = true;
    ....
  }

Wir werden auch den handleUnhandledRejection-Handler definieren. Dies gilt für Fehler, die innerhalb von Versprechen auftreten, bei denen wir jedoch vergessen haben, eine .catch()-Klausel zu schreiben.

import { useState, useEffect, ReactNode } from 'react';
import { ErrorDialog } from '../Components/ErrorDialog';

type Props = {
  children: ReactNode;
};

export function GlobalErrorHandler({ children }: Props) {
  const [error, setError] = useState<Error | string | null>(null);
  const [isDialogOpen, setDialogOpen] = useState(false);

  useEffect(() => {
    ....
  }, []);

  function handleCloseDialog() {
    setDialogOpen(false);
    setError(null);
  }

  return (
    <>
      {children}

      {isDialogOpen && error && (
        <ErrorDialog
          actionName="Unhandled error"
          error={error}
          loggFeilmelding={true}
          onClose={handleCloseDialog}
        />
      )}
    </>
  );
}

Dann müssen wir nur noch die Listener einrichten und entfernen, wenn GlobalErrorHandler nicht mehr gerendert wird:

   function handleWindowError(
      message: string | Event,
      source?: string,
      lineno?: number,
      colno?: number,
      error?: Error
    ) {
      if (error && (error as any).isHandledByBoundary) {
        return true;
      }

      const errorMessage = error
        ? error
        : `Error: ${message} at ${source}:${lineno}:${colno}`;
      setError(errorMessage);
      setDialogOpen(true);
      return true;
    }

In den Return-Anweisungen kehren wir natürlich aus der Funktion zurück, die wir useEffect zuführen. Dadurch wird sichergestellt, dass wir beginnen, Ereignisse abzuhören und zu verarbeiten, wenn die Komponente gerendert wird, und aufhören, wenn die Komponente nicht mehr gerendert wird.

Daher haben wir einen GlobalEventHandler, um diese lästigen Fehler in unserer React-Anwendung zu behandeln, die entweder von asynchronen Quellen oder von außerhalb der React-Komponenten ausgelöst werden!

Das obige ist der detaillierte Inhalt vonGlobalErrorHandler: Fangen Sie die Fehler auf, die ErrorBoundary durch die Finger fallen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!