Temukan API yang tidak digunakan lagi di aplikasi produksi Anda.
ReportingObserver
memberi tahu Anda saat situs menggunakan API yang tidak digunakan lagi atau berjalan
dalam intervensi browser. Fungsi dasar pada awalnya
hadir di Chrome 69. Mulai Chrome 84, kebijakan ini dapat digunakan oleh 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 penyedia backend atau analisis untuk analisis data.
Mengapa hal tersebut bermanfaat? Hingga API ini, peringatan penghentian penggunaan dan intervensi
hanya tersedia di DevTools sebagai pesan Console. Intervensi, khususnya,
hanya dipicu oleh berbagai batasan dunia nyata seperti perangkat dan jaringan
kondisi tertentu. Dengan demikian, Anda mungkin tidak akan pernah melihat pesan ini saat melakukan pengembangan/pengujian
situs secara lokal. ReportingObserver
memberikan solusi untuk masalah ini. Kapan
pengguna mengalami potensi masalah
di luar sana, pengembang web dapat diberi tahu
mereka.
Latar belakang
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
.
PerformanceObserver
merekam pengukuran performa. Dan metode 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 intervensi browser, DevTools adalah yang pertama memberi tahu Anda tentang mereka:
![Peringatan DevTools Console untuk penghentian penggunaan dan intervensi.](https://developer.chrome.com/static/docs/capabilities/web-apis/reporting-observer/image/devtools-console-warnings-7e65d798d802f.png?authuser=6&hl=id)
Pengguna secara alami akan berpikir window.onerror
menangkap peringatan ini. Padahal tidak.
Hal itu karena window.onerror
tidak diaktifkan untuk peringatan yang dibuat langsung oleh
agen pengguna itu sendiri. JavaScript diaktifkan untuk error runtime (pengecualian dan
error sintaksis) yang disebabkan oleh eksekusi kode.
ReportingObserver
mengambil slack. AI memberikan cara terprogram untuk
diberi tahu tentang peringatan yang dikeluarkan browser seperti penghentian penggunaan dan
intervensi. Anda dapat menggunakannya sebagai alat pelaporan dan
tidur bertanya-tanya apakah pengguna mengalami
masalah yang tak terduga di situs live Anda.
API
ReportingObserver
tidak berbeda dengan Observer
API lainnya seperti
IntersectionObserver
dan ResizeObserver
. Anda memberikannya callback; memberikan
informasi Anda. 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 yang di-buffer
Gunakan opsi buffered: true
jika Anda ingin melihat laporan yang
yang dihasilkan sebelum instance observer dibuat:
const observer = new ReportingObserver((reports, observer) => {
…
}, {types: ['intervention'], buffered: true});
Opsi ini sangat cocok untuk situasi seperti pemuatan lambat library yang menggunakan
ReportingObserver
. Pengamat terlambat ditambahkan, tetapi Anda tidak melewatkan
apa pun yang terjadi sebelumnya
saat halaman dimuat.
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
memberikan cara tambahan untuk menemukan dan memantau
potensi masalah
di aplikasi web Anda. Alat ini bahkan merupakan alat yang
berguna untuk memahami
kesehatan code base Anda (atau ketiadaan code base). Mengirim laporan ke backend, mengetahui
tentang masalah di dunia nyata, perbarui kode, dapatkan keuntungan!
Pekerjaan di masa depan
Ke depannya, saya berharap ReportingObserver
menjadi API yang de facto untuk
menangkap semua jenis masalah di JavaScript. Bayangkan satu API untuk menangkap semuanya
yang salah di aplikasi Anda:
- Intervensi browser
- Penghentian penggunaan
- Pelanggaran Kebijakan Fitur. Lihat Masalah Chromium #867471.
- Error dan pengecualian 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.