JSAntalya


React 16'da


Hata Yakalamak

React 16
Nedir ?


Mehmet Köse

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 16'da Hata Yakalamak


Neden İhtiyaç?

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.

Error Boundaries

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.

Kaynaklar: