SvelteKit with AllStak

Installation

Install the SDK and core package.

npm install @allstak/svelte @allstak/js

Configuration

Initialize in hooks.client.ts and hooks.server.ts, and add the Vite plugin.

// 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();

Basic example

Add the Vite plugin for source maps and build wiring.

// 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()],
});

Capturing errors

handleErrorWithAllStak captures SvelteKit errors; for Svelte 5 boundaries use createErrorBoundaryHandler.

<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>

Tracking requests

Server inbound HTTP is automatic via allstakHandle() (opens an http.server span, continues the trace, sets a response trace header). Outbound HTTP is auto-instrumented by @allstak/js. No manual call required.

Best practices

• Wire both hooks.client.ts and hooks.server.ts.
• Add allstakSvelteKit() to Vite for source maps.
• Use VITE_ALLSTAK_API_KEY / ALLSTAK_API_KEY env vars.