Ön Uç Gözlemlenebilirliği: Ne ve Neden

Arka uç gözlemlenebilirliği yerleşiktir: günlükler olayları kaydeder, ölçümler kaynak kullanımını izler ve dağıtık izler istekleri mikro hizmetler boyunca takip eder. Datadog, Prometheus ve Jaeger gibi araçlar canlı arka uç sistemlerinde yaygın olarak kullanılır.

Ön yüz gözlemlenebilirliği, kullanıcıların React uygulamanızla etkileşime girerken yaşadığı deneyimi izleyen daha yeni bir alandır. Buna kullanıcı etkileşimlerini kaydetme, oluşturma performansını ölçme, ağ isteklerini gözlemleme ve tarayıcıdaki JavaScript hatalarını yakalama dahildir.

Arka ucunuz tamamen sağlıklı görünebilir — hata oranları düşük, veritabanı sorguları hızlı olabilir — ancak kullanıcılar yavaş, takılan veya bozuk bir arayüzle karşılaşıyor olabilir. Ön yüz gözlemlenebilirliği, yalnızca sunucunun ne yaptığını değil, kullanıcıların gerçekte ne yaşadığını ölçerek bu boşluğu kapatır.

Bir ön yüz izi, kullanıcı eylemiyle tetiklenen olaylar zincirini yakalar: bir düğmeye tıklama, React durum güncellemesini tetikleme, bir API'den veri alma ve sonucu oluşturma. Bu iz, kullanıcının amacını, bunu gerçekleştiren bileşenlere ve bu bileşenlerin yaptığı ağ çağrılarına bağlar.

Arka uç ölçümlerinin ön yüzdeki karşılığı Web Vitals'tır: LCP (En Büyük İçerikli Boyama) yükleme hızını, INP (Sonraki Boyamaya Etkileşim) yanıt verebilirliği ve CLS (Kümülatif Düzen Kayması) görsel kararlılığı ölçer. Bunlar, Google'ın Temel Web Ölçümleri sıralaması için kullandığı ölçümlerdir.

Ön yüz günlükleri, tarayıcıdaki hataları, uyarıları ve bilgilendirici olayları yakalar. Temel sinyaller console.error çağrıları, işlenmemiş JavaScript istisnaları (window.onerror), işlenmemiş Promise reddedilmeleri (window.onunhandledrejection) ve React hata sınırlarının yakaladığı hatalardır.

Gerçek Kullanıcı İzleme, canlı ortamda gerçek kullanıcıların tarayıcılarından gözlemlenebilirlik verileri toplar. RUM, tarayıcıyı otomatik olarak araçlandırarak performans zamanlamalarını, hataları ve kullanıcı etkileşimlerini gerçekleşirken yakalar. Bu, hiçbir sentetik testin taklit edemeyeceği gerçek dünya verilerini sağlar.

Sentetik İzleme, kullanıcı etkileşimlerini kontrollü bir ortamda benzetmek için otomatik araçlar (Lighthouse CI, Playwright, WebPageTest) kullanır. Öngörülebilirdir ve gerilemeleri kullanıcılara ulaşmadan önce yakalar; ancak gerçek kullanıcıların cihaz, ağ ve kullanım biçimlerindeki çeşitliliği yakalayamaz.

React için tüm özellikleri hazır RUM sunan birkaç ticari araç vardır: Datadog RUM (tam yığın izleri için Datadog APM ile bütünleşir), New Relic Browser ve Sentry Performance (hataları ve performansı tek bir SDK'da yakalar). Bunların bütünleştirilmesi hızlıdır, ancak büyük ölçekte pahalıdır.

OpenTelemetry, izleri, ölçümleri ve günlükleri toplamak için sağlayıcıdan bağımsız API'ler ve SDK'lar tanımlayan bir CNCF projesidir. OpenTelemetry ile araçlandırma yaptığınızda verilerinizin sahibi olursunuz ve bunları uyumlu herhangi bir arka uca — Jaeger, Grafana Tempo, Honeycomb, Datadog veya kendi veri hattınıza — gönderebilirsiniz.

Ön yüz gözlemlenebilirliği olmadan yavaş bir kullanıcı deneyimi, mühendislik ekipleri için neredeyse görünmezdir. Müşteri destek taleplerinde artış veya dönüşüm oranlarında düşüş görebilirsiniz; ancak tarayıcıdan gelen izler ve ölçümler olmadan temel nedeni belirlemek tahmine dayanır.

Gerçek Kullanıcı İzleme (RUM) ile Sentetik İzleme arasındaki temel fark nedir?

Ön yüz gözlemlenebilirliği üç temel unsuru — izleri, ölçümleri ve günlükleri — tarayıcıya uygular. RUM gerçek kullanıcı deneyimlerini yakalarken Sentetik İzleme gerilemeleri erkenden yakalar. Web Vitals (LCP, INP, CLS), ön yüzün temel ölçümleridir. OpenTelemetry, bu verileri toplamak ve dışa aktarmak için sağlayıcıdan bağımsız bir standart sunarak gözlemlenebilirlik arka ucunuzu seçme özgürlüğü verir.