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 haben sich die in Komponenten auftretenden Fehler schließlich ausgebreitet und die Benutzeroberfläche beschädigt oder den weißen Bildschirm gerendert.

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 die Fehlergrenze offiziell eingeführt.

Es handelt sich um eine klassenbasierte Komponente, die zum Umschließen 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. Es rendert 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 abgefangen werden, die auftreten in,

• 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.
• Hooks können darin nicht verwendet werden.

---

Was ist die Lösung?

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

Mit diesem Paket können wir alle Probleme ü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 umschließen.

Die Granularität der Implementierung liegt bei Ihnen.

Lassen Sie uns verstehen, wie man es verwendet.

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

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

}

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 Something went wrong}>
 /* rest of your component */
 
 }

2. Ich möchte bestimmte 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 (
     

       
Something went wrong:
       
{error.message}
     
   );
 }

 const App = () => {
 return  {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 
 }

); } const App = () => { return { // Setzen Sie den Status Ihrer App zurück, damit der Fehler nicht erneut auftritt }} > /* Rest Ihrer Komponente */ }

Anstelle von fallback oder fallbackRender können Sie auch eine React-Komponente verwenden.

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

 const Fallback = ({ error, resetErrorBoundary }) => {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     

       
Something went wrong:
       
{error.message}
     
   );
 }

 const App = () => {
 return  {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 
 }

); } const App = () => { return { // Setzen Sie den Status Ihrer App zurück, damit der Fehler nicht erneut auftritt }} > /* Rest Ihrer Komponente */ }

3. Ich möchte meine Fehler protokollieren

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

 const logError = (error: Error, info: { componentStack: string }) => {
   // Do something with the error, e.g. log to an external API
 };

 const Fallback = ({ error, resetErrorBoundary }) => {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     

       
Something went wrong:
       
{error.message}
     
   );
 }
 // You can use fallback / fallbackRender / FallbackComponent anything
 const App = () => {
 return  {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 
 }

); } // Sie können fallback / fallbackRender / FallbackComponent für alles verwenden const App = () => { return { // Setzen Sie den Status Ihrer App zurück, damit der Fehler nicht erneut auftritt }} > /* Rest Ihrer Komponente */ }

4. Ich möchte Fehler in Event-Handlern und asynchronem Code abfangen

 import { useErrorBoundary } from "react-error-boundary";

 function Example() {
   const { showBoundary } = useErrorBoundary();
   const getGreeting = async(name) => {
     try {
         const response = await fetchGreeting(name);
         // rest of your code
     } catch(error){
          // Show error boundary
         showBoundary(error);
     }
   }
   useEffect(() => {
    getGreeting()
   });

   return 
 }

---

Ein paar Fallstricke

ErrorBoundary ist eine Client-Komponente. Sie können ihm nur Requisiten übergeben, die serialisierbar sind, oder es in Dateien verwenden, die über einen „Use-Client“ verfügen. Direktive.

1. Was ist eine serialisierbare Requisite?

Serilierbare Requisite bedeutet, dass sie so in einen Byte-Stream konvertiert werden kann, dass der Byte-Stream wieder in die ursprüngliche Requisite konvertiert werden kann.

Eine übliche Methode, dies in Javascript zu tun, ist JSON.stringify() und JSON.parse().

2. So verwenden Sie „Client verwenden“; Direktive?

Erwähnen Sie es einfach oben in der Datei

"use client";

---

Es gibt noch einige weitere Variationen, die Sie verwenden können. Aber dieser Artikel ist gut genug, um Ihnen den Einstieg zu erleichtern.

Sehen Sie sich hier die vollständige Dokumentation an.

Bitte teilen Sie mir in den Kommentaren mit, ob Sie es hilfreich fanden.

Viel Spaß beim Codieren!