Mengetahui kondisi kode dengan ReportingObserver API

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:

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

Referensi tambahan:

Banner besar oleh Sieuwert Otterloo di Unsplash.