Error Boundary — was es ist, React Native Komponente und Fehlerbehandlung

Was ist Error Boundary

Error Boundary ist ein React-Mechanismus zur geordneten Fehlerbehandlung während Rendering-Fehlern. Eingeführt in React 16 (2017) als Wrapper-Komponente, die eine von zwei Lebenszyklusmethoden implementiert: static getDerivedStateFromError oder componentDidCatch. Error Boundary ermöglicht es, dem Benutzer eine aussagekräftige Nachricht anstelle eines leeren weißen Bildschirms oder eines vollständigen App-Absturzes anzuzeigen.

Wie Error Boundary entstand

Vor React 16 führte jeder unbehandelte Fehler in render zu einem vollständigen App-Absturz mit Demontage des gesamten DOM-Baums. In Webanwendungen bedeutete dies einen leeren weißen Bildschirm; in React Native einen vollständigen Absturz mit Rückkehr zum Startbildschirm. Das React-Team führte Error Boundary als Analogon eines catch-Blocks für deklarative UI ein und entlieh das Konzept aus dem „let it crash“-Ansatz der Sprache Erlang.

Bedeutung für React Native

In React Native bedeutet das Fehlen von Error Boundary einen vollständigen App-Absturz bei jedem Rendering-Fehler. Der Benutzer verliert seine gesamte aktuelle Sitzung ohne Wiederherstellungsmöglichkeiten. Error Boundary in React Native ist entscheidend wichtig, da mobile Apps nicht wie Webseiten neu geladen werden können — die Benutzersitzung geht unwiederbringlich verloren, und der Benutzer muss von vorne beginnen.

Wie Error Boundary in React Native funktioniert

Error Boundary arbeitet auf der Ebene des React-Baums. Wenn eine Kindkomponente einen Fehler in render oder im Lebenszyklus auslöst, hängt React nicht den gesamten Baum aus, sondern übergibt die Kontrolle an die nächsthöhere Error Boundary in der Hierarchie. Die Boundary ruft getDerivedStateFromError auf, setzt state.hasError = true und rendert die Fallback-Oberfläche anstelle des defekten Komponentenzweigs.

import React, { Component, ErrorInfo, ReactNode } from "react"

interface Props {
    children: ReactNode
    fallback?: ReactNode
}

interface State {
    hasError: boolean
    error?: Error
}

class ErrorBoundary extends Component<Props, State> {
    constructor(props: Props) {
        super(props)
        this.state = { hasError: false }
    }

    static getDerivedStateFromError(error: Error): State {
        return { hasError: true, error }
    }

    componentDidCatch(error: Error, info: ErrorInfo) {
        console.error("Caught by boundary:", error)
        Crashlytics.recordException(error)
    }

    render() {
        if (this.state.hasError) {
            return this.props.fallback || <FallbackUI />
        }
        return this.props.children
    }
}

getDerivedStateFromError setzt den Zustand für das Rendern der Fallback-Oberfläche — dies ist eine statische Methode, die während der Render-Phase vor dem Übernehmen von Änderungen aufgerufen wird. componentDidCatch wird in der Commit-Phase ausgeführt und ist für Nebeneffekte vorgesehen: Protokollierung, Senden von Absturzberichten an Crashlytics, Analytik. Die beiden Methoden trennen die Verantwortung zwischen UI-Zustandsverwaltung und Nebeneffekten.

Erstellen einer Error Boundary Komponente

Um eine Error Boundary zu erstellen, müssen Sie eine Klassenkomponente mit den Methoden getDerivedStateFromError und/oder componentDidCatch implementieren. Funktionale Komponenten können keine Error Boundary sein — React unterstützt diese Funktionalität nur für Klassenkomponenten, da der Zugriff auf Lebenszyklusmethoden erforderlich ist. Die Bibliothek react-error-boundary bietet eine fertige Implementierung mit einer Hook-basierten API für mehr Komfort.

// Beispiel für die Verwendung von Error Boundary in React Native
import { ErrorBoundary } from "react-error-boundary"

const FallbackComponent = ({ error, resetError }: FallbackProps) => (
    <View style={styles.container}>
        <Text>Etwas ist schief gelaufen</Text>
        <Text>{error.message}</Text>
        <Button title="Wiederholen" onPress={resetError} />
    </View>
)

const App = () => (
    <SafeAreaView>
        <ErrorBoundary FallbackComponent={<FallbackComponent />}>
            <UserProfile userId={"123"} />
        </ErrorBoundary>
        <BottomNavigation />
    </SafeAreaView>
)

Wrapper-Ebenen — Error Boundary kann auf verschiedenen Hierarchieebenen platziert werden. Eine globale Boundary an der App-Wurzel zeigt bei jedem Fehler eine Fallback-Oberfläche an, aber die Navigation bleibt erhalten. Mehrere Boundaries auf Bildschirmebene ermöglichen die Isolierung von Fehlern: Wenn ein Bildschirm ausfällt, arbeiten die anderen unabhängig weiter. react-error-boundary vereinfacht den Reset-Mechanismus über den useErrorBoundary-Hook und ermöglicht das Zurücksetzen des Zustands ohne Neuladen. Für typische Projekte gilt ein Drei-Ebenen-Boundary-Schema als optimal für React Native Anwendungen.

Zurücksetzen des Error Boundary Zustands

Nach einem Fehler kann der Benutzer auf die Schaltfläche „Wiederholen“ klicken, die hasError auf false zurücksetzt und den untergeordneten Baum neu rendert. Der Reset-Mechanismus ist wichtig, um die Anwendungsfunktionalität ohne Neuladen wiederherzustellen. In react-error-boundary wird der onReset-Callback verwendet, der den Cache leeren, Daten erneut abrufen oder den Zustand weiter oben im Baum aktualisieren kann.

Einschränkungen von Error Boundary

Error Boundary fängt keine asynchronen Fehler — Fehler in setTimeout, setInterval, Promise, async/await. React kann Fehler außerhalb des Render-Zyklus und der Lebenszyklus-Hooks nicht abfangen, da sie in unterschiedlichen Ausführungskontexten ausgeführt werden. Für asynchrone Fehler ist ein separater try-catch in den Handlern oder ein globaler unhandledrejection-Ereignishandler erforderlich.

Event-Handler

Fehler in onClick, onChange und anderen Event-Handlern werden von Error Boundary nicht abgefangen, da sie außerhalb des React-Renderings ausgeführt werden. Die Fehlerbehandlung für Event-Handler sollte mit try-catch innerhalb des Handlers selbst erfolgen. Die Bibliothek react-error-boundary bietet den useErrorHandler-Hook, um Fehler aus Event-Handlern an die nächstgelegene Boundary zu werfen.

Server-seitiges Rendern und Next.js

Error Boundary funktioniert auf der Serverseite in Next.js oder Gatsby nicht. Die Methoden getDerivedStateFromError und componentDidCatch werden während SSR nicht aufgerufen, da Lebenszyklusmethoden nur im Browser verfügbar sind. Für Serverfehler ist eine separate Strategie erforderlich: try-catch in getServerSideProps, Fallback-Seiten error.js (Next.js 13+), oder globales Middleware.

React Native Native-Schicht

In React Native verhindert Error Boundary keine Abstürze auf der Ebene nativer Module. Ein nativer Absturz (Segfault, Speichermangel, native Ausnahme) tritt auf der Objective-C- oder Java-Ebene auf und erreicht die JavaScript-Schicht nicht. Für native Abstürze sind Crashlytics NDK (Android) oder KSCrash (iOS) erforderlich. Error Boundary schützt nur die JavaScript-Schicht einer React Native Anwendung.

Best Practices für Error Boundary

Platzieren Sie Error Boundary an den Grenzen logischer Module: eine Boundary pro Bildschirm, eine pro Drittanbieter-Widget, eine pro komplexes Formular. Dies isoliert Fehler und ermöglicht dem Benutzer, in anderen Teilen der Anwendung weiterzuarbeiten. Eine Root-Boundary sollte immer vorhanden sein — für kritische Fehler in gemeinsamen Navigationskomponenten oder Providern. Jede Boundary ist für ihr eigenes Oberflächenfragment verantwortlich und beeinträchtigt bei einem Fehler keine benachbarten Komponenten.

Protokollierung und Überwachung

Leiten Sie den Fehler immer über componentDidCatch an Crashlytics oder Sentry weiter. Fügen Sie Kontext hinzu: Bildschirmname, userId, App-Version, Navigationsparameter. In Sentry sind Breadcrumbs verfügbar — eine Sequenz von Benutzeraktionen, die zum Fehler führten. Zur Analyse der Häufigkeit nicht-tödlicher Fehler verwenden Sie Crashlytics-Dashboards mit Gruppierung nach Issue.

Fallback-Benutzeroberfläche

Verwenden Sie keinen nackten Fallback — erstellen Sie eine sinnvolle Oberfläche. Empfohlenes Set für React Native: Fehlermeldung (benutzerfreundlich, nicht technisch), eine „Wiederholen“-Schaltfläche, ein Link zum Support oder Chat. Vermeiden Sie eine leere View — der Benutzer denkt, die App sei vollständig abgestürzt, und schließt sie. Der Fallback sollte in das Gesamtdesign der App integriert sein.

Testen von Error Boundary

Testen Sie jede Error Boundary mit React Testing Library oder React Native Testing Library. Erstellen Sie eine Trigger-Komponente, die beim Rendern einen Fehler auslöst, und überprüfen Sie, ob die Fallback-Oberfläche angezeigt wird. Für Integrationstests verwenden Sie Storybook mit verschiedenen Error Boundary-Zuständen: normal, Fehler, Zustand nach Reset. Automatisierte Tests der Boundary stellen sicher, dass die Fallback-Oberfläche bei Komponentenänderungen in der Produktion korrekt funktioniert. Die Testabdeckung für jede Boundary sollte eine obligatorische Code-Review-Anforderung für React Native Projekte sein.