Belajar ReactJS - Observability & Monitoring

#Pendahuluan

Aplikasi yang sudah di-deploy tidak berhenti butuh perhatian. Setelah tayang, kalian harus tahu: apakah halaman cepat, apakah pengguna mengalami error, dan ke mana masalah harus dicari. Inilah pekerjaan observability. Episode 22 membekali kalian metrik dan alat untuk menjawabnya.

Kita membahas logging error frontend dan metrik performa, Core Web Vitals dengan synthetic dan real user monitoring, crash reporting dengan Sentry, lalu user experience analytics dan performance budgets.

#Logging Error Frontend dan Metrik Performa

#Menangkap Error Global

Error di browser bisa lolos dari try-catch. Daftarkan handler global untuk error runtime dan promise yang gagal:

Handler error global

window.addEventListener("error", (event) => {
  console.error("Error global:", event.message)
})
 
window.addEventListener("unhandledrejection", (event) => {
  console.error("Promise gagal:", event.reason)
})

window.addEventListener("error", ...) menangkap error yang tidak ditangani di mana pun, sementara unhandledrejection menangkap Promise yang gagal tanpa catch. Di production, kirim data ini ke layanan pelaporan alih-alih hanya ke console.

#Performance API

Browser menyediakan API untuk mengukur fase render:

Ukur fase render

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries()
  console.log("Metrik:", entries.map((e) => e.name))
})
observer.observe({ type: "paint", buffered: true })

PerformanceObserver dengan tipe paint melaporkan waktu First Paint dan First Contentful Paint. Metrik seperti ini menjadi bahan untuk dashboard observability.

#Web Vitals, Synthetic Monitoring, dan RUM

#Core Web Vitals

Core Web Vitals adalah tiga metrik Google untuk pengalaman pengguna: LCP untuk waktu render konten utama, INP untuk responsivitas interaksi, dan CLS untuk pergeseran layout. Ukur lewat web-vitals:

npm install web-vitals

Kirim web vitals

import { onLCP, onINP, onCLS } from "web-vitals"
 
function kirimMetrik(metrik) {
  console.log(metrik.name, metrik.value)
}
 
onLCP(kirimMetrik)
onINP(kirimMetrik)
onCLS(kirimMetrik)

onLCP(kirimMetrik) memanggil callback saat nilai LCP terukur, begitu pula INP dan CLS. Kirim nilai ini ke analytics untuk melihat distribusi performa di semua pengguna.

#Synthetic vs Real User Monitoring

Synthetic monitoring menjalankan skrip dari lokasi tertentu secara berkala untuk mengukur performa dan ketersediaan. Real user monitoring (RUM) mengumpulkan metrik dari pengguna sungguhan. Synthetic konsisten dan mudah dibandingkan; RUM mencerminkan kondisi nyata perangkat dan jaringan pengguna. Produksi yang sehat memakai keduanya.

#Crash Reporting dengan Sentry atau LogRocket

#Integrasi Sentry

Sentry mengumpulkan error, stack trace, dan konteks pengguna dalam satu dashboard. Integrasi di React:

npm install --save @sentry/react

Inisialisasi Sentry

import * as Sentry from "@sentry/react"
 
Sentry.init({
  dsn: "https://contoh@ingest.sentry.io/project",
  environment: "production",
})
 
Sentry.captureException(new Error("Contoh error"))

Sentry.init({...}) mengaktifkan pelaporan ke project Sentry; captureException mengirim error secara manual. Gabungkan dengan ErrorBoundary dari @sentry/react agar error render komponen ikut tercatat. LogRocket adalah alternatif yang merekam sesi pengguna sehingga bug bisa dilihat ulang seperti video.

#Jangan Log Semua Hal

Terlalu banyak log membuat sinyal tenggelam dalam noise. Log error dengan konteks, metrik dengan agregasi, dan hindari logging data sensitif seperti token atau password. Saring level di production: error dan warning, bukan debug.

#User Experience Analytics dan Performance Budget

#Performance Budget

Performance budget adalah batas yang tidak boleh dilewati, misalnya bundle maksimal 170 kB gzip untuk initial load atau LCP di bawah 2,5 detik. Penegakannya bisa di CI:

npm run build
du -sh dist/assets/*.js | sort -h

du -sh dist/assets/*.js menampilkan ukuran tiap chunk. Jika melampaui budget, tim harus memecah kode — langkah yang sudah kalian pelajari di episode 14 dan 19.

#Analisis Pengalaman Pengguna

Gabungkan metrik teknis dengan data UX: funnel konversi, waktu di halaman, dan keluhan pengguna. Metrik yang tidak dihubungkan ke tujuan bisnis hanya menjadi angka. Mulai dari beberapa metrik kunci, lalu perluas perlahan.

#Penutup

Episode 22 mengajarkan cara melihat aplikasi yang sudah berjalan: menangkap error global, mengukur Core Web Vitals, membandingkan synthetic dan real user monitoring, mengintegrasikan crash reporting dengan Sentry, serta menegakkan performance budgets di CI.

Inti yang harus dibawa pulang:

• Tangkap error global lewat error dan unhandledrejection.
• Core Web Vitals: LCP, INP, dan CLS mengukur pengalaman nyata.
• Synthetic monitoring konsisten; RUM mencerminkan pengguna asli.
• Sentry mengumpulkan crash dengan konteks; LogRocket merekam sesi.
• Jangan log berlebihan dan hindari data sensitif.
• Performance budget melindungi kecepatan dari regresi.

Di episode 23, episode terakhir, kita akan membahas stable modern features & future trends — fitur React stabil terbaru seperti concurrent rendering dan server components, ekosistem Remix, Next.js, dan React Native, arah tren arsitektur frontend, serta strategi menjaga keahlian kalian tetap future-proof.