Frontend Academy · Ders

Hata Sınırları

Yakalanmamış işleme hatalarının tüm uygulamayı çökertmesini önlemek için componentDidCatch ve getDerivedStateFromError ile sınıf tabanlı Hata Sınırları uygulamayı öğrenin.

Hata Sınırları, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Hata Sınırları Neden Kullanılmalı

Oluşturma sırasında, bir yaşam döngüsü yönteminde veya oluşturucuda yakalanmayan bir hata, varsayılan olarak tüm React ağacının çökmesine neden olur. Hata sınırları, bir alt ağaçtaki bu hataları yakalar ve bunun yerine bir yedek görünüm oluşturmanıza olanak tanır.

Yalnızca Sınıf Bileşenleri

Hata sınırları sınıf bileşeni olmalıdır (2026'da hâlâ böyledir; henüz eşdeğer bir kanca yoktur). useErrorBoundary kancası react-error-boundary gibi kütüphanelerde bulunur.

getDerivedStateFromError

Bir alt bileşen hata verdiğinde çağrılan statik yöntemdir. Yedek görünümün oluşturulmasını tetikleyen bir durum güncellemesi döndürür.

class ErrorBoundary extends React.Component {
  state = { hasError: false };

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

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

Günlük Kaydı İçin componentDidCatch

Hatayı bir hizmete (Sentry, Datadog) kaydetmek için componentDidCatch kullanın; bu yöntem hem hatayı hem de React bileşen yığınını alır.

componentDidCatch(error, errorInfo) {
  Sentry.captureException(error, {
    contexts: { react: { componentStack: errorInfo.componentStack } }
  });
}

Uygulama Kökünü Sarmalama

Beyaz ekran sorununu önlemek için en üst düzey App bileşeninizi bir hata sınırıyla sarmalayın.

<ErrorBoundary fallback={<GlobalErrorPage />}>
  <App />
</ErrorBoundary>

Her Rota veya Araç İçin Ayrıntılı Sınırlar

Tek bir genel hata sınırı asgari düzeydir. Bir bölümdeki çökme tüm uygulamayı boşaltmasın diye rota başına hata sınırları ekleyin.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/dashboard" element={
    <ErrorBoundary fallback={<DashboardError />}>
      <Dashboard />
    </ErrorBoundary>
  } />
</Routes>

Hata Sınırlarının YAKALAMADIĞI Hatalar

Sınırlar şunları YAKALAMAZ: olay işleyicilerindeki hatalar, asenkron koddaki hatalar (setTimeout, promises), SSR sırasında fırlatılan hatalar ve sınırın kendisindeki hatalar. Bu yerlerde try/catch kullanın.

Olay İşleyicisi Hataları

Olay işleyicilerini try/catch ile sarın ve manuel bir reportError işlevi çağırın.

function Button() {
  function onClick() {
    try {
      riskyOperation();
    } catch (err) {
      reportError(err);
      toast.error('Something went wrong');
    }
  }
  return <button onClick={onClick}>Click</button>;
}

react-error-boundary Kütüphanesi

Topluluk paketi react-error-boundary, işlevsel component'lere uygun ve sıfırlama desteği sunan bir API sağlar.

import { ErrorBoundary } from 'react-error-boundary';

<ErrorBoundary
  fallbackRender={({ error, resetErrorBoundary }) => (
    <div>
      <p>Error: {error.message}</p>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )}
  onReset={() => refetch()}
>
  <DataView />
</ErrorBoundary>

Kurtarma Sırasında Sıfırlama

Kurtarma için bir yol sağlayın (yeniden deneme düğmesi, rota değişikliği). Sınır, geri dönüş görünümünü göstermeyi bırakması için kendi durumunu sıfırlamalıdır.

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  reset = () => this.setState({ hasError: false });
  render() {
    if (this.state.hasError) {
      return <button onClick={this.reset}>Retry</button>;
    }
    return this.props.children;
  }
}

Geliştirme ve Üretim

Geliştirme sırasında React, bir sınır olsa bile kırmızı hata katmanını görüntülemeye devam eder; bu kasıtlıdır. Üretimde yalnızca sınırın geri dönüş görünümü gösterilir.

En İyi Uygulamalar

1) app kökünde genel bir sınır kullanın. 2) Her rota için sınırlar ekleyin. 3) Bağımsız widget'ların çevresine ayrıntılı sınırlar yerleştirin. 4) Her zaman bir izleme hizmetine kaydedin. 5) Kurtarma işlemleri gösterin (yeniden dene, ana sayfaya git). 6) Hataları sessizce yok saymayın.

Hızlı Kontrol

React Hata Sınırları hangi tür hataları YAKALAMAZ?

Özet: Hata Sınırları

static getDerivedStateFromError + componentDidCatch içeren bir class component'i. Bir alt ağacı sararak oluşturma sırasında oluşan hataları yakalar. Olay işleyicilerindeki, asenkron koddaki ve SSR'deki hataları yakalamaz. app köküne genel bir sınır, ayrıca rota ve widget başına sınırlar yerleştirin. Sentry'ye kaydedin. Bir kurtarma işlemi sunun. Daha temiz bir kullanım deneyimi için react-error-boundary kütüphanesini kullanın.

Sıkça Sorulan Sorular

“Hata Sınırları” dersi ücretsiz mi?

Evet — “Hata Sınırları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Hata Sınırları” dersinde ne öğreneceğim?

Yakalanmamış işleme hatalarının tüm uygulamayı çökertmesini önlemek için componentDidCatch ve getDerivedStateFromError ile sınıf tabanlı Hata Sınırları uygulamayı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Hata Sınırları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Frontend Academy Sayfasına Dön