⏳ Özet: Error boundaries component ağacındaki herhangi bir yerde oluşan javascript hatalarını yakalar; isteğe bağlı bu hatanın loglanmasını ve crash (çöken) olan component yerine fallback (yedek) bir component render edebilebilmesini sağlar.

Yazılımlar doğaları gereği ve insan ürünü olmaları sebebiyle hata çıkmaya müsait ürünlerdir. Bu hatalar uygulamanın belli bir kısmını etkileyebilecek ve uygulamanın çalışmasını durdurmayacak basit hatalar olabileceği gibi uygulamanın tamamen crash olmasına sebep olabilecek kritik hatalar da olabilirler. Bu nedenle yazılım geliştirirken hata çıkabilmeye müsait kısımlarda hata yönetiminin yapılması gerekir.

Javascript ile uygulama geliştirirken de farklı sebeplerden dolayı uygulamamızda hatalar ortaya çıkabilir. Özellikle react ile uygulama geliştirirken herhangi bir component'da meydana gelebilecek bir hata tüm uygulamanın erişelemez hale gelmesine neden olabilir. Bu yazıda react ile uygulama geliştirirken hata yönetimi tarafında alabileceğimiz önlemlerden birini anlatmaya çalışacağım.

React Error Boundaries

Error Boundaries component'ları react component ağacındaki hataları yakalayıp bu hataları yönetebileceğimiz ve kullanıcı deneyiminin arttırabileceğimiz custom component'lardır. Error Boundary component'ı oluşturmak için aşağıdakilere ihtiyaç duyarız.

• Class based (sınıf tabanlı) bir component
• static olarak tanımlanmış getDerivedStateFromError() metodu
• İsteğe göre componentDidCatch() lifecycle metodu
• Hatayı tutabileceğimiz bir state

Şimdi Error Boundary component'ımızı oluşturmaya başlayalım.

import React, { Component } from 'react'

class ErrorBoundary extends Component {
  constructor(props) {
    super(props)

    this.state = {
      hasError: false
    }
  }

  static getDerivedStateFromError(error) {
    /*
      Component ağacında bir hata meydana gelirse;
      'hasError' property'sinin değerini güncelleyelim.
    */

    return { hasError: true }
  }

  render() {
    if (this.state.hasError) {
      return <div>Maalesef bir hata oluştu.</div>
    }

    return this.props.children
  }
}

export default ErrorBoundary

ErrorBoundary component'ımızı oluşturduk şimdi de bu component'ı kullanalım.

<ErrorBoundary>
  <PostList />
</ErrorBoundary>

Artık PostList component ve o component'ın alt component'larında herhangi bir sorun olduğunda ErrorBoundary component'ımız çalışacak ve kullancıya boş hatalı bir sayfa göstermek yerine belirlediğimiz hata mesajını gösterecebileceğiz.

ErrorBoundary component'ını sadece hata çıkabilecek component'ları sararak kullanabileceğimiz gibi uygulamanın en üst seviyesine de taşıyabiliriz.

Kod üzerinde görmeye çalışalım.

const App = () => {
  return (
    <ErrorBoundary>
      <Header />
      <Main>
        <PostList />
        <RelatedPosts />
      </Main>
      <Footer />
    </ErrorBoundary>
  )
}

Örnekte de gördüğümüz gibi uygulama genelinde hata yönetimini sağlamış olduk. Uygulama genelinde veya component bazlı bir hata yönetimi yapıp yapmayacağınız tamamen uygulamaya bağlı olarak değişebilir. Karar sizin 😁.

Örnek bir uygulama ile öğrendiklerimizi pekiştirelim.

Örnek Uygulama

Public bir API'den postları listeyen bir uygulama oluşturalım. Uygulama içinde data içinde olmayan bir property'e erişmeye çalışalım ve ErrorBoundary component'ını kullanarak kullanıcıya bir hata mesajı gösterelim.

return posts.map(({ title, body, comments }, index) => (
  <div key={index}>
    <h3>{title}</h3>
    <p>{body}</p>
    <strong>{comments.count}</strong>
  </div>
))

PostList component'ında API'den dönen cevapta olmadığı halde comments.count verisine ulaşmaya çalıştık. ErrorBoundary kullanarak da aldığımız hatayı yakalayıp kullanıcıya fallback bir içerik gösterdik.

Uygulamanın tamamına aşağıdan ulaşabilirsiniz.

💡 Örnek uygulamamız development mode'da çalıştığı için hata modalını görebilirsiniz. Modalı kapatıp kullanıcıya gösterdiğimiz fallback içeriği görebilirsiniz.