ReportingObserver: Kodunuzun durumunu öğrenme

Özet

Şehirde yeni bir gözlemci var. ReportingObserver, sitenizin kullanımdan kaldırılmış bir API'yi kullandığını veya bir tarayıcı müdahalesiyle karşılaştığını size bildiren 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ı bir arka uca veya analiz sağlayıcısına göndermek amacıyla kullanılabilir.

Neden faydalı oldu? Şimdiye kadar, kullanımdan kaldırma 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 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çbir zaman görmeyebilirsiniz. ReportingObserver bu sorunun çözümünü sunar. Kullanıcılar vahşi yaşamda potansiyel sorunlarla karşılaştığında onlar hakkında bilgilendirilebiliriz.

Giriş

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

Ancak bu 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 bir tarayıcı müdahalesiyle karşılaştığında, bu durumlarla ilgili olarak ilk olarak Geliştirici Araçları size bilgi verir:

Doğal olarak window.onerror ürününün bu uyarıları yakaladığı düşünülebilir. Hayır! Bunun nedeni, window.onerror ürününün doğrudan kullanıcı aracısı tarafından oluşturulan uyarılar için etkinleşmemesidir. Kodunuzun yürütülmesinden kaynaklanan çalışma zamanı hataları (JS 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 yayındaki sitenizde beklenmedik sorunlarla karşılaşıp karşılaşmadığını düşünerek uykunuzu yitirebilirsiniz.

API

API, IntersectionObserver ve ResizeObserver gibi diğer "gözlemci" API'lerden farklı değildir. Telefonu 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:

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 oldukça kullanışlıdır:

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

ReportingObserver kullanan bir kitaplığı geç yükleme gibi durumlar için idealdir. Gözlemci geç eklenir, ancak sayfanın daha önceki bölümlerinde gerçekleşen hiçbir şeyi kaçırmazsınız.

Gözlemlemeyi durdur

Evet. disconnect yöntemi var:

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

Örnekler

Örnek: Tarayıcı müdahalelerini bir analiz sağlayıcısına bildirin:

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ıldığı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 potansiyel 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ı bir arka uca gönderin, kullanıcıların sitenizde karşılaştığı gerçek sorunları öğrenin, kodu güncelleyin ve kâr edin.

Gelecekteki çalışmalar

Gelecekte ReportingObserver, JS'deki her türlü sorunu yakalamak için kullanılan yerleşik API haline gelir. Uygulamanızda ters giden her şeyi yakalayacak bir API düşünün:

• Tarayıcı müdahaleleri
• Kullanımdan kaldırmalar
• Özellik Politikası ihlalleri. crbug.com/867471 adresini ziyaret edin.
• JS istisnaları ve hataları (şu anda window.onerror tarafından hizmet veriliyor).
• İşlenmemiş JS vaat retleri (şu anda window.onunhandledrejection tarafından hizmet veriliyor)

Ayrıca ReportingObserver iş akışlarına entegre eden araçlar beni heyecanlandırıyor. Lighthouse, "Kullanımdan kaldırılan API'leri önler" denetimini çalıştırdığınızda tarayıcının kullanımdan kaldırılmasını zaten işaretleyen bir araç örneğidir:

Lighthouse, şu anda konsol mesajlarını kazımak ve bu sorunları geliştiricilere bildirmek için DevTools protokolünü kullanmaktadır. Bunun yerine, iyi yapılandırılmış kullanımdan kaldırma raporları ve anticipatedRemoval tarihi gibi ek meta veriler için ReportingObserver ürününe geçmek ilginç olabilir.

Ek kaynaklar:

• W3c spesifikasyonu
• chromestatus.com girişi