Error boundary nedir?
- React kursu
- Orta seviye
- Ders 53/80
- 4 dk
Bir alt ağaçtaki hataları yakalayan sınıf bileşenini öğrenirsin.
Error boundary nedir?
Bir bileşen çizilirken hata fırlatırsa React tüm uygulamayı çökertebilir. Error boundary (hata sınırı), alt bileşenlerin hatalarını yakalayan özel bir sınıf bileşenidir.
Hata sınırı, soy ağacındaki hataları componentDidCatch ya da getDerivedStateFromError ile yakalar ve yedek arayüze geçer. Böylece uygulamanın tamamı değil, yalnızca hatalı bölüm etkilenir.
Hata sınırı yalnızca sınıf bileşeni olarak yazılabilir; hook eşdeğeri yoktur. Modern React'te bile hata yakalamak için sınıf kullanılır.
Sınıf bileşeni yapısı
Bir error boundary, state.hasError tutan bir sınıf bileşenidir. getDerivedStateFromError hata durumunu günceller; componentDidCatch ise hatayı kaydeder.
Bileşen render metodunda hasError doğruysa yedek arayüz, değilse children döndürür. Bu sayede hata oluştuğunda otomatik olarak yedek arayüze geçilir.
İki metodun görevi farklıdır: biri state günceller, diğeri yan etki yapar. İkisini birlikte kullanmak yaygındır.
Uygulama Error boundary iskeleti
Aşağıdaki iskeleti tamamla. ErrorBoundary sınıfı yaz; Component'ten extends alsın, getDerivedStateFromError(error) metodu {"{ hasError: true }"} döndürsün, render metodu hasError doğruysa <h1>Hata</h1> değilse children döndürsün. Dışa aktar.
Başlangıç kodu
import { Component } from "react";
// ErrorBoundary sınıfını buraya yazÖrnek çözüm
import { Component } from "react";
class ErrorBoundary extends Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
render() {
if (this.state.hasError) return <h1>Hata</h1>;
return this.props.children;
}
}
export default ErrorBoundary;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Error boundary hangi tür bileşenle yazılır?
- Fonksiyon
- Sınıf Doğru cevap
- Hook
- Memo
Açıklama: Error boundary sınıf bileşeni olarak yazılır.
2 Hata yakalama metodu
static getDerivedStateFromError(____) {
return { hasError: true };
}static getDerivedStateFromError(error) {
return { hasError: true };
}Açıklama: getDerivedStateFromError(error) hata nesnesini alır.
3 Error boundary nedir: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
getDerivedStateFromError |
State günceller |
componentDidCatch |
Hatayı kaydeder |
hasError |
Hata durumu |
children |
Normal içerik |