React v16.0 ile Bileşen Hataları

Merhaba arkadaşlar,

Bildiğiniz üzere Eylül ayının sonunda React v16.0 sürümü yayınlandı. Bu sürüm ile kullanımımıza sunulan kullanışlı bir özellikten bahsedeceğim, Error Boundaries.

 

Peki Nedir Bu Error Boundaries?

Önceki React sürümlerinde eğer bileşenlerimizde bir hata varsa görüntü bakımından sıkıntı yaşıyorduk, gerekli bileşen renderlenmiyor ve ona bağlı olan bileşenler de sayfa düzeninde sıkıntı yaratıyordu. Tam tanım yapmam gerekirse error boundaries, içerisinde bulunan bileşenlerdeki hataları yakalayan, hatayı loglayabilen ve hata durumunda farklı bir bileşen döndürebilen bileşenlerdir. Bu bileşenler sayesinde artık çıkan hataları yakalayabilecek, kullandığımız bileşen yerine farklı bir bileşen koyarak kullanıcıya bunu güzel bir şekilde yansıtabileceğiz.

*Bu arada error boundaries sınırlandırdığı alan içerisindeki hataları yakaladığı için yazımın geri kalanında bunlardan hata sınırları diye bahsedeceğim.

componentDidCatch(error, info)

Oluşturduğunuz kapsayıcı bir bileşende bu methodu tanımlarsanız o bileşeniniz artık bir hata sınırlayıcı bileşen oluyor. Çok basit değil mi?

Hemen kullanmaya başlayalım.

Öncelikle hatalarımız için sınır olacak bileşenimizi oluşturalım.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { 
      hasError: false 
    }
  }
  componentDidCatch(error, info) {
    this.setState({ 
      hasError: true 
    })
  }
  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>
    }
    return this.props.children
  }
}

Basitçe kodu açıklamam gerekirse, hatayı tutabileceğimiz ‘hasError’ olarak adlandırdığımız bir state’imiz var. componentDidCatch methodunda ise eğer bu hata sınırlayıcı bileşen içerisinde bir hata oluşmuşsa state’imizdeki hata durumunu true yapıyoruz. Son olarak render methodunda ise hatamız varsa ‘Something went wrong.’, eğer yok ise hata sınırı bileşenimiz içerisindeki elemanların render edilmesini söylüyoruz. Basitçe bir hata sınırlayıcı elemanı böyle oluşturuyoruz. Şimdi tek yapmamız gereken içerisine uygulamamızı yerleştirmek.

Şöyle bir bileşen oluşturuyorum ve içerisinde bir hata fırlatıyorum.

class Widget extends React.Component {
  componentDidMount() {
    throw new Error('Error!')
  }
  render() {
    return(
      <div>
        Hello World!
      </div>
    )
  }
}

Sonrasında da uygulamamızı hata sınırlayıcı bileşenimiz ile render ediyorum.

const App = () => (
  <ErrorBoundary>
    <Widget />
  </ErrorBoundary>
)

Artık uygulamanızda hata var ise farklı bir bileşen renderlanacak, eğer yok ise uygulamanınız kendisi renderlanacak.

Bu sayede renderlanamayan hatalı bileşenlerimizden kurtulmuş olacağız ve kullanıcıya bunu güzel bir şekilde yansıtabileceğiz.

Unutmadan şurada oluşturduğum bir örnek uygulama var,  kodların tam haline erişebilirsiniz.

İyi kodlamalar.