Belajar Nuxt - Observability & Monitoring

#Pendahuluan

Setelah aplikasi hidup di produksi, pertanyaan terbesarnya bukan lagi "apakah berjalan", tapi "apakah berjalan dengan baik". Episode 22 membahas observability dan monitoring: bagaimana mengetahui performa nyata, menangkap error sebelum pengguna terpengaruh, dan bertindak cepat saat insiden terjadi.

Observability adalah kemampuan menanyakan "kenapa" dari luar — kenapa halaman lambat, kenapa ada error, kenapa pengguna meninggalkan proses checkout. Jawabannya datang dari tiga sumber: metrik performa, error tracking, dan data pengguna nyata.

#Monitoring Frontend dan Server Performance

#Metrik yang Penting

Di sisi frontend, pantau metrik seperti:

• Largest Contentful Paint: seberapa cepat konten utama tampil.
• First Input Delay: seberapa cepat aplikasi merespons interaksi pertama.
• Cumulative Layout Shift: seberapa besar layout bergeser saat memuat.

Di sisi server, pantau waktu respons API, status code, dan error rate. Kedua sisi saling memengaruhi — server yang lambat membuat metrik frontend ikut memburuk.

#Server Log dan Endpoint Kesehatan

Nitro menyediakan log dan API untuk pemantauan. Buat endpoint kesehatan untuk platform monitoring:

Endpoint kesehatan

export default defineEventHandler(() => {
  return {
    status: "ok",
    waktu: new Date().toISOString(),
  }
})

Endpoint /api/health ini dipanggil platform monitoring secara berkala untuk memastikan aplikasi hidup. Endpoint ini juga bisa diperluas untuk memeriksa dependensi eksternal.

#Error Tracking dengan Sentry

#Setup Sentry untuk Nuxt

Sentry adalah salah satu platform error tracking paling populer. Install module resminya:

npm install @sentry/nuxt

Konfigurasikan dengan DSN dari project Sentry kalian:

Konfigurasi Sentry

export default defineNuxtConfig({
  modules: ["@sentry/nuxt/module"],
  sentry: {
    dsn: process.env.SENTRY_DSN,
    tracesSampleRate: 1.0,
  },
})

SENTRY_DSN diambil dari environment. Dengan module ini, error di server dan client otomatis dilaporkan ke Sentry lengkap dengan stack trace dan konteks.

#Menangkap Error Secara Manual

Selain error otomatis, kalian bisa melaporkan kejadian penting:

Laporkan error manual

import * as Sentry from "@sentry/nuxt"
 
try {
  await buatPesanan(data)
} catch (e) {
  Sentry.captureException(e)
}

Sentry.captureException(e) mengirim error yang ditangkap ke dashboard Sentry. Pastikan tidak melaporkan data sensitif — bersihkan info yang tidak perlu sebelum dikirim.

#Real User Monitoring dan Analytics

#Memantau Pengguna Nyata

Real User Monitoring mengukur performa dari perspektif pengguna sungguhan, bukan dari lab. Sentry dan banyak provider lain menyediakan ini. Data yang dikumpulkan: waktu muat halaman, interaksi, dan perjalanan pengguna.

#Analytics untuk Keputusan

Analytics memberi wawasan perilaku: halaman apa yang paling banyak dikunjungi, dari mana pengguna datang, dan di mana mereka berhenti:

Kirim event analytics

function catatEvent(nama: string) {
  // kirim event ke provider analytics
  window.dataLayer?.push({ event: nama })
}

window.dataLayer.push({ event: nama }) adalah pola umum untuk mengirim event ke tool analytics. Gunakan wawasan ini untuk memprioritaskan perbaikan — fokus ke alur yang paling sering dan paling bermasalah.

#Privasi Pengguna

Perhatikan aturan privasi: informasikan tracking yang dipasang, hormati preferensi cookie, dan jangan mengumpulkan data tanpa izin. Regulasi lokal kalian menentukan detail praktiknya.

#Production Support dan Incident Handling

#Playbook Insiden

Insiden akan terjadi. Yang membedakan tim profesional adalah kesiapannya:

• Deteksi: monitoring memberi tahu sebelum pengguna mengeluh.
• Diagnosis: log dan error tracking mempersempit penyebab.
• Respons: rollback cepat atau hotfix.
• Belajar: dokumentasikan akar masalah dan cegah terulang.

Siapkan kanal komunikasi khusus dan pastikan ada akses cepat ke log produksi.

#Rollback Cepat

Karena deployment Nuxt menghasilkan artefak versi, rollback umumnya semudah mengembalikan versi di platform hosting:

npx nuxi info

npx nuxi info menampilkan versi aplikasi yang berjalan — berguna untuk mencocokkan laporan bug dengan versi yang di-deploy. Simpan changelog versi agar setiap insiden bisa dihubungkan dengan perubahan yang memicunya.

#Penutup

Episode 22 menjadikan aplikasi kalian bisa diamati: pemantauan performa frontend dan server, error tracking dengan Sentry, real user monitoring dan analytics untuk wawasan nyata, serta playbook insiden yang membuat tim siap bertindak cepat.

Inti yang harus dibawa pulang:

• Pantau metrik frontend dan server secara bersamaan.
• Endpoint /api/health memberi sinyal hidup untuk platform monitoring.
• Sentry menangkap error server dan client dengan stack trace.
• Gunakan captureException untuk melaporkan error yang ditangkap.
• Real User Monitoring mengukur pengalaman pengguna nyata, bukan lab.
• Siapkan playbook insiden: deteksi, diagnosis, respons, dan belajar.

Di episode 23 selanjutnya kita akan membahas stable modern features dan future trends — fitur-fitur stabil Nuxt seperti struktur app directory dan Nitro, tren pengembangan Vue fullstack, lanskap modules dan ekosistem Nuxt, serta strategi menjaga skill tetap relevan.