Mengetahui kondisi kode dengan ReportingObserver API

Menemukan 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 diluncurkan di Chrome 69. Mulai Chrome 84, API ini dapat digunakan di worker.

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 analisis.

Apa manfaatnya? Sebelum API ini, penghentian penggunaan dan peringatan 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. Saat pengguna mengalami potensi masalah di lapangan, developer web dapat diberi tahu tentang masalah tersebut.

Latar belakang

Beberapa waktu lalu, saya menulis postingan blog (Mengamati aplikasi web Anda) karena saya merasa sangat menarik melihat banyaknya API yang tersedia 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. Dan metode seperti window.onerror dan window.onunhandledrejection bahkan memberi tahu kita saat terjadi kesalahan.

Namun, ada jenis peringatan lain yang tidak dicakup oleh API yang ada. Saat situs Anda menggunakan API yang tidak digunakan lagi atau mengalami intervensi browser, DevTools adalah yang pertama memberi tahu Anda tentang hal tersebut:

Peringatan Konsol DevTools untuk penghentian penggunaan dan intervensi.
Peringatan yang dimulai browser di Konsol DevTools.

Orang akan mengira bahwa window.onerror menangkap peringatan ini. Tidak. Hal ini karena window.onerror tidak diaktifkan untuk peringatan yang dihasilkan langsung oleh agen pengguna itu sendiri. Pemicu ini diaktifkan untuk error runtime (pengecualian JavaScript dan error sintaksis) yang disebabkan oleh eksekusi kode.

ReportingObserver akan mengambil alih tugas. API ini menyediakan cara terprogram untuk mendapatkan notifikasi tentang peringatan yang dikeluarkan browser seperti penghentian penggunaan dan intervensi. Anda dapat menggunakannya sebagai alat pelaporan dan tidak perlu khawatir apakah pengguna mengalami masalah yang tidak terduga di situs aktif Anda.

API

ReportingObserver tidak berbeda dengan API Observer lainnya seperti IntersectionObserver dan ResizeObserver. Anda memberikan callback; callback tersebut akan memberikan informasi kepada 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 terlebih dahulu 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 dibuat 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. Observer ditambahkan terlambat, tetapi Anda tidak akan melewatkan apa pun yang terjadi sebelumnya dalam 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. Alat ini bahkan berguna untuk memahami kesehatan code base Anda (atau kekurangannya). Kirim laporan ke backend, ketahui masalah di dunia nyata, update kode, dan dapatkan keuntungan.

Tugas mendatang

Pada 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:

Referensi tambahan:

Banner besar oleh Sieuwert Otterloo di Unsplash.