TL;DR
Ada pengamat baru di kota! ReportingObserver
adalah API baru yang memungkinkan Anda
mengetahui saat situs Anda 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 penyedia backend atau analisis untuk analisis lebih lanjut.
Mengapa hal tersebut bermanfaat? Sampai saat ini, penghentian dan
peringatan intervensi hanya tersedia di DevTools sebagai pesan konsol.
Intervensi, khususnya, hanya dipicu oleh berbagai kendala di dunia nyata
seperti kondisi perangkat dan jaringan. Sehingga, Anda bahkan mungkin tidak akan pernah melihat pesan ini
saat mengembangkan/menguji situs secara lokal. ReportingObserver
menyediakan
solusi untuk masalah ini. Ketika pengguna mengalami
potensi masalah di luar sana,
kami dapat diberi tahu
tentang hal tersebut.
Pengantar
Beberapa waktu lalu, saya menulis postingan blog ("Mengamati aplikasi web Anda")
karena saya tertarik dengan banyaknya API yang ada untuk memantau
"barang-barang" yang terjadi di
aplikasi web. Misalnya, ada API yang dapat mengamati
informasi tentang DOM: ResizeObserver
,
IntersectionObserver
, MutationObserver
. Ada API untuk menangkap
pengukuran performa: PerformanceObserver
. Yang lain
API seperti window.onerror
dan window.onunhandledrejection
bahkan memberi tahu kami
ketika terjadi kesalahan.
Namun, ada jenis peringatan lain yang tidak terdeteksi oleh API yang sudah ada. Jika situs Anda menggunakan API yang tidak digunakan lagi atau mengalami terhadap intervensi browser, DevTools akan memberi tahu Anda terlebih dahulu mereka:
![Peringatan konsol DevTools untuk penghentian penggunaan dan intervensi.](https://developer.chrome.google.cn/static/blog/reportingobserver/image/devtools-console-warnings-dcb0ee87f92de.png?authuser=8&hl=id)
Pengguna secara alami akan berpikir window.onerror
menangkap peringatan ini. Tidak.
Hal itu karena window.onerror
tidak aktif untuk peringatan
yang dihasilkan langsung oleh
agen pengguna itu sendiri. Diaktifkan karena error runtime
(Pengecualian JS dan error sintaksis) yang disebabkan oleh eksekusi kode Anda.
ReportingObserver
mengambil slack. AI memberikan cara terprogram untuk
notifikasi tentang peringatan yang dikeluarkan browser seperti penghentian penggunaan
dan intervensi. Anda dapat menggunakannya sebagai alat pelaporan dan
kurang tidur karena bertanya-tanya apakah pengguna mengalami masalah tak terduga di live streaming Anda
situs Anda.
API
API ini tidak berbeda dengan "pengamat" lainnya API seperti
sebagai IntersectionObserver
dan ResizeObserver
. Anda memberikannya callback;
ia 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 diberi pra-filter untuk hanya mengamati jenis laporan tertentu:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['deprecation']});
Laporan yang di-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});
Ini sangat bagus untuk situasi seperti pemuatan lambat library yang menggunakan
ReportingObserver
. Pengamat terlambat ditambahkan, tetapi Anda
jangan lewatkan apa pun yang terjadi sebelumnya dalam pemuatan halaman.
Berhenti mengamati
Ya! Ada metode disconnect
:
observer.disconnect(); // Stop the observer from collecting reports.
Contoh
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();
Contoh - dapatkan 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
memberikan cara tambahan untuk menemukan dan memantau
potensi masalah
di aplikasi web Anda. Alat ini bahkan merupakan alat yang
berguna untuk memahami
kesehatan codebase Anda (atau ketiadaan codebase Anda). Mengirim laporan ke backend,
ketahui tentang masalah dunia nyata yang dihadapi pengguna di situs Anda, perbarui
kode, keuntungan!
Pekerjaan di masa depan
Di masa mendatang, saya berharap ReportingObserver
menjadi API de-facto
untuk menangkap semua
jenis masalah di JS. Bayangkan satu API untuk menangkap semuanya
yang salah di aplikasi Anda:
- Intervensi browser
- Penghentian penggunaan
- Pelanggaran Kebijakan Fitur. Lihat crbug.com/867471.
- Error dan pengecualian JS (saat ini dilayani oleh
window.onerror
). - Penolakan promise JS yang tidak tertangani (saat ini dilayani oleh
window.onunhandledrejection
)
Saya juga tertarik dengan alat yang mengintegrasikan ReportingObserver
ke dalam
di alur kerja mereka. Lighthouse adalah contoh alat
yang sudah menandai penghentian browser saat Anda menjalankan
"Menghindari API yang tidak digunakan lagi" audit:
![Audit Lighthouse untuk menggunakan API yang tidak digunakan lagi dapat menggunakan ReportingObserver.](https://developer.chrome.google.cn/static/blog/reportingobserver/image/the-lighthouse-audit-usi-3687157fd0fa1.png?authuser=8&hl=id)
Lighthouse saat ini menggunakan protokol DevTools
untuk melakukan scraping pesan konsol dan melaporkan masalah ini kepada developer. Sebaliknya, hal itu
mungkin menarik untuk beralih ke ReportingObserver
untuk laporan penghentiannya yang terstruktur dengan baik dan metadata tambahan seperti
Tanggal anticipatedRemoval
.
Referensi tambahan: