Bir şirkette ya da projede çalışırken sürekli feature geliştirme gibi işler ile çalışmıyoruz. Yeri geliyor bug fixlemek ile zamanımızın çoğunu geçiriyoruz. Yeri geliyor bu süre feature geliştirme zamanından daha da fazla zamanımızı alıyor. Burada problemi bir şekilde çözebiliriz bu sorun değil. Asıl önemli olan nokta hatayı tam olarak nerede arıyoruz. Eğer doğru yerde bu hatayı aramıyorsak o zaman çok fazla zaman kaybedebiliriz. Şimdiye kadar deneyim ettiğim kadarıyla izlediğim birkaç noktayı paylaşmak istiyorum. Bu yazı serisinde odaklanacağım başlıca noktalar şunlar olacak. Her madde için ayrı bir yazı yayımlayacağım. İşte bu başlıklar;

• Uygulamaya sebep olabilecek klasör/dosya neresi olabilir?
• Problem kullanılan paketten kaynaklanıyor olabilir mi? (Yakında)
• Hatanın sonradan mı oluştu? Bu bir regression mu? (Yakında)

Yazıyı seri olarak paylaşmamın sebebi her yazıyı kısa tutup istediğim gibi detaylandırmak istiyorum. Böylelikle araştırmanın ve denemenin faydası daha fazla olur diye düşünüyorum.

Uygulama sebep olan yer neresi?

Uygulama geliştirirken hatayı gördüğüm ilk yer ya browser ya da editör. Eğer editör ise burada genelde ilgili kod kısmında bir yanlış yapıyorsunuzdur. Bunu kolay bir şekilde çözmeniz için ilgili değişkene, fonksiyona bakmak yeterli olacaktır. Bizim odaklanacağımız konu browser tarafı olacak. Gelin burada biraz daha detaya inelim.

Öncelikle hata tam olarak ne? Gelin bir senaryo çizelim. Burada şöyle bir sistemimiz olduğunu düşünelim. İnstagram tarzı bir sosyal medya uygulaması geliştiriyoruz. Burada kullanıcıları fotoğraf paylaşabiliyor, özel mesaj gönderebiliyor, profilini oluşturup düzenleyebiliyor. State yönetimi olarak redux, redux saga gibi paketleri kullandığımızı düşünelim. Basit özelikleri kapsadığını varsayalım. Uygulamadaki logic’in adımlarını şu şekilde özetlemek gerekirse;

1. Component ile ekranda gözükecek olan tasarım oluşturulur.
2. Fotoğraf paylaşırken/mesaj gönderirken/profil düzenlerkenComponent’te yaptığımız action ile Redux action arasındaki iletişimi kurulur.
3. Redux action’a gelen mesaj sonrası öncelikle Saga ve sonrasında Reducer ile gerekli işlemler yapılır.
4. Güncelenen veri Reducer’dan state’in düzenlenmesi ile Component’e iletilir.
5. Component’teki veri güncelenir.

Yaptığımız API sorgusundan sonra veriyi doğru bir şekilde ekranda görmüyorsam

Bu gibi durumlarda ilk bakılması gereken nokta Network tabını açıp gönderdiğimiz API isteğini inceleyelim. Burada gelen ve giden verilerin doğru olduğunu kontrol etmemiz gerekiyor. Eğer bunları doğru bir şekilde işlemişsek demektir ki buraya kadar her şey doğru bir şekilde çalışıyor demektir.

Bu noktada takıldığımız nokta büyük ihtimal 4. adımda oluşuyor. Burada detaylı bir araştırma yapmamız gerekiyor. Öncelikle saga ve reducer arasındaki ilişkinin incelenip verilerin istendiği gibi gelip işlendiğini dikkat etmek gerekiyorsa. Bunu bazen kod kısmında log koyarak incelemeye çalışırız ama bu bazen çok uzun sürer. Burada en kolay yöntem Google Chrome’aRedux DevTools eklentisini kurup action’lara gönderdiğimiz verilere bakabiliriz. Bu şekilde nereye bakmamızı bulmamız daha kolay olabilir. Ondan sonrasında kod kısmında düzenlememiz gerekenleri yaptıktan sonra problemi çözebiliriz.

API sorgusu doğru, reducer doğru günceleniyor ama Web’te göremiyorsam

Burada da dikkat edilmesi gereken 5. bölüm. Demektir ki her şey doğru bir şekilde günceleniyor ama Component’i güncelemek için lifecycle kısmında ya da bileşeni render etme konusunda sorun yaşıyoruz gibi. Burada Component’in detaylı bir şekilde inceleyip verilerin neden güncelenmediğini dikkat etmekte fayda var. useEffect ve props’ları incelemekte fayda var. Doğru mu gönderiyoruz? Render etme kısmınındaki koşulları doğru mu ayarladık?

Mesajımı yazdım gönderiyorum ama hata alıyorum ya da doğru gönderemiyorsam

İşte bu kısım problemi çözmek için biraz fazla zaman ayırmamız gerekiyor. Çünkü burada devreye hem Component hem de Redux Saga dosyaları işin içine girmiş oluyor. Bir de bu iki tarafın arasına çok fazla logic ve kod giriyorsa işimiz daha da zorlaşıyor. Biraz sabır ederek ve logları doğru yere koyarak bunu bulabiliriz.

Bu yazıyı yazma sebebim aslında çalıştığım arkadaşların karşılaştığı sorunlara karşı nasıl araştırması ve çözüm üretmesi gerektiği ile ilgili yaptığı yanlışlar doğrultusunda yazmak istedim. Bunları aktif olarak uyguluyorum ve sorunları çözmek için hızlı bir şekilde aksiyon alabiliyorum. O yüzden bunu paylaşmak istedim.

Sevgiler, saygılar!