Error boundary nedir?

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.

Örnek çözümü göster

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;

Kendini test et

Error boundary hangi tür bileşenle yazılır?
- Fonksiyon
- Sınıf
- Hook
- Memo
Cevabı göster

Sınıf — Error boundary sınıf bileşeni olarak yazılır.

Hata yakalama metodu

static getDerivedStateFromError(____) {
  return { hasError: true };
}

Cevabı göster

static getDerivedStateFromError(error) {
  return { hasError: true };
}

Error boundary nedir: kavramları eşleştir

getDerivedStateFromError

State günceller
componentDidCatch

Hatayı kaydeder
hasError

Hata durumu
children

Normal içerik

Sıradaki ders: Sınıf bileşeni yapısı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler