Svelte SDK

Svelte error tracking from the browser to the server

A SvelteKit-native SDK that hooks into hooks.client.ts and hooks.server.ts — errors captured on both sides, inbound requests traced automatically, and source maps wired in by a Vite plugin. With session replay and readable stack traces on the same platform, bug reports stop being guesswork.

Why Svelte apps need real error tracking

SvelteKit apps fail in two places at once. A load function throws on the server, a component breaks in the browser, and neither failure tells you about itself — the user sees an error page, closes the tab, and the evidence is gone. Minified production bundles finish the job: the few stack traces you do get point at compiled chunks, not at the Svelte component that actually broke.

AllStak's Svelte SDK covers both sides. Wire handleErrorWithAllStak into hooks.client.ts and hooks.server.ts and SvelteKit errors are captured wherever they happen; allstakHandle() wraps every inbound server request in an http.server span and continues the trace across the wire. The allstakSvelteKit() Vite plugin handles source maps at build time, so minified traces resolve to your original code — and session replay shows what the user did before the failure. All of it lands next to your backend errors, logs, and uptime on one platform.

Full-stack Svelte monitoring

From a broken component in the browser to the load function behind it, AllStak covers your SvelteKit app on both sides of the wire.

Error tracking

handleErrorWithAllStak captures SvelteKit errors in both hooks files, and createErrorBoundaryHandler plugs into Svelte 5's svelte:boundary so a broken widget reports itself instead of taking the page down.

Server request tracing

allstakHandle() wraps every inbound request in an http.server span, continues the trace, and sets a response trace header — server-side visibility with one export.

Session replay

See what the user actually did before the error — clicks, navigation, and the moment it broke — with privacy masking so sensitive input never leaves the browser.

Source maps via Vite

Add allstakSvelteKit() to vite.config.ts and source maps are wired in at build time — minified production traces resolve to your original components.

Outbound HTTP & breadcrumbs

Outbound HTTP is auto-instrumented through the underlying @allstak/js pipeline, with breadcrumbs collected along the way — every error carries the journey that led to it.

Alerts & incidents

Get notified the moment a new error appears or an old one spikes — before the support tickets arrive, not after.

Add AllStak in minutes

Install the SDK and core package, then initialize in hooks.client.ts and hooks.server.ts — errors are captured on both sides from there.

src/hooks.client.ts
npm install @allstak/svelte @allstak/js

// src/hooks.client.ts
import { initAllStak, handleErrorWithAllStak } from '@allstak/svelte/hooks/client';

initAllStak({
  apiKey: import.meta.env.VITE_ALLSTAK_API_KEY,
  environment: import.meta.env.MODE,
  release: import.meta.env.VITE_APP_VERSION,
});
export const handleError = handleErrorWithAllStak();

// src/hooks.server.ts
import { allstakHandle, handleErrorWithAllStak } from '@allstak/svelte/hooks/server';
export const handle = allstakHandle();
export const handleError = handleErrorWithAllStak();

Add allstakSvelteKit() from @allstak/svelte/vite to your vite.config.ts plugins for source maps and build wiring — and keep the API key in VITE_ALLSTAK_API_KEY, not in source. full setup guide · SDK reference.

What you see in AllStak

Error detail with full context

Open any issue to a readable stack trace (via source maps), the breadcrumbs leading up to it, and the release it shipped in — reproduction without the guesswork.

Session replay of the failure

Watch the user's session around the error — what they clicked, where they navigated, and what the page looked like when it broke.

Client and server in one trace

allstakHandle() continues the trace across the request, so a browser error and the server request behind it show up as one connected story, not two disconnected events.

Unified real-time dashboard

Frontend errors next to the backend errors, logs, and uptime of the APIs behind them — one dashboard, in English or Arabic, for the whole team.

Why teams pick AllStak for Svelte

  • Client and server covered with two hooks files — SvelteKit-native, no bolted-on adapters.
  • Frontend and backend on one platform — errors, logs, uptime, and infrastructure with one bill.
  • Session replay and source maps turn vague bug reports into watchable, readable evidence.
  • The allstakSvelteKit() Vite plugin wires source maps into the build — no manual upload scripts.
  • Predictable SAR pricing with a genuine free tier — start without a credit card.
  • Data stays in Saudi Arabia, with an English and Arabic dashboard for the whole team.

Svelte monitoring FAQ

How do I add error tracking to a SvelteKit app?

Install @allstak/svelte and @allstak/js from npm, call initAllStak in hooks.client.ts, and export handleError = handleErrorWithAllStak() from both hooks.client.ts and hooks.server.ts. Add allstakHandle() as the server handle for request tracing, and the allstakSvelteKit() Vite plugin for source maps.

Does AllStak support Svelte 5 error boundaries?

Yes. createErrorBoundaryHandler returns an onerror handler you pass to svelte:boundary, so a failing subtree reports the error to AllStak while your failed snippet renders a fallback — the page stays up and you still get the full report.

Is AllStak free for Svelte?

Yes. AllStak has a free tier you can start on without a credit card, and predictable SAR pricing as you grow. The Svelte SDK itself is free to use.

Is AllStak a Sentry alternative for Svelte?

Yes. You get SvelteKit error tracking with source maps and session replay like Sentry, plus the logs, uptime, and infrastructure monitoring of your backend on the same platform — one SAR bill and data stored in Saudi Arabia instead of a stack of separate tools.

Will the SDK slow down my Svelte app?

The SDK is built for production: capture hooks are lightweight, telemetry ships in the background, and the server handle adds a thin span around requests you were already serving. Your users' experience isn't meaningfully affected.

Start tracking Svelte errors today

Wire the two hooks files, add the Vite plugin, deploy — and watch client and server errors arrive in one dashboard. Start free — no credit card required.