Error Boundary — ano ito, komponent ng React Native at paghawak ng error

Ano ang Error Boundary

Error Boundary ay isang mekanismo ng React para sa graceful degradation sa mga rendering error. Ipinakilala sa React 16 (2017) bilang isang wrapper komponent na nagpapatupad ng isa sa dalawang lifecycle methods: static getDerivedStateFromError o componentDidCatch. Pinapayagan ng Error Boundary ang user na makita ang isang makabuluhang mensahe sa halip ng blangkong puting screen o kumpletong pag-crash ng application.

Paano lumitaw ang Error Boundary

Bago ang React 16, bawat hindi nahawakang error sa render ay humantong sa pag-crash ng buong application na may pagtanggal ng buong DOM tree. Sa web applications ito ay nangangahulugang blangkong puting screen, sa React Native — kumpletong pag-crash ng application na may pagbalik sa Home Screen. Ipinakilala ng React team ang Error Boundary bilang katumbas ng catch-block para sa declarative UI, na humiram ng konsepto mula sa “let it crash” approach sa wikang Erlang.

Kahalagahan para sa React Native

Sa React Native, ang kawalan ng Error Boundary ay nangangahulugang kumpletong pag-crash ng application sa bawat rendering error. Nawawalan ng user ang buong kasalukuyang session nang walang posibilidad ng pagbawi. Ang Error Boundary sa React Native ay kritikal, dahil ang mobile applications ay hindi nagre-reload tulad ng mga web page — ang user session ay hindi na mababawi at ang user ay kailangang magsimula muli.

Paano gumagana ang Error Boundary sa React Native

Error Boundary ay gumagana sa antas ng React tree. Kapag ang child komponent ay nagtapon ng error sa render o lifecycle, hindi tinatanggal ng React ang buong tree, sa halip ay inililipat ang kontrol sa pinakamalapit na Error Boundary sa itaas ng hierarchy. Ang Boundary ay tumatawag ng getDerivedStateFromError, nagtatakda ng state.hasError = true at nagre-render ng fallback UI sa halip ng sirang branch ng mga 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("Nahuli ng boundary:", error)
        Crashlytics.recordException(error)
    }

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

getDerivedStateFromError ay nagtatakda ng estado para sa pag-render ng fallback UI — ito ay isang static na pamamaraan na tinatawag sa yugto ng rendering bago ang commit ng mga pagbabago. componentDidCatch ay isinasagawa sa yugto ng commit at nilayon para sa mga side effect: pag-log, pagpapadala ng crash-report sa Crashlytics, analytics. Dalawang pamamaraan ang naghahati ng responsibilidad sa pagitan ng pamamahala ng estado ng UI at mga side action.

Paglikha ng Error Boundary komponent

Upang lumikha ng Error Boundary, kailangan mong ipatupad ang isang class komponent na may mga pamamaraan na getDerivedStateFromError at/o componentDidCatch. Ang mga functional komponent ay hindi maaaring maging Error Boundary — sinusuportahan ng React ang functionality na ito para lamang sa class komponents, dahil kinakailangan ang access sa lifecycle methods. Sa library na react-error-boundary ay mayroong handa nang implementasyon na may hooks API para sa kaginhawahan.

// Halimbawa ng paggamit ng Error Boundary sa React Native
import { ErrorBoundary } from "react-error-boundary"

const FallbackComponent = ({ error, resetError }: FallbackProps) => (
    <View style={styles.container}>
        <Text>May mali</Text>
        <Text>{error.message}</Text>
        <Button title="Subukan Muli" onPress={resetError} />
    </View>
)

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

Mga antas ng wrapper — Ang Error Boundary ay maaaring ilagay sa iba't ibang antas ng hierarchy. Isang global Boundary sa root ng application ay magpapakita ng fallback UI sa bawat error, ngunit ang nabigasyon ay gagana pa rin. Maramihang Boundary sa antas ng screen ay nagpapahintulot ng paghihiwalay ng mga error: kung ang isang screen ay nasira, ang iba ay patuloy na gumagana nang independyente. react-error-boundary ay pinapasimple ang Reset mechanism sa pamamagitan ng useErrorBoundary hook, na nagpapahintulot ng pag-reset ng estado nang hindi nagre-reload. Para sa tipikal na proyekto, ang schema na may tatlong antas ng Boundary ay itinuturing na optimal para sa React Native applications.

Pag-reset ng estado ng Error Boundary

Pagkatapos ng paglitaw ng error, ang user ay maaaring pindutin ang “Subukan Muli” na button, na nagre-reset ng hasError sa false at muling nagre-render ng child tree. Reset mechanism ay mahalaga para sa pagpapanumbalik ng functionality ng application nang hindi nagre-reload. Sa react-error-boundary ay ginagamit ang onReset callback, na maaaring mag-clear ng cache, muling humiling ng data o mag-update ng estado sa itaas ng tree.

Mga Limitasyon ng Error Boundary

Ang Error Boundary ay hindi humuhuli ng asynchronous error — mga error sa setTimeout, setInterval, Promise, async/await. Hindi mahuhuli ng React ang mga error sa labas ng render cycle at lifecycle-hooks, dahil ang mga ito ay isinasagawa sa ibang execution contexts. Para sa asynchronous error ay kinakailangan ang hiwalay na try-catch sa mga handler o global handler para sa unhandledrejection event.

Event-handler

Ang mga error sa onClick, onChange at iba pang event-handler ay hindi nahuhuli ng Error Boundary, dahil ang mga ito ay isinasagawa sa labas ng React rendering. Paghawak ng error para sa mga event-handler ay dapat nasa loob ng handler mismo sa pamamagitan ng try-catch. Ang library na react-error-boundary ay nagbibigay ng useErrorHandler hook para sa pagpapasa ng mga error mula sa event-handler patungo sa pinakamalapit na Boundary.

Server-side rendering at Next.js

Ang Error Boundary ay hindi gumagana sa server side sa Next.js o Gatsby. Ang mga pamamaraan na getDerivedStateFromError at componentDidCatch ay hindi tinatawag sa SSR, dahil ang lifecycle methods ay magagamit lamang sa browser. Para sa server errors ay kinakailangan ang hiwalay na strategy: try-catch sa getServerSideProps, fallback pages error.js (Next.js 13+) o global middleware.

React Native native layer

Sa React Native, ang Error Boundary ay hindi pumipigil sa crash sa antas ng native modules. Native crash (segfault, out-of-memory, native exception) ay nangyayari sa antas ng Objective-C o Java at hindi umaabot sa JavaScript layer. Para sa native crashes ay kinakailangan ang Crashlytics NDK (Android) o KSCrash (iOS). Pinoprotektahan lamang ng Error Boundary ang JavaScript layer ng React Native application.

Pinakamahusay na kasanayan sa Error Boundary

Ilagay ang Error Boundary sa mga hangganan ng makabuluhang modules: isang Boundary bawat screen, isa bawat widget ng third-party developer, isa bawat komplikadong form. Ito ay naghihiwalay ng mga error at nagpapahintulot sa user na magpatuloy sa pagtatrabaho sa ibang bahagi ng application. Ang root Boundary ay dapat laging naroroon — para sa mga kritikal na error sa karaniwang navigation komponents o providers. Bawat Boundary ay responsable para sa sarili nitong interface fragment at hindi nakakaapekto sa mga kalapit na komponent sa paglitaw ng error.

Pag-log at monitoring

Palaging ipasa ang error sa Crashlytics o Sentry sa pamamagitan ng componentDidCatch. Magdagdag ng konteksto: pangalan ng screen, userId, bersyon ng application, navigation parameters. Sa Sentry ay available ang breadcrumbs — pagkakasunod-sunod ng mga aksyon ng user bago ang error. Para sa pagsusuri ng dalas ng non-fatal errors, gamitin ang Crashlytics dashboards na may pagpapangkat ayon sa issue.

Fallback UI

Huwag gumamit ng “walang laman” na fallback — gumawa ng makabuluhang interface. Inirerekomendang set para sa React Native: mensahe ng error (user-friendly, hindi teknikal), “Subukan Muli” na button, link sa support o chat. Iwasan ang walang laman na View — iisipin ng user na ang application ay ganap na nasira at isasara ito. Ang fallback ay dapat isama sa pangkalahatang disenyo ng application.

Pagsubok ng Error Boundary

Subukan ang bawat Error Boundary gamit ang React Testing Library o React Native Testing Library. Gumawa ng trigger komponent na nagtatapon ng error sa pag-render at suriin kung ang fallback UI ay ipinapakita. Para sa integration tests, gamitin ang storybook na may iba't ibang estado ng Error Boundary: normal, error, estado pagkatapos ng reset. Ang automated na pagsubok ng Boundary ay ginagarantiyahan na sa pagbabago ng komponent, ang fallback UI ay patuloy na gumagana nang tama sa production. Ang test coverage ng bawat Boundary ay dapat na isang mandatoryong requirement ng code review para sa React Native projects.