Belajar Gatsby - Observability & Monitoring

#Pendahuluan

Membangun situs hanyalah setengah pekerjaan; menjaganya tetap sehat adalah setengah lainnya. Observability menjawab tiga pertanyaan: apakah situs cepat, apakah build sukses, dan apakah pengguna mengalami error.

Episode 22 membahas monitoring performa dengan analytics, tracking build metrics dan deployment status, error reporting untuk interaksi client-side, serta user behavior dan performance monitoring.

#Monitoring Performa dengan Analytics

#Web Analytics

Analytics seperti Google Analytics 4 mencatat kunjungan, sumber traffic, dan perilaku pengguna. Integrasi di Gatsby menggunakan plugin resmi:

npm install gatsby-plugin-google-gtag

Tambahkan plugin dengan measurement ID:

Konfigurasi gatsby-plugin-google-gtag

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-google-gtag",
      options: {
        trackingIds: ["G-XXXXXXXXXX"],
        pluginConfig: { head: true },
      },
    },
  ],
}

Measurement ID seperti G-XXXXXXXXXX diambil dari dashboard Google Analytics; jangan pernah menuliskan nilai asli ke dalam kode.

#Real User Monitoring

Analytics tradisional mencatat halaman, bukan pengalaman nyata. Library web-vitals mengukur LCP, INP, dan CLS pada perangkat pengguna sesungguhnya, lalu mengirim nilainya ke analytics:

Kirim Core Web Vitals

import { onCLS, onINP, onLCP } from "web-vitals"
 
const report = (metric) => {
  console.log(metric.name, metric.value)
}
 
onCLS(report)
onINP(report)
onLCP(report)

onLCP, onINP, dan onCLS memanggil callback setiap kali metrik dihitung di browser pengguna, sehingga kalian mendapat gambaran performa nyata, bukan hanya hasil audit.

#Build Metrics dan Deployment Status

#Memantau Pipeline

Build yang gagal harus diketahui secepat mungkin. GitHub Actions menampilkan status setiap workflow, dan platform seperti Gatsby Cloud mencatat durasi build, ukuran bundle, dan jumlah halaman yang dibangun ulang.

#Lighthouse CI di Pipeline

Jalankan Lighthouse di CI untuk memastikan metrik performa tidak turun sebelum merge:

npx lhci autorun --config=./lighthouserc.js

lhci autorun membangun situs, menjalankan Lighthouse, dan membandingkan skor dengan budget yang didefinisikan di lighthouserc.js. Regresi langsung memblokir pull request.

#Error Reporting Client-Side

#Sentry untuk JavaScript

Error yang terjadi di browser pengguna tidak pernah terlihat di log server. Sentry menangkapnya dan mengirim detail lengkap — stack trace, browser, dan langkah sebelum error:

npm install @sentry/gatsby

Inisialisasi di gatsby-browser:

Inisialisasi Sentry

import * as Sentry from "@sentry/gatsby"
 
export const onClientEntry = () => {
  Sentry.init({
    dsn: process.env.GATSBY_SENTRY_DSN,
  })
}

onClientEntry dijalankan sekali saat aplikasi client dimuat, menjadi titik yang tepat untuk inisialisasi error tracker.

#Error Boundary

Selain global tracker, pasang error boundary di komponen utama agar UI memberikan pesan yang jelas saat terjadi kegagalan render, bukan halaman putih yang membingungkan.

#User Behavior dan Performance Monitoring

#Event Tracking

Lacak aksi penting seperti klik tombol atau submit form dengan event tracking. Data ini menjawab pertanyaan produk, misalnya halaman mana yang paling banyak memulai perjalanan pengguna.

#Dashboard dan Alert

Kumpulkan semua metrik di satu dashboard: performa, build, dan error. Pasang alert untuk nilai yang menyimpang — LCP naik, build mulai melambat, atau error rate meningkat — sehingga masalah ditangani sebelum pengguna mengeluh.

#Penutup

Inti yang harus dibawa pulang:

• Analytics mencatat kunjungan dan perilaku pengguna.
• web-vitals mengukur performa di perangkat pengguna nyata.
• Status build dan durasi build dipantau di CI.
• Lighthouse CI mencegah regresi performa masuk ke production.
• Sentry menangkap error client-side dengan detail lengkap.
• Dashboard terpadu dan alert mempermudah deteksi dini.

Di episode 23 selanjutnya — episode terakhir series ini — kita akan membahas stable modern features dan future trends, merangkum strategi agar skill Gatsby tetap relevan di ekosistem yang terus berubah.