API ReportingObserver: lihat kode halaman web dari perspektif baru

Materi, terjemahan yang kami terbitkan hari ini, dikhususkan untuk API ReportingObserver , mekanisme yang memungkinkan Anda mempelajari tentang penggunaan fitur-fitur usang, dan bahwa browser mengganggu pekerjaan kode halaman. ReportingObserver adalah bagian dari spesifikasi W3C ini .

Mengapa ini dibutuhkan?

Misalkan Anda memiliki proyek web penting yang diluncurkan beberapa hari yang lalu. Pengguna, dalam banyak hal, sudah mulai mendaftar di situsnya. Semua orang tahu bahwa proyek seperti itu, sehingga mereka, secara sederhana, akan membawa uang ke perusahaan, harus bekerja secara stabil. Sekarang mari kita pikirkan apa yang terjadi jika klien Anda menemukan perilaku situs yang salah, penyebabnya adalah semacam kesalahan, dan Anda tidak tahu apa-apa tentang itu. Dia tidak akan memperbaiki kesalahan, kejadian yang tidak diketahui pengembang, itu akan terwujud berulang-ulang, dan ini, pada akhirnya, akan berdampak negatif pada tujuan bisnis proyek.

Pengunjung situs, sangat mungkin, tidak tahu apa-apa tentang pengembangan web, jadi ketika situs mulai bertingkah aneh, ia tidak mungkin melihat ke konsol untuk mencoba memahami masalah, yang diungkapkan sebagai pesan yang dimulai dengan [Intervention] atau [Deprecation] .

Faktanya, pengunjung situs tidak perlu peduli dengan kesalahan. Yang mereka butuhkan adalah stabilitas, kenyamanan, dan kepastian. Bug adalah masalah pengembang, dan API ReportingObserver ada secara khusus untuk membantu pengembang mengatasi masalah ini. Menggunakan ReportingObserver Anda dapat mengirim laporan kepada pengembang tentang penggunaan API yang sudah ketinggalan zaman atau tentang gangguan pada halaman browser. Alat penanganan kesalahan lainnya tidak menanggapi hal-hal seperti itu.

Seperti apa bentuk kerja ReportingObserver :

 const observer = new ReportingObserver((reports, observer) => { for (const report of reports) {   console.log(report.type, report.url, report.body); } }, { buffered: true }); observer.observe(); 

Mari kita bicara tentang cara menggunakan API ini.

Struktur API ReportingObserver

Browser memiliki API yang dirancang untuk menangkap kesalahan. Misalnya, window.onerror . Namun, window.onerror sekali tidak melacak semua situasi masalah yang muncul selama pengoperasian halaman. Misalnya, alat ini membantu Anda mempelajari tentang kesalahan runtime yang disebabkan oleh pengecualian JavaScript atau kesalahan sintaksis dalam kode Anda. Namun, jika Anda menerima pemberitahuan tentang penggunaan fitur usang atau intervensi browser, window.onerror tidak akan menanggapi pemberitahuan tersebut. Dalam situasi ini ReportingObserver akan berguna.

Untuk menggunakan API ReportingObserver , Anda harus membuat objek pengamat yang sesuai dengan memberikan callback, ketika dipanggil, laporan akan dikirim kepadanya dalam bentuk daftar masalah yang dihadapi pada halaman. Kami telah meninjau kode yang diperlukan untuk bekerja dengan ReportingObserver . Sekarang mari kita lihat contoh data apa yang dikirim ke callback:

 const observer = new ReportingObserver((reports, observer) => { for (const report of reports) {   // → report.id === 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload'   // → report.type === 'deprecation'   // → report.url === 'https://reporting-observer-api-demo.glitch.me'   // → report.body.message === 'Synchronous XMLHttpRequest is deprecated...' } }}); observer.observe(); 

Saat bekerja dengan ReportingObserver Anda dapat memfilter laporan. Misalnya, berikut adalah desain yang memungkinkan Anda untuk hanya menerima laporan tentang penggunaan fitur-fitur usang:

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

Jika, saat membuat objek ReportingObserver , Anda meneruskan properti buffered: true ke sana, ini akan memungkinkan untuk melihat laporan yang dihasilkan sebelum pembuatan objek seperti itu:

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

Untuk menghentikan pemantauan laporan tentang penggunaan fitur yang sudah ketinggalan zaman atau tentang intervensi browser dalam kode, Anda dapat menonaktifkan objek pengamat:

 observer.disconnect(); 

Contoh API Pelaporan Server

Berikut adalah contoh penggunaan objek pengamat ReportingObserver . Berikut adalah diagram organisasi pengiriman laporan ke server:

 const report = new ReportingObserver((reports, observer) => {  for (const report of reports) {     const stringifiedReport = JSON.stringify(report.body);     //        sendReport(stringifiedReport); } }, { types: ['deprecation'], buffered: true }); 

Ringkasan

API ReportingObserver memungkinkan pengembang untuk memperluas jangkauan informasi yang diterima olehnya tentang kesalahan yang terjadi dalam proyeknya ketika pengguna nyata bekerja dengan mereka. API ini tersedia di Chrome 69, ada informasi bahwa fitur ini akan muncul di Edge. Apakah itu direncanakan untuk mengimplementasikan sesuatu yang serupa di Firefox atau Safari masih belum diketahui.

Detail tentang ReportingObserver dapat ditemukan di sini dan di sini .

Pembaca yang budiman! Apa pendapat Anda tentang API ReportingObserver?