Error Boundary — nedir, React Native bileşeni ve hata yönetimi

Error Boundary Nedir

Error Boundary, işleme hataları sırasında kademeli bozulma için bir React mekanizmasıdır. React 16’da (2017), iki yaşam döngüsü yönteminden birini (static getDerivedStateFromError veya componentDidCatch) uygulayan bir sarmalayıcı bileşen olarak tanıtıldı. Error Boundary, kullanıcıya boş beyaz bir ekran veya tam uygulama çökmesi yerine anlamlı bir mesaj göstermeye olanak tanır.

Error Boundary Nasıl Ortaya Çıktı

React 16’dan önce, render’daki herhangi bir işlenmemiş hata, tüm DOM ağacının sökülmesiyle birlikte tam uygulama çökmesine neden oluyordu. Web uygulamalarında bu, boş beyaz bir ekran anlamına geliyordu; React Native’de ise Ana Ekrana dönüşle tam çökme. React ekibi, bildirimsel UI için bir catch bloğu benzeri olarak Error Boundary’yi tanıttı ve kavramı Erlang dilindeki “let it crash” yaklaşımından ödünç aldı.

React Native için Önemi

React Native’de, Error Boundary’nin olmaması, herhangi bir işleme hatasında tam uygulama çökmesi anlamına gelir. Kullanıcı, kurtarma seçeneği olmadan tüm mevcut oturumunu kaybeder. React Native’de Error Boundary kritik derecede önemlidir çünkü mobil uygulamalar web sayfaları gibi yeniden yüklenemez — kullanıcı oturumu geri dönülmez şekilde kaybolur ve kullanıcı en baştan başlamak zorunda kalır.

React Native’de Error Boundary Nasıl Çalışır

Error Boundary, React ağacı düzeyinde çalışır. Bir alt bileşen, render veya yaşam döngüsünde bir hata fırlattığında, React tüm ağacı sökmez, bunun yerine kontrolü hiyerarşideki en yakın Error Boundary’ye devreder. Boundary, getDerivedStateFromError’u çağırır, state.hasError = true olarak ayarlar ve bozuk bileşen dalı yerine yedek arayüzü işler.

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("Caught by boundary:", error)
        Crashlytics.recordException(error)
    }

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

getDerivedStateFromError, yedek arayüzü işlemek için durumu ayarlar — bu, değişiklikleri kaydetmeden önce işleme aşamasında çağrılan statik bir yöntemdir. componentDidCatch kaydetme aşamasında yürütülür ve yan etkiler için tasarlanmıştır: günlük kaydı, Crashlytics’e çökme raporları gönderme, analitik. İki yöntem, UI durum yönetimi ve yan etkiler arasındaki sorumluluğu ayırır.

Error Boundary Bileşeni Oluşturma

Error Boundary oluşturmak için getDerivedStateFromError ve/veya componentDidCatch yöntemlerine sahip bir sınıf bileşeni uygulamanız gerekir. İşlevsel bileşenler Error Boundary olamaz — React bu işlevselliği yalnızca sınıf bileşenleri için destekler çünkü yaşam döngüsü yöntemlerine erişim gerekir. react-error-boundary kütüphanesi, kolaylık için hook tabanlı bir API ile hazır bir uygulama sağlar.

// React Native’de Error Boundary Kullanım Örneği
import { ErrorBoundary } from "react-error-boundary"

const FallbackComponent = ({ error, resetError }: FallbackProps) => (
    <View style={styles.container}>
        <Text>Bir şeyler ters gitti</Text>
        <Text>{error.message}</Text>
        <Button title="Yeniden Dene" onPress={resetError} />
    </View>
)

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

Sarmalama Düzeyleri — Error Boundary, hiyerarşinin farklı düzeylerine yerleştirilebilir. Uygulama kökündeki tek bir küresel Boundary, herhangi bir hatada yedek arayüzü gösterecektir, ancak gezinme korunacaktır. Ekran düzeyindeki birden çok Boundary, hataları yalıtmayı sağlar: bir ekran bozulursa, diğerleri bağımsız olarak çalışmaya devam eder. react-error-boundary, useErrorBoundary hook’u aracılığıyla sıfırlama mekanizmasını basitleştirir ve yeniden yüklemeden durumu sıfırlamaya olanak tanır. Tipik projeler için, React Native uygulamalarında üç düzeyli bir Boundary şeması optimal kabul edilir.

Error Boundary Durumunu Sıfırlama

Bir hata oluştuktan sonra, kullanıcı hasError’ı false olarak sıfırlayan ve alt ağacı yeniden işleyen “Yeniden Dene” düğmesine tıklayabilir. Sıfırlama mekanizması, yeniden yüklemeden uygulama işlevselliğini geri yüklemek için önemlidir. react-error-boundary’de, önbelleği temizleyebilen, verileri yeniden getirebilen veya ağaçta yukarıdaki durumu güncelleyebilen onReset geri çağrımı kullanılır.

Error Boundary Sınırlamaları

Error Boundary, eşzamansız hataları yakalamaz — setTimeout, setInterval, Promise, async/await içindeki hatalar. React, işleme döngüsü ve yaşam döngüsü hook’larının dışındaki hataları engelleyemez çünkü bunlar farklı yürütme bağlamlarında çalıştırılır. Eşzamansız hatalar için, işleyicilerde ayrı bir try-catch veya küresel bir unhandledrejection olay işleyicisi gereklidir.

Olay İşleyicileri

onClick, onChange ve diğer olay işleyicilerindeki hatalar, React işlemesinin dışında yürütüldükleri için Error Boundary tarafından yakalanmaz. Olay işleyicileri için hata yönetimi, try-catch kullanılarak işleyicinin içinde yapılmalıdır. react-error-boundary kütüphanesi, olay işleyicilerinden en yakın Boundary’ye hata fırlatmak için useErrorHandler hook’unu sağlar.

Sunucu Tarafı İşleme ve Next.js

Error Boundary, Next.js veya Gatsby’de sunucu tarafında çalışmaz. getDerivedStateFromError ve componentDidCatch yöntemleri SSR sırasında çağrılmaz çünkü yaşam döngüsü yöntemleri yalnızca tarayıcıda kullanılabilir. Sunucu hataları için ayrı bir strateji gereklidir: getServerSideProps’te try-catch, error.js yedek sayfaları (Next.js 13+), veya küresel middleware.

React Native Yerel Katmanı

React Native’de Error Boundary, yerel modül düzeyindeki çökmeleri önlemez. Bir yerel çökme (segfault, bellek yetersiz, yerel istisna) Objective-C veya Java düzeyinde meydana gelir ve JavaScript katmanına ulaşmaz. Yerel çökmeler için Crashlytics NDK (Android) veya KSCrash (iOS) gereklidir. Error Boundary, yalnızca React Native uygulamasının JavaScript katmanını korur.

Error Boundary En İyi Uygulamaları

Error Boundary’yi mantıksal modüllerin sınırlarına yerleştirin: her ekran için bir Boundary, her üçüncü taraf widgetı için bir, her karmaşık form için bir. Bu, hataları yalıtır ve kullanıcının uygulamanın diğer bölümlerinde çalışmaya devam etmesine olanak tanır. Bir kök Boundary her zaman mevcut olmalıdır — ortak gezinme bileşenlerinde veya sağlayıcılardaki kritik hatalar için. Her Boundary, kendi arayüz parçasından sorumludur ve bir hata oluştuğunda komşu bileşenleri etkilemez.

Günlük Kaydı ve İzleme

Hatayı her zaman componentDidCatch aracılığıyla Crashlytics veya Sentry’ye iletin. Bağlam ekleyin: ekran adı, userId, uygulama sürümü, gezinme parametreleri. Sentry’de, hataya yol açan kullanıcı eylemleri dizisi olan breadcrumbs mevcuttur. Ölümcül olmayan hataların sıklığını analiz etmek için, soruna göre gruplandırma ile Crashlytics panolarını kullanın.

Yedek Arayüz

Çıplak bir yedek kullanmayın — anlamlı bir arayüz oluşturun. React Native için Önerilen set: hata mesajı (kullanıcı dostu, teknik değil), bir “Yeniden Dene” düğmesi, destek veya sohbet bağlantısı. Boş bir View’den kaçının — kullanıcı uygulamanın tamamen çöktüğünü düşünecek ve kapatacaktır. Yedek, uygulamanın genel tasarımına entegre edilmelidir.

Error Boundary Test Etme

Her Error Boundary’yi React Testing Library veya React Native Testing Library kullanarak test edin. İşleme sırasında hata fırlatan bir tetikleyici bileşen oluşturun ve yedek arayüzün görüntülendiğini doğrulayın. Entegrasyon testleri için, farklı Error Boundary durumlarıyla (normal, hata, sıfırlama sonrası) storybook kullanın. Boundary’nin otomatik testi, bileşen değiştiğinde yedek arayüzün ürenimde doğru şekilde çalışmaya devam etmesini sağlar. Her Boundary için test kapsamı, React Native projelerinde kod incelemesinin zorunlu bir gereksinimi olmalıdır.