Bir süre React ile çalıştıysanız, "Bir hata sınırı eklemeyi düşünün" yazan bir mesajla karşılaşmış olabilirsiniz. hata işleme davranışını özelleştirmek için ağacınız. Bileşenleriniz her kullanıldığında bunu tarayıcı konsolunuzda görmüş olabilirsiniz. kaza.
React, bir hata oluştuğunda daha iyi bir kullanıcı deneyimi sağlamak için bir hata sınırı kullanılmasını önerir.
React'te Hata Sınırı Sınıfı Nedir?
Hata sınırları şu şekilde çalışır: vanilya JavaScript'inde try/catch bloğu. Fark, React bileşenlerinde oluşan hataları yakalamalarıdır. Bir UI bileşeninde bir hata oluşursa, React o bileşen içindeki ağacın bağlantısını keser ve onu, tanımladığınız geri dönüş UI'si ile değiştirir. Bu, bir hatanın yalnızca oluştuğu bileşeni etkilediği ve uygulamanın geri kalanının beklendiği gibi çalıştığı anlamına gelir.
Göre Tepki belgeleri, hata sınırı sınıfları şu alanlardaki hataları yakalamaz:
- Etkinlik sahipleri.
- Asenkron kod.
- Sunucu tarafı kodu.
- Hata sınırının kendisinde (alt öğeleri yerine) atılan hatalar.
Yukarıdaki hatalar için try/catch bloğunu kullanabilirsiniz.
Örneğin, meydana gelen bir hatayı yakalamak için olay işleyicisi, aşağıdaki kodu kullanın:
işlevOlay Bileşeni() {
sabit [hata, setError] = useState(hükümsüz)sabit handleClick = () => {
denemek {
// Bir şey yap
} yakalamak (hata) {
setError (hata)
}
}
geri dönmek (
<>
<div>{hata? hata: ""}div>
<düğmetıklamada={handleClick}>Düğmedüğme>
)
}
Yalnızca React bileşenlerindeki hataları yakalamak için hata sınırlarını kullanın.
Hata Sınırı Sınıfı Oluşturma
Aşağıdaki yöntemlerden birini veya her ikisini içeren bir sınıf tanımlayarak bir hata sınırı oluşturabilirsiniz:
- statik getDerivedStateFromError()
- componentDidCatch()
getDerivedStateFromError() işlevi, hata yakalandığında bileşen durumunu günceller, siz ise hata bilgilerini konsola kaydetmek için componentDidCatch()'i kullanabilirsiniz. Hataları bir hata raporlama hizmetine de gönderebilirsiniz.
Aşağıda, basit bir hata sınırı sınıfının nasıl oluşturulacağını gösteren bir örnek verilmiştir.
sınıfHata SınırıuzanırTepki.Bileşen{
inşaatçı(sahne) {
Süper(sahne);
Bu.durum = { hata: YANLIŞ };
}statikgetDerivedStateFromError(hata){
// Bir sonraki işlemenin geri dönüş kullanıcı arayüzünü göstermesi için durumu güncelleyin.
geri dönmek { hata: hata };
}componentDidCatch (hata, errorInfo) {
// Hatayı bir hata raporlama hizmetine kaydedin
}render() {
eğer (Bu.durum.hata) {
// Burada özel bir yedek kullanıcı arayüzü oluşturun
geri dönmek<h1>Bir sorun var gibi görünüyor.h1>;
}
geri dönmekBu.props.çocuklar;
}
}
ihracatvarsayılan Hata Sınırı;
Bir hata oluştuğunda, getDerivedStateFromError() durumu güncelleyecek ve sonuç olarak yedek kullanıcı arabirimini görüntüleyecek bir yeniden oluşturmayı tetikleyecektir.
Hata sınırı sınıfını sıfırdan oluşturmak istemiyorsanız, tepki hatası sınırı NPM paketi. Bu paket, hatalara yol açabileceğini düşündüğünüz bileşenleri saran ErrorBoundary bileşenini sağlar.
Hata Sınırı Sınıfını Kullanma
Hataları işlemek için bileşenleri hata sınırı sınıfı bileşeniyle sarın. Üst düzey bileşeni veya tek tek bileşenleri sarabilirsiniz.
Üst düzey bileşeni sararsanız, hata sınırı sınıfı, React uygulamasındaki tüm bileşenler tarafından atılan hataları işleyecektir.
<Hata Sınırı>
<Uygulama/>
Hata Sınırı>
Tek bir bileşeni bir ErrorBoundary ile sararsanız, o bileşendeki bir hata başka bir bileşenin nasıl işlendiğini etkilemez.
<Hata Sınırı>
<Profil/>
Hata Sınırı>
Örneğin, profil bileşenindeki bir hata, Hero bileşeni gibi başka bir bileşenin nasıl oluşturulduğunu etkilemez. Profil bileşeni çökebilirken, uygulamanın geri kalanı düzgün çalışacaktır. Bu, React tarafından sağlanan genel beyaz geri dönüş ekranını oluşturmaktan çok daha iyidir.
JavaScript'te Hataları İşleme
Programlama hataları, geliştiriciler ve kullanıcılar için sinir bozucu olabilir. Hataların işlenememesi, kullanıcılarınızı anlaşılması zor hata mesajlarıyla çirkin bir kullanıcı arayüzüne maruz bırakabilir.
React bileşeninizi oluştururken, kullanıcı dostu hata mesajlarını görüntülemek için sıfırdan veya tepki-hata-sınır paketini kullanarak bir hata sınırı sınıfı oluşturun.