Persyaratan: Produk yang dikembangkan tidak dapat menjamin bahwa tidak ada bug, bahkan jika tidak ada masalah dalam tahap pengujian, disebarkan ke lingkungan produksi, mungkin ada situasi tak terduga bagi pengguna, dan hal yang sama berlaku untuk halaman front-end. Sentry dan Bugsnag keduanya adalah produk pemantauan yang sangat bagus.
resensi
Setelah memantau informasi anomali, bagaimana cara mengirimkan data ke API backend? Navigator.sendBeacon adalah API untuk mengirim sejumlah kecil data ke server, terutama ketika halaman akan dibongkar, seperti pencatatan, analisis perilaku pengguna, dll.
Jika Anda menggunakan XHR tradisional untuk mengirim data, Anda perlu melakukan pemrosesan logika khusus pada antarmuka pelacakan di frontend. navigator.sendBeacon()Jatuhkan pesan ke dalam antrean browser sehingga meskipun pengirimannya gagal, pesan kesalahannya tidak akan tertangkap oleh frontend。
Navigator.sendBeacon diperkenalkan
Metode navigator.sendBeacon() mengirimkan permintaan HTTP POST dengan sejumlah kecil data ke server web secara asinkron. Parameter: url, data (data jenis ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData, atau URLSearchParams)
Dokumentasi:
Login hyperlink terlihat.
Login hyperlink terlihat.
Skenario penggunaan
Pengelogan saat halaman dihapus: Mencatat data perilaku seperti waktu tinggal halaman, perilaku klik, PV, UV, dll. saat pengguna meninggalkan halaman.
Analitik dan Pemantauan: Mengirim data perilaku pengguna ke server analitik untuk pemantauan kinerja situs web dan analisis perilaku pengguna.
Pelaporan Status: Melaporkan status aplikasi atau informasi kesalahan ke server.
Ujian
Kodenya adalah sebagai berikut:
Apa persamaan dan perbedaan antara Navigator.sendBeacon dan XHR dan fetch?
Kesamaan
Mengirim permintaan jaringan: Ketiga metode tersebut digunakan untuk mengirim data dari klien ke server.
Dukungan untuk beberapa format data: Mereka dapat mengirim data dalam berbagai format seperti string, JSON, data biner, dll.
Perbedaan
Navigator.kirimBeacon
Ini digunakan untuk mengirim sejumlah kecil data saat halaman dihapus, dan cocok untuk mencatat, menganalisis data, dll.
Mengirim data bersifat asinkron, tetapi tidak mengembalikan informasi apa pun ke pemanggil dan tidak dapat memproses respons server.
Dirancang untuk menjamin pengiriman data saat halaman dihapus, bahkan saat browser ditutup atau halaman melompat.
Selalu gunakan permintaan HTTPPOST.
Tidak perlu memproses tanggapan, mudah digunakan.
XMLHttpRequest
Untuk permintaan AJAX yang lebih kompleks yang memerlukan respons pemrosesan.
Permintaan sinkron atau asinkron dapat dibuat.
Anda dapat memproses respons server dan melakukan pemrosesan lebih lanjut (misalnya, mengurai JSON, menangani kode status, dll.).
Menyediakan peristiwa kaya seperti onload, onerror, onprogress, dll., untuk memantau berbagai tahapan permintaan.
Didukung secara luas di semua browser utama, termasuk beberapa browser lama.
Ini lebih kompleks untuk digunakan dan memerlukan penanganan berbagai tahapan dan status permintaan.
Ambil
Antarmuka permintaan modern untuk menggantikan XMLHttpRequest untuk pemrosesan permintaan dan respons yang lebih sederhana dan fleksibel.
Selalu buat permintaan asinkron, mengembalikan objek Promise.
Ini mendukung respons pemrosesan berantai, sehingga memudahkan penguraian JSON, memproses kode status, dan banyak lagi.
Mendukung sintaks async/await, yang lebih sejalan dengan kebiasaan pengembangan JavaScript modern.
Dukungan yang lebih baik untuk permintaan lintas domain dan CORS (Berbagi Sumber Daya Lintas Domain).
Memungkinkan penambahan lebih banyak opsi ke permintaan (misalnya, header kustom, metode permintaan, dll.).
ringkasan
Navigator.sendBeacon adalah API yang dirancang untuk keandalan, terutama untuk mengirim sejumlah kecil data saat halaman dihapus.
Ini memiliki keunggulan kesederhanaan, non-pemblokiran, dan keandalan, dan sangat cocok untuk skenario seperti pencatatan dan analisis perilaku pengguna.
Permintaan asinkron dibuat dan merupakan permintaan POST.
Itu hanya dapat menentukan apakah itu ditempatkan dalam antrean tugas browser, tetapi tidak dapat menentukan apakah itu berhasil dikirim.
Tidak perlu berurusan dengan nilai pengembalian.
Masalah kompatibilitas browser perlu diperhatikan. |
Dipaparkan pada 2025-3-5 09:46:14
|
|
|
|
