API reference

The Vue 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.

@flareapp/vue ships two entry points: the package root and /inject. Unlike some other framework integrations, there are no separate subpaths for router tracing or component profiling. Both are options on flareVue itself, covered below.

`@flareapp/vue`

import { FlareErrorBoundary, flareVue, DEFAULT_PROPS_DENYLIST } from '@flareapp/vue';

Export	Description
`flareVue`	Vue plugin that hooks into `app.config.errorHandler` and reports errors to Flare. Register it with `app.use(flareVue, options)`. Accepts an optional options object; see the table below. See Error handling for details.
`FlareErrorBoundary`	Component that uses `onErrorCaptured` to catch errors from descendants and render a fallback slot. See Error boundary for details.
`DEFAULT_PROPS_DENYLIST`	The `RegExp` used by default to redact sensitive prop keys (see pattern below). Exported so you can compose your own denylist on top of it.

Importing from the root also registers a default flare instance, the one from @flareapp/js, for flareVue and FlareErrorBoundary to fall back to when you don't pass a flare option or prop yourself. If you don't want that, for example outside a normal web page, use /inject instead.

The default denylist matches the following sensitive key patterns:

/password|passwd|pwd|token|secret|authorization|\bauth\b|bearer|oauth|credentials?|cookie|api[-_]?key|private[-_]?key|session|csrf|xsrf|\bpin\b|\bssn\b|card[-_]?number|\bcvv\b/i

`FlareVueOptions`

Options passed as the second argument to app.use(flareVue, options):

Option	Type	Default	Description
`flare`	`Flare`	the default `@flareapp/js` instance	The `Flare` instance to report through. Set this when you're managing your own instance instead of the default singleton.
`router`	`Router` (vue-router; declared as `unknown` at the type level and checked at runtime, so TypeScript won't stop you from passing the wrong thing here)	-	A Vue Router instance. When set, `flareVue` names navigation and pageload spans after the matched route instead of the raw URL. See tracing introduction.
`profileComponents`	`boolean \| (string \| RegExp)[]`	-	Records a `browser_component` span per matched component mount. An array matches component names exactly (`string`) or by `test()` (`RegExp`). `true` profiles every named component, a debugging aid, not something to ship: a real page will hit `maxSpansPerTrace`, so the spans you actually want to see can end up past that limit, mixed in with spans for components you didn't mean to time. Requires `enableTracing`. See profiling introduction.
`captureWarnings`	`boolean`	`false`	Hook into `app.config.warnHandler` to report Vue warnings via `flare.reportMessage()`. Development-only, since Vue compiles warnings out of production builds.
`attachProps`	`boolean`	`false`	Attach the erroring component's props, plus each frame's props, to the report context.
`propsMaxDepth`	`number`	`2`	Depth limit used when serializing props.
`propsDenylist`	`RegExp`	`DEFAULT_PROPS_DENYLIST`	Keys matching this expression are redacted at every depth, in both props and route `params`/`query`.
`replaceDefaultDenylist`	`boolean`	`false`	When `true`, `propsDenylist` replaces the built-in denylist instead of extending it.
`beforeEvaluate`	`({ error, instance, info }) => void`	-	Called before the component hierarchy context is built.
`beforeSubmit`	`({ error, instance, info, context }) => FlareVueContext`	-	Called before submitting; must return a (possibly modified) context.
`afterSubmit`	`({ error, instance, info, context }) => void`	-	Called after `flare.report()` is called (the report is sent asynchronously).

TypeScript

import type {
    ComponentHierarchyFrame,
    ErrorOrigin,
    FlareErrorBoundaryFallbackProps,
    FlareErrorBoundaryHookParams,
    FlareVueContext,
    FlareVueOptions,
    FlareVueWarningContext,
    RouteContext,
    RouteParamValue,
    RouteQueryValue,
} from '@flareapp/vue';

Type	Description
`ComponentHierarchyFrame`	One entry in `componentHierarchyFrames`: `component`, `file`, and optional `props`.
`ErrorOrigin`	Normalized category derived from Vue's `info` string: `"setup" \| "render" \| "lifecycle" \| "event" \| "watcher" \| "unknown"`.
`FlareErrorBoundaryFallbackProps`	Props passed to the `fallback` scoped slot (`error`, `componentHierarchy`, `componentHierarchyFrames`, `componentProps`, `resetErrorBoundary`).
`FlareErrorBoundaryHookParams`	Parameters shared by every lifecycle hook: `error`, `instance`, `info`.
`FlareVueContext`	Shape of the `context` object passed to `beforeSubmit` / `afterSubmit` and attached to the report.
`FlareVueOptions`	Options passed as the second argument to `app.use(flareVue, options)`, the table above.
`FlareVueWarningContext`	Shape of the context reported for Vue warnings when `captureWarnings` is enabled.
`RouteContext`	Route information attached to the report when Vue Router is detected.
`RouteParamValue`	`string \| string[]`, matches Vue Router's route-param shape, including repeated params.
`RouteQueryValue`	`string \| null`, individual query value, where `null` represents keys without a value (`?flag`). In `RouteContext.query`, values may also be `RouteQueryValue[]` for repeated keys (e.g. `?tag=a&tag=b`).

`@flareapp/vue/inject`

import { FlareErrorBoundary, flareVue, DEFAULT_PROPS_DENYLIST } from '@flareapp/vue/inject';

Exports the same flareVue, FlareErrorBoundary, and DEFAULT_PROPS_DENYLIST as the root package, with the same TypeScript types. The difference is what happens on import: /inject has no side effects and doesn't register a default flare instance. Every call needs an explicit flare option (on flareVue) or flare prop (on FlareErrorBoundary) instead of falling back to a default. Use this when you're embedding Flare's Vue integration somewhere that isn't a normal web page, for example a renderer process that already manages its own Flare instance.

Identifying users