Belajar SvelteKit - Observability & Monitoring

#Pendahuluan

Setelah aplikasi berjalan di produksi, pertanyaan berubah: bagaimana kita tahu ia sehat? Episode 22 membahas observability dan monitoring untuk SvelteKit: log terstruktur, pelaporan error dengan Sentry, analytics perilaku pengguna, serta alur dukungan produksi dan manajemen insiden.

Observability berarti bisa menjawab pertanyaan tentang sistem dari data yang sudah dikumpulkan, bukan menebak. Log, metrik, dan trace yang terstruktur memungkinkan tim menemukan akar masalah dengan cepat saat pengguna melapor atau metrik mulai aneh.

Setelah episode ini, kalian punya fondasi untuk mengetahui aplikasi bermasalah sebelum pengguna mengeluh, dan tahu langkah apa yang diambil saat insiden terjadi.

#Monitoring Performa dan Runtime Errors

#Log Terstruktur di Hook

Log yang konsisten dan terstruktur adalah tulang punggung observability. Catat method, path, status, dan durasi untuk setiap request lewat hook handle, sehingga jejak setiap permintaan tersedia saat dibutuhkan.

Log terstruktur di hooks.server.js

import pino from "pino";
 
const logger = pino({ level: process.env.LOG_LEVEL ?? "info" });
 
export const handle = async ({ event, resolve }) => {
    const mulai = performance.now();
    const res = await resolve(event);
 
    logger.info({
        method: event.request.method,
        path: event.url.pathname,
        status: res.status,
        durasiMs: Math.round(performance.now() - mulai)
    });
 
    return res;
};

#Memantau Metrik Runtime

Selain log, pantau metrik sistem: penggunaan memori, waktu respons, dan tingkat error. Pasang npm install pino untuk logging dan kirim metrik ke layanan observabilitas yang menyediakan dashboard dan alert.

#Error Reporting dengan Sentry

#Menyiapkan Sentry di SvelteKit

Sentry mengumpulkan error runtime beserta konteks lengkap: stack trace, browser, dan langkah yang mengarah ke error. Integrasi SvelteKit disediakan dalam satu paket SDK.

Inisialisasi dan handleError

import * as Sentry from "@sentry/sveltekit";
 
Sentry.init({
    dsn: process.env.SENTRY_DSN,
    tracesSampleRate: 1.0
});
 
export const handleError = async ({ error, event }) => {
    Sentry.captureException(error, {
        extra: { path: event.url.pathname }
    });
 
    return {
        message: "Terjadi kesalahan internal",
        status: 500
    };
};

#Menggunakan handleError untuk Error Global

Hook handleError menangkap error yang dilempar dari load functions dan server actions. Gabungkan dengan Sentry agar error tidak hanya dilaporkan, tetapi juga memberikan konteks yang dibutuhkan untuk reproduksi.

#Analytics dan Pelacakan Perilaku

#Mencatat Peristiwa dari Client

Analytics memberi gambaran bagaimana pengguna berinteraksi dengan aplikasi: halaman yang dikunjungi, tombol yang diklik, hingga titik di mana pengguna berhenti. Kirim peristiwa dari komponen saat aksi terjadi.

<script>
    import { onMount } from "svelte";
 
    onMount(() => {
        kirimPeristiwa("pageview", { path: location.pathname });
    });
</script>

#Memilih Alat yang Menghormati Privasi

Pilih alat analytics yang mendukung tanpa pelacak pihak ketiga yang invasif. Prioritaskan yang bisa mematuhi kebijakan cookie dan memberikan data tanpa membebani bundle. Gabungkan data analytics dengan error monitoring untuk melihat bukan hanya apa yang terjadi, tetapi juga seberapa sering.

#Dukungan Produksi dan Manajemen Insiden

#Alert dan On-Call

Metrik tanpa alert tidak banyak membantu. Atur alert untuk sinyal yang benar-benar penting: error rate melonjak, latensi melebihi ambang, atau resource menipis. Buat alert yang bisa ditindaklanjuti dengan informasi konteks, bukan sekadar angka.

#Proses Insiden yang Jelas

Tetapkan alur untuk insiden: siapa yang dihubungi, di mana komunikasi dipusatkan, dan bagaimana perbaikan diukur. Setelah insiden selesai, lakukan tinjauan singkat: apa yang terjadi, mengapa terjadi, dan perubahan apa yang mencegahnya terulang. Proses yang sederhana lebih mungkin dijalankan daripada yang rumit.

#Penutup

Inti yang harus dibawa pulang:

• Log terstruktur di hook handle mencatat jejak setiap request.
• Metrik performa dan error rate dipantau lewat layanan observabilitas.
• Sentry mengumpulkan error beserta konteks reproduksi.
• Hook handleError menangkap error dari load functions dan actions.
• Analytics memberi gambaran perilaku pengguna dan bisa digabung dengan error.
• Alert yang jelas dan proses insiden yang singkat menjaga produksi tetap sehat.

Di episode 23, episode terakhir dari seri ini, kita membahas stable modern features & future trends: fitur stabil SvelteKit seperti adapters, load functions, dan server actions, tren full-stack Svelte dan edge-first web, ekosistem dan tools komunitas, serta strategi agar skill tetap relevan.