ReportingObserver: Kodunuzun durumunu öğrenme

Philip Walton

Özet

Kasabaya yeni bir gözlemci geldi. ReportingObserver, aşağıdakileri yapmanıza olanak tanıyan yeni bir API'dir: sitenizin kullanımdan kaldırılmış bir API kullandığını veya tarayıcı müdahalesi:

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, raporları arka uca veya analiz sağlayıcıya göndermek için kullanılabilir kullanabilirsiniz.

Neden yararlı? Şimdiye kadar, desteğin sonlandırılması Müdahale uyarıları, Geliştirici Araçları'nda yalnızca konsol mesajları olarak bulunuyordu. Özellikle müdahaleler, yalnızca gerçek dünyadaki çeşitli kısıtlamalar tarafından tetiklenir. bazı ayarlar vardır. Dolayısıyla bu iletileri hiç yerel olarak geliştirmede/test etmede yaygındır. ReportingObserver, olduğunu söylüyor. Kullanıcılar doğal ortamda potansiyel sorunlarla karşılaştıklarında, bilgilendirilmeyi tercih edebiliriz.

Giriş

Bir süre önce bir blog yayını yazmıştım ("Web uygulamanızı gözlemleme") Çünkü Google Analytics 4'te veri kaynaklarını izlemek için "öğeler" bunlar bir web uygulamasında gerçekleşir. Örneğin, veri merkezlerindeki DOM hakkında bilgi: ResizeObserver, IntersectionObserver, MutationObserver. Veri yakalamayı sağlayan API'ler vardır. performans ölçümleri: PerformanceObserver. Diğer Hatta window.onerror ve window.onunhandledrejection gibi API'ler hakkında bir şeyler ters gittiğinde kararlar verebilirsiniz.

Ancak, bu kontroller tarafından yakalanmayan başka uyarı türleri de vardır. API'lerden birini seçin. Siteniz desteği sonlandırılan bir API kullandığında veya çalıştığında bir tarayıcı müdahalesine karşın Geliştirici Araçları, Bunlar hakkında:

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 uyarılar için tetiklenmemesidir. tarafından oluşturulur. Çalışma zamanı hataları nedeniyle etkinleşiyor (JS istisnaları ve söz dizimi hataları).

ReportingObserver slack'ı seçiyor. Bu çözüm, herkesin kullanımdan kaldırma gibi tarayıcı tarafından yayınlanan uyarılar hakkında bilgilendirilir ve müdahaleler. Raporu rapor aracı olarak kullanabilir Kullanıcıların canlı yayınınızda beklenmedik sorunlarla karşılaşıp karşılaşmadığını merak ederek daha az uykunuzu kaybedersiniz girin.

API

API diğer "izleyici"den farklı değildir Bunun gibi API'ler IntersectionObserver ve ResizeObserver olarak. Müşteriyi geri ararsınız. size bilgi verir. Geri çağırmanın aldığı bilgi, sayfanın neden olduğu sorunların listesi:

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, her bir arama teriminin Gözlemci oluşturulmadan önce oluşturulan raporlar:

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

ReportingObserver. Gözlemci geç ekleniyor, ancak kaçırmayın.

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, keşfetmeniz ve izlemeniz için ek bir yöntem sunar web uygulamanızdaki olası sorunlara dikkat edin. Hatta zaman çizelgesinin işleyiş şeklini anlamak için durumunu (veya eksikliğini) kontrol eder. Raporları arka uca göndererek Kullanıcıların sitenizde karşılaştığı gerçek sorunlar hakkında bilgi sahibi olun, güncelleyin kod, kâr!

Gelecekteki işler

Gelecekte ReportingObserver ürününün de fiili API olmasını umuyorum JS'deki her tür sorunu yakalamak için kullanılır. Her şeyi yakalayacak bir API hayal edin sorunu çözer:

• 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 ile entegre yürütülebilecek araçlar konusunda da heyecanlıyım. uygulayacaksınız. Lighthouse, bir dizi araca örnek olarak kullandığınızda, tarayıcı desteğinin sonlandırılmasının zaten işaretlendiğini "Kullanımdan kaldırılan API'lerden kaçınıyor" denetim:

Lighthouse şu anda Geliştirici Araçları protokolünü kullanmaktadır konsol mesajlarını kazıyın ve bu sorunları geliştiricilere bildirin. Bunun yerine ReportingObserver sürümüne geçmek ilginizi çekebilir ve destek almak için kullanabileceğiniz, anticipatedRemoval tarih.

Ek kaynaklar:

• W3c spesifikasyonu
• chromestatus.com girişi