ReportingObserver API ile kod durumunu öğrenme

Üretim uygulamalarınızda desteği sonlandırılmış API'leri bulun.

ReportingObserver, sitenizde desteği sonlandırılmış bir API kullandığında veya çalıştığında bunu size bildirir tarayıcı müdahalesine neden olabilir. İlk başta temel işlevler ilk olarak Chrome 69'da kullanıma sunuldu. Chrome 84 sürümünden itibaren çalışanlarda kullanılmaktadır.

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    console.log(report.type, report.url, report.body);
  }
}, {buffered: true});

observer.observe();

Geri çağırmayı kullanarak raporları bir arka uca veya analiz sağlayıcısına analiz.

Neden yararlı? Bu API'ye kadar, kullanımdan kaldırma ve müdahale uyarıları yalnızca Geliştirici Araçları'nda Console mesajları olarak kullanılabilir. Müdahaleler, özellikle yalnızca cihaz ve ağ gibi gerçek dünyadaki çeşitli kısıtlamalar tarafından tetiklenir koşullar. Dolayısıyla bu mesajları geliştirirken/test ederken yerel olarak çalışır. ReportingObserver, bu soruna çözüm sunar. Zaman kullanıcılar normal koşullarda potansiyel sorunlarla karşılaşmaya, web geliştiricilerine bilgi verilebilir merak ediyor olabilirsiniz.

Arka plan

Bir süre önce bir blog yayını yazmıştım (Web uygulamanızı gözlemleme) Çünkü Google Analytics 4'te veri kaynaklarını izlemek için "öğeler" bunlar bir web uygulamasında gerçekleşir. Örneğin, veri merkezlerindeki DOM hakkında bilgi edinin: ResizeObserver, IntersectionObserver, MutationObserver. PerformanceObserver performans ölçümlerini yakalar. Bazı yöntemler window.onerror ve window.onunhandledrejection bir sorun olduğunda bize bildirin.

Ancak, API'lerden birini seçin. Siteniz kullanımdan kaldırılmış bir API kullandığında veya tarayıcı müdahalesi olduğunu fark ederseniz, bu istekte bulunan şekilde tanımlar:

Kullanımdan kaldırma ve müdahalelerle ilgili Geliştirici Araçları Konsolu uyarıları.
Geliştirici Araçları Konsolu'nda tarayıcı tarafından başlatılan uyarılar.

Doğal olarak window.onerror ürününün bu uyarıları yakaladığı düşünülebilir. Böyle bir durum söz konusu değil. Bunun nedeni, window.onerror ürününün doğrudan kullanıcı aracısının kendisidir. Çalışma zamanı hataları nedeniyle etkinleşir (JavaScript istisnaları ve söz dizimi hataları) sorun.

ReportingObserver slack'ı seçiyor. Bu çözüm, herkesin kullanımdan kaldırma ve müdahaleler. Bu raporu bir içerik bildirme aracı olarak kullanabilir ve kullanıcıların canlı sitenizde beklenmedik sorunlarla karşılaşıp karşılaşmadığını merak eden bir kullanıcı.

API

ReportingObserver, aşağıdaki gibi diğer Observer API'lerinden farklıdır: IntersectionObserver ve ResizeObserver. Müşteriyi geri ararsınız. sağlar size yardımcı olabilir. Geri aramanın aldığı bilgiler, sorunların bir listesidir. şu sonucu elde edersiniz:

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    // → report.type === 'deprecation'
    // → report.url === 'https://reporting-observer-api-demo.glitch.me'
    // → report.body.id === 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload'
    // → report.body.message === 'Synchronous XMLHttpRequest is deprecated...'
    // → report.body.lineNumber === 11
    // → report.body.columnNumber === 22
    // → report.body.sourceFile === 'https://reporting-observer-api-demo.glitch.me'
    // → report.body.anticipatedRemoval === <JS_DATE_STR> or null
  }
});

observer.observe();

Filtrelenmiş raporlar

Raporlar yalnızca belirli rapor türlerini gözlemleyecek şekilde önceden filtrelenebilir. Şu anda İki rapor türü vardır: 'deprecation' ve 'intervention'.

const observer = new ReportingObserver((reports, observer) => {
  …
}, {types: ['deprecation']});

Arabelleğe alınmış raporlar

Daha önce eklenmiş raporları görmek istediğinizde buffered: true seçeneğini kullanın. oluşturulan aşağıdaki kodu içerir:

const observer = new ReportingObserver((reports, observer) => {
  …
}, {types: ['intervention'], buffered: true});

Bu seçenek, son 30 güne ait ReportingObserver Gözlemci geç ekleniyor, ancak hiçbir şeyi kaçırmazsınız sayfa yükleme sırasında gerçekleştirilen her şey.

Gözlemlemeyi durdur

disconnect() yöntemini kullanarak gözlemi durdurun:

observer.disconnect();

Örnekler

Tarayıcı müdahalelerini bir analiz sağlayıcısına bildirme

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    sendReportToAnalytics(JSON.stringify(report.body));
  }
}, {types: ['intervention'], buffered: true});

observer.observe();

API'ler kaldırılacağı zaman bildirim alın

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    if (report.type === 'deprecation') {
      sendToBackend(`Using a deprecated API in ${report.body.sourceFile} which will be
                     removed on ${report.body.anticipatedRemoval}. Info: ${report.body.message}`);
    }
  }
});

observer.observe();

Sonuç

ReportingObserver, keşfetmeniz ve izlemeniz için ek bir yöntem sunar web uygulamanızdaki olası sorunlara dikkat edin. Hatta zaman çizelgesinin işleyiş şeklini anlamak için durumunu (veya eksikliğini) kontrol eder. Raporları arka uca göndererek gerçek dünyadaki sorunlarla ilgili, kodu güncelleme, kâr elde etme!

Gelecekteki işler

Umarım gelecekte ReportingObserver, şunun için fiilen bir API haline gelir: JavaScript'teki her tür sorunu yakalamaya yardımcı olur. Her şeyi yakalayacak bir API hayal edin sorunu çözer:

Ek kaynaklar:

Hero resim: Sieuwert Otterloo Unsplash'i açın.