# 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](/docs/svelte/errors/error-boundary#enabling-the-component-hierarchy).

Head over to the [JavaScript adding custom context documentation](/docs/javascript/data-collection/adding-custom-context) for full details on `flare.addContext()`, `flare.addContextGroup()`, and customizing reports via `beforeSubmit`.

## Route context

When using **SvelteKit** with [`handleErrorWithFlare()`](/docs/svelte/errors/sveltekit-error-handling) 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:

```json
{
  "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:

```svelte
<!-- 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.