How to Monitor Your SvelteKit Application with Vigilmon
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
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:
- Static (adapter-static) — deployed to CDN/object storage (Cloudflare Pages, Vercel, Netlify)
- Node (adapter-node) — running as a Node.js process on a VPS or container
- Serverless (adapter-vercel/adapter-netlify) — serverless functions
- 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
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
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 });
}
};
Monitor this endpoint:
Monitor: GET https://yourapp.com/api/health
Expected status: 200
Keyword check: "ok"
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)
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 });
};
Monitor this with:
Monitor: GET https://yourapp.com/api/canary
Expected status: 200
Keyword check: '"status":"ok"'
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
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
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.
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.