React Hata Sınırlarında Hata Sınıflandırması: Kapsamlı Bir Kılavuz

Hata yönetimi, sağlam ve sürdürülebilir React uygulamaları oluşturmanın kritik bir yönüdür. React'in Hata Sınırları (Error Boundaries), render sırasında meydana gelen hataları zarif bir şekilde ele almak için bir mekanizma sağlarken, nasıl farklı hata türlerini sınıflandıracağınızı ve bunlara nasıl yanıt vereceğinizi anlamak, gerçekten dayanıklı bir uygulama oluşturmak için çok önemlidir. Bu kılavuz, Hata Sınırları içindeki hata sınıflandırmasına yönelik çeşitli yaklaşımları inceleyerek, hata yönetimi stratejinizi geliştirmek için pratik örnekler ve uygulanabilir bilgiler sunar.

React Hata Sınırları (Error Boundaries) Nedir?

React 16 ile sunulan Hata Sınırları, alt bileşen ağacının herhangi bir yerindeki JavaScript hatalarını yakalayan, bu hataları günlüğe kaydeden ve tüm bileşen ağacının çökmesi yerine bir yedek kullanıcı arayüzü (fallback UI) gösteren React bileşenleridir. Bileşenler için bir try...catch bloğuna benzer şekilde çalışırlar.

Hata Sınırlarının temel özellikleri:

• Bileşen Düzeyinde Hata Yönetimi: Hataları belirli bileşen alt ağaçları içinde izole eder.
• Zarif İşlev Azaltma (Graceful Degradation): Tek bir bileşen hatası nedeniyle tüm uygulamanın çökmesini önler.
• Kontrollü Yedek Kullanıcı Arayüzü: Bir hata meydana geldiğinde kullanıcı dostu bir mesaj veya alternatif içerik gösterir.
• Hata Günlüğü (Error Logging): Hata bilgilerini günlüğe kaydederek hata takibini ve hata ayıklamayı kolaylaştırır.

Hata Sınırlarında Hatalar Neden Sınıflandırılmalı?

Hataları sadece yakalamak yeterli değildir. Etkili hata yönetimi, neyin yanlış gittiğini anlamayı ve buna göre yanıt vermeyi gerektirir. Hata Sınırları içinde hataları sınıflandırmak çeşitli avantajlar sunar:

• Hedefe Yönelik Hata Yönetimi: Farklı hata türleri farklı yanıtlar gerektirebilir. Örneğin, bir ağ hatası yeniden deneme mekanizması gerektirebilirken, bir veri doğrulama hatası kullanıcı girdisinin düzeltilmesini gerektirebilir.
• Geliştirilmiş Kullanıcı Deneyimi: Hata türüne göre daha bilgilendirici hata mesajları gösterin. Genel bir "Bir şeyler ters gitti" mesajı, bir ağ sorununu veya geçersiz girişi belirten özel bir mesajdan daha az yardımcı olur.
• Gelişmiş Hata Ayıklama: Hataları sınıflandırmak, hata ayıklama ve sorunların temel nedenini belirleme için değerli bir bağlam sağlar.
• Proaktif İzleme: Tekrarlanan sorunları belirlemek ve düzeltmeleri önceliklendirmek için farklı hata türlerinin sıklığını takip edin.
• Stratejik Yedek Kullanıcı Arayüzü: Hataya bağlı olarak farklı yedek kullanıcı arayüzleri göstererek kullanıcıya daha ilgili bilgiler veya eylemler sunun.

Hata Sınıflandırma Yaklaşımları

React Hata Sınırları içinde hataları sınıflandırmak için birkaç teknik kullanılabilir:

1. instanceof Kullanımı

instanceof operatörü, bir nesnenin belirli bir sınıfın örneği olup olmadığını kontrol eder. Bu, hataları yerleşik veya özel hata türlerine göre sınıflandırmak için kullanışlıdır.

Örnek:

class NetworkError extends Error {
  constructor(message) {
    super(message);
    this.name = "NetworkError";
  }
}

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

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

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      let errorMessage = "Bir şeyler ters gitti.";
      if (this.state.error instanceof NetworkError) {
        errorMessage = "Bir ağ hatası oluştu. Lütfen bağlantınızı kontrol edip tekrar deneyin.";
      } else if (this.state.error instanceof ValidationError) {
        errorMessage = "Bir doğrulama hatası oluştu. Lütfen girdinizi gözden geçirin.";
      }

      return (
        <div>
          <h2>Hata!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

Açıklama:

• Yerleşik Error sınıfını genişleten özel NetworkError ve ValidationError sınıfları tanımlanmıştır.
• MyErrorBoundary bileşeninin render yönteminde, yakalanan hatanın türünü kontrol etmek için instanceof operatörü kullanılır.
• Hata türüne bağlı olarak, yedek kullanıcı arayüzünde belirli bir hata mesajı gösterilir.

2. Hata Kodları veya Özellikleri Kullanma

Başka bir yaklaşım, hata nesnesinin içine hata kodları veya özellikleri eklemektir. Bu, belirli hata senaryolarına göre daha ayrıntılı bir sınıflandırmaya olanak tanır.

Örnek:

function fetchData(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => {
        if (!response.ok) {
          const error = new Error("Ağ isteği başarısız oldu");
          error.code = response.status; // Add a custom error code
          reject(error);
        }
        return response.json();
      })
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

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

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      let errorMessage = "Bir şeyler ters gitti.";
      if (this.state.error.code === 404) {
        errorMessage = "Kaynak bulunamadı.";
      } else if (this.state.error.code >= 500) {
        errorMessage = "Sunucu hatası. Lütfen daha sonra tekrar deneyin.";
      }

      return (
        <div>
          <h2>Hata!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

Açıklama:

• fetchData işlevi, HTTP durum kodunu temsil eden bir code özelliğini hata nesnesine ekler.
• MyErrorBoundary bileşeni, belirli hata senaryosunu belirlemek için code özelliğini kontrol eder.
• Hata koduna göre farklı hata mesajları görüntülenir.

3. Merkezi Bir Hata Eşlemesi Kullanma

Karmaşık uygulamalar için, merkezi bir hata eşlemesi tutmak kod organizasyonunu ve sürdürülebilirliği artırabilir. Bu, hata türlerini veya kodlarını belirli hata mesajlarına ve işleme mantığına eşleyen bir sözlük veya nesne oluşturmayı içerir.

Örnek:

const errorMap = {
  "NETWORK_ERROR": {
    message: "Bir ağ hatası oluştu. Lütfen bağlantınızı kontrol edin.",
    retry: true,
  },
  "INVALID_INPUT": {
    message: "Geçersiz giriş. Lütfen verilerinizi gözden geçirin.",
    retry: false,
  },
  404: {
    message: "Kaynak bulunamadı.",
    retry: false,
  },
  500: {
    message: "Sunucu hatası. Lütfen daha sonra tekrar deneyin.",
    retry: true,
  },
  "DEFAULT": {
    message: "Bir şeyler ters gitti.",
    retry: false,
  },
};

function handleCustomError(errorType) {
    const errorDetails = errorMap[errorType] || errorMap["DEFAULT"];
    return errorDetails;
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorDetails: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    const errorDetails = handleCustomError(error.message);
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message } = this.state.errorDetails;
      return (
        <div>
          <h2>Hata!</h2>
          <p>{message}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorDetails.message}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

function MyComponent(){
    const [data, setData] = React.useState(null);

    React.useEffect(() => {
      try {
        throw new Error("NETWORK_ERROR");
      } catch (e) {
        throw e;
      }
    }, []);

    return <div></div>;
}

Açıklama:

• errorMap nesnesi, hata türlerine veya kodlarına göre mesajlar ve yeniden deneme bayrakları da dahil olmak üzere hata bilgilerini saklar.
• handleCustomError işlevi, hata mesajına göre errorMap'ten hata ayrıntılarını alır ve belirli bir kod bulunamazsa varsayılanları döndürür.
• MyErrorBoundary bileşeni, errorMap'ten uygun hata mesajını almak için handleCustomError işlevini kullanır.

Hata Sınıflandırması için En İyi Uygulamalar

• Net Hata Türleri Tanımlayın: Uygulamanız için tutarlı bir hata türleri veya kodları seti oluşturun.
• Bağlamsal Bilgi Sağlayın: Hata ayıklamayı kolaylaştırmak için hata nesnelerine ilgili ayrıntıları ekleyin.
• Hata Yönetim Mantığını Merkezileştirin: Hata yönetimini tutarlı bir şekilde yönetmek için merkezi bir hata eşlemesi veya yardımcı işlevler kullanın.
• Hataları Etkili Bir Şekilde Günlüğe Kaydedin: Üretimdeki hataları izlemek ve analiz etmek için hata raporlama hizmetleriyle entegre olun. Popüler hizmetler arasında Sentry, Rollbar ve Bugsnag bulunur.
• Hata Yönetimini Test Edin: Hata Sınırlarınızın farklı hata türlerini doğru bir şekilde ele aldığını doğrulamak için birim testleri yazın.
• Kullanıcı Deneyimini Göz Önünde Bulundurun: Kullanıcıları çözüme yönlendiren bilgilendirici ve kullanıcı dostu hata mesajları gösterin. Teknik jargondan kaçının.
• Hata Oranlarını İzleyin: Tekrarlanan sorunları belirlemek ve düzeltmeleri önceliklendirmek için farklı hata türlerinin sıklığını takip edin.
• Uluslararasılaştırma (i18n): Kullanıcıya hata mesajları sunarken, mesajlarınızın farklı dilleri ve kültürleri desteklemek için uygun şekilde uluslararasılaştırıldığından emin olun. Çevirileri yönetmek için i18next gibi kütüphaneler veya React'in Context API'sini kullanın.
• Erişilebilirlik (a11y): Hata mesajlarınızın engelli kullanıcılar için erişilebilir olduğundan emin olun. Ekran okuyuculara ek bağlam sağlamak için ARIA niteliklerini kullanın.
• Güvenlik: Özellikle üretim ortamlarında hata mesajlarında hangi bilgileri gösterdiğinize dikkat edin. Saldırganlar tarafından istismar edilebilecek hassas verileri ifşa etmekten kaçının. Örneğin, son kullanıcılara ham yığın izlerini (stack traces) göstermeyin.

Örnek Senaryo: Bir E-ticaret Uygulamasında API Hatalarını Ele Alma

Bir API'den ürün bilgilerini alan bir e-ticaret uygulaması düşünün. Olası hata senaryoları şunları içerir:

• Ağ Hataları: API sunucusu kullanılamıyor veya kullanıcının internet bağlantısı kesildi.
• Kimlik Doğrulama Hataları: Kullanıcının kimlik doğrulama belirteci geçersiz veya süresi dolmuş.
• Kaynak Bulunamadı Hataları: İstenen ürün mevcut değil.
• Sunucu Hataları: API sunucusu dahili bir hatayla karşılaştı.

Hata Sınırları ve hata sınıflandırması kullanarak, uygulama bu senaryoları zarif bir şekilde ele alabilir:

// Örnek (Basitleştirilmiş)
async function fetchProduct(productId) {
  try {
    const response = await fetch(`/api/products/${productId}`);
    if (!response.ok) {
      if (response.status === 404) {
        throw new Error("PRODUCT_NOT_FOUND");
      } else if (response.status === 401 || response.status === 403) {
        throw new Error("AUTHENTICATION_ERROR");
      } else {
        throw new Error("SERVER_ERROR");
      }
    }
    return await response.json();
  } catch (error) {
    if (error instanceof TypeError && error.message === "Failed to fetch") {
      throw new Error("NETWORK_ERROR");
    }
    throw error;
  }
}

class ProductErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorDetails: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    const errorDetails = handleCustomError(error.message); // Daha önce gösterildiği gibi errorMap kullanın
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message, retry } = this.state.errorDetails;
      return (
        <div>
          <h2>Hata!</h2>
          <p>{message}</p>
          {retry && <button onClick={() => window.location.reload()}>Yeniden Dene</button>}
        </div>
      );
    }

    return this.props.children;
  }
}

Açıklama:

• fetchProduct işlevi, API yanıt durum kodunu kontrol eder ve duruma göre belirli hata türleri fırlatır.
• ProductErrorBoundary bileşeni bu hataları yakalar ve uygun hata mesajlarını görüntüler.
• Ağ hataları ve sunucu hataları için, kullanıcının isteği tekrar denemesine olanak tanıyan bir "Yeniden Dene" düğmesi görüntülenir.
• Kimlik doğrulama hataları için kullanıcı giriş sayfasına yönlendirilebilir.
• Kaynak bulunamadı hataları için, ürünün mevcut olmadığını belirten bir mesaj görüntülenir.

Sonuç

React Hata Sınırları içinde hataları sınıflandırmak, dayanıklı ve kullanıcı dostu uygulamalar oluşturmak için esastır. instanceof kontrolleri, hata kodları ve merkezi hata eşlemeleri gibi teknikleri kullanarak, farklı hata senaryolarını etkili bir şekilde yönetebilir ve daha iyi bir kullanıcı deneyimi sağlayabilirsiniz. Uygulamanızın beklenmedik durumları zarif bir şekilde ele aldığından emin olmak için hata yönetimi, günlüğe kaydetme ve test etme konusundaki en iyi uygulamaları takip etmeyi unutmayın.

Bu stratejileri uygulayarak, React uygulamalarınızın kararlılığını ve sürdürülebilirliğini önemli ölçüde artırabilir, konumları veya geçmişleri ne olursa olsun kullanıcılarınıza daha sorunsuz ve daha güvenilir bir deneyim sunabilirsiniz.

İleri Okuma Kaynakları:

• React Hata Sınırları Dokümantasyonu
• Sentry'nin React 16 Hata Sınırları Kılavuzu
• Robin Wieruch'un React Hata Sınırı Eğitimi