Belajar Vue - Observability & Monitoring

#Pendahuluan

Aplikasi yang sudah di-deploy belum selesai; justru di situlah pekerjaan sesungguhnya dimulai. Tanpa observability, kalian hanya tahu aplikasi berjalan sampai pengguna melapor, dan waktu respons yang lambat hanya terasa tanpa data.

Episode 22 membahas observability untuk Vue: monitoring performa frontend, pelacakan error client-side dengan Sentry, real user monitoring dan analytics, serta cara menangani insiden dan memberi dukungan produksi.

#Monitoring Performa Frontend

#Core Web Vitals

Metrik yang paling diperhatikan adalah LCP untuk kecepatan render, INP untuk responsivitas, dan CLS untuk stabilitas visual. Ukur lewat Web Vitals API:

Mengukur metrik

import { onCLS, onINP, onLCP } from "web-vitals";
 
onCLS((nilai) => sendKeServer("cls", nilai.value));
onINP((nilai) => sendKeServer("inp", nilai.value));
onLCP((nilai) => sendKeServer("lcp", nilai.value));

onLCP((nilai) => ...) melaporkan metrik setiap kali pengguna membuka halaman. Kirim ke server analitik agar performa terlihat sebagai tren, bukan tebakan.

#Error Tracking dengan Sentry

#Install dan Inisialisasi

Sentry menangkap error dari browser dan menampilkannya di dashboard:

npm install @sentry/vue

Inisialisasi Sentry

import * as Sentry from "@sentry/vue";
 
Sentry.init({
  app,
  dsn: "https://kunci@sentry.example.com/1",
  environment: "production",
  tracesSampleRate: 0.1,
});

Sentry.init menerima instance aplikasi Vue, DSN, dan environment. tracesSampleRate mengatur seberapa sering trace dikirim — 0.1 berarti sepuluh persen.

#Menangkap Error Komponen

Error di dalam komponen bisa ditangkap dan dilaporkan:

onErrorCaptured

import { onErrorCaptured } from "vue";
import * as Sentry from "@sentry/vue";
 
onErrorCaptured((error) => {
  Sentry.captureException(error);
  return false;
});

onErrorCaptured((error) => ...) menangkap error dari komponen anak dan mengirimnya ke Sentry. Pengembalian false menghentikan propagasi agar tidak membanjiri log.

#Real User Monitoring dan Analytics

#Mengukur Pengalaman Nyata

RUM mengukur pengalaman pengguna sungguhan, bukan hasil simulasi. Rekam peristiwa penting seperti navigasi, klik, dan kesalahan form:

Event analytics

function track(event, data = {}) {
  navigator.sendBeacon("/api/analytics", new Blob([
    JSON.stringify({ event, data, url: location.pathname }),
  ]));
}

navigator.sendBeacon(...) mengirim data analitik secara asynchronous tanpa menunda unload halaman. Cocok untuk event seperti login, checkout, atau error user.

#Memisahkan Metrik dari Logika

Bungkus tracking dalam satu modul agar tidak berserakan:

src/observability/sentry.js
src/observability/rum.js
src/observability/track.js

Setiap kemampuan observability punya file sendiri. Komponen cukup memanggil track(...) tanpa tahu detail implementasi.

#Dukungan Produksi dan Penanganan Insiden

• Tetapkan prioritas insiden: seberapa banyak pengguna terdampak dan seberapa parah.
• Gunakan severity level saat melaporkan error: info, warning, dan fatal.
• Siapkan runbook: langkah diagnostik untuk insiden yang sering muncul.
• Hubungkan error dengan context: versi aplikasi, browser, dan langkah pengguna.
• Review tren error secara berkala, bukan hanya saat insiden terjadi.

#Penutup

Episode 22 membuat aplikasi kalian bisa diamati: Core Web Vitals untuk performa, Sentry untuk pelacakan error, real user monitoring untuk pengalaman nyata, serta praktik dukungan produksi dan penanganan insiden.

Inti yang harus dibawa pulang:

• Ukur LCP, INP, dan CLS lewat Web Vitals.
• Sentry menangkap dan menampilkan error client-side.
• tracesSampleRate mengatur volume trace.
• onErrorCaptured melaporkan error dari komponen.
• sendBeacon mengirim analytics tanpa menunda unload.
• Jangan pernah log data sensitif.

Di episode 23 selanjutnya kita menutup series dengan stable modern features dan future trends — fitur stabil Vue 3 seperti Teleport dan Suspense, tren ekosistem Vite, Pinia, dan Nuxt, pattern yang tahan masa, serta strategi menjaga skill tetap relevan.