Belajar Astro - Observability & Monitoring

#Pendahuluan

Setelah situs live, pertanyaannya bergeser dari "apakah berjalan?" menjadi "apakah berjalan dengan baik?". Episode 22 ini membahas observability dan monitoring: bagaimana mengetahui performa halaman di lapangan, menangkap error sebelum pengguna mengeluh, dan memantau kesehatan build serta deployment.

Situs statis mungkin tidak punya server yang perlu di-memory, tetapi pengguna dan browser mereka tetap bisa diamati. Core Web Vitals, error JavaScript, dan metrik deployment adalah sinyal yang harus kalian pantau.

Episode ini membangun sistem pengawasan yang membuat kalian tahu situs kalian sehat — tanpa harus menunggu keluhan pengguna.

#Monitoring Page Performance dan User Experience

#Real User Monitoring (RUM)

Skor Lighthouse di episode 15 hanya mengukur di mesin kalian. Real User Monitoring mengukur performa yang benar-benar dialami pengguna — dari browser mereka, di jaringan mereka. Data ini dikumpulkan dengan mengirim Web Vitals ke layanan analytics.

Contoh mengirim metrik Vitals dari Astro dengan integrasi kustom (pola dari episode 18):

Kirim Web Vitals dari integrasi

import type { AstroIntegration } from "astro";
 
export function webVitals(): AstroIntegration {
  return {
    name: "web-vitals",
    hooks: {
      "astro:config:done": ({ injectScript }) => {
        injectScript("page", `
          new PerformanceObserver((list) => {
            for (const entry of list.getEntries()) {
              navigator.sendBeacon("/api/vitals", JSON.stringify(entry));
            }
          }).observe({ type: "largest-contentful-paint" });
        `);
      },
    },
  };
}

Kode di atas mengamati event largest-contentful-paint dan mengirim nilainya dengan navigator.sendBeacon — metrik performa nyata kini mengalir ke backend kalian.

#Memantau Kualitas di Lapangan

Dengan data RUM, kalian bisa menjawab: apakah LCP pengguna mobile di jaringan lambat melewati 2,5 detik? Apakah ada area dengan INP buruk? Jawabannya menjadi dasar optimasi berikutnya — bukan lagi tebakan.

#Error Reporting dengan Client-Side Analytics

#Menangkap Error JavaScript

Error di komponen yang di-hydrate bisa merusak interaksi tanpa terlihat. Pasang pelaporan error global:

Menangkap error global

window.addEventListener("error", (event) => {
  navigator.sendBeacon("/api/error", JSON.stringify({
    message: event.message,
    file: event.filename,
    line: event.lineno,
  }));
});

Listener error mengirim detail error ke endpoint. Dengan pelaporan ini, error yang sebelumnya tidak terlihat muncul sebagai data yang bisa ditindaklanjuti.

#Layanan Error Tracking

Sebagai alternatif menulis sendiri, layanan seperti Sentry menyediakan SDK yang siap pakai dengan source map, grouping, dan alert. Untuk produksi serius, layanan ini menghemat banyak waktu — integrasinya juga bisa dibungkus sebagai Astro integration.

#Tracking Build dan Deployment Metrics

#Mencatat Metrik Build

Dengan hook astro:build:done, kalian bisa mencatat kesehatan build:

Catat metrik build

"astro:build:done": ({ pages, dir }) => {
  const ukuranMb = dir.statSync
    ? 0
    : 0;
  console.log(`Halaman dibangun: ${pages.length}`);
}

Pendekatan yang lebih berguna: simpan laporan jumlah halaman, ukuran dist/, dan durasi build ke file atau layanan telemetri. Tren data ini menunjukkan apakah project tumbuh dengan sehat atau membengkak.

#Metrik Deployment

Catat waktu dan status setiap deployment — dari CI atau platform hosting. Jika build mulai melambat, data ini membantu menemukan penyebab: jumlah konten bertambah? Dependency membengkak? Episode 19 sudah menyiapkan pipeline-nya; sekarang tinggal menambahkan pencatatan metrik.

#Production Support dan Incident Response

#Runbook untuk Insiden

Insiden bukan soal "apakah", melainkan "kapan". Siapkan runbook: dokumen berisi langkah-langkah ketika terjadi masalah — bagaimana rollback deployment, cara memeriksa header cache, dan siapa yang dihubungi. Runbook mengubah kekacauan menjadi prosedur.

#Prosedur Sederhana

Untuk situs Astro, insiden yang umum dan solusinya:

Halaman 404 mendadak  →  cek build terakhir dan rollback
Performa menurun      →  cek bundle dan gambar (episode 15)
Konten lama muncul    →  cek cache header dan invalidasi CDN

Dokumentasikan langkah diagnosis untuk setiap insiden yang pernah terjadi. Runbook yang hidup akan semakin lengkap seiring waktu.

#Alert yang Berguna

Atur alert hanya untuk hal yang butuh tindakan: ketersediaan down, error rate naik drastis, atau Web Vitals memburuk terus-menerus. Terlalu banyak alert membuat tim mati rasa dan mengabaikan semuanya.

#Penutup

Episode 22 membangun sistem pengawasan situs Astro: Real User Monitoring untuk performa nyata, error reporting dari klien, pencatatan metrik build dan deployment, serta runbook dan prosedur untuk insiden produksi.

Inti yang harus dibawa pulang:

• RUM mengukur performa nyata pengguna, bukan hanya lab.
• Kirim Web Vitals dengan navigator.sendBeacon dan PerformanceObserver.
• Laporkan error JavaScript ke layanan tracking seperti Sentry.
• Catat metrik build dan deployment sebagai tren kesehatan.
• Siapkan runbook untuk insiden dan rollback.
• Atur alert hanya untuk hal yang benar-benar membutuhkan tindakan.

Di episode 23 selanjutnya — episode terakhir — kita akan membahas stable modern features dan future trends: fitur Astro terbaru yang stabil, tren pengembangan web berbasis konten, ekosistem dan tools komunitas, serta strategi menjaga skill Astro tetap relevan ke depan.