ReportingObserver API ile kod durumunu öğrenme

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

Eric Bidelman
Twitter GitHub Ana sayfa

ReportingObserver, siteniz kullanımdan kaldırılmış bir API'yi kullandığında veya bir tarayıcı müdahalesiyle çalıştığında bunu size bildirir. Başlangıçta Chrome 69'da kullanıma sunulan temel işlevler. Chrome 84 sürümünden itibaren çalışanlarda kullanılabiliyor.

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ı analiz için bir arka uca veya analiz sağlayıcısına gönderin.

Neden faydalı oldu? Kullanımdan kaldırma ve müdahale uyarıları, bu API'ye kadar yalnızca Geliştirici Araçları'nda Konsol mesajları olarak sunuluyordu. Özellikle müdahaleler, yalnızca cihaz ve ağ koşulları gibi gerçek dünyadaki çeşitli kısıtlamalar tarafından tetiklenir. Bu nedenle, bir siteyi yerel olarak geliştirirken/test ederken bu mesajları asla göremeyebilirsiniz. ReportingObserver, bu sorun için bir çözüm sunar. Kullanıcılar doğada potansiyel sorunlarla karşılaştığında web geliştiricileri bu sorunlar hakkında bilgilendirilebilir.

Arka plan

Bir süre önce, bir blog yayını yazdım (Web uygulamanızı gözlemleme). Çünkü bir web uygulamasında olan "öğeleri" izlemek için ne kadar API olduğunu çok ilginç buldum. Örneğin, DOM ile ilgili bilgileri gözlemleyebilen API'ler vardır: ResizeObserver, IntersectionObserver, MutationObserver. PerformanceObserver performans ölçümlerini yakalar. Hatta window.onerror ve window.onunhandledrejection gibi yöntemler, bir şeyler ters gittiğinde bize haber verir.

Bununla birlikte, mevcut API'lerin yakalayamadığı başka uyarı türleri de vardır. Siteniz kullanımdan kaldırılmış bir API kullandığında veya bir tarayıcı müdahalesiyle karşılaştığında, bunları size ilk olarak Geliştirici Araçları anlatır:

Desteği sonlandırmalar 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.

Doğal olarak window.onerror ürününün bu uyarıları yakaladığı düşünülebilir. Ama bu doğru 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. Kodun yürütülmesinden kaynaklanan çalışma zamanı hataları (JavaScript istisnaları ve söz dizimi hataları) için tetiklenir.

ReportingObserver slack'i deniyor. Kullanımdan kaldırma ve müdahaleler gibi tarayıcılar tarafından verilen uyarılar hakkında bildirim almak için programatik bir yol sağlar. Bu aracı bir bildirim aracı olarak kullanabilir ve kullanıcıların canlı sitenizde beklenmedik sorunlarla karşılaşıp karşılaşmadığını düşünerek uykunuzu yitirebilirsiniz.

API

ReportingObserver, IntersectionObserver ve ResizeObserver gibi diğer Observer API'lerinden farklı değildir. Geri arar ve size bilgi verir. Geri çağırmanın aldığı bilgi, sayfanın 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();

Filtrelenen raporlar

Raporlara, yalnızca belirli rapor türlerini gözlemlemek için önceden filtre uygulanabilir. Ş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 işleminin öncesinde olan hiçbir şeyi kaçırmazsınız.

Gözlemlemeyi durdur

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

observer.disconnect();

Örnekler

Tarayıcı müdahalelerini 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ğında 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şfedip izlemeniz için ek bir yöntem sunar. Hatta kod tabanınızın durumunu (veya eksikliğini) anlamak için de faydalı bir araçtır. Raporları arka uca gönderin, gerçek dünyadaki sorunları öğrenin, kodu güncelleyin, kâr edin!

Gelecekteki çalışmalar

Gelecekte ReportingObserver ürününün, JavaScript'teki her tür sorunu yakalamak için fiilen API haline gelmesini umuyorum. Uygulamanızda ters giden her şeyi yakalayacak bir API düşünün:

Ek kaynaklar:

Sieuwert Otterloo'nun Unsplash'teki hero resmi.