📌 React Error Boundary – Hata Yakalama Bileşeni

React uygulamalarında hatalar (runtime errors) bazen bileşen ağacını bozabilir ve tüm uygulamanın çökmesine yol açabilir. Error Boundary, React’in bu tür hataları yakalayıp yönetmek için sağladığı bir mekanizmadır.

Hataları UI seviyesinde yakalayarak kullanıcıya daha kontrollü bir mesaj gösterebilirsiniz.

1️⃣ Error Boundary Nedir?

• Error Boundary, bir React bileşeni veya alt bileşenlerde meydana gelen JavaScript hatalarını yakalar.
• Hata yakalandığında fallback UI (yedeği, hata mesajı) gösterir.
• Sadece class component olarak yazılabilir; functional component ile direkt olarak kullanılamaz (hook tabanlı çözümler için react-error-boundary gibi kütüphaneler vardır).

Not: Error Boundary, event handler’lar, async kodlar veya server-side rendering hatalarını yakalayamaz.

2️⃣ Temel Kullanım

2.1 Class Component ile Error Boundary

import React, { Component } from "react";

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Hata oluştuğunda state'i güncelle
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Hata loglama
    console.error("Error caught by ErrorBoundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Fallback UI
      return <h2>Bir hata oluştu. Lütfen sayfayı yenileyin.</h2>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Açıklamalar:

• getDerivedStateFromError: Hata oluştuğunda state’i günceller ve render sırasında fallback UI gösterilir.
• componentDidCatch: Hata ve detaylarını loglamak için kullanılır (örn. Sentry, LogRocket).
• this.props.children: Error Boundary ile sarılan bileşenler.

3️⃣ Kullanım Örneği

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>