@allstak/svelte

Official AllStak SDK for Svelte and SvelteKit — automatic error tracking, structured logs, distributed tracing, HTTP monitoring, breadcrumbs, sessions, and Core Web Vitals on both the client and the server (SSR).

It is a thin, high-quality wrapper over @allstak/js: after a two-file setup plus one Vite line you get automatic instrumentation, and the full manual API stays available for the cases that need it.

Install

npm install @allstak/svelte @allstak/js
# or: pnpm add @allstak/svelte @allstak/js
# or: yarn add @allstak/svelte @allstak/js

Setup (2 hook files + 1 Vite line)

You get full client + server observability by wiring two SvelteKit hook files and adding one plugin to your Vite config.

1. 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();

initAllStak boots the SDK, stamps the Svelte identity, and starts Core Web Vitals automatically. handleError reports unhandled client errors with route context.

2. src/hooks.server.ts

import { allstakHandle, handleErrorWithAllStak } from '@allstak/svelte/hooks/server';

export const handle = allstakHandle();
export const handleError = handleErrorWithAllStak();

allstakHandle initializes the server SDK once — reading ALLSTAK_API_KEY (and optional ALLSTAK_HOST, ALLSTAK_ENVIRONMENT, ALLSTAK_RELEASE) from the environment — then for every request it opens an http.server span, records an inbound HTTP request, continues the caller's distributed trace, and sets a response trace header.

Compose it with your own hooks using SvelteKit's sequence:

import { sequence } from '@sveltejs/kit/hooks';
import { allstakHandle } from '@allstak/svelte/hooks/server';

export const handle = sequence(allstakHandle(), myOwnHandle);

3. vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { allstakSvelteKit } from '@allstak/svelte/vite';

export default defineConfig({
  plugins: [
    sveltekit(),
    allstakSvelteKit({
      // optional: upload source maps so production stack traces are readable
      sourceMaps: {
        enabled: true,
        release: process.env.APP_VERSION,
        token: process.env.ALLSTAK_UPLOAD_TOKEN,
      },
    }),
  ],
});

The plugin injects SSR trace markers so the browser continues the server's trace, exposes a tree-shakeable __ALLSTAK_TRACING__ flag, and (when sourceMaps.enabled) wires source-map debug-id injection and upload.

Navigation spans + breadcrumbs

$app/navigation is only importable inside the component tree, so wire navigation instrumentation once from your root layout:

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { beforeNavigate, afterNavigate } from '$app/navigation';
  import { instrumentNavigation } from '@allstak/svelte';

  instrumentNavigation({ beforeNavigate, afterNavigate });
</script>

<slot />

Every navigation now drops a breadcrumb and opens a navigation span finished when the next page settles.

Error boundaries (Svelte 5)

<script lang="ts">
  import { createErrorBoundaryHandler } from '@allstak/svelte';
  const onerror = createErrorBoundaryHandler({ source: 'Dashboard' });
</script>

<svelte:boundary {onerror}>
  <RiskyWidget />
  {#snippet failed(error, reset)}
    <button onclick={reset}>Try again</button>
  {/snippet}
</svelte:boundary>

For Svelte 4, or any manual try/catch, use captureComponentError(error).

Manual API

The full @allstak/js surface is re-exported, so anything you can do with the core SDK you can do from @allstak/svelte:

import { AllStak, setUser, setTag } from '@allstak/svelte';

setUser({ id: 'u-123', email: '[email protected]' });
setTag('plan', 'pro');

AllStak.captureMessage('checkout started', 'info');
AllStak.addBreadcrumb({ type: 'ui.click', message: 'Pay now', level: 'info' });

const span = AllStak.startSpan('checkout.flow', { description: 'review → pay' });
span.setTag('flow', 'web');
span.finish('ok');

await AllStak.flush();

Inside a +page.server.ts load or a +server.ts endpoint, import the same API and add custom spans, logs, or DB-query telemetry — they are correlated with the active request's trace automatically:

import { AllStak } from '@allstak/svelte';

export async function load() {
  AllStak.log.info('loading dashboard');
  // ... your work; outbound HTTP / DB calls join the request trace
  return { ok: true };
}

What you get automatically

Every piece is individually toggleable and on by default. Optional framework pieces degrade gracefully — a missing key, a missing $app/navigation, or a static build never throws.

Configuration

initAllStak / allstakHandle accept every @allstak/js init option (apiKey, host, environment, release, dist, sampling, filters, offline queue, beforeSend, …). The default ingest host is https://api.allstak.sa and can be overridden with the host option.

License

MIT © AllStak