TL;DR (Ringkasan)
Ada pengamat baru di kota! ReportingObserver
adalah API baru yang memungkinkan Anda
mengetahui saat situs menggunakan API yang tidak digunakan lagi atau mengalami
intervensi browser:
const observer = new ReportingObserver(
(reports, observer) => {
for (const report of reports) {
console.log(report.type, report.url, report.body);
}
},
{buffered: true}
);
observer.observe();
Callback dapat digunakan untuk mengirim laporan ke backend atau penyedia analisis untuk dianalisis lebih lanjut.
Mengapa hal itu berguna? Hingga saat ini, peringatan penghentian dan
intervensi hanya tersedia di DevTools sebagai pesan konsol.
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
memberikan
solusi untuk masalah ini. Ketika pengguna mengalami potensi masalah di luar sana,
kita dapat diberi tahu tentang hal tersebut.
Pengantar
Beberapa waktu lalu, saya menulis postingan blog ("Mengamati aplikasi web Anda")
karena menurut saya sangat menarik 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
. Ada API untuk mengambil
pengukuran performa: PerformanceObserver
. API
lain 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 ini. Jika situs Anda menggunakan API yang tidak digunakan lagi atau mengalami intervensi browser, DevTools akan memberi tahu Anda tentang intervensi tersebut terlebih dahulu:
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. Fungsi ini diaktifkan untuk error runtime (pengecualian JS dan error sintaksis) yang disebabkan oleh eksekusi kode Anda.
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 waktu tidur untuk bertanya-tanya apakah pengguna mengalami masalah yang tidak terduga di situs live
Anda.
API
API ini berbeda dengan API "pengamat" lainnya seperti
IntersectionObserver
dan ResizeObserver
. Anda memberinya callback; itu memberi Anda informasi. Informasi yang diterima callback adalah
daftar masalah yang disebabkan 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 berupa pra-filter untuk hanya mengamati jenis laporan tertentu:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['deprecation']});
Laporan buffer
Opsi buffered: true
sangat berguna saat Anda ingin melihat
laporan yang dibuat sebelum observer dibuat:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['intervention'], buffered: true});
Sangat cocok untuk situasi seperti pemuatan lambat library yang menggunakan
ReportingObserver
. Observer ditambahkan terlambat, tetapi Anda tidak melewatkan apa pun yang terjadi sebelumnya di pemuatan halaman.
Berhenti mengamati
Ya! Ada metode disconnect
:
observer.disconnect(); // Stop the observer from collecting reports.
Contoh
Contoh - laporkan 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();
Contoh - diberi tahu 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 codebase Anda (atau jika tidak ada masalah). Kirim laporan ke backend,
ketahui tentang masalah nyata yang dialami pengguna di situs Anda, perbarui
kode, dapatkan keuntungan!
Pekerjaan di masa mendatang
Di masa mendatang, saya berharap ReportingObserver
menjadi API de-facto
untuk menangkap semua jenis masalah di JS. Bayangkan satu API untuk menangkap semua
yang salah di aplikasi Anda:
- Intervensi browser
- Penghentian Penggunaan
- Pelanggaran Kebijakan Fitur. Lihat crbug.com/867471.
- Pengecualian dan error JS (saat ini dilayani oleh
window.onerror
). - Penolakan promise JS yang tidak tertangani (saat ini dilayani oleh
window.onunhandledrejection
)
Saya juga senang dengan alat yang mengintegrasikan ReportingObserver
ke dalam
alur kerja mereka. Lighthouse adalah contoh alat yang telah menandai penghentian penggunaan browser saat Anda menjalankan audit "Hindari API yang tidak digunakan lagi":
Lighthouse saat ini menggunakan protokol DevTools
untuk menyalin pesan konsol dan melaporkan masalah ini kepada developer. Sebagai gantinya, mungkin akan menarik untuk beralih ke ReportingObserver
untuk mendapatkan laporan penghentian penggunaan yang terstruktur dengan baik dan metadata tambahan seperti
tanggal anticipatedRemoval
.
Referensi tambahan: