Gerçek Kullanıcı İzleme ve Web Vitals

Google'ın web-vitals npm paketi, gerçek kullanıcıların tarayıcılarında Temel Web Hayati Metriklerini ölçmek için basit bir API sağlar. Paketi npm install web-vitals ile yükleyin ve ayrı metrik geri çağırmalarını içe aktarın: onLCP, onFID (kullanımdan kaldırılmıştır), onCLS, onFCP, onTTFB ve Sonraki Boyamaya Etkileşim için modern onINP.

Her geri çağırma (onLCP, onCLS, onINP vb.), şunları içeren bir metrik nesnesi alır: name ('LCP'), value (milisaniye cinsinden değer veya birimsiz puan), rating ('good', 'needs-improvement', 'poor') ve id (yinelenen kayıtları ayırt etmek için benzersiz bir tanımlayıcı). Geri çağırma, metrik değeri kesinleştiğinde bir kez çalışır.

Metrikleri analiz uç noktanıza bildirmek için Navigator.sendBeacon API'sini veya fetch kullanın. sendBeacon tercih edilir; çünkü sayfa kapatıldıktan sonra bile çalışmaya devam eder — bu, sayfa gizlendiğinde kesinleşen CLS gibi metrikler için kritik öneme sahiptir. Mümkün olduğunda tüm metrik bildirimlerini tek bir gönderimde toplu olarak gönderin.

Web Vitals'ı OpenTelemetry ile bütünleştirmek için her metrik için Gauge araçları oluşturun: const lcp = meter.createObservableGauge('web_vitals.lcp'). Her onLCP geri çağırmasında değeri ilgili özniteliklerle (sayfa yolu, cihaz türü) kaydedin. Gözlemlenebilirlik arka ucunuz daha sonra P75 LCP gerilemeleri için uyarı oluşturabilir.

Web Vitals tarafından yakalanmayan React'e özgü performansı ölçmek için Kullanıcı Zamanlama API'sini kullanın: işleme başlamadan önce performance.mark('render-start'), işlemden sonra performance.mark('render-end') ve ardından performance.measure('component-render', 'render-start', 'render-end'). Bu ölçümler Chrome DevTools Performans sekmesinde görünür.

React Profiler bileşeni bir alt ağacı sarar ve zamanlama verilerini içeren onRender geri çağırmasını çağırır: id (Profiler kimliği), phase ('mount' veya 'update'), actualDuration (işleme süresi), baseDuration (not alma olmadan tahmini işleme süresi). Yavaş bileşenleri belirlemek için bunu geliştirme sırasında kullanın.

Yakalanmamış hatalar ve Promise reddedilmeleri, hata durumuna sahip OpenTelemetry iz aralıkları olarak yakalanabilir. Genel dinleyicileri ayarlayın: window.addEventListener('error', handler) ve window.addEventListener('unhandledrejection', handler). Bir iz aralığı oluşturun, span.setStatus({ code: SpanStatusCode.ERROR }) kullanarak durumunu ayarlayın, hata mesajını ve yığın izini öznitelik olarak ekleyin, ardından iz aralığını sonlandırın.

React Hata Sınırları, bileşen ağacındaki işleme hatalarını yakalar. componentDidCatch yönteminde hatayı temsil eden bir OpenTelemetry iz aralığı oluşturun, durumunu ERROR olarak ayarlayın, error.message ve componentStack değerlerini öznitelik olarak ekleyin ve span.end() çağrısını yapın. Bu işlem, React işleme hatalarını dağıtık izleme işlem hattınıza yönlendirir.

Küçültülmüş üretim JavaScript'i, "a.b at bundle.min.js:1:84721" gibi okunamayan yığın izleri üretir. Ham yığın izlerinin özgün TypeScript dosya adlarına ve satır numaralarına otomatik olarak çözümlenebilmesi için CI/CD derleme süreciniz sırasında kaynak eşlemelerini Sentry, Datadog veya OpenTelemetry işlem hattınıza yükleyin.

Her oturum için tam iz verisi göndermek maliyetlidir. Oturum örneklemesi uygulayın: ilk sayfa yüklemesinde rastgele bir sessionSampled bayrağı atayın ve bunu sessionStorage içinde saklayın. OpenTelemetry SDK'sını yalnızca örneklenmiş oturumlar için başlatın ve izleri yalnızca bu oturumlarda gönderin (örneğin %10). Hata içeren oturumların her zaman %100'ünü örnekleyin.

OpenTelemetry metrikleri olarak bildirilen Web Vitals, SLO tabanlı uyarılar oluşturmayı mümkün kılar: 1 saatlik bir zaman aralığında P75 LCP, oturumların %5'inden fazlası için 2,5 saniyeyi aşarsa bir uyarı oluşturun. Bu, mühendislik ekiplerine arka uç altyapısı metrikleri yerine doğrudan kullanıcı deneyimine bağlı, eyleme dönüştürülebilir sinyaller sağlar.

web-vitals kitaplığındaki onLCP geri çağırması ne zaman çalışır?

web-vitals kitaplığı, gerçek kullanıcıların tarayıcılarında LCP, INP, CLS, FCP ve TTFB ölçümü için basit geri çağırmalar sağlar. SLO tabanlı uyarılar oluşturmak için bunları OpenTelemetry metrikleri olarak bildirin, genel dinleyiciler ve React Hata Sınırları aracılığıyla hataları OpenTelemetry iz aralıkları olarak yakalayın ve küçültülmüş yığın izlerini çözümlemek için kaynak eşlemelerini yükleyin. Veri hacmini yönetirken hata kapsamını %100 korumak için oturumları örnekleyin.