React'ın 16.versiyonu, 2017 yılı içinde yayınlandı. Bu yazının hazırlandığı günlerde (Ağustos 2019) 16.8.6 sürümü mevcut. React 16 geriye dönük destek sunmakla birlikte bir çok yenilikle geldi ve günümüzde de geliştiricilerin adapte olma süreci devam etmektedir.
React bir UI kütüphanesi ve UI akışında meydana gelen bir hata aslında uygulamayı kırmaması gerekir.
Evet yazdığımız kodun düzgün çalışmasından ve hata ayıklama mekanizmalarından biz sorumluyuz, evet bunun için bizi önceden uyaran yardımcı yazılımlar bile var. Fakat hata bu işin doğasında var ve o hata gerçekleşecek. Bundan emin olabilirsiniz.
React ile gelen mühimmatın adı budur. Artık gerçekleşen hatalar bir lifecycle methoduna düşecek ve tüm uygulamanın patlamasının önüne geçmiş olabileceğiz.
Bu methodun adı componentDidCatch
Örneği oynatalım Uğurcum
class HatasizKulOlmaz extends React.Component {
constructor(props) {
super(props);
this.state = { hataVar: false };
}
componentDidCatch(error, info) {
// Hatayı set eyle
this.setState({ hataVar: true });
// Ayrıca sunucunuza veya bir monitör servisine bunu loglayabilirsiniz
hatayıLogla(error, info);
}
render() {
if (this.state.hataVar) {
// Isterseniz hataya bağlı özel bir mesaj gösterebilirsiniz
return Something went wrong.;
}
return this.props.children;
}
}
Aslında lafı çok da dolandırmaya gerek yoktu. Örnek her şeyi anlatıyor. Dikkatinizi çekmesi gereken nokta ise, bu component tüm Component Tree içinde gerçekleşen hataları yakalayabiliyor. Yani bunu örneğin app.js içinde bir wrapper olarak kullanıp alt componentlarda gerçekleşen tüm hataları da yakalayabilirsiniz.
Bir sonraki yazıda görüşmek üzere.