Error Boundary — wat is het, React Native component en foutafhandeling

Wat is Error Boundary

Error Boundary is een React-mechanisme voor graceful degradation bij renderfouten. Geïntroduceerd in React 16 (2017) als een wrapper-component die een van de twee levenscyclusmethoden implementeert: static getDerivedStateFromError of componentDidCatch. Error Boundary stelt de gebruiker in staat een begrijpelijke melding te zien in plaats van een leeg wit scherm of volledige crash van de applicatie.

Hoe Error Boundary is ontstaan

Vóór React 16 leidde elke onverwerkte fout in render tot crash van de hele applicatie met ontmanteling van de volledige DOM-boom. In webapplicaties betekende dit een leeg wit scherm, in React Native — volledige crash met terugkeer naar het Home Screen. Het React-team introduceerde Error Boundary als een analoog van een catch-blok voor declaratieve UI, waarbij het concept werd ontleend van de „let it crash” benadering in de taal Erlang.

Betekenis voor React Native

In React Native betekent het ontbreken van Error Boundary volledige crash van de applicatie bij elke renderfout. De gebruiker verliest de volledige huidige sessie zonder herstelmogelijkheid. Error Boundary in React Native is van cruciaal belang, omdat mobiele applicaties niet opnieuw laden zoals webpagina's — de gebruikerssessie is onherroepelijk verloren en de gebruiker moet helemaal opnieuw beginnen.

Hoe werkt Error Boundary in React Native

Error Boundary werkt op het niveau van de React-boom. Wanneer een onderliggende component een fout gooit in render of lifecycle, ontmantelt React niet de hele boom, maar geeft de controle door aan de dichtstbijzijnde Error Boundary hoger in de hiërarchie. De Boundary roept getDerivedStateFromError aan, stelt state.hasError = true in en rendert fallback UI in plaats van de defecte componententak.

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("Opgemaakt door boundary:", error)
        Crashlytics.recordException(error)
    }

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

getDerivedStateFromError stelt de status in voor het renderen van fallback UI — dit is een statische methode die wordt aangeroepen in de renderfase vóór het vastleggen van wijzigingen. componentDidCatch wordt uitgevoerd in de vastleggingsfase en is bedoeld voor neveneffecten: loggen, crash-rapporten naar Crashlytics sturen, analytics. Twee methoden verdelen de verantwoordelijkheid tussen het beheer van de UI-status en nevenacties.

Error Boundary component maken

Om een Error Boundary te maken, moet u een klassecomponent implementeren met de methoden getDerivedStateFromError en/of componentDidCatch. Functionele componenten kunnen geen Error Boundary zijn — React ondersteunt deze functionaliteit alleen voor klassecomponenten, omdat toegang tot levenscyclusmethoden vereist is. In de bibliotheek react-error-boundary is een kant-en-klare implementatie met hooks-API beschikbaar voor het gemak.

// Voorbeeld van Error Boundary gebruik in React Native
import { ErrorBoundary } from "react-error-boundary"

const FallbackComponent = ({ error, resetError }: FallbackProps) => (
    <View style={styles.container}>
        <Text>Er is iets misgegaan</Text>
        <Text>{error.message}</Text>
        <Button title="Opnieuw" onPress={resetError} />
    </View>
)

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

Wrapper-niveaus — Error Boundary kan op verschillende niveaus van de hiërarchie worden geplaatst. Eén globale Boundary aan de root van de applicatie toont fallback UI bij elke fout, maar navigatie blijft werken. Meerdere Boundaries op schermniveau maken isolatie van fouten mogelijk: als één scherm defect is, blijven de andere onafhankelijk werken. react-error-boundary vereenvoudigt het Reset-mechanisme via de useErrorBoundary hook, waardoor de status kan worden gereset zonder herladen. Voor typische projecten wordt een schema met drie Boundary-niveaus als optimaal beschouwd voor React Native-applicaties.

Error Boundary status resetten

Na het optreden van een fout kan de gebruiker op de knop „Opnieuw” drukken, die hasError naar false reset en de onderliggende boom opnieuw rendert. Reset-mechanisme is belangrijk voor het herstellen van de functionaliteit van de applicatie zonder herladen. In react-error-boundary wordt een onReset callback gebruikt, die de cache kan wissen, gegevens opnieuw kan opvragen of de status hoger in de boom kan bijwerken.

Beperkingen van Error Boundary

Error Boundary vangt geen asynchrone fouten — fouten in setTimeout, setInterval, Promise, async/await. React kan geen fouten buiten de render-cyclus en lifecycle-hooks opvangen, omdat ze in andere uitvoeringscontexten worden uitgevoerd. Voor asynchrone fouten is een aparte try-catch in handlers of een globale handler voor het unhandledrejection-event vereist.

Event-handlers

Fouten in onClick, onChange en andere event-handlers worden niet opgevangen door Error Boundary, omdat ze buiten React-rendering worden uitgevoerd. Foutafhandeling voor event-handlers moet binnen de handler zelf plaatsvinden via try-catch. De bibliotheek react-error-boundary biedt de hook useErrorHandler voor het doorgeven van fouten uit event-handlers naar de dichtstbijzijnde Boundary.

Server-side rendering en Next.js

Error Boundary werkt niet aan de serverzijde in Next.js of Gatsby. De methoden getDerivedStateFromError en componentDidCatch worden niet aangeroepen bij SSR, omdat levenscyclusmethoden alleen beschikbaar zijn in de browser. Voor serverfouten is een aparte strategie vereist: try-catch in getServerSideProps, fallback-pagina's error.js (Next.js 13+) of globale middleware.

React Native native laag

In React Native voorkomt Error Boundary geen crashes op het niveau van native modules. Native crash (segfault, out-of-memory, native exception) vindt plaats op het niveau van Objective-C of Java en bereikt de JavaScript-laag niet. Voor native crashes is Crashlytics NDK (Android) of KSCrash (iOS) vereist. Error Boundary beschermt alleen de JavaScript-laag van de React Native-applicatie.

Beste praktijken voor Error Boundary

Plaats Error Boundary op de grenzen van betekenisvolle modules: één Boundary per scherm, één per widget van een externe ontwikkelaar, één per complex formulier. Dit isoleert fouten en stelt de gebruiker in staat verder te werken in de rest van de applicatie. De root Boundary moet altijd aanwezig zijn — voor kritieke fouten in gemeenschappelijke navigatiecomponenten of providers. Elke Boundary is verantwoordelijk voor zijn eigen interfacefragment en beïnvloedt aangrenzende componenten niet bij het optreden van een fout.

Loggen en monitoring

Geef de fout altijd door aan Crashlytics of Sentry via componentDidCatch. Voeg context toe: schermnaam, userId, applicatieversie, navigatieparameters. In Sentry zijn breadcrumbs beschikbaar — de reeks gebruikersacties vóór de fout. Voor analyse van de frequentie van non-fatal fouten gebruikt u Crashlytics-dashboards met groepering per issue.

Fallback UI

Gebruik geen „lege” fallback — maak een betekenisvolle interface. Aanbevolen set voor React Native: foutmelding (gebruiksvriendelijk, niet technisch), knop „Opnieuw”, link naar ondersteuning of chat. Vermijd een lege View — de gebruiker denkt dat de applicatie volledig is vastgelopen en sluit deze. De fallback moet worden geïntegreerd in het algemene ontwerp van de applicatie.

Error Boundary testen

Test elke Error Boundary met React Testing Library of React Native Testing Library. Maak een trigger-component die een fout gooit tijdens het renderen en controleer of fallback UI wordt weergegeven. Voor integratietests gebruikt u storybook met verschillende toestanden van Error Boundary: normaal, fout, toestand na reset. Geautomatiseerd testen van Boundary garandeert dat bij wijziging van de component de fallback UI in production correct blijft werken. Testdekking van elke Boundary moet een verplichte code review-vereiste zijn voor React Native-projecten.