SvelteKit Integration
Full-stack observability for SvelteKit with two hook wrappers. Server hook tracing, load function spans, form action instrumentation, and client-side Core Web Vitals — no code changes required.
How It Works
Install the npm Package
Run npm install @tigerops/sveltekit. The package includes a SvelteKit handle hook wrapper for server-side tracing, a handleError instrumentation helper, and a lightweight browser SDK injected as a SvelteKit module for client-side Core Web Vitals.
Wrap Hooks in hooks.server.ts
Import and wrap your handle export with TigerOps.wrapHandle() in src/hooks.server.ts. Add tigerops.handleError() to your handleError export. These two lines instrument all server-side request handling and surface errors with full stack traces.
Initialize the Browser SDK
In src/hooks.client.ts, call TigerOps.initBrowser() with your service name and API key. The browser SDK automatically collects Core Web Vitals on every page navigation and links them to the server-side trace via the injected trace ID.
Hook, Load & Vitals Data Flow
TigerOps starts capturing handle hook execution times, universal and server load function spans per route segment, endpoint request traces, Prisma query spans inside load functions, client navigation durations, and LCP/CLS/INP per route.
What You Get Out of the Box
Handle Hook Request Tracing
The wrapHandle() wrapper creates a root span for every SvelteKit request with route ID, HTTP method, response status, and total execution time. Chained hooks using the sequence() helper each produce their own child spans in execution order.
Universal & Server Load Function Spans
Both universal load functions (running on server during SSR and browser during navigation) and server-only load functions create child spans with route ID, execution context (server or client), data size returned, and any thrown errors.
SvelteKit API Route & Form Action Tracing
+server.ts endpoint handlers and +page.server.ts form actions are individually traced. Each span includes the HTTP method, action name, and execution time. Form action validation errors are captured as span events without exposing field values.
Client-Side Navigation & Core Web Vitals
Client-side navigations triggered by SvelteKit's client router produce browser spans with source route, target route, and navigation duration. LCP, CLS, INP, and FID are collected per route and attributed to the specific page transition.
Prisma & Drizzle Query Spans Inside Load
Database queries executed inside SvelteKit server load functions or +server.ts endpoints via Prisma or Drizzle are auto-instrumented. Spans appear as children of the load function span, making it easy to identify N+1 patterns in server data fetching.
handleError Span Enrichment
When SvelteKit calls handleError for an unhandled error, TigerOps enriches the active span with the error type, message, stack trace, and the event.url that triggered it. Error rate by route is tracked as a metric in the TigerOps dashboard.
Install & Initialize
One npm install and two hook file wrappers. Full SvelteKit observability.
# Install the TigerOps SvelteKit package
npm install @tigerops/sveltekit
# Set environment variables
export TIGEROPS_API_KEY="your-api-key"
export TIGEROPS_SERVICE_NAME="my-sveltekit-app"
// src/hooks.server.ts
import { TigerOps } from "@tigerops/sveltekit/server";
import type { Handle, HandleServerError } from "@sveltejs/kit";
const tigerops = TigerOps.init({
apiKey: process.env.TIGEROPS_API_KEY!,
serviceName: "my-sveltekit-app",
environment: process.env.NODE_ENV,
});
export const handle: Handle = tigerops.wrapHandle(async ({ event, resolve }) => {
return resolve(event);
});
export const handleError: HandleServerError = tigerops.handleError(
({ error, event }) => {
console.error("Unhandled error:", error);
}
);
// src/hooks.client.ts
import { TigerOps } from "@tigerops/sveltekit/client";
TigerOps.initBrowser({
serviceName: "my-sveltekit-app",
webVitals: true,
traceNavigation: true,
});
// Custom span in a server load function
// src/routes/orders/[id]/+page.server.ts
import { tigerops } from "@tigerops/sveltekit/server";
import type { PageServerLoad } from "./$types";
export const load: PageServerLoad = async ({ params }) => {
return tigerops.span("order.load", async (span) => {
span.setAttribute("order.id", params.id);
const order = await db.order.findUniqueOrThrow({
where: { id: params.id },
});
return { order };
});
};Common Questions
Which SvelteKit and Svelte versions are supported?
SvelteKit 1.x and 2.x are fully supported. Svelte 4.x and 5.x (with runes) are supported. The package works with all SvelteKit adapter targets: Node, Vercel, Netlify, Cloudflare, and Static. Vite 5.x is required for the build-time plugin.
How does TigerOps handle SvelteKit universal load functions that run both server and client?
Universal load functions are traced on the server during SSR and in the browser during client-side navigation. The execution context (server or client) is recorded as a span attribute. Server and client executions of the same route are correlated by route ID in the dashboard.
Does TigerOps work with SvelteKit deployed to Cloudflare Pages?
Yes. For edge deployments, use TigerOps.initEdge() which uses a fetch-based OTLP exporter compatible with the Cloudflare Workers runtime. Span export uses platform.context.waitUntil() to prevent early termination of the worker during export.
Can I use TigerOps with SvelteKit's $app/state and runes ($state, $derived)?
Yes. The browser SDK instruments client-side navigation events via SvelteKit's beforeNavigate and afterNavigate lifecycle functions. Svelte 5 runes are compile-time transforms and do not affect runtime instrumentation. Both are compatible.
Does TigerOps instrument SvelteKit streaming responses?
Yes. SvelteKit streaming (deferred data via promises in load functions) is supported. TigerOps creates a parent span for the initial response and child spans for each deferred promise resolution, giving you full visibility into streaming waterfall timings.
Full SvelteKit Observability in One npm Install
Hook traces, load function spans, form action visibility, and Core Web Vitals — no code changes required.