ReportingObserver API ile kod durumunu öğrenme

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

ReportingObserver, siteniz kullanımdan kaldırılmış bir API kullandığında veya bir tarayıcı müdahalesiyle karşılaştığında sizi bilgilendirir. Temel işlevler ilk olarak Chrome 69'da kullanıma sunuldu. Chrome 84'ten itibaren çalışanlarda kullanılabilir.

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

observer.observe();

Raporları analiz için bir arka uca veya analiz sağlayıcıya göndermek üzere geri çağırma işlevini kullanın.

Why is that useful? Bu API'den önce, desteğin sonlandırılması ve müdahale uyarıları yalnızca Geliştirici Araçları'nda konsol mesajları olarak sunuluyordu. Özellikle müdahaleler, yalnızca cihaz ve ağ koşulları gibi çeşitli gerçek dünya kısıtlamaları tarafından tetiklenir. Bu nedenle, bir siteyi yerel olarak geliştirirken/test ederken bu mesajları hiç görmeyebilirsiniz. ReportingObserver bu soruna bir çözüm sunar. Kullanıcılar gerçek dünyada olası sorunlarla karşılaştığında web geliştiricileri bu sorunlar hakkında bilgilendirilebilir.

Arka plan

Bir süre önce, bir web uygulamasında gerçekleşen "şeyleri" izlemek için ne kadar çok API olduğunu büyüleyici bulduğum için bir blog yayını (Web uygulamanızı gözlemleme) yazmıştım. Örneğin, DOM ile ilgili bilgileri gözlemleyebilen API'ler vardır: ResizeObserver, IntersectionObserver, MutationObserver. PerformanceObserver performans ölçümlerini yakalar. window.onerror ve window.onunhandledrejection gibi yöntemler, bir şeyler ters gittiğinde bize haber bile verir.

Ancak mevcut API'ler tarafından yakalanmayan başka uyarı türleri de vardır. Siteniz, desteği sonlandırılmış bir API kullandığında veya tarayıcı müdahalesiyle karşılaştığında Geliştirici Araçları sizi ilk bilgilendiren araç olur:

Desteği sonlandırılan özellikler ve müdahaleler için Geliştirici Araçları Konsolu uyarıları.
Geliştirici Araçları Konsolu'nda tarayıcı tarafından başlatılan uyarılar.

window.onerror'in bu uyarıları yakaladığı düşünülebilir. Hayır, etkilemez. Bunun nedeni, window.onerror işlevinin doğrudan kullanıcı aracısı tarafından oluşturulan uyarılar için tetiklenmemesidir. Kod yürütmenin neden olduğu çalışma zamanı hataları (JavaScript istisnaları ve söz dizimi hataları) için tetiklenir.

ReportingObserver, eksikleri tamamlar. Desteğin sonlandırılması ve müdahaleler gibi tarayıcı tarafından verilen uyarılar hakkında programatik olarak bildirim almanızı sağlar. Bu aracı raporlama aracı olarak kullanabilir ve kullanıcıların canlı sitenizde beklenmedik sorunlarla karşılaşıp karşılaşmadığını merak ederek daha az uykusuz kalabilirsiniz.

API

ReportingObserver, IntersectionObserver ve ResizeObserver gibi diğer Observer API'lerine benzer. Geri çağırma işlevi verirsiniz, o da size bilgi verir. Geri çağırma işlevinin aldığı bilgiler, sayfanın neden olduğu sorunların 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özlemlemek için önceden filtrelenebilir. Şu anda iki rapor türü vardır: 'deprecation' ve 'intervention'.

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

Arabelleğe alınmış raporlar

Gözlemci örneği oluşturulmadan önce oluşturulan raporları görmek istediğinizde buffered: true seçeneğini kullanın:

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

Bu seçenek, ReportingObserver kullanan bir kitaplığı geç yükleme gibi durumlar için idealdir. Gözlemci geç eklenir ancak sayfa yükleme sırasında daha önce gerçekleşen hiçbir şeyi kaçırmazsınız.

Gözlemlemeyi durdurma

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

observer.disconnect();

Örnekler

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();

API'ler kaldırılacağı zaman bildirim alma

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 ek bir yöntem sunar. Kod tabanınızın durumunu (veya durumun eksikliğini) anlamak için de kullanışlı bir araçtır. Raporları arka uca gönderin, gerçek dünyadaki sorunları öğrenin, kodu güncelleyin ve kâr edin.

Gelecekte yapılacak çalışmalar

Gelecekte ReportingObserver, JavaScript'teki her tür sorunu yakalamak için fiili API haline gelecektir. Uygulamanızda ters giden her şeyi yakalayan tek bir API olduğunu düşünün:

Ek kaynaklar:

Unsplash'te Sieuwert Otterloo tarafından paylaşılan hero resim.