Error handler

createFlareErrorHandler is a factory function that returns an onerror callback compatible with Svelte's native <svelte:boundary>. It automatically reports errors to Flare with Svelte-specific context, including the component name, component hierarchy, and error origin. It also handles non-Error values (strings, objects) by converting them to proper Error instances.

The full component hierarchy is available when the Flare preprocessor is enabled. Without it, the hierarchy falls back to stack frame extraction (usually one component).

Use this when you want to use your own <svelte:boundary> instead of the FlareErrorBoundary component — for example, when you need full control over the boundary's rendering behavior.

Basic usage

Call createFlareErrorHandler() and pass the returned function as the onerror handler on <svelte:boundary>:

<script>
    import { createFlareErrorHandler } from '@flareapp/svelte';

    const handleError = createFlareErrorHandler();
</script>

<svelte:boundary onerror={handleError}>
    <App />
    {#snippet failed(error, reset)}
        <p>Something went wrong. <button onclick={reset}>Retry</button></p>
    {/snippet}
</svelte:boundary>

Callback lifecycle

The handler supports the same callback pattern as the error boundary, with three hooks that fire at different stages:

1. beforeEvaluate - called after the error is converted to an Error, before building the component context. Use this to attach custom context to Flare (e.g. user info, feature flags).
2. beforeSubmit - called with the built context. Return a (possibly modified) context object to filter or enrich the report before it is sent. See the error boundary docs for the context type shape.
3. afterSubmit - called after the error is reported to Flare. Note that the report is sent asynchronously, so this callback runs after the report is initiated, not after the network request completes. Use this for side effects like logging or showing a toast.

The callbacks are not wrapped in a try/catch. If a hook throws, the error will bubble out of the boundary handler, so keep the logic defensive.

These hooks are separate from flare.configure({ beforeEvaluate, beforeSubmit }). The handler hooks add context and run side effects but cannot suppress errors. To filter errors, use the client-level hooks — see Filtering errors for the full execution order.

<script>
    import { flare } from '@flareapp/js';
    import { createFlareErrorHandler } from '@flareapp/svelte';

    const handleError = createFlareErrorHandler({
        beforeEvaluate: ({ error }) => {
            flare.addContext('user', { id: currentUser.id });
        },
        beforeSubmit: ({ error, context }) => {
            return {
                ...context,
                svelte: {
                    ...context.svelte,
                    customField: 'value',
                },
            };
        },
        afterSubmit: ({ error, context }) => {
            console.error('Error reported to Flare:', error.message);
        },
    });
</script>

<svelte:boundary onerror={handleError}>
    <App />
</svelte:boundary>

When to use the error handler vs. the error boundary

You can use both in the same app: FlareErrorBoundary at the root for a top-level fallback, and createFlareErrorHandler() in specific components where you need custom boundary behavior.

<script>
    import { FlareErrorBoundary, createFlareErrorHandler } from '@flareapp/svelte';

    const customHandler = createFlareErrorHandler({
        afterSubmit: ({ error }) => {
            console.error('Custom section error:', error);
        },
    });
</script>

<!-- Root-level boundary with Flare's component -->
<FlareErrorBoundary>
    <MainContent />

    <!-- Custom boundary for a specific section -->
    <svelte:boundary onerror={customHandler}>
        <RiskyWidget />
        {#snippet failed(error, reset)}
            <p>Widget failed. <button onclick={reset}>Reload</button></p>
        {/snippet}
    </svelte:boundary>

    {#snippet failed(error, reset)}
        <p>Something went wrong.</p>
    {/snippet}
</FlareErrorBoundary>