React’te Hata Sınırları (Error Boundaries): Uygulama Çökmesini Engelle, İyi Bir Fallback Deneyimi Tasarla

React uygulamalarında her şey yolundayken bile “beklenmeyen” bir hata tüm ekranı beyaza çevirebilir. Bu noktada Error Boundary (Hata Sınırı), uygulamanın tamamen çökmesini engelleyip hatayı izole etmenizi ve kullanıcıya anlamlı bir fallback UI sunmanızı sağlar.

Error Boundary nedir, neyi yakalar?

Error Boundary; render sırasında, lifecycle aşamalarında veya child component constructor’larında oluşan hataları yakalar. Böylece hata, tüm uygulamayı devirmek yerine belirlediğiniz sınır içinde yönetilir.

Yakalamadıkları (bilerek):

• Event handler içindeki hatalar (örn. onClick)
• Asenkron kod hataları (örn. fetch içinde)
• Error Boundary’nin kendi hataları

Not: React’te Error Boundary şu an için ağırlıklı olarak class component yaklaşımıyla uygulanır. (Hook tabanlı alternatifler için kütüphaneler var.)

Basit bir Error Boundary bileşeni

Aşağıdaki bileşen, hata oluşunca bir fallback ekranı gösterir ve opsiyonel olarak hatayı log’lar:

import React from "react";

export class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

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

  componentDidCatch(error, errorInfo) {
    // Burada Sentry/Datadog vb. bir servise gönderebilirsiniz
    // logErrorToService({ error, errorInfo });
    console.error("Caught by ErrorBoundary:", error, errorInfo);
  }

  handleRetry = () => {
    this.setState({ hasError: false, error: null });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div style={{ padding: 16 }}>
          <h2>Bir şeyler ters gitti.</h2>
          <p>Sayfayı yenilemeden devam edebilmeniz için bu bölümü yeniden yükleyebilirsiniz.</p>
          <button onClick={this.handleRetry}>Tekrar dene</button>
        </div>
      );
    }

    return this.props.children;
  }
}

Sınırı nereye koymalı?

En sık hata yapılan nokta: Error Boundary’yi uygulamanın en tepesine koyup her şeyi tek fallback’e bağlamak. Bu, kullanıcıyı gereksiz yere “tam ekran hata”ya iter.

Daha iyi yaklaşım: kritik olmayan bölgeleri izole etmek.

Örnek: Bir sayfada ürün listesi, öneriler ve yorumlar var. Yorumlar patlarsa tüm sayfa gitmesin.

import { ErrorBoundary } from "./ErrorBoundary";

function ProductPage() {
  return (
    <div>
      <ProductHeader />
      <ProductDetails />

      <ErrorBoundary>
        <Recommendations />
      </ErrorBoundary>

      <ErrorBoundary>
        <Reviews />
      </ErrorBoundary>
    </div>
  );
}

Bu sayede:

• Header/Details çalışmaya devam eder
• Sadece sorunlu widget fallback’e düşer
• Kullanıcı işini bitirebilir (satın alma, form doldurma vb.)

Fallback tasarımında 3 pratik ipucu

1. Kullanıcıya aksiyon verin: “Tekrar dene”, “Raporla”, “Ana sayfaya dön”.
2. Teknik hata metnini gizleyin: Prod ortamda stack trace göstermek güvenlik ve UX açısından kötü.
3. Durumu sıfırlayın: Retry butonu gerçekten yeniden denemeli (state reset, gerekirse key ile remount).

key ile yeniden mount örneği:

function RetryableArea() {
  const [seed, setSeed] = React.useState(0);

  return (
    <>
      <button onClick={() => setSeed((s) => s + 1)}>Alanı yeniden yükle</button>
      <ErrorBoundary key={seed}>
        <FlakyWidget />
      </ErrorBoundary>
    </>
  );
}

Event handler ve async hatalar için ne yapmalı?

Error Boundary event handler hatalarını yakalamaz. Bu durumda:

• Event handler içinde try/catch kullanın
• Asenkron işlemlerde hatayı state’e alıp kontrollü UI gösterin

function SaveButton() {
  const [error, setError] = React.useState(null);

  const onSave = async () => {
    try {
      setError(null);
      await fetch("/api/save", { method: "POST" });
    } catch (e) {
      setError("Kaydetme başarısız. Lütfen tekrar deneyin.");
    }
  };

  return (
    <div>
      <button onClick={onSave}>Kaydet</button>
      {error && <p style={{ color: "crimson" }}>{error}</p>}
    </div>
  );
}

Sonuç

Error Boundary, React uygulamalarında “tam çöküş” yerine kontrollü bozulma (graceful degradation) sağlar. Doğru yere konumlandırılmış sınırlar ve iyi düşünülmüş fallback ekranları, hem kullanıcı deneyimini korur hem de hataları daha hızlı teşhis etmenizi sağlar.