React Error Boundary

React projelerinizde zaman zaman hatalarla karşılaşmanız çok normal, ne kadar test yaparsanız yapın bazen gözden kaçmış ufak şeyler olabiliyor. Bu da kullanıcı deneyimini düşürüyor çünkü React varsayılan olarak bir hata ile karşılaştığında mevcut UI'yı sayfadan tamamen siliyor. Çok basit bir hatadan dolayı bile bütün sayfayı göremez hale gelebiliyor kullanıcı.

İşte bu ve bunun benzeri senaryolarda hataları yönetmek için React bize bir yol sunuyor. Ancak bu yol, sadece class component'i yazarak kullanabildiğimiz bir yol. Fonksiyonel programlama da bunun bir karşılığı yok, çok önemli mi derseniz? Çokta önemli değil, basit bir şekilde kendi hata yakalayıcı component'imizi yazabiliriz.

• Olası bir hata durumunda bunu yakalamak için componentDidCatch() metodunu kullanabiliriz.

Öncelikle, kendi özel hata yakalama component'imizi yazalım.

class ErrorBoundary extends React.Component {

    constuctor(props) {
        super(props)
        this.state = {
            error: false
        }
    }
    
    componentDidCatch(error, info) {
        this.state({
            error
        })
    }
    
    render() {
        // eger bir hata olduysa istedigimiz bir UI dondurelim
        if (this.state.error) {
            return (
                <div>
                    Bir hata olustu:
                    <pre>{this.state.error.stack}</pre>
                </div>
            )
        }
        
        return this.props.children
    }

}

export default ErrorBoundary

Artık bu hata yakalama component'ini hangi component'e özel kullanmak istiyorsanız o component'i bunun içinde çağırmalısınız. Yani örneğin twitter'dan örnek verecek olursak, etiketlerin listelendiği component'i hata yakalayıcı içine alalım, böylece orada bir hata olduğunda sayfanın geri kalanını etkilemeyecektir.

<ErrorBoundary>
    <Tags />
</ErrorBoundary>

İsterseniz component'imizi geliştirip fallback ekleyebiliriz, yani standart bir hata mesajı yerine daha özel bir hata render etmek istersek diye, şöyle implement edebiliriz:

// diger kodlar
render() {
    if (this.state.error) {
        if (this?.props?.fallback) {
            if (typeof this.props.fallback === 'function') {
                return this.props.fallback(this.state.error.stack, this.state.error.message)
            }
            return this.props.fallback
        }
        return (
            <div>
                Bir hata olustu:
                <pre>{this.state.error.stack}</pre>
            </div>
        )
    }
}
// diger kodlar

Artık aşağıdaki iki şekilde de kullanırsak doğru şekilde çalışacaktır:

<ErrorBoundary fallback="Etiketler getirilirken bir hatat olustu!">
    <Tags />
</ErrorBoundary>

ya da

<ErrorBoundary
    fallback={(stack, message) => (
        <div class="error">
            Hata meydana geldi: {message}
            <summary>
                <detail>Ozet icin tiklayin</detail>
                <pre>{stack}</pre>
            </summary>
        </div>
    )}
>
    <Tags />
</ErrorBoundary>

Dikkat edilmesi gerekenler

Hata yakalama component'ini mantıklı yerlerde kullanmaya özen gösterin. Sonuçta bazı hataları yakalasanız bile UI'ı anlamsız kılıyorsa o hatayı yakalayıp kullanıcıyı bilgilendirmek çokta mantıklı değil.

Yakaladığınız hatalar genel olarak küçük boyutta bağımsız component'ler olursa, sayfanın genel akışını durdurmadan sadece o component'lere özel hataları gösterebilir ve anlık hataların önüne beyaz sayfa sorunu olmadan geçebilirsiniz.

Tüm anlatıkklarıma ek olarak, hata yakalama component'ini kendiniz yazmak yerine varolan bir tanesini kullanmak istiyorsanız, aşağıdaki paketi öneririm:
https://www.npmjs.com/package/react-error-boundary