Üretim uygulamalarınızda desteği sonlandırılmış API'leri bulun.
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:
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:
- Tarayıcı müdahaleleri
- Kullanımdan kaldırmalar
- Özellik Politikası ihlalleri. Chromium Sorunu No. 867471'e bakın.
- JS istisnaları ve hataları (şu anda
window.onerror
tarafından hizmet veriliyor). - İşlenmemiş JS vaat retleri (şu anda
window.onunhandledrejection
tarafından hizmet veriliyor)
Ek kaynaklar:
Sieuwert Otterloo'nun Unsplash'teki hero resmi.