DEV Community

Vigilmon
Vigilmon

Posted on • Originally published at vigilmon.online

How to Monitor Your SvelteKit Application with Vigilmon

#svelte #sveltekit #monitoring #webdev

SvelteKit's flexibility is one of its strengths — you can deploy it as a static site, a Node.js server, an edge function, or a serverless function. But that flexibility also means multiple failure modes to monitor.

This guide covers how to set up comprehensive uptime monitoring for a SvelteKit application with Vigilmon.

Understanding SvelteKit Deployment Modes

Before setting up monitoring, identify how your SvelteKit app is deployed:

  1. Static (adapter-static) — deployed to CDN/object storage (Cloudflare Pages, Vercel, Netlify)
  2. Node (adapter-node) — running as a Node.js process on a VPS or container
  3. Serverless (adapter-vercel/adapter-netlify) — serverless functions
  4. Edge (adapter-cloudflare) — Cloudflare Workers edge deployment

Each mode has different failure modes.

Step 1: Monitor Your App URL

Regardless of deployment mode, monitor the root URL:

Monitor: GET https://yourapp.com
Type: HTTP(S)
Expected status: 200
Check interval: 1 minute
Keyword check: your app title or a unique string from your HTML
Enter fullscreen mode Exit fullscreen mode

Enable multi-region checking. A SvelteKit app on Cloudflare Pages might appear healthy from one region but return errors from another due to cache inconsistency.

Step 2: Monitor SvelteKit API Routes

SvelteKit server-side routes are a common failure point. Add a monitor for each critical +server.ts route:

Monitor: GET https://yourapp.com/api/health
Type: HTTP(S)
Expected status: 200
Enter fullscreen mode Exit fullscreen mode

Create a health endpoint in src/routes/api/health/+server.ts:

import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const GET: RequestHandler = async ({ locals }) => {
  // Check database connection
  try {
    await locals.db.execute('SELECT 1');
    return json({ status: 'ok', db: 'connected' });
  } catch (error) {
    return json({ status: 'degraded', db: 'disconnected' }, { status: 503 });
  }
};
Enter fullscreen mode Exit fullscreen mode

Monitor this endpoint:

Monitor: GET https://yourapp.com/api/health
Expected status: 200
Keyword check: "ok"
Enter fullscreen mode Exit fullscreen mode

Step 3: Monitor Edge Functions

If you're using adapter-cloudflare or Cloudflare Workers, add monitoring for edge-specific failures:

Monitor: GET https://yourapp.com/api/edge-health
Type: HTTP(S)
Regions: Include regions close to your main user base AND regions far away (edge networks can have regional issues)
Enter fullscreen mode Exit fullscreen mode

Edge deployments can fail silently — a bad deployment that passes the health check in one datacenter might be failing in others.

Step 4: Monitor Your SvelteKit Data Loading

SvelteKit's load functions fetch data server-side. If your data sources (CMS, database, external API) go down, your pages will throw errors or show empty content.

Create a canary route that tests your data pipeline:

// src/routes/api/canary/+server.ts
import { json } from '@sveltejs/kit';

export const GET = async () => {
  const checks = await Promise.allSettled([
    fetch('https://cms.yourcompany.com/api/health'),
    // Add other data source checks
  ]);

  const results = checks.map((r, i) => ({
    name: ['cms', 'database'][i],
    status: r.status === 'fulfilled' ? 'ok' : 'error',
  }));

  const allOk = results.every(r => r.status === 'ok');

  return json({ results }, { status: allOk ? 200 : 503 });
};
Enter fullscreen mode Exit fullscreen mode

Monitor this with:

Monitor: GET https://yourapp.com/api/canary
Expected status: 200
Keyword check: '"status":"ok"'
Enter fullscreen mode Exit fullscreen mode

Step 5: Monitor Static Asset Delivery

For adapter-static deployments, verify that key assets are being served:

Monitor: GET https://yourapp.com/_app/immutable/entry/start.js
Expected status: 200
Response time warning: 1000ms
Enter fullscreen mode Exit fullscreen mode

This catches CDN invalidation issues after deployments where the HTML loads but the JS bundle returns 404.

Step 6: Monitor WebSocket Connections (if applicable)

SvelteKit supports WebSocket connections in Node.js mode. If your app uses real-time features, monitor the WebSocket handshake:

Monitor: GET https://yourapp.com/realtime
Type: HTTP(S)
Expected status: 101 (Switching Protocols) or 200
Enter fullscreen mode Exit fullscreen mode

Some Vigilmon plans support WebSocket upgrade monitoring — check your plan tier.

Step 7: Set Up Appropriate Alerts

Failure type Detection Alert
App URL down 200 → non-200 Immediate
API route 500 Status 500 Immediate
Database disconnected Canary 503 Immediate
Slow response (>2s) Response time Slack warning
Asset 404 Status 404 Immediate after deploy

Recommended Monitor Set for SvelteKit

Monitor URL Type
App shell GET / HTTP
Health route GET /api/health HTTP
Data canary GET /api/canary HTTP
Main bundle GET /_app/immutable/... HTTP

Start Monitoring in 5 Minutes

Vigilmon takes 5 minutes to set up with no agent installation. Add your SvelteKit URLs, configure response time thresholds, and connect your alert channel.

→ Monitor your SvelteKit app for free

Top comments (0)