Error Boundary — co to je, komponenta React Native a zpracování chyb

Co je Error Boundary

Error Boundary je mechanismus React pro graceful degradation při chybách vykreslování. Zaveden v React 16 (2017) jako komponenta-wrapper implementující jednu ze dvou metod životního cyklu: static getDerivedStateFromError nebo componentDidCatch. Error Boundary umožňuje uživateli zobrazit srozumitelnou zprávu místo prázdné bílé obrazovky nebo úplného pádu aplikace.

Jak vznikl Error Boundary

Před React 16 každá neošetřená chyba v renderu vedla k pádu celé aplikace s demontáží celého DOM stromu. Ve webových aplikacích to znamenalo prázdnou bílou obrazovku, v React Native — úplný pád aplikace s návratem na Home Screen. Tým React zavedl Error Boundary jako analogii catch-bloku pro deklarativní UI, přičemž koncept převzal z přístupu „nech to spadnout” v jazyce Erlang.

Význam pro React Native

V React Native absence Error Boundary znamená úplný pád aplikace při každé chybě vykreslování. Uživatel ztrácí celou aktuální relaci bez možnosti obnovení. Error Boundary v React Native je kriticky důležitý, protože mobilní aplikace se nenačítají znovu jako webové stránky — uživatelská relace je nenávratně ztracena a uživatel musí začít znovu od začátku.

Jak funguje Error Boundary v React Native

Error Boundary funguje na úrovni React stromu. Když podřízená komponenta vyvolá chybu v renderu nebo lifecycle, React nedemontuje celý strom, ale předá řízení nejbližšímu Error Boundary výše v hierarchii. Boundary zavolá getDerivedStateFromError, nastaví state.hasError = true a vykreslí fallback UI místo poškozené větve komponent.

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("Zachyceno hranicí:", error)
        Crashlytics.recordException(error)
    }

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

getDerivedStateFromError nastaví stav pro vykreslení fallback UI — to je statická metoda volaná ve fázi vykreslování před potvrzením změn. componentDidCatch se provádí ve fázi potvrzení a je určen pro vedlejší účinky: logování, odesílání crash-reportů do Crashlytics, analytika. Dvě metody rozdělují odpovědnost mezi správu stavu UI a vedlejší akce.

Vytvoření Error Boundary komponenty

Pro vytvoření Error Boundary je třeba implementovat třídní komponentu s metodami getDerivedStateFromError a/nebo componentDidCatch. Funkční komponenty nemohou být Error Boundary — React podporuje tuto funkčnost pouze pro třídní komponenty, protože je vyžadován přístup k metodám životního cyklu. V knihovně react-error-boundary je k dispozici hotová implementace s hooks API pro pohodlí.

// Příklad použití Error Boundary v React Native
import { ErrorBoundary } from "react-error-boundary"

const FallbackComponent = ({ error, resetError }: FallbackProps) => (
    <View style={styles.container}>
        <Text>Něco se pokazilo</Text>
        <Text>{error.message}</Text>
        <Button title="Zkusit znovu" onPress={resetError} />
    </View>
)

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

Úrovně zabalení — Error Boundary lze umístit na různé úrovně hierarchie. Jeden globální Boundary v kořeni aplikace zobrazí fallback UI při každé chybě, ale navigace bude stále fungovat. Více Boundary na úrovni obrazovek umožňuje izolovat chyby: pokud se jedna obrazovka rozbije, ostatní pracují nezávisle dál. react-error-boundary zjednodušuje mechanismus Reset pomocí hooku useErrorBoundary, což umožňuje resetovat stav bez opětovného načítání. Pro typické projekty je schéma se třemi úrovněmi Boundary považováno za optimální pro React Native aplikace.

Resetování stavu Error Boundary

Po výskytu chyby může uživatel stisknout tlačítko „Zkusit znovu”, které resetuje hasError na false a znovu vykreslí podřízený strom. Mechanismus Reset je důležitý pro obnovení funkčnosti aplikace bez opětovného načítání. V react-error-boundary se používá callback onReset, který může vyčistit mezipaměť, znovu vyžádat data nebo aktualizovat stav výše ve stromu.

Omezení Error Boundary

Error Boundary nezachycuje asynchronní chyby — chyby v setTimeout, setInterval, Promise, async/await. React nemůže zachytit chyby mimo cyklus vykreslování a lifecycle-hooky, protože se provádějí v jiných kontextech provádění. Pro asynchronní chyby je vyžadován samostatný try-catch v handlerech nebo globální handler události unhandledrejection.

Event-handlery

Chyby v onClick, onChange a dalších event-handlerech nejsou zachyceny Error Boundary, protože se provádějí mimo vykreslování React. Zpracování chyb pro event-handlery by mělo být uvnitř samotného handleru pomocí try-catch. Knihovna react-error-boundary poskytuje hook useErrorHandler pro předávání chyb z event-handlerů do nejbližšího Boundary.

Server-side rendering a Next.js

Error Boundary nefunguje na serverové straně v Next.js nebo Gatsby. Metody getDerivedStateFromError a componentDidCatch se nevolají při SSR, protože metody životního cyklu jsou dostupné pouze v prohlížeči. Pro serverové chyby je vyžadována samostatná strategie: try-catch v getServerSideProps, fallback stránky error.js (Next.js 13+) nebo globální middleware.

Nativní vrstva React Native

V React Native Error Boundary nezabraňuje pádu na úrovni nativních modulů. Nativní crash (segfault, out-of-memory, nativní výjimka) nastává na úrovni Objective-C nebo Java a nedosahuje JavaScript vrstvy. Pro nativní crashy je vyžadován Crashlytics NDK (Android) nebo KSCrash (iOS). Error Boundary chrání pouze JavaScript vrstvu aplikace React Native.

Nejlepší postupy Error Boundary

Umístěte Error Boundary na hranice významových modulů: jeden Boundary na obrazovku, jeden na widget externího vývojáře, jeden na složitý formulář. To izoluje chyby a umožňuje uživateli pokračovat v práci ve zbytku aplikace. Kořenový Boundary musí vždy existovat — pro kritické chyby ve společných navigačních komponentách nebo providerech. Každý Boundary odpovídá za svůj fragment rozhraní a neovlivňuje sousední komponenty při výskytu chyby.

Logování a monitorování

Vždy předejte chybu do Crashlytics nebo Sentry přes componentDidCatch. Přidejte kontext: název obrazovky, userId, verzi aplikace, parametry navigace. V Sentry jsou k dispozici breadcrumbs — posloupnost akcí uživatele před chybou. Pro analýzu četnosti non-fatal chyb použijte dashboardy Crashlytics se seskupením podle issue.

Fallback UI

Nepoužívejte „holý” fallback — vytvořte smysluplné rozhraní. Doporučená sada pro React Native: chybová zpráva (uživatelsky přívětivá, ne technická), tlačítko „Zkusit znovu”, odkaz na podporu nebo chat. Vyhněte se prázdnému View — uživatel si bude myslet, že aplikace zcela selhala, a zavře ji. Fallback by měl být začleněn do celkového designu aplikace.

Testování Error Boundary

Testujte každý Error Boundary pomocí React Testing Library nebo React Native Testing Library. Vytvořte trigger komponentu, která vyvolá chybu při vykreslování, a zkontrolujte, že se zobrazí fallback UI. Pro integrační testy použijte storybook s různými stavy Error Boundary: normální, chyba, stav po resetu. Automatizované testování Boundary zaručuje, že při změně komponenty fallback UI nadále správně funguje v production. Pokrytí testy každého Boundary by mělo být povinným požadavkem code review pro React Native projekty.