ReportingObserver: Kodunuzun durumunu öğrenme

Philip Walton

Özet

Kasabaya yeni bir gözlemci geldi. ReportingObserver, sitenizde desteği sonlandırılmış bir API'yi kullandığında veya bir tarayıcı müdahalesiyle karşılaştığında bunu 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 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çbir zaman göremeyebilirsiniz. ReportingObserver, bu sorun için çözüm sunar. Kullanıcılar doğada potansiyel bir sorun yaşadığında bu konuda bilgilendirebiliyoruz.

Giriş

Bir süre önce bir blog yayını ("Web uygulamanızı gözlemleme") yazmıştım. Bu nedenle bir web uygulamasında gerçekleşen "öğeleri" izlemek için kullanılabilecek API'lerin sayısı çok büyümüştü. Örneğin, DOM ile ilgili bilgileri gözlemleyebilen API'ler var: 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 bize haber bile verir.

Ancak, bu mevcut API'ler tarafından yakalanmayan başka uyarı türleri de vardır. Siteniz desteği sonlandırılan bir API kullandığında veya tarayıcı müdahalesine karşı çalıştığında, Geliştirici Araçları size bunları ilk olarak bildirir:

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ı tarafından oluşturulan uyarılar için tetiklenmemesidir. Kodunuzun çalıştırılmasından kaynaklanan çalışma zamanı hataları (JS istisnaları ve söz dizimi hataları) için tetiklenir.

ReportingObserver slack'ı seçiyor. 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. Sizi geri ararsınız, bilgi verirsiniz. 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

Gözlemci oluşturulmadan önce oluşturulan raporları görmek istediğinizde buffered: true seçeneği gerçekten 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 erken yüklenmesi sırasında olan hiçbir şeyi kaçırmazsınız.

Gözlemlemeyi durdur

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

Ö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şfetmeniz ve izlemeniz için ek bir yöntem sunar. Hatta kod tabanınızın durumunu (veya eksikliğini) anlamak için bile faydalı bir araçtır. Arka uca rapor gönderin, kullanıcıların sitenizde karşılaştığı gerçek sorunlar hakkında bilgi edinin, kodu güncelleyin, kârı artırın!

Gelecekteki işler

ReportingObserver hizmetinin JS'deki her türlü sorunu yakalamak için ileride fiili API'ye dönüşeceğini umuyorum. Uygulamanızda giden her şeyi yakalayacak bir API düşünün:

• Tarayıcı müdahaleleri
• Kullanımdan kaldırmalar
• Özellik Politikası ihlalleri. crbug.com/867471 adresine göz atın.
• JS istisnaları ve hataları (şu anda window.onerror tarafından hizmet verilmektedir).
• İşlenmemiş JS taahhütleri retleri (şu anda window.onunhandledrejection tarafından hizmet verilmektedir)

ReportingObserver ürününü iş akışlarına entegre eden araçlar konusunda da heyecanlıyım. Lighthouse, "Kullanımdan kaldırılan API'lerden kaçınıyor" denetimini çalıştırdığınızda tarayıcıların kullanımdan kaldırılma işlemlerini zaten işaretleyen bir araca örnektir:

Lighthouse, şu anda konsol mesajlarını kazımak ve bu sorunları geliştiricilere bildirmek için Geliştirici Araçları 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 sürümüne geçiş yapmak ilginizi çekebilir.

Ek kaynaklar:

• W3c spesifikasyonu
• chromestatus.com girişi