Learn SvelteKit - Observability & Monitoring

#Introduction

Once the application runs in production, the question changes: how do we know it is healthy? Episode 22 covers observability and monitoring for SvelteKit: structured logs, error reporting with Sentry, user behavior analytics, plus production support flows and incident management.

Observability means being able to answer questions about the system from data already collected, not by guessing. Structured logs, metrics, and traces let a team find the root cause quickly when users report issues or metrics start looking odd.

After this episode, you have a foundation for knowing the application is failing before users complain, and you know what steps to take when an incident happens.

#Monitoring Performance and Runtime Errors

#Structured Logs in the Hook

Consistent, structured logs are the backbone of observability. Record method, path, status, and duration for every request through the handle hook, so a trail of each request is available when needed.

Structured logs in 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;
};

#Monitoring Runtime Metrics

Beyond logs, monitor system metrics: memory usage, response time, and error rate. Install npm install pino for logging and send metrics to an observability service that provides dashboards and alerts.

#Error Reporting with Sentry

#Setting Up Sentry in SvelteKit

Sentry collects runtime errors along with full context: stack trace, browser, and the steps leading to the error. The SvelteKit integration ships in a single SDK package.

Initializing and 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
    };
};

#Using handleError for Global Errors

The handleError hook catches errors thrown from load functions and server actions. Combine it with Sentry so errors are not only reported, but also come with the context needed to reproduce them.

#Analytics and Behavior Tracking

#Recording Client Events

Analytics gives a picture of how users interact with the application: pages visited, buttons clicked, even the points where users drop off. Send events from components when the action happens.

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

#Choosing Privacy-Respecting Tools

Choose analytics tools that work without invasive third-party trackers. Prioritize ones that can comply with cookie policy and provide data without weighing down the bundle. Combine analytics data with error monitoring to see not just what happens, but also how often.

#Production Support and Incident Management

#Alerts and On-Call

Metrics without alerts are not very helpful. Set up alerts for signals that truly matter: a spike in error rate, latency over a threshold, or shrinking resources. Make alerts actionable with context information, not just a number.

#A Clear Incident Process

Establish a flow for incidents: who gets contacted, where communication is centralized, and how the fix is measured. After an incident is resolved, do a short review: what happened, why it happened, and what change prevents it from recurring. A simple process is more likely to be followed than a complex one.

#Closing

Key takeaways:

• Structured logs in the handle hook record a trail of every request.
• Performance and error-rate metrics are monitored via an observability service.
• Sentry collects errors together with reproduction context.
• The handleError hook catches errors from load functions and actions.
• Analytics gives a picture of user behavior and can be combined with errors.
• Clear alerts and a short incident process keep production healthy.

In the next episode, the final one of this series, we cover stable modern features & future trends: stable SvelteKit features like adapters, load functions, and server actions, full-stack Svelte and edge-first web trends, the ecosystem and community tools, plus strategies to keep your skills relevant.