React Error Boundaries ile Hata Yönetimi: Adım Adım Uygulama Rehberi

React uygulamalarında bir bileşenin içinde oluşan JavaScript hatası tüm uygulamanın çökmesine neden olabilir. React 16 ile tanıtılan Error Boundaries, bu hataları yakalayarak kullanıcıya anlamlı bir geri bildirim sunmanızı sağlar. İşte adım adım Error Boundaries kurulumu ve kullanımı.

1. Error Boundary Nedir ve Neden Gereklidir?

Error Boundary, alt bileşen ağacındaki JavaScript hatalarını yakalayan, bu hataları loglayan ve çöken bileşen yerine bir yedek UI gösteren React bileşenidir. Render sırasında, lifecycle metodlarında ve constructor’da oluşan hataları yakalar. Ancak event handler’lar, asenkron kod ve sunucu tarafı render’daki hataları yakalamaz. Bu yüzden JavaScript Promise ve Async/Await ile Hata Yönetimi gibi ek yöntemlerle birlikte kullanılması gerekir.

2. Error Boundary Bileşeni Oluşturma

Error Boundary, sınıf bileşeni olarak yazılmalıdır çünkü componentDidCatch ve getDerivedStateFromError lifecycle metodlarını kullanır. İşte temel bir örnek:

1. State tanımlayın: hasError adında bir state ile hatanın oluşup oluşmadığını izleyin.
2. getDerivedStateFromError: Bu statik metot, hatayı yakalar ve state’i güncelleyerek yedek UI’ın gösterilmesini sağlar.
3. componentDidCatch: Bu metot, hata bilgilerini loglamak için kullanılır. Örneğin bir hata izleme servisine gönderebilirsiniz.
4. Render metodunda kontrol: hasError true ise yedek UI, aksi halde normal içeriği gösterin.

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

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

  componentDidCatch(error, errorInfo) {
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Bir hata oluştu.</h1>;
    }
    return this.props.children;
  }
}

3. Error Boundary’i Uygulamaya Ekleme

Error Boundary’i, hata yakalamak istediğiniz bileşen ağacının etrafına sararak kullanın. Örneğin tüm uygulama için App bileşenini sarabilir veya belirli bir özelliğe özel kullanabilirsiniz.

1. ErrorBoundary bileşenini içe aktarın.
2. Korumak istediğiniz bileşeni <ErrorBoundary> etiketi arasına alın.
3. İsteğe bağlı olarak farklı seviyelerde birden fazla Error Boundary kullanarak hata izolasyonunu artırın.

import ErrorBoundary from './ErrorBoundary';

function App() {
  return (
    <ErrorBoundary>
      <MainContent />
    </ErrorBoundary>
  );
}

4. Lazy Loading Bileşenlerde Error Boundary Kullanımı

React.lazy() ile yüklenen bileşenlerde oluşan hataları yakalamak için Error Boundary kritik öneme sahiptir. Daha fazla bilgi için React'te Lazy Loading ve Code Splitting rehberine göz atabilirsiniz. Lazy bileşeni bir Error Boundary ile sararak modül yüklenemediğinde kullanıcıya düzgün bir mesaj gösterin.

1. Lazy yüklenecek bileşeni React.lazy ile tanımlayın.
2. Bileşeni Suspense ve ErrorBoundary ile sarın.

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<div>Yükleniyor...</div>}>
        <OtherComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

5. Error Boundary ile Birlikte Karmaşık State Yönetimi

Bazı durumlarda hata sonrası state’i sıfırlamak veya belirli bir işlem yapmak isteyebilirsiniz. Bu durumda Error Boundary içinde useReducer kullanarak daha kontrollü bir yapı oluşturabilirsiniz. Detaylı bilgi için React useReducer Hook ile Karmaşık State Yönetimi yazısını inceleyebilirsiniz.

1. Error Boundary’in state’ini yönetmek için bir reducer tanımlayın.
2. Hata durumunda farklı aksiyonlar göndererek daha esnek bir hata yönetimi sağlayın.
3. Örneğin “Dene Yeniden” butonu için state’i sıfırlayan bir aksiyon ekleyin.

const initialState = { hasError: false, errorMessage: '' };

function errorReducer(state, action) {
  switch (action.type) {
    case 'SET_ERROR':
      return { hasError: true, errorMessage: action.payload };
    case 'RESET':
      return initialState;
    default:
      return state;
  }
}

// Bileşen içinde kullanım:
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = initialState;
  }
  // ...
}

6. Sık Yapılan Hatalar ve İyi Uygulamalar

• Event handler’lardaki hataları yakalama: Error Boundary sadece render ve lifecycle hatalarını yakalar. Event handler’lar için try-catch kullanın.
• Asenkron hatalar: Promise zincirinde oluşan hataları yakalamak için .catch() veya async/await ile try-catch kullanın.
• Yedek UI tasarımı: Kullanıcıya teknik detay vermeden, sorunu anlayacağı ve ne yapması gerektiğini bileceği bir mesaj gösterin.
• Loglama: Hataları üretim ortamında bir servise (Sentry, LogRocket) göndermek için componentDidCatch kullanın.

7. Test Etme

Error Boundary’inizi test etmek için bir bileşen içinde bilerek hata fırlatın ve yedek UI’ın göründüğünü doğrulayın. Jest ve React Testing Library ile kolayca test edebilirsiniz.

1. Hata fırlatan bir test bileşeni oluşturun.
2. Error Boundary ile sarın.
3. Yedek UI elemanının var olduğunu assert edin.

test('Error boundary shows fallback UI', () => {
  const Throw = () => { throw new Error('Test'); };
  const { getByText } = render(
    <ErrorBoundary>
      <Throw />
    </ErrorBoundary>
  );
  expect(getByText('Bir hata oluştu.')).toBeInTheDocument();
});

Error Boundaries, React uygulamalarının dayanıklılığını artıran temel bir araçtır. Doğru kullanıldığında kullanıcı deneyimini önemli ölçüde iyileştirir. Yukarıdaki adımları takip ederek kendi Error Boundary’inizi oluşturabilir ve uygulamanızı hatalara karşı koruyabilirsiniz.

Sık Sorulan Sorular

Error Boundary hangi hataları yakalamaz?

Error Boundary, event handler’lar (onClick gibi), asenkron kod (setTimeout, promise), sunucu tarafı render ve kendi içinde oluşan hataları yakalamaz. Bu tür hatalar için try-catch veya promise catch kullanılmalıdır.

Birden fazla Error Boundary kullanılabilir mi?

Evet, uygulamanın farklı bölümlerini izole etmek için birden fazla Error Boundary kullanabilirsiniz. Bu sayede bir bileşendeki hata tüm uygulamayı etkilemez.

Error Boundary neden sınıf bileşeni olmalı?

Error Boundary, componentDidCatch ve getDerivedStateFromError gibi lifecycle metotlarını kullanmak zorundadır. Bu metotlar şu an için sadece sınıf bileşenlerinde mevcuttur. React hooks ile benzer işlevsellik henüz desteklenmemektedir.

Lazy loading ile Error Boundary nasıl kullanılır?

React.lazy ile yüklenen bileşenlerde modül yüklenemezse hata oluşur. Bu hatayı yakalamak için lazy bileşeni bir Error Boundary ile sarmalısınız. Ayrıca Suspense bileşeni de kullanarak yükleme durumunu yönetebilirsiniz.