SvelteKit integration

Vantmetry works in SvelteKit through the core init and logger API. Wiring it into the client error hook captures the client-side errors SvelteKit routes there.

Installation

npm install vantmetry

Setup

Initialize the tracker and forward SvelteKit's client error hook to the logger:

// src/hooks.client.ts
import type { HandleClientError } from '@sveltejs/kit';
import { init, logger } from 'vantmetry';

init({ publicKey: 'YOUR_PUBLIC_KEY' });

export const handleError: HandleClientError = ({ error, message }) => {
  logger.error(error ?? message);
};

hooks.client.ts only runs in the browser, so no SSR guard is needed there.

Why the client hook matters

SvelteKit catches unexpected errors during client-side navigation and rendering and routes them to handleError in hooks.client.ts instead of letting them reach window.onerror. Without wiring that hook, those errors never reach the tracker. Errors outside SvelteKit's boundary, such as async code or other scripts on the page, are still captured automatically by init.

Browser-only usage in shared code

The tracker is browser-only. In code that also runs on the server (components, +page.ts, +layout.ts), only call logger inside a browser check:

import { browser } from '$app/environment';
import { logger } from 'vantmetry';

export function trackCheckoutError(error: unknown) {
  if (browser) {
    logger.error(error, { flow: 'checkout' });
  }
}

Source maps

To get readable stack traces from your minified production build, emit source maps. See Source maps for the details and Vite configuration.

Core Features

For details on batching, deduplication, circuit breaker, PII masking, and other core tracker features, see the main Tracker page.