Error Boundary — mi ez, React Native komponens és hibakezelés

Mi az Error Boundary

Error Boundary egy React mechanizmus a gracefull degradációhoz renderelési hibák esetén. A React 16-ban (2017) került bevezetésre egy wrapper komponensként, amely implementálja a két életciklus metódus egyikét: static getDerivedStateFromError vagy componentDidCatch. Az Error Boundary lehetővé teszi a felhasználó számára, hogy értelmes üzenetet lásson egy üres fehér képernyő vagy az alkalmazás teljes összeomlása helyett.

Hogyan jött létre az Error Boundary

A React 16 előtt minden kezeletlen hiba a renderben az egész alkalmazás összeomlásához vezetett a teljes DOM fa szétszerelésével. Webalkalmazásokban ez üres fehér képernyőt, React Native-ban az alkalmazás teljes összeomlását jelentette a Home Screen-re való visszatéréssel. A React csapat az Error Boundary-t a catch-blokk megfelelőjeként vezette be a deklaratív UI számára, a koncepciót az Erlang nyelv „hadd omoljon össze” megközelítéséből kölcsönözve.

Jelentőség a React Native számára

React Native-ban az Error Boundary hiánya az alkalmazás teljes összeomlását jelenti minden renderelési hibánál. A felhasználó elveszíti a teljes aktuális munkamenetet helyreállítási lehetőség nélkül. Az Error Boundary a React Native-ban kritikus fontosságú, mivel a mobilalkalmazások nem töltődnek újra, mint a weboldalak — a felhasználói munkamenet visszavonhatatlanul elveszik, és a felhasználónak mindent elölről kell kezdenie.

Hogyan működik az Error Boundary a React Native-ban

Error Boundary a React fa szintjén működik. Amikor egy gyermek komponens hibát dob a renderben vagy lifecycle-ben, a React nem szereli szét az egész fát, hanem átadja a vezérlést a legközelebbi Error Boundary-nak feljebb a hierarchiában. A Boundary meghívja a getDerivedStateFromError-t, beállítja a state.hasError = true értéket, és fallback UI-t renderel a hibás komponenság helyett.

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("Elkapva a boundary által:", error)
        Crashlytics.recordException(error)
    }

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

getDerivedStateFromError beállítja az állapotot a fallback UI rendereléséhez — ez egy statikus metódus, amelyet a renderelési fázisban hívnak meg a változtatások rögzítése előtt. componentDidCatch a rögzítési fázisban hajtódik végre, és mellékhatásokra szolgál: naplózás, crash-jelentések küldése a Crashlytics-be, analitika. A két metódus megosztja a felelősséget az UI állapot kezelése és a mellékhatások között.

Error Boundary komponens létrehozása

Az Error Boundary létrehozásához egy osztálykomponenst kell implementálni a getDerivedStateFromError és/vagy componentDidCatch metódusokkal. Funkcionális komponensek nem lehetnek Error Boundary — a React ezt a funkciót csak osztálykomponensek számára támogatja, mivel hozzáférés szükséges az életciklus metódusokhoz. A react-error-boundary könyvtárban elérhető egy kész implementáció hooks API-val a kényelem érdekében.

// Példa Error Boundary használatra React Native-ban
import { ErrorBoundary } from "react-error-boundary"

const FallbackComponent = ({ error, resetError }: FallbackProps) => (
    <View style={styles.container}>
        <Text>Valami hiba történt</Text>
        <Text>{error.message}</Text>
        <Button title="Újra" onPress={resetError} />
    </View>
)

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

Csomagolási szintek — Az Error Boundary a hierarchia különböző szintjein helyezhető el. Egy globális Boundary az alkalmazás gyökerénél fallback UI-t mutat minden hibánál, de a navigáció továbbra is működik. Több Boundary a képernyők szintjén lehetővé teszi a hibák elkülönítését: ha egy képernyő elromlott, a többi függetlenül folytatja a működést. react-error-boundary leegyszerűsíti a Reset mechanizmust a useErrorBoundary hookon keresztül, lehetővé téve az állapot visszaállítását újratöltés nélkül. Tipikus projektek esetén a háromszintű Boundary séma optimálisnak tekinthető a React Native alkalmazások számára.

Az Error Boundary állapotának visszaállítása

A hiba bekövetkezése után a felhasználó megnyomhatja az „Újra” gombot, amely visszaállítja a hasError értéket false-ra és újrarendereli a gyermek fát. Reset mechanizmus fontos az alkalmazás működőképességének helyreállításához újratöltés nélkül. A react-error-boundary-ben egy onReset callback használatos, amely törölheti a gyorsítótárat, újra kérheti az adatokat vagy frissítheti az állapotot feljebb a fában.

Az Error Boundary korlátozásai

Az Error Boundary nem kapja el az aszinkron hibákat — a setTimeout, setInterval, Promise, async/await hibáit. A React nem tudja elkapni a hibákat a render cikluson és lifecycle-hookokon kívül, mivel azok más végrehajtási kontextusokban futnak. Az aszinkron hibákhoz külön try-catch szükséges a handlerekben vagy egy globális handler az unhandledrejection eseményhez.

Event-handlerek

Az onClick, onChange és más event-handlerek hibáit nem kapja el az Error Boundary, mivel azok a React renderelésen kívül futnak. Hibakezelés az event-handlerek számára a handleren belül try-catch segítségével történjen. A react-error-boundary könyvtár biztosítja a useErrorHandler hookot a hibák event-handlerekből a legközelebbi Boundary-be való továbbításához.

Server-side rendering és Next.js

Az Error Boundary nem működik a szerver oldalon Next.js vagy Gatsby esetén. A getDerivedStateFromError és componentDidCatch metódusok nem hívódnak meg SSR-nél, mivel az életciklus metódusok csak a böngészőben érhetők el. A szerverhibákhoz külön stratégia szükséges: try-catch a getServerSideProps-ben, fallback oldalak error.js (Next.js 13+) vagy globális middleware.

React Native natív réteg

React Native-ban az Error Boundary nem akadályozza meg az összeomlást a natív modulok szintjén. Natív crash (segfault, out-of-memory, natív kivétel) az Objective-C vagy Java szintjén történik, és nem éri el a JavaScript réteget. Natív összeomlásokhoz Crashlytics NDK (Android) vagy KSCrash (iOS) szükséges. Az Error Boundary csak a React Native alkalmazás JavaScript rétegét védi.

Error Boundary legjobb gyakorlatok

Helyezze az Error Boundary-t a jelentéssel bíró modulok határaira: egy Boundary per képernyő, egy per harmadik féltől származó widget, egy per összetett űrlap. Ez elkülöníti a hibákat, és lehetővé teszi a felhasználó számára a munka folytatását az alkalmazás többi részében. A gyökér Boundary-nak mindig léteznie kell — kritikus hibák esetére a közös navigációs komponensekben vagy providerekben. Minden Boundary a saját interfész töredékéért felelős, és nem befolyásolja a szomszédos komponenseket hiba bekövetkezésekor.

Naplózás és monitorozás

Mindig továbbítsa a hibát a Crashlytics-be vagy a Sentry-be a componentDidCatch-en keresztül. Adjon hozzá kontextust: képernyő neve, userId, alkalmazás verzió, navigációs paraméterek. A Sentry-ben breadcrumbs érhetők el — a felhasználói műveletek sorrendje a hiba előtt. A nem végzetes hibák gyakoriságának elemzéséhez használja a Crashlytics irányítópultjait issue szerinti csoportosítással.

Fallback UI

Ne használjon „üres” fallback-ot — készítsen értelmes felületet. Ajánlott készlet React Native-hoz: hibaüzenet (felhasználóbarát, nem technikai), „Újra” gomb, támogatási vagy chat link. Kerülje az üres View-t — a felhasználó azt gondolja, hogy az alkalmazás teljesen összeomlott, és bezárja azt. A fallback-ot be kell építeni az alkalmazás általános dizájnjába.

Error Boundary tesztelés

Teszteljen minden Error Boundary-t a React Testing Library vagy React Native Testing Library segítségével. Hozzon létre egy trigger komponenst, amely hibát dob rendereléskor, és ellenőrizze, hogy a fallback UI megjelenik-e. Integrációs tesztekhez használjon storybook-ot az Error Boundary különböző állapotaival: normál, hiba, állapot visszaállítás után. Az automatizált Boundary tesztelés garantálja, hogy a komponens változásakor a fallback UI továbbra is helyesen működik production-ben. Minden Boundary tesztlefedettségének kötelező code review követelménynek kell lennie a React Native projekteknél.