Üretim uygulamalarınızda desteği sonlandırılmış API'leri bulun.
ReportingObserver
, sitenizde desteği sonlandırılmış bir API kullandığında veya çalıştığında bunu size bildirir
tarayıcı müdahalesine neden olabilir. İlk başta temel işlevler
ilk olarak Chrome 69'da kullanıma sunuldu. Chrome 84 sürümünden 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();
Geri çağırmayı kullanarak raporları bir arka uca veya analiz sağlayıcısına analiz.
Neden yararlı? Bu API'ye kadar, kullanımdan kaldırma ve müdahale uyarıları
yalnızca Geliştirici Araçları'nda Console mesajları olarak kullanılabilir. Müdahaleler, özellikle
yalnızca cihaz ve ağ gibi gerçek dünyadaki çeşitli kısıtlamalar tarafından tetiklenir
koşullar. Dolayısıyla bu mesajları geliştirirken/test ederken
yerel olarak çalışır. ReportingObserver
, bu soruna çözüm sunar. Zaman
kullanıcılar, doğal ortamda potansiyel sorunlarla karşılaşmaya, web geliştiricilerine bilgi verilebilir
merak ediyor olabilirsiniz.
Arka plan
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 edinin:
ResizeObserver
,
IntersectionObserver
,
MutationObserver
.
PerformanceObserver
performans ölçümlerini yakalar. Bazı yöntemler
window.onerror
ve
window.onunhandledrejection
bir sorun olduğunda bize bildirin.
Ancak, API'lerden birini seçin. Siteniz kullanımdan kaldırılmış bir API kullandığında veya tarayıcı müdahalesi olduğunu fark ederseniz, bu istekte bulunan şekilde tanımlar:
![Kullanımdan kaldırma ve müdahalelerle ilgili Geliştirici Araçları Konsolu uyarıları.](https://developer.chrome.com/static/docs/capabilities/web-apis/reporting-observer/image/devtools-console-warnings-7e65d798d802f.png?authuser=5&hl=tr)
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ının kendisidir. Çalışma zamanı hataları nedeniyle etkinleşir (JavaScript istisnaları ve
söz dizimi hataları) sorun.
ReportingObserver
slack'ı seçiyor. Bu çözüm, herkesin
kullanımdan kaldırma ve
müdahaleler. Bu raporu bir içerik bildirme aracı olarak kullanabilir ve
kullanıcıların canlı sitenizde beklenmedik sorunlarla karşılaşıp karşılaşmadığını merak eden bir kullanıcı.
API
ReportingObserver
, aşağıdaki gibi diğer Observer
API'lerinden farklıdır:
IntersectionObserver
ve ResizeObserver
. Müşteriyi geri ararsınız. sağlar
size yardımcı olabilir. Geri aramanın aldığı bilgiler, sorunların bir listesidir.
şu sonucu elde edersiniz:
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 önceden filtrelenebilir. Şu anda
İki rapor türü vardır: 'deprecation'
ve 'intervention'
.
const observer = new ReportingObserver((reports, observer) => {
…
}, {types: ['deprecation']});
Arabelleğe alınmış raporlar
Daha önce eklenmiş raporları görmek istediğinizde buffered: true
seçeneğini kullanın.
oluşturulan aşağıdaki kodu içerir:
const observer = new ReportingObserver((reports, observer) => {
…
}, {types: ['intervention'], buffered: true});
Bu seçenek, son 30 güne ait
ReportingObserver
Gözlemci geç ekleniyor, ancak hiçbir şeyi kaçırmazsınız
sayfa yükleme sırasında gerçekleştirilen her şey.
Gözlemlemeyi durdur
disconnect()
yöntemini kullanarak gözlemi durdurun:
observer.disconnect();
Örnekler
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();
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 çizelgesini anlamak için
durumunu (veya eksikliğini) kontrol eder. Raporları arka uca göndererek
gerçek dünyadaki sorunlarla ilgili, kodu güncelleme, kâr elde etme!
Gelecekteki işler
İleride ReportingObserver
ürününün, şu konular için fiilen API haline gelmesini umuyorum:
JavaScript'teki her tür sorunu yakalamaya yardımcı olur. Her şeyi yakalayacak bir API hayal edin
sorunu çözer:
- Tarayıcı müdahaleleri
- Kullanımdan kaldırmalar
- Özellik Politikası ihlalleri. Chromium sorunu #867471'e bakı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)
Ek kaynaklar:
Hero resim: Sieuwert Otterloo Unsplash'i açın.