Adding custom context

The @flareapp/js client automatically collects browser context (URL, user agent, cookies, referrer) and lets you add your own custom context groups to enrich error reports. The Svelte integration adds component name, component hierarchy, and error origin context automatically — custom context is handled by the base client. The full component hierarchy requires the Flare preprocessor.

Head over to the JavaScript adding custom context documentation for full details on flare.addContext(), flare.addContextGroup(), and customizing reports via beforeSubmit.

Route context

When using SvelteKit with handleErrorWithFlare() in hooks.client.ts, it automatically calls trackRouteContext(), which sets up a reactive effect that syncs the current route to Flare's persistent context on every page navigation.

This means all error reports — including those sent via flare.report() or flare.reportMessage() — will include the current route under the svelteKit context key:

{
  "context": {
    "svelteKit": {
      "routeId": "/users/[id]",
      "url": "/users/42",
      "params": { "id": "42" },
      "query": { "tab": "settings" }
    }
  }
}

Sensitive query parameters (password, token, secret, authorization, cookie, api_key, session, csrf, etc.) are automatically redacted.

If you want to start route tracking before the first error occurs, you can call trackRouteContext() manually in your root layout:

<!-- src/routes/+layout.svelte -->
<script>
    import { trackRouteContext } from '@flareapp/sveltekit/client';

    trackRouteContext();

    let { children } = $props();
</script>

{@render children()}

Route tracking is a singleton — calling it multiple times has no effect.