ReportingObserver: Kodunuzun durumunu öğrenme

Philip Walton

Özet

Kasabaya yeni bir gözlemci geldi. ReportingObserver, sitenizin desteği sonlandırılmış bir API'yi kullandığını veya tarayıcı müdahalesiyle karşılaştığını öğrenmenizi sağlayan yeni bir API'dir:

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ğırma, daha ayrıntılı analiz için raporları arka uç veya analiz sağlayıcıya göndermek için kullanılabilir.

Bu neden yararlı? Şu ana kadar kullanımdan kaldırma ve müdahale uyarıları, Geliştirici Araçları'nda yalnızca konsol mesajları olarak sunuluyordu. Özellikle müdahaleler, yalnızca cihaz ve ağ koşulları gibi gerçek dünyadan çeşitli kısıtlamalar tarafından tetiklenir. Bu nedenle, bir siteyi yerel olarak geliştirirken/test ederken bu mesajları hiç görmeyebilirsiniz. ReportingObserver bu soruna çözüm sunar. Kullanıcılar doğada potansiyel bir sorun yaşadığında bu konuda bilgilendirebiliyoruz.

Giriş

Bir süre önce, web uygulamasında gerçekleşen "şeyleri" izlemek için çok sayıda API olduğunu fark ettiğim için "Web uygulamanızı gözlemleme" başlıklı bir blog yayını yazdım. Örneğin, DOM hakkında bilgi gözlemleyebilen API'ler vardır: ResizeObserver, IntersectionObserver, MutationObserver. Performans ölçümlerini yakalamak için API'ler vardır: PerformanceObserver. window.onerror ve window.onunhandledrejection gibi diğer API'ler, bir sorun olduğunda bizi bilgilendirir.

Ancak, mevcut API'ler tarafından yakalanmayan başka uyarı türleri de vardır. Siteniz kullanımdan kaldırılmış bir API kullandığında veya tarayıcı müdahalesiyle karşılaştığında DevTools size bu sorunları ilk olarak bildirir:

Doğal olarak window.onerror'ün bu uyarıları yakaladığını düşünebilirsiniz. Böyle bir durum söz konusu değil! Bunun nedeni, window.onerror ürününün doğrudan kullanıcı aracısı tarafından oluşturulan uyarılar için tetiklenmemesidir. Bu olay, kodunuzun yürütülmesinden kaynaklanan çalışma zamanı hataları (JS istisnaları ve söz dizimi hataları) için tetiklenir.

ReportingObserver, bu açığı kapatır. Kullanımdan kaldırma ve müdahaleler gibi tarayıcı tarafından yayınlanan uyarılar hakkında programatik bir şekilde bildirim almak için kullanılır. Bu raporu bir raporlama aracı olarak kullanabilir ve kullanıcıların canlı sitenizde beklenmedik sorunlarla karşılaşıp karşılaşmadığını merak ederek daha az uyku çekebilirsiniz.

API

API, IntersectionObserver ve ResizeObserver gibi diğer "izleyici" API'lerinden farklıdır. Siz geri arama yaparsınız, o da size bilgi verir. Geri çağırmanın aldığı bilgiler, sayfada neden olduğu sorunların bir listesidir:

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 ön filtre uygulayabilir:

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

Arabelleğe alınmış raporlar

buffered: true seçeneği, gözlemci oluşturulmadan önce oluşturulan raporları görmek istediğinizde çok kullanışlıdır:

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

ReportingObserver kullanan bir kitaplığı yavaş yükleme gibi durumlar için idealdir. Gözlemci geç eklenir, ancak sayfanın daha erken yüklenmesi sırasında olan hiçbir şeyi kaçırmazsınız.

Gözlemlemeyi durdurma

Evet. Bu bir disconnect yöntemi vardır:

observer.disconnect(); // Stop the observer from collecting reports.

Örnekler

Örnek: Tarayıcı müdahalelerini bir analiz sağlayıcıya bildirme:

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

observer.observe();

Örnek: 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, web uygulamanızdaki olası sorunları keşfetmek ve izlemek için size ek bir yol sunar. Hatta kod tabanınızın sağlığını (veya eksikliğini) anlamak için faydalı bir araçtır. Arka uçta rapor gönderin, kullanıcıların sitenizde karşılaştığı gerçek sorunları öğrenin, kodu güncelleyin ve kâr edinin.

Gelecekte yapılacak çalışmalar

Gelecekte ReportingObserver'ün JS'de her türlü sorunu yakalamak için varsayılan API olmasını umuyorum. Uygulamanızdaki tüm hataları yakalayan tek bir API'yi düşünün:

• Tarayıcı müdahaleleri
• Kullanımdan kaldırmalar
• Özellik Politikası ihlalleri. crbug.com/867471 adresine bakın.
• JS istisnaları ve hataları (şu anda window.onerror tarafından sağlanmaktadır).
• İşlenmemiş JS promise retleri (şu anda window.onunhandledrejection tarafından sağlanmaktadır)

ReportingObserver'ü iş akışlarına entegre eden araçlar da heyecan verici. Lighthouse, "Desteği sonlandırılan API'lerden kaçınma" denetimini çalıştırdığınızda tarayıcı desteğinin sonlandırılmasını işaretleyen bir araç örneğidir:

Lighthouse, konsol mesajlarını taramak ve bu sorunları geliştiricilere bildirmek için şu anda DevTools protokolünü kullanır. Bunun yerine, iyi yapılandırılmış kullanımdan kaldırma raporları ve anticipatedRemoval tarihi gibi ek meta veriler için ReportingObserver sürümüne geçiş yapmak ilginizi çekebilir.

Ek kaynaklar:

• W3c spec
• chromestatus.com girişi