Bahagian depan memerlukan log dan pemantauan kerana persekitaran operasinya adalah rumit dan berubah, dan sukar untuk menghasilkan semula masalah. Log boleh dengan cepat mencari masalah dan mengoptimumkan pengalaman. 1. Jenis Log Biasa termasuk log ralat (laporan ralat JS, kegagalan pemuatan sumber), log tingkah laku (laluan operasi pengguna), log prestasi (masa pemuatan, FP, FCP) dan log adat (Business Point). 2. Langkah-langkah untuk melaksanakan pemantauan front-end termasuk penangkapan pengecualian, mengumpul data prestasi, log pelaporan, pengurusan berpusat dan paparan, dan disyorkan untuk membawa pengenal unik untuk mengesan proses pengguna. 3.

Log dan pemantauan depan adalah hanya untuk merakam data tingkah laku pengguna apabila menggunakan laman web atau aplikasi, dan perhatikan status berjalan front-end dalam masa nyata untuk membantu pemaju dengan cepat menemui masalah dan mengoptimumkan pengalaman mereka. Ia tidak tertumpu pada pelayan seperti backend, tetapi menghadapi persekitaran klien yang sentiasa berubah dan memerlukan strategi yang lebih teliti.

Mengapa bahagian depan memerlukan log dan pemantauan?

Bahagian depan berjalan dalam penyemak imbas pengguna, dan persekitarannya rumit dan berubah: peranti yang berbeza, keadaan rangkaian, versi penyemak imbas, dan juga tabiat operasi pengguna boleh menyebabkan masalah. Banyak kesilapan hanya berlaku dalam senario tertentu dan sukar untuk menghasilkan semula. Pada masa ini, melalui sistem pengumpulan log dan pemantauan, anda boleh tahu "apa yang salah", "yang menghadapi masalah", dan "bila ia berlaku" secepat mungkin.

Sebagai contoh, masalah biasa seperti skrin putih pada halaman, tiada respons kepada klik butang, dan kegagalan untuk antara muka permintaan. Jika anda tidak memantau, anda hanya boleh bergantung kepada maklum balas pengguna, yang tidak cekap dan mudah terlepas. Dengan pemantauan front-end, masalah ini boleh direkodkan secara automatik dan terkejut di latar belakang, meningkatkan kecekapan pemeriksaan.

Apakah jenis log biasa?

1. Log ralat
   Termasuk ralat JavaScript (seperti pengecualian yang tidak diketahui), kegagalan pemuatan sumber (404, masa tamat), pengecualian janji, dan lain -lain. Maklumat ini boleh memberitahu anda sama ada kod itu dilaksanakan secara normal di sisi pengguna.

2. Log tingkah laku pengguna
   Catat laluan operasi pengguna, seperti butang mana yang diklik, halaman yang telah dikunjungi, dan masa tinggal, dan lain -lain. Ini berguna untuk analisis produk dan pengoptimuman pengalaman pengguna.

3. Log prestasi
   Sebagai contoh, masa pemuatan skrin pertama, masa pemuatan sumber, FP (cat pertama), FCP (cat contentful pertama) dan petunjuk lain. Membantu mencari sebab -sebab kegagapan halaman.

4. Log tersuai
   Pemaju secara aktif menguburkan mata mengikut keperluan perniagaan, seperti berapa kali fungsi tertentu telah dipanggil, sama ada pengguna telah menyelesaikan proses tertentu, dll.

Bagaimana untuk melaksanakan pemantauan front-end?

Melaksanakan pemantauan front-end biasanya termasuk langkah-langkah berikut:

• Tangkap Pengecualian
  Gunakan window.onerror , window.onunhandledrejection , console.error , dan lain -lain untuk mendengar kesilapan global.

• Pengambilalihan data prestasi
  Gunakan performance.timing atau PerformanceObserver untuk mendapatkan masa untuk setiap fasa pemuatan halaman.

• Laporkan log
  Umumnya, log dihantar ke pelayan melalui API fetch atau Beacon API , dan berhati -hati untuk tidak mempengaruhi prestasi halaman.

• Pengurusan dan paparan berpusat
  Anda boleh mengakses alat pihak ketiga seperti Sentry, Datadog, New Relic, atau membina platform pembalakan anda sendiri (Elk, Prometheus Grafana, dll.).

Satu perincian kecil adalah bahawa adalah yang terbaik untuk membawa pengecam unik (seperti ID sesi atau ID jejak) apabila melaporkan log, supaya pengguna dapat mengesan proses lengkap dari memasuki halaman ke ralat.

Apa yang perlu saya perhatikan dalam penggunaan sebenar?

1. Jangan terlalu koleksi
   Log terlalu terperinci akan menduduki jalur lebar dan juga boleh menyebabkan masalah privasi. Adalah disyorkan untuk menetapkan kadar persampelan, seperti mengumpul hanya 10% daripada log pengguna.

2. Pertimbangkan pematuhan privasi
   Jangan merekodkan maklumat sensitif, seperti kata laluan, nombor telefon bimbit, alamat, dan lain -lain. Jika ia adalah untuk pengguna luar negara, ia juga harus mematuhi GDPR, CCPA dan peraturan lain.

3. Deduplikasi dan pengagregatan ralat
   Kesalahan yang sama boleh dilaporkan berulang kali, dan pengagregatan harus dilakukan di sisi pelayan untuk mengelakkan banjir skrin.

4. Digabungkan dengan sourcemap untuk menghuraikan timbunan
   Selepas kod front-end dimampatkan, nombor baris dan nama fungsi dalam mesej ralat mungkin tidak tepat. Dengan fail peta sumber, ralat boleh dipulihkan ke lokasi kod asal untuk kedudukan mudah.

Pada dasarnya itu sahaja. Pembalakan dan pemantauan depan tidak kelihatan rumit, tetapi mudah untuk mengabaikan butiran dalam projek sebenar, mengakibatkan maklumat yang tidak mencukupi atau kelebihan yang berlebihan. Hanya dengan merancang strategi pengumpulan, ia boleh benar -benar memberikan nilainya.

Atas ialah kandungan terperinci Apa itu pembalakan dan pemantauan frontend. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!