Error Boundary — bu nima, React Native komponenti va xatolarni boshqarish

Error Boundary nima

Error Boundary — render xatolarida graceful degradation uchun React mexanizmidir. React 16-da (2017) static getDerivedStateFromError yoki componentDidCatch hayot sikl metodlaridan birini implementatsiya qiluvchi o‘rovchi komponent sifatida kiritilgan. Error Boundary foydalanuvchiga bo‘sh oq ekran yoki ilovaning to‘liq ishdan chiqishi o‘rniga mazmunli xabar ko‘rsatishga imkon beradi.

Error Boundary qanday paydo bo‘ldi

React 16 dan oldin, renderdagi har qanday ishlov berilmagan xato butun ilovaning ishdan chiqishiga va butun DOM daraxtining o‘chirilishiga olib kelardi. Veb ilovalarda bu bo‘sh oq ekran, React Native-da esa ilovaning to‘liq crash bo‘lib Home Screen-ga qaytishini anglatardi. React jamoasi Error Boundary-ni deklarativ UI uchun catch-blokining analogi sifatida kiritdi, kontseptsiyani Erlang tilidagi “let it crash” yondashuvidan olib.

React Native uchun ahamiyati

React Native-da Error Boundary ning yo‘qligi har qanday render xatosida ilovaning to‘liq ishdan chiqishi degani. Foydalanuvchi butun joriy seansni tiklash imkoniyatisiz yo‘qotadi. Error Boundary React Native-da juda muhim, chunki mobil ilovalar veb sahifalar kabi qayta yuklanmaydi — foydalanuvchi seansi qaytarib bo‘lmas tarzda yo‘qoladi va foydalanuvchi hammasini boshidan boshlashi kerak.

React Native-da Error Boundary qanday ishlaydi

Error Boundary React daraxti darajasida ishlaydi. Bolak komponent render yoki lifecycle-da xato chiqarganda, React butun daraxtni o‘chirmaydi, balki boshqaruvni iyerarxiyadagi eng yaqin Error Boundary-ga uzatadi. Boundary getDerivedStateFromError-ni chaqiradi, state.hasError = true qiladi va buzilgan komponent shoxchasi o‘rniga fallback UI render qiladi.

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 tomonidan tutildi:", error)
        Crashlytics.recordException(error)
    }

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

getDerivedStateFromError fallback UI render qilish uchun holatni o‘rnatadi — bu o‘zgarishlar tasdiqlanishidan oldin render bosqichida chaqiriladigan statik metoddir. componentDidCatch tasdiqlash bosqichida bajariladi va yon ta’sirlar uchun mo‘ljallangan: loglash, Crashlytics-ga crash-report jo‘natish, analitika. Ikki metod UI holatini boshqarish va yon ta’sirlar o‘rtasida mas’uliyatni bo‘lishadi.

Error Boundary komponentini yaratish

Error Boundary yaratish uchun getDerivedStateFromError va/yoki componentDidCatch metodlari bilan klass komponentini implementatsiya qilish kerak. Funksional komponentlar Error Boundary bo‘la olmaydi — React bu funksionallikni faqat klass komponentlari uchun qo‘llab-quvvatlaydi, chunki hayot sikl metodlariga kirish talab qilinadi. react-error-boundary kutubxonasida qulaylik uchun hook API bilan tayyor implementatsiya mavjud.

// React Native-da Error Boundary dan foydalanish misoli
import { ErrorBoundary } from "react-error-boundary"

const FallbackComponent = ({ error, resetError }: FallbackProps) => (
    <View style={styles.container}>
        <Text>Nimadir noto‘g‘ri ketdi</Text>
        <Text>{error.message}</Text>
        <Button title="Qayta urinish" onPress={resetError} />
    </View>
)

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

O‘rov darajalari — Error Boundary iyerarxiyaning turli darajalarida joylashtirilishi mumkin. Ilova ildizidagi bitta global Boundary har qanday xatoda fallback UI ko‘rsatadi, lekin navigatsiya baribir ishlaydi. Ekran darajasidagi bir nechta Boundary xatolarni izolyatsiya qilishga imkon beradi: agar bitta ekran buzilsa, qolganlari mustaqil ishlashda davom etadi. react-error-boundary useErrorBoundary hook orqali Reset mexanizmini soddalashtiradi, holatni qayta yuklamasdan tiklashga imkon beradi. Oddiy loyihalar uchun uch darajali Boundary sxemasi React Native ilovalari uchun optimal hisoblanadi.

Error Boundary holatini tiklash

Xato yuz bergandan so‘ng, foydalanuvchi “Qayta urinish” tugmasini bosishi mumkin, bu hasError-ni false ga tiklaydi va bolak daraxtini qayta render qiladi. Reset mexanizmi ilovaning ish qobiliyatini qayta yuklamasdan tiklash uchun muhimdir. react-error-boundary-da keshni tozalashi, ma’lumotlarni qayta so‘rashi yoki daraxtda yuqoriroq holatni yangilashi mumkin bo‘lgan onReset callback ishlatiladi.

Error Boundary cheklovlari

Error Boundary asinxron xatolarni tutmaydi — setTimeout, setInterval, Promise, async/await xatolarini. React render sikli va lifecycle-hooklaridan tashqaridagi xatolarni tuta olmaydi, chunki ular boshqa bajarish kontekstlarida bajariladi. Asinxron xatolar uchun handlerlarda alohida try-catch yoki global unhandledrejection hodisa handleri talab qilinadi.

Event-handlerlar

onClick, onChange va boshqa event-handlerlardagi xatolar Error Boundary tomonidan tutilmaydi, chunki ular React renderidan tashqarida bajariladi. Xatolarni boshqarish event-handlerlar uchun try-catch orqali handlerning o‘zida bo‘lishi kerak. react-error-boundary kutubxonasi event-handlerlardan xatolarni eng yaqin Boundary-ga uzatish uchun useErrorHandler hookini taqdim etadi.

Server-side rendering va Next.js

Error Boundary Next.js yoki Gatsby-da server tomonida ishlamaydi. getDerivedStateFromError va componentDidCatch metodlari SSR vaqtida chaqirilmaydi, chunki hayot sikl metodlari faqat brauzerda mavjud. Server xatolari uchun alohida strategiya talab qilinadi: getServerSideProps-da try-catch, error.js fallback sahifalari (Next.js 13+) yoki global middleware.

React Native native qatlami

React Native-da Error Boundary native modul darajasidagi crashlarning oldini olmaydi. Native crash (segfault, out-of-memory, native exception) Objective-C yoki Java darajasida sodir bo‘ladi va JavaScript qatlamiga etib bormaydi. Native crashlar uchun Crashlytics NDK (Android) yoki KSCrash (iOS) talab qilinadi. Error Boundary faqat React Native ilovasining JavaScript qatlamini himoya qiladi.

Error Boundary uchun eng yaxshi amaliyotlar

Error Boundary-ni ma’no modullarining chegaralarida joylashtiring: bitta Boundary ekranga, bitta Boundary uchinchi tomon dasturchisining widgetiga, bitta Boundary murakkab formaga. Bu xatolarni izolyatsiya qiladi va foydalanuvchiga ilonning qolgan qismlarida ishni davom ettirishga imkon beradi. Ildiz Boundary har doim bo‘lishi kerak — umumiy navigatsiya komponentlari yoki providerlardagi kritik xatolar uchun. Har bir Boundary o‘z interfeys fragmenti uchun javobgardir va xato yuz berganda qo‘shni komponentlarga ta’sir qilmaydi.

Loglash va monitoring

Xatoni har doim Crashlytics yoki Sentry-ga componentDidCatch orqali uzating. Kontekst qo‘shing: ekran nomi, userId, ilova versiyasi, navigatsiya parametrlari. Sentry-da breadcrumbs mavjud — xatodan oldingi foydalanuvchi harakatlari ketma-ketligi. Non-fatal xatolar chastotasini tahlil qilish uchun Crashlytics dashboardlaridan issue bo‘yicha guruhlash bilan foydalaning.

Fallback UI

“Yalang” fallback ishlatmang — mazmunli interfeys yarating. Tavsiya etilgan to‘plam React Native uchun: xato xabari (foydalanuvchiga mos, texnik emas), “Qayta urinish” tugmasi, yordam yoki chat havolasi. Bo‘sh View-dan saqlaning — foydalanuvchi ilova butunlay buzilgan deb o‘ylab, uni yopadi. Fallback ilonning umumiy dizayniga integratsiya qilinishi kerak.

Error Boundary testi

Har bir Error Boundary-ni React Testing Library yoki React Native Testing Library bilan test qiling. Render vaqtida xato chiqaradigan trigger komponent yarating va fallback UI ko‘rsatilishini tekshiring. Integratsiya testlari uchun Error Boundary-ning turli holatlari bilan storybook dan foydalaning: normal, xato, tiklashdan keyingi holat. Avtomatlashtirilgan Boundary testi komponent o‘zgarishi paytida fallback UI ning production-da to‘g‘ri ishlashini kafolatlaydi. Har bir Boundary-ning test bilan qoplanishi React Native loyihalari uchun code review-ning majburiy talabi bo‘lishi kerak.