Flare Flare Laravel Laravel PHP PHP JavaScript JavaScript React React Vue Vue Svelte Svelte Protocol Protocol

API reference

The Svelte integration builds on top of the core JavaScript client. For the base API reference (method chaining, configuration, using the Flare class directly), see the JavaScript API reference.

Exports

import { FlareErrorBoundary, createFlareErrorHandler, withFlareConfig } from '@flareapp/svelte';
Export Description
FlareErrorBoundary Svelte error boundary component that wraps <svelte:boundary> to catch rendering errors and report them to Flare. See Error boundary.
createFlareErrorHandler Factory function that returns an onerror callback for use with Svelte's native <svelte:boundary>. See Error handler.
withFlareConfig Wraps your svelte.config.js export to automatically inject the Flare preprocessor for component hierarchy tracking. See Component hierarchy.
flarePreprocessor Svelte preprocessor that injects component registration calls. Use this for manual preprocessor setup instead of withFlareConfig.

Config export (@flareapp/svelte/config)

The config helpers are also exported from a separate subpath so they can be imported in svelte.config.js (which runs in Node.js) without pulling in Svelte runtime code:

import { withFlareConfig, flarePreprocessor } from '@flareapp/svelte/config';
Export Description
withFlareConfig Wraps your Svelte config to automatically inject the Flare preprocessor. Accepts optional WithFlareConfigOptions (componentTracking, exclude). See Component hierarchy.
flarePreprocessor Svelte preprocessor that injects component registration calls for building the component hierarchy. Optional. See Component hierarchy.

SvelteKit exports (@flareapp/sveltekit)

The @flareapp/sveltekit package re-exports everything from @flareapp/svelte and adds SvelteKit-specific hooks via subpath exports.

Client (@flareapp/sveltekit/client)

import {
    handleErrorWithFlare,
    captureError,
    trackRouteContext,
} from '@flareapp/sveltekit/client';
Export Description
handleErrorWithFlare Factory function that returns a SvelteKit-compatible handleError hook for hooks.client.ts. Automatically skips 4xx errors and starts route tracking. See SvelteKit error handling.
captureError Manually report an error to Flare with SvelteKit route context. Does not skip 4xx errors. See Capturing errors.
trackRouteContext Starts reactive route tracking, syncing the current route to Flare's context on every navigation. Called automatically by handleErrorWithFlare().

Server (@flareapp/sveltekit/server)

Experimental: Server-side error handling is functional but has limited stack trace resolution.

import {
    handleErrorWithFlare,
    captureError,
} from '@flareapp/sveltekit/server';
Export Description
handleErrorWithFlare Factory function that returns a SvelteKit-compatible handleError hook for hooks.server.ts. Automatically skips 4xx errors. See SvelteKit error handling.
captureError Manually report a server-side error to Flare with route context from a RequestEvent. See Capturing errors.

TypeScript

The @flareapp/svelte package ships with full TypeScript support. The following types are exported:

import type {
    FlareSvelteContext,
    SvelteErrorOrigin,
    FlarePreprocessorOptions,
} from '@flareapp/svelte';
Type Description
FlareSvelteContext Shape of the context argument passed to beforeSubmit / afterSubmit: { svelte: { componentName, componentHierarchy, errorOrigin } }.
SvelteErrorOrigin Normalized error origin category: "render" | "event" | "effect" | "unknown".
FlarePreprocessorOptions Options accepted by flarePreprocessor() (exclude).
WithFlareConfigOptions Options accepted by withFlareConfig() (componentTracking, exclude).

The @flareapp/sveltekit package exports additional types:

import type {
    FlareSvelteKitContext,
    SvelteKitRouteContext,
    HandleErrorWithFlareOptions,
    CaptureErrorOptions,
} from '@flareapp/sveltekit';
Type Description
FlareSvelteKitContext Extends FlareSvelteContext with SvelteKit route data. Shape: { svelte: { ..., svelteKit?: { routeId, url, params, query, status?, message? } } }.
SvelteKitRouteContext Route information: routeId, url (pathname), params, query (redacted), and optional status/message.
HandleErrorWithFlareOptions Options accepted by handleErrorWithFlare() (beforeEvaluate, beforeSubmit, afterSubmit).
CaptureErrorOptions Options accepted by captureError() (event, status, message).
Resolving bundled code Error boundary