FRONTEND KAPSAM
Frontend Monitoring and RUM (Real User Monitoring)
Biz nasıl Thundra, NewRelic, DataDog vb araçlar ile Backend tarafında bulunan işleyişleri takip edip, görüntüleyip,
- Hatalı durumları
- Bottleneck durumlarını
- Anomali durumlarını
tespit edip ona göre alarmlar oluşturuyorsak. Bunun benzerini Frontend uygulamaları içinde yapmamız gerekiyor. Benzer problemler frontend’den de kaynaklı olabiliyor. Burada karşımıza ağırlıklı olarak 2 ürün çıkıyor
- Sentry ve
- LogRocket
- Bunun yanında (DynaTrace, DataDog, NewRelic, AWS, SmartBear vb..)
Bir çok RUM(Real Time User Monitoring) aracı ve SaaS servisi bulunuyor.
RUM Nedir?
RUM yani (Real Time User Monitoring) bir kullanıcının bir uygulamayla etkileşimi hakkında ayrıntılı veriler toplayan bir performans izleme sürecidir. Gerçek kullanıcı izleme, çeşitli ölçümlerle ilgili verileri toplar. Örneğin, tarayıcısına yüklemenen kaynaklardan toplanan veriler, navigasyon başlatma, istek başlatma ve hız indeksi metriklerini vb içerir.
Bizim Web Uygulamamızı Monitor edebilmemiz için, uygulamamıza takacağımız bir JS kütüphanesinin tarayıcıdan bilgiler toplayarak bizim SaaS servisinin arayüzüne aktaracağı veriler üzerinden gerçekleştirebiliriz. Burada Web Monitoring’den beklenen;
- Monitor eden sistemin sayfa ve ilgili kaynakları indirilmesi, tarayıcıda çalıştırılmaları ile ilgili süreci , network tabını, load balancer , sunucu ve log dosyalarını yakalaması gerekir ki bu sayede analiz gerçekleştirsin.
- Sayfalara gelen kişiler her birisi hakkında yaptığı işlemler ile ilgili verileri ayrı ayrı tutarak bunun üzerinde Sayfalarda, Sayfa üzerindeki nesnelerde, yönlendirmelerde herhangi bir yavaşlık , problem olduğunda bunu anlamamızı sağlayacak yapıları sunması
- Bu analizleri bireysel bazda, bireysel olarak sisteme giriş yapıp kullandığı şekilde bakabildiğiniz gibi , toplu yani bir grubun belli zamanda belli kaynak üzerinde yaptığı işlemler üzerinden de analiz edebilmesine imkan verme..
- Tüm bu yapılar üzerinden Dashboard’lar, Alarmlar kurarak sistem üzerinde oluşmuş hata, yavaşlık ve anomalileri kontrol edebilme imkanı..
Bu açıdan aşağıdaki 2 ürünü Sentry ve LogRocket basit anlamda gözden geçirelim..
Sentry
Sentry daha çok hata yakalamaya odaklanmış bir araç. Sentry’nin instrumentation kütüphanesini kendi projenize ekliyorsunuz. Burada projenize göre farklılaşmış bir çok kütüphane bulunuyor.
Bu entegrasyonu yaptığınızda Sentry’nin Web Uygulamasına Veriler akmaya başlıyor.
- Projects: Instrument edilmiş uygulamalardan verilerini aynı grup altında toplamak istediğiniz, ve bunları takım elemanları ile görüntüleyip değerlendirmek istediğiniz sanal kapsam alanları oluşturup, yönetebilmenizi sağlayan kısımdır.
- Issues: Bu kısım hataları görüntülemenizi ve bunları yönetmenizi sağlayan kısımdır. (Hataları kullanıcılara atayıp, takip edebilmenizi sağlıyor)
- Performance : Web sayfasının Mobile, Web ve Backend açısından performansını analiz eden kısımdır.
- Profiling: Fonksiyon seviyesine inerek yavaş çalışan kaynakların flamegraph ile callstack analiz etmenizi sağlayan kısımdır. (Detaylı analiz)
- Release: Uygulamanızın yeni versiyonu, bundle ise (kaynak kodları) vb… yeni versiyon üzerinden takip sağlamanızı olanak sunar. Burda bir özellikte Env. Siz uygulamanızın başında yani initialization sırasında uygulamanızın (lab, stating, prod) olduğunuda belirtebilirsiniz.
- User Feedback: Kullanıcıların uygulamanız ile ilgili Feedback topladıkları ve gösterdikleri kısım.
- Discover : Transaction bazlı farklı ortamlar arasında giden gelen çağrıları ve oluşan hataları birim bazlı sorgulamanıza, rapor ve alarm oluşturmanız için alt yapı sunar. Bunu yaparken kendi atadığı Tag ve CustomTag lar üzerinden bu işlemi yapabilmenizi sağlar.
- Alert: Query üzerinden hazır alarmlar kurmanıza olanak sağlar.
- Dashboard: Chart veya bir takım istatiksel veriler üzerinden analizler için Dashboard oluşturmanızı sağlar.
LogRocket
LogRocket ise bana göre Sentry’den olaya biraz daha farklı bakıyor. Sentry daha çok hatalara ve hata yönetimine odaklanırken, LogRocket FullStory ve Sentry ‘deki benzer özellikleri bünyesinde toplayarak
- Hem kullanıcın davranış analizini yapmanıza izin veriyor (Replay)
- Hem bu replay sırasında Developer Tool üzerinde akan tüm XHR versisi üzerinde giden/gelen veriyi görmenizi
- Aynı zamanda hataları yakalamanızı sağlıyor.
Bunun yanında Dashboard, Session, Issues Sentry benzer özelliklere sahip.
Bunun yanında Metrics HeatMap, PathAnaysis, Conversion Funnels gibi yapılarda FullStory, ve Heap gibi daha Business ve Marketing amaçlı sorgularınıza da cevap verebilecek nitelikte.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
