React'te Hata Yakalama: Error Boundaries (Hata Sınırları) Nasıl Kullanılır?

🎯 Bu Rehberde Ne Öğreneceksiniz?

Bu rehber, React uygulamalarınızda beklenmedik çökmeleri önlemek için kullanılan Error Boundaries (Hata Sınırları) yapısını adım adım açıklar.
getDerivedStateFromError ve componentDidCatch yaşam döngüsü metotlarını kullanarak hataları yakalamayı, kullanıcıya geri dönüş arayüzü (fallback UI) göstermeyi ve hataları loglamayı öğreneceksiniz.

---

🚧 Ön Koşullar

• Temel React bilgisi
• Node.js ve npm kurulu bir geliştirme ortamı
• Bu rehber Node v16+, npm v7+, React v17+ sürümleriyle test edilmiştir

---

1️⃣ Hata Sınırı Olmadan Hata Senaryosu

React v16 öncesinde veya Error Boundary kullanılmadığında, render aşamasında oluşan hatalar tüm uygulamanın çökmesine neden olur.
Kullanıcı boş bir sayfa (beyaz ekran) görür ve ne olduğunu anlamaz.

Aşağıdaki örnek, bu durumu simüle eder:

import React from 'react';

class BuggyCounter extends React.Component {
  state = { counter: 0 };

  handleClick = () => {
    this.setState({ counter: this.state.counter + 1 });
  };

  render() {
    if (this.state.counter === 5) {
      // Hata simülasyonu!
      throw new Error('Simulated error.');
    }
    return (
      <div>
        <h1>{this.state.counter}</h1>
        <button onClick={this.handleClick}>+</button>
      </div>
    );
  }
}

export default BuggyCounter;

Sayaç 5 olduğunda hata fırlatılır ve uygulama tamamen unmount olur.

Sonuç olarak kullanıcı beyaz ekran görür. Ama Error Boundaries kullanırsak uygulama çökmeden hatayı yakalayabiliriz.

---

2️⃣ Error Boundary (Hata Sınırı) Nedir?

Error Boundaries, React bileşenlerinde render, lifecycle veya constructor aşamasında oluşan hataları yakalamamızı sağlayan yapılardır. Yani uygulama çökmeden hatayı yakalayıp kullanıcıya özel bir mesaj gösterebiliriz.

Bir bileşen şu iki metottan birini içeriyorsa Error Boundary sayılır:

static getDerivedStateFromError(error) → Hatayı yakalar ve durumu güncelleyerek bir “fallback UI” tetikler.

componentDidCatch(error, info) → Hata detaylarını loglama veya harici servislere bildirme işlemini yapar.

---

3️⃣ Kendi Error Boundary Bileşenimizi Oluşturalım

Aşağıdaki sınıf tabanlı bileşen, alt bileşenlerde oluşan hataları yakalar:

import React from 'react';

class HataSiniri extends React.Component {
  state = { errorMessage: '' };

  static getDerivedStateFromError(error) {
    // Hata durumunu güncelliyoruz
    return { errorMessage: error.toString() };
  }

  componentDidCatch(error, info) {
    // Hata detaylarını logluyoruz
    this.logError(error.toString(), info.componentStack);
  }

  logError = console.log; // Örnek log fonksiyonu

  render() {
    if (this.state.errorMessage) {
      return <p>Hata oluştu: {this.state.errorMessage}</p>;
    }
    return this.props.children;
  }
}

export default HataSiniri;

Bu sınıf, içindeki alt bileşenlerde hata oluştuğunda kullanıcıya özel bir mesaj gösterir.

---

4️⃣ Error Boundary’yi Uygulamaya Entegre Etmek

BuggyCounter bileşenimizi artık HataSiniri içine alalım:

import React from 'react';
import BuggyCounter from './BuggyCounter';
import HataSiniri from './HataSiniri';

class App extends React.Component {
  refreshPage = () => window.location.reload();

  render() {
    return (
      <div>
        <HataSiniri>
          <BuggyCounter />
        </HataSiniri>
        <hr />
        <button onClick={this.refreshPage}>Sayfayı Yenile</button>
      </div>
    );
  }
}

export default App;

Artık sayaç 5’e ulaştığında uygulama çökmez, sadece hatalı bileşen “Hata oluştu” mesajını gösterir.

---

5️⃣ Error Boundaries ve Try...Catch Arasındaki Fark

Bu ikili birbirinin alternatifi değil, tamamlayıcısıdır. Hata Sınırları yalnızca React bileşenlerine özgü hataları yakalar.

✅ Yakalayabildiği Durumlar	❌ Yakalayamadığı Durumlar
Render aşamasında oluşan hatalar	Event handler (ör. onClick, onChange) hataları
Yaşam döngüsü metotlarında (componentDidMount, componentDidUpdate vb.)	setTimeout veya requestAnimationFrame içindeki hatalar
Constructor (yapıcı) aşamasında	Sunucu tarafı render (SSR) sırasında oluşan hatalar
	Hata sınırının kendi içinde oluşan hatalar

Sağlam bir hata yönetimi için hem Error Boundary hem de try...catch kullanılmalıdır.

---

💬 Sıkça Sorulan Sorular (SSS)

1. Error Boundaries sadece sınıf bileşenlerinde mi çalışır?

Evet. Hooks ile doğrudan Error Boundary yazılamaz. Class tabanlı bileşenler ve yaşam döngüsü metotları gerekir.

2. Tüm uygulamamı tek Error Boundary ile sarmalamalı mıyım?

Genelde kök bileşende bir tane olması yeterlidir. Ama kritik alanlar için yerel (local) Hata Sınırları da önerilir.

3. Fallback UI ne kadar özelleştirilebilir?

İstediğiniz kadar! Basit bir metin, buton veya özel hata sayfası olabilir.

4. Hata loglarını nereye göndermeliyim?

componentDidCatch içinde Sentry, Crashlytics gibi servislere gönderebilirsiniz.

5. Kullanıcı deneyimi açısından neden önemlidir?

Uygulamanız çökmeden kontrollü bir hata ekranı göstererek profesyonel görünür.

---

🏁 Sonuç

React 16 ile gelen Error Boundaries, uygulamanızın çökmesini önler ve kullanıcıya kontrollü bir hata ekranı sunar. Bu yapı sayesinde kullanıcı beyaz ekran yerine anlaşılır bir mesaj görür.

Uygulamanız ister küçük ister Rabisu Bulut üzerinde çalışan büyük bir proje olsun, kök bileşende mutlaka bir Error Boundary bulundurmanız önerilir.

🚀 Şimdi kendi projende dene ve kullanıcı deneyimini bir üst seviyeye çıkar!