Temukan API yang tidak digunakan lagi di aplikasi produksi Anda.
ReportingObserver
memberi tahu Anda saat situs menggunakan API yang tidak digunakan lagi atau mengalami
intervensi browser. Fungsi dasar awalnya
muncul di Chrome 69. Mulai Chrome 84, kode ini dapat digunakan di pekerja.
const observer = new ReportingObserver((reports, observer) => {
for (const report of reports) {
console.log(report.type, report.url, report.body);
}
}, {buffered: true});
observer.observe();
Gunakan callback untuk mengirim laporan ke backend atau penyedia analisis untuk dianalisis.
Mengapa hal itu berguna? Sampai API ini, peringatan penghentian dan intervensi
hanya tersedia di DevTools sebagai pesan Console. Intervensi, khususnya,
hanya dipicu oleh berbagai batasan di dunia nyata seperti kondisi perangkat dan
jaringan. Oleh karena itu, Anda mungkin tidak akan pernah melihat pesan ini saat mengembangkan/menguji situs secara lokal. ReportingObserver
menyediakan solusi untuk masalah ini. Saat
pengguna mengalami potensi masalah di luar sana, developer web dapat diberi tahu
tentang hal tersebut.
Latar belakang
Beberapa waktu lalu, saya menulis postingan blog (Mengamati aplikasi web Anda)
karena saya merasa tertarik dengan banyaknya API yang ada untuk memantau
"hal-hal" yang terjadi di aplikasi web. Misalnya, ada API yang dapat mengamati
informasi tentang DOM:
ResizeObserver
,
IntersectionObserver
,
MutationObserver
.
PerformanceObserver
mengambil pengukuran performa. Metode seperti
window.onerror
dan
window.onunhandledrejection
bahkan memberi tahu kami jika terjadi masalah.
Namun, ada jenis peringatan lain yang tidak ditangkap oleh API yang sudah ada. Jika situs Anda menggunakan API yang tidak digunakan lagi atau mengalami intervensi browser, DevTools adalah yang pertama memberi tahu Anda tentang intervensi tersebut:
Orang akan mengira bahwa window.onerror
menangkap peringatan ini. Tidak.
Hal itu karena window.onerror
tidak diaktifkan untuk peringatan yang dihasilkan langsung oleh
agen pengguna itu sendiri. Class ini diaktifkan untuk error runtime (pengecualian JavaScript dan
error sintaksis) yang disebabkan oleh eksekusi kode.
ReportingObserver
mengambil kelonggaran. Layanan ini menyediakan cara terprogram untuk mendapatkan notifikasi tentang peringatan yang dikeluarkan browser seperti penghentian dan intervensi. Anda dapat menggunakannya sebagai alat pelaporan dan mengurangi
tidur yang bertanya-tanya apakah pengguna mengalami masalah yang tidak terduga di situs live Anda.
API
ReportingObserver
tidak berbeda dengan Observer
API lainnya seperti
IntersectionObserver
dan ResizeObserver
. Anda memberinya callback; itu akan memberi Anda informasi. Informasi yang diterima callback adalah daftar masalah
yang disebabkan oleh halaman:
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();
Laporan yang difilter
Laporan dapat difilter sebelumnya untuk hanya mengamati jenis laporan tertentu. Saat ini,
ada dua jenis laporan: 'deprecation'
dan 'intervention'
.
const observer = new ReportingObserver((reports, observer) => {
…
}, {types: ['deprecation']});
Laporan buffer
Gunakan opsi buffered: true
jika Anda ingin melihat laporan yang
dibuat sebelum instance observer dibuat:
const observer = new ReportingObserver((reports, observer) => {
…
}, {types: ['intervention'], buffered: true});
Opsi ini sangat bagus untuk situasi seperti pemuatan lambat library yang menggunakan
ReportingObserver
. Observer ditambahkan terlambat, tetapi Anda tidak akan melewatkan
apa pun yang terjadi sebelumnya pada pemuatan halaman.
Berhenti mengamati
Berhenti mengamati menggunakan metode disconnect()
:
observer.disconnect();
Contoh
Melaporkan intervensi browser ke penyedia analisis
const observer = new ReportingObserver((reports, observer) => {
for (const report of reports) {
sendReportToAnalytics(JSON.stringify(report.body));
}
}, {types: ['intervention'], buffered: true});
observer.observe();
Mendapatkan notifikasi saat API akan dihapus
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();
Kesimpulan
ReportingObserver
memberi Anda cara tambahan untuk menemukan dan memantau potensi masalah di aplikasi web Anda. Ini bahkan dapat menjadi alat yang berguna untuk memahami kondisi code base Anda (atau ketiadaannya). Kirim laporan ke backend, ketahui
masalah di dunia nyata, perbarui kode, dapatkan keuntungan!
Pekerjaan di masa mendatang
Di masa mendatang, saya berharap ReportingObserver
menjadi API de facto untuk
menangkap semua jenis masalah di JavaScript. Bayangkan satu API untuk menangkap semua
yang salah di aplikasi Anda:
- Intervensi browser
- Penghentian Penggunaan
- Pelanggaran Kebijakan Fitur. Lihat Masalah Chromium #867471.
- Pengecualian dan error JS (saat ini dilayani oleh
window.onerror
). - Penolakan promise JS yang tidak tertangani (saat ini dilayani oleh
window.onunhandledrejection
)
Referensi tambahan:
Banner besar oleh Sieuwert Otterloo di Unsplash.