ReportingObserver: mengetahui kondisi kode Anda

Philip Walton

TL;DR (Ringkasan)

Ada pengamat baru di kota! ReportingObserver adalah API baru yang memungkinkan Anda mengetahui kapan situs 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 backend atau penyedia analisis untuk analisis lebih lanjut.

Mengapa hal tersebut bermanfaat? Hingga saat ini, peringatan penghentian dan intervensi hanya tersedia di DevTools sebagai pesan konsol. Secara khusus, intervensi hanya dipicu oleh berbagai batasan dunia nyata seperti kondisi perangkat dan jaringan. Dengan demikian, Anda mungkin tidak akan pernah melihat pesan ini saat mengembangkan/menguji situs secara lokal. ReportingObserver memberikan solusi untuk masalah ini. Ketika pengguna mengalami potensi masalah di luar sana, kami bisa diberi tahu.

Pengantar

Beberapa waktu lalu, saya menulis postingan blog ("Mengamati aplikasi web Anda") karena menurut saya menarik berapa banyak API yang ada untuk memantau "hal-hal" yang terjadi di aplikasi web. Misalnya, ada API yang dapat mengamati informasi tentang DOM: ResizeObserver, IntersectionObserver, MutationObserver. Ada API untuk mengambil pengukuran performa: PerformanceObserver. API lainnya seperti window.onerror dan window.onunhandledrejection bahkan memberi tahu kami jika terjadi masalah.

Namun, ada jenis peringatan lain yang tidak dicatat oleh API yang sudah ada ini. Jika situs Anda menggunakan API yang tidak digunakan lagi atau mengalami intervensi browser, DevTools akan memberi tahu Anda terlebih dahulu tentang hal tersebut:

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

Pengguna secara alami akan berpikir window.onerror menangkap peringatan ini. Tidak. Hal ini karena window.onerror tidak diaktifkan untuk peringatan yang dihasilkan langsung oleh agen pengguna itu sendiri. API ini dipicu untuk error runtime (pengecualian JS dan error sintaksis) yang disebabkan oleh eksekusi kode Anda.

ReportingObserver mengambil slack. Platform ini menyediakan cara terprogram untuk menerima notifikasi tentang peringatan yang dikeluarkan browser seperti penghentian dan intervensi. Anda dapat menggunakannya sebagai alat pelaporan dan mengurangi waktu tidur karena bertanya-tanya apakah pengguna mengalami masalah yang tidak terduga di situs live Anda.

API

API ini tidak berbeda dengan API "pengamat" lainnya seperti IntersectionObserver dan ResizeObserver. Anda memberikannya callback; proses itu 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 jika Anda ingin melihat laporan yang dihasilkan sebelum observer dibuat:

const observer = new ReportingObserver((reports, observer) => {
  ...
}, {types: ['intervention'], buffered: true});

Ini sangat bagus untuk situasi seperti memuat lambat library yang menggunakan ReportingObserver. Observer terlambat ditambahkan, tetapi Anda tidak melewatkan 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 memberi Anda cara tambahan untuk menemukan dan memantau potensi masalah di aplikasi web. Alat ini bahkan merupakan alat yang berguna untuk memahami kondisi codebase Anda (atau ketiadaan). Kirim laporan ke backend, ketahui masalah dunia nyata yang dialami pengguna di situs Anda, perbarui kode, dapatkan keuntungan!

Pekerjaan di masa depan

Di masa mendatang, harapan saya adalah ReportingObserver menjadi API de-facto untuk menangkap semua jenis masalah di JS. Bayangkan satu API untuk menangkap semua masalah 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 sangat senang dengan alat yang mengintegrasikan ReportingObserver ke dalam alur kerja mereka. Lighthouse adalah contoh alat yang sudah menandai penghentian penggunaan browser saat Anda menjalankan audit "Menghindari API yang tidak digunakan lagi":

Audit Lighthouse untuk menggunakan API yang tidak digunakan lagi dapat menggunakan ReportingObserver.
Audit Lighthouse untuk menggunakan API yang tidak digunakan lagi dapat menggunakan ReportingObserver.

Lighthouse saat ini menggunakan protokol DevTools untuk menyalin pesan konsol dan melaporkan masalah ini kepada developer. Sebaliknya, mungkin akan menarik untuk beralih ke ReportingObserver untuk laporan penghentian yang terstruktur dengan baik dan metadata tambahan seperti tanggal anticipatedRemoval.

Referensi tambahan: