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 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.
Peringatan yang dimulai browser di DevTools Console.

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 mendeteksi semuanya yang salah di aplikasi Anda:

Referensi tambahan:

Banner besar oleh Sieuwert Otterloo di Unsplash.