Pemantauan Pengguna Nyata dan Web Vitals

Paket npm web-vitals dari Google menyediakan API sederhana untuk mengukur Core Web Vitals di peramban pengguna nyata. Instal dengan npm install web-vitals dan impor fungsi panggilan balik metrik satu per satu: onLCP, onFID (tidak digunakan lagi), onCLS, onFCP, onTTFB, serta onINP modern untuk Interaksi hingga Perenderan Berikutnya.

Setiap fungsi panggilan balik (onLCP, onCLS, onINP, dan sebagainya) menerima objek metrik yang berisi: name ('LCP'), value (milidetik atau skor tanpa satuan), rating ('good', 'needs-improvement', 'poor'), dan id (pengenal unik untuk deduplikasi). Fungsi panggilan balik dijalankan setelah nilai metrik ditetapkan.

Gunakan API Navigator.sendBeacon atau fetch untuk melaporkan metrik ke titik akhir analitik Anda. sendBeacon lebih disarankan karena tetap berjalan setelah halaman dibongkar—hal yang penting untuk metrik seperti CLS yang ditetapkan saat halaman disembunyikan. Gabungkan semua laporan metrik ke dalam satu beacon jika memungkinkan.

Untuk mengintegrasikan Web Vitals ke dalam OpenTelemetry, buat instrumen Gauge untuk setiap metrik: const lcp = meter.createObservableGauge('web_vitals.lcp'). Dalam setiap fungsi panggilan balik onLCP, catat nilainya bersama atribut yang relevan (jalur halaman, jenis perangkat). Backend observabilitas Anda kemudian dapat memberikan peringatan atas kemunduran P75 LCP.

Untuk mengukur performa khusus React yang tidak ditangkap oleh Web Vitals, gunakan API User Timing: performance.mark('render-start') sebelum perenderan, performance.mark('render-end') setelahnya, lalu performance.measure('component-render', 'render-start', 'render-end'). Pengukuran ini muncul di tab Performance pada Chrome DevTools.

Komponen React Profiler membungkus suatu subtree dan memanggil fungsi panggilan balik onRender dengan data waktu: id (id Profiler), phase ('mount' atau 'update'), actualDuration (waktu perenderan), dan baseDuration (perkiraan waktu perenderan tanpa memorisasi). Gunakan ini dalam pengembangan untuk mengidentifikasi komponen yang lambat.

Kesalahan yang tidak tertangani dan penolakan Promise dapat ditangkap sebagai rentang OpenTelemetry dengan status kesalahan. Siapkan pendengar global: window.addEventListener('error', handler) dan window.addEventListener('unhandledrejection', handler). Buat rentang, tetapkan span.setStatus({ code: SpanStatusCode.ERROR }), tambahkan pesan kesalahan dan jejak tumpukan sebagai atribut, lalu akhiri rentang.

Batas Kesalahan React menangkap kesalahan perenderan di pohon komponen. Dalam metode componentDidCatch, buat rentang OpenTelemetry yang merepresentasikan kesalahan tersebut, tetapkan statusnya ke ERROR, lampirkan error.message dan componentStack sebagai atribut, lalu panggil span.end(). Dengan demikian, kesalahan perenderan React dialirkan ke alur pemrosesan jejak terdistribusi Anda.

JavaScript produksi yang diperkecil menghasilkan jejak tumpukan yang sulit dibaca seperti "a.b at bundle.min.js:1:84721". Unggah peta sumber ke Sentry, Datadog, atau alur pemrosesan OpenTelemetry selama proses pembangunan CI/CD agar jejak tumpukan mentah secara otomatis diuraikan menjadi nama berkas dan nomor baris TypeScript asli.

Mengirim data jejak lengkap untuk setiap sesi membutuhkan biaya besar. Terapkan pengambilan sampel sesi: tetapkan flag sessionSampled secara acak saat pemuatan halaman pertama dan simpan di sessionStorage. Hanya inisialisasi SDK OpenTelemetry dan kirim jejak untuk sesi yang terambil sampelnya (misalnya, 10%). Selalu ambil sampel 100% sesi yang memiliki kesalahan.

Web Vitals yang dilaporkan sebagai metrik OpenTelemetry memungkinkan pemberian peringatan berbasis SLO: jika P75 LCP melebihi 2,5 detik untuk lebih dari 5% sesi selama rentang 1 jam, keluarkan peringatan. Hal ini memberikan sinyal yang dapat ditindaklanjuti oleh tim rekayasa dan terkait langsung dengan pengalaman pengguna, bukan hanya dengan metrik infrastruktur sisi server.

Kapan fungsi panggilan balik onLCP dari pustaka web-vitals dijalankan?

Pustaka web-vitals menyediakan fungsi panggilan balik sederhana untuk mengukur LCP, INP, CLS, FCP, dan TTFB di peramban pengguna nyata. Laporkan metrik tersebut sebagai metrik OpenTelemetry untuk pemberian peringatan berbasis SLO, tangkap kesalahan melalui pendengar global dan Batas Kesalahan React sebagai rentang OpenTelemetry, lalu unggah peta sumber untuk menguraikan jejak tumpukan yang diperkecil. Ambil sampel sesi untuk mengelola volume data sambil mempertahankan cakupan kesalahan 100%.