Photo by Chris Lawton on Unsplash

Frontend Monitoring

Sentry’deki Bazı Kavramlar, Project, Env, Release ve SourceMap

Frontend Monitoring araçlarından bir taneside Sentry. Bu yazıda Sentry bazı kavramların ne anlama geldiğinden ve nasıl kullanıldığından bahsedeceğim.

Çalıştırdığınız Frontend veya Backend uygulamaları olsun, çalıştırılan servisin her bir uygulama olarak geçiyor. Biz bunların her birisini ayrı projeler altında tutuyoruz.

Sentry tanıtılan Proje

Bu Projeye baktığımızda Overview kısmında öncelikle ;

• Transaction Count: Frontend deki tekil bir yapıdaki işlemi kayıt altına alınmış hali.. page load (sayfa yükleme), page navigation (sayfa yönlendirme) veya asynchronous task (Backend ile iletişim vb..)
• Error Count: Yapılan UI işlemleri sırasında oluşan hata sayısı…
• Bunun yanında Crash Free Sessions, Crash Free Users, Apdex vb bilgilerde geliyor.

Farklı ekiplerin veya kişilerin bu Projeleri görmesini sağlayan bir yapısı bulunuyor. Bu sayede farklı ekipler içerisindeki kişiler Proje içerisinde gerçekleşen monitorig işlemlerini görüyüyor..

Sentry’deki Projeyi Farklı Ekip ve Kişilerin Görmesi

Şimdi de gelelim Uygulama tarafına Sentry ilk initialize ettiğimizde nelere göre bilgi gönderiyoruz.

Frontend Uygulamanız İle Sentry Projesi Arasında bağlantı.

Öncelikle Frontend Uygulamanıza bir takım NPM paketleri kurmanızı istiyor. Bu paketler Frontend uygulamanızın Sentry ile iletişimini sağlayacak kaynak kodları içeriyor.

Sentry modülü ilk uygulama ayaga kalkarken bir takım bilgileri iletmeniz gerekiyor ki Sentrty kısmındaki Proje ile eşleşsin ve

• DSN (Domain Source Name) : Uygulamanıza verdiği bir UniqueIdentifier ile işaretlemenizi ve bir endpoint üzerinden Sentry Agent yakaladığı Trace,Transaction ve Event gibi bilgileri ilgili Proje ile eşleştirmeyi sağlar.
• Env: Environment setlemeniz önemli uygulamanızın hangi ortamda takip edildiğini, hatanın veya bilginin Lab mı Production danmı geldiğini anlayıp ona göre farklı önlemler almanızı sağlar.
• Release: Aynı ortamda uygulamanızın farklı Release çalışıyor olabilir örneğin A/B Testing yapıyorsunuzdur. Veya bazı kullanıcılarda güncelleme olmadığı için eski build sizin kaynağınıza bilgi geliyordur. Bir bug fix yapmıssınızdır durumu kontrol etmek istiyorsunuzdur. Bunun için her uygulamayı ilgili ortama gönderirken Last Commit → Hash alarak ReleaseID oluşturursanız bu ilgili hata veya geliştirmenizin durumunu daha iyi test etmenizi sağlar.

Bundling SourceMap Dosyalarının Sentry Yüklenmesi

Eğer ki Projenizi Webpack, Vite vb.. araçlar ile Build ederken Bundle yapıyor ve Source Map Kodları Build’in içerisinde çıkartıyorsanız . Sentry tarafında oluşan Error (Hata) ve Transaction kodları bundlemiş kod içerisinden çok da anlaşılmayacaktır.

SOURCEMAP=false

Sentry’nin buna farklı farklı çözüm yöntemleri bulunur. Linkte bunun detaylarını görebilirsiniz. Ben olayın mantığından bahsedeceğim.

Sentry API, Webpack Plugin vb.. yöntemlerde size verdiği bir Token üzerinden SourceMap dosyalarını Sentry üzerine atmanız sağlar. Tabi bunları bir ReleaseId ile atmanız lazım ki.. Kodunuzun relase edildiği bundle edilmiş dosyaları ile map dosyaları arasında ilişki kurabilsin.

Bu sayede SourceMap dosyalarınız ilgili ortamda bulunmuyor olsa bile Sentry de bunların SourceMap dosyaları olduğu için olası bir hatanın detaylarını daha net görebilirsiniz.