Error Boundary — bu nədir, React Native komponenti və xəta idarəetməsi

Error Boundary nədir

Error Boundary — render xətaları zamanı graceful degradation üçün React mexanizmidir. React 16-da (2017) static getDerivedStateFromError və ya componentDidCatch lifecycle metodlarından birini implementasiya edən komponent-sarğı kimi təqdim edilmişdir. Error Boundary istifadəçiyə boş ağ ekran və ya tətbiqin tam çökməsi əvəzinə mənalı mesaj göstərməyə imkan verir.

Error Boundary necə yarandı

React 16-dan əvvəl renderdə hər hansı idarə olunmayan xəta bütün tətbiqin çökməsinə və bütün DOM ağacının silinməsinə səbəb olurdu. Veb tətbiqlərdə bu boş ağ ekran, React Native-də isə tətbiqin tam çökərək Ana Ekrana qayıtması demək idi. React komandası Error Boundary-i deklarativ UI üçün catch-blokun analoqu kimi təqdim etdi, konsepsiyanı Erlang dilindəki “let it crash” yanaşmasından götürərək.

React Native üçün əhəmiyyəti

React Native-də Error Boundary-in olmaması hər hansı render xətasında tətbiqin tam çökməsi deməkdir. İstifadəçi bütün cari seansı bərpa imkanı olmadan itirir. Error Boundary React Native-də kritik əhəmiyyət daşıyır, çünki mobil tətbiqlər veb səhifələr kimi yenidən yüklənmir — istifadəçi seansı geri qaytarılmaz şəkildə itirilir və istifadəçi hər şeyə yenidən başlamalı olur.

React Native-də Error Boundary necə işləyir

Error Boundary React ağacı səviyyəsində işləyir. Uşaq komponent render və ya lifecycle zamanı xəta atdıqda, React bütün ağacı silmir, əksinə idarəetməni iyerarxiyada yuxarıdakı ən yaxın Error Boundary-ə ötürür. Boundary getDerivedStateFromError-u çağırır, state.hasError = true təyin edir və sınmış komponent budağı əvəzinə fallback UI render edir.

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("Boundary tərəfindən tutuldu:", error)
        Crashlytics.recordException(error)
    }

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

getDerivedStateFromError fallback UI render etmək üçün vəziyyəti təyin edir — bu, dəyişikliklər təsdiqlənməzdən əvvəl render mərhələsində çağırılan statik metoddur. componentDidCatch təsdiqləmə mərhələsində icra olunur və yan təsirlər üçün nəzərdə tutulub: loglama, Crashlytics-ə crash-report göndərmə, analitika. İki metod UI vəziyyətinin idarə edilməsi ilə yan təsirlər arasında məsuliyyəti bölüşdürür.

Error Boundary komponentinin yaradılması

Error Boundary yaratmaq üçün getDerivedStateFromError və/və ya componentDidCatch metodları ilə klas komponenti implementasiya etmək lazımdır. Funksional komponentlər Error Boundary ola bilməz — React bu funksionallığı yalnız klas komponentləri üçün dəstəkləyir, çünki lifecycle metodlarına giriş tələb olunur. react-error-boundary kitabxanasında rahatlıq üçün hook API ilə hazır implementasiya mövcuddur.

// React Native-də Error Boundary istifadə nümunəsi
import { ErrorBoundary } from "react-error-boundary"

const FallbackComponent = ({ error, resetError }: FallbackProps) => (
    <View style={styles.container}>
        <Text>Nəsə səhv getdi</Text>
        <Text>{error.message}</Text>
        <Button title="Təkrar" onPress={resetError} />
    </View>
)

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

Sarğı səviyyələri — Error Boundary iyerarxiyanın müxtəlif səviyyələrində yerləşdirilə bilər. Tətbiqin kökündə bir qlobal Boundary hər hansı xətada fallback UI göstərəcək, lakin naviqasiya yenə də işləyəcək. Ekran səviyyəsində bir neçə Boundary xətaları izolə etməyə imkan verir: bir ekran sındıqda, digərləri müstəqil işləməyə davam edir. react-error-boundary useErrorBoundary hooku vasitəsilə Reset mexanizmini sadələşdirir, vəziyyəti yenidən yükləmədən sıfırlamağa imkan verir. Tipik layihələr üçün üç səviyyəli Boundary sxemi React Native tətbiqləri üçün optimal hesab olunur.

Error Boundary vəziyyətinin sıfırlanması

Xəta baş verdikdən sonra istifadəçi “Təkrar” düyməsini basa bilər ki, bu da hasError-ı false edir və uşaq ağacını yenidən render edir. Reset mexanizmi tətbiqin iş qabiliyyətini yenidən yükləmədən bərpa etmək üçün vacibdir. react-error-boundary-də keşi təmizləyə, məlumatları yenidən sorğulaya və ya ağacda yuxarı vəziyyəti yeniləyə bilən onReset callback istifadə olunur.

Error Boundary məhdudiyyətləri

Error Boundary asinxron xətaları tutmur — setTimeout, setInterval, Promise, async/await xətalarını. React render dövrü və lifecycle hooklarından kənar xətaları tuta bilməz, çünki onlar digər icra kontekstlərində yerinə yetirilir. Asinxron xətalar üçün handlerlərdə ayrıca try-catch və ya qlobal unhandledrejection hadisə handleri tələb olunur.

Event handlerlər

onClick, onChange və digər event handlerlərdəki xətalar Error Boundary tərəfindən tutulmur, çünki onlar React renderindən kənarda icra olunur. Xəta idarəetməsi event handlerlər üçün try-catch vasitəsilə handlerin daxilində olmalıdır. react-error-boundary kitabxanası event handlerlərdən xətaları ən yaxın Boundary-ə ötürmək üçün useErrorHandler hookunu təqdim edir.

Server-side rendering və Next.js

Error Boundary Next.js və ya Gatsby-də server tərəfində işləmir. getDerivedStateFromError və componentDidCatch metodları SSR zamanı çağırılmır, çünki lifecycle metodları yalnız brauzerdə mövcuddur. Server xətaları üçün ayrıca strategiya tələb olunur: getServerSideProps-də try-catch, error.js fallback səhifələri (Next.js 13+) və ya qlobal middleware.

React Native nativ təbəqəsi

React Native-də Error Boundary nativ modul səviyyəsində çökmələrin qarşısını almır. Nativ crash (segfault, out-of-memory, nativ exception) Objective-C və ya Java səviyyəsində baş verir və JavaScript təbəqəsinə çatmır. Nativ crashlər üçün Crashlytics NDK (Android) və ya KSCrash (iOS) tələb olunur. Error Boundary yalnız React Native tətbiqinin JavaScript təbəqəsini qoruyur.

Error Boundary üçün ən yaxşı təcrübələr

Error Boundary-i məna modullarının sərhədlərində yerləşdirin: bir Boundary ekrana, bir Boundary üçüncü tərəf developerinin widgetinə, bir Boundary mürəkkəb formaya. Bu, xətaları izolə edir və istifadəçiyə tətbiqin qalan hissələrində işi davam etdirməyə imkan verir. Kök Boundary həmişə olmalıdır — ümumi naviqasiya komponentlərində və ya providerlərdə kritik xətalar halında. Hər bir Boundary öz interfeys fraqmentinə cavabdehdir və xəta baş verdikdə qonşu komponentlərə təsir etmir.

Loglama və monitorinq

Xətanı həmişə Crashlytics və ya Sentry-ə componentDidCatch vasitəsilə ötürün. Kontekst əlavə edin: ekran adı, userId, tətbiq versiyası, naviqasiya parametrləri. Sentry-də breadcrumbs mövcuddur — xətadan əvvəl istifadəçi hərəkətlərinin ardıcıllığı. Non-fatal xətaların tezliyini təhlil etmək üçün issue-ya görə qruplaşdırma ilə Crashlytics dashboardlarından istifadə edin.

Fallback UI

“Çılpaq” fallback istifadə etməyin — mənalı interfeys yaradın. Tövsiyə olunan dəst React Native üçün: xəta mesajı (istifadəçi dostu, texniki deyil), “Təkrar” düyməsi, dəstək və ya çat linki. Boş View-dən qaçın — istifadəçi tətbiqin tamamilə sındığını düşünüb onu bağlayacaq. Fallback tətbiqin ümumi dizaynına inteqrasiya edilməlidir.

Error Boundary testi

Hər bir Error Boundary-i React Testing Library və ya React Native Testing Library ilə test edin. Render zamanı xəta atan triger komponent yaradın və fallback UI-nin göstərildiyini yoxlayın. İnteqrasiya testləri üçün Error Boundary-in müxtəlif vəziyyətləri ilə storybook istifadə edin: normal, xəta, sıfırlamadan sonrakı vəziyyət. Avtomatlaşdırılmış Boundary testi komponent dəyişikliyi zamanı fallback UI-nin production-da düzgün işləməsini təmin edir. Hər bir Boundary-in testlə əhatə olunması React Native layihələri üçün code review-un məcburi tələbi olmalıdır.