API reference

The React 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/react ships five entry points: the package root, and four subpaths. Import from the specific subpath you need, not the root, for /profiler, /tanstack-router, /react-router, and /inject.

`@flareapp/react`

import { FlareErrorBoundary, flareReactErrorHandler } from '@flareapp/react';

Export	Description
`FlareErrorBoundary`	React error boundary component that catches rendering errors and reports them to Flare. See Error boundary.
`flareReactErrorHandler`	Factory function that returns a callback compatible with React 19's `createRoot`/`hydrateRoot` error callbacks and the `react-error-boundary` library. See Error handler.

Importing from the root also registers @flareapp/react's identity on the default flare instance from @flareapp/js, so reports are tagged as coming from React. If you don't want that, for example outside a normal web page, use /inject instead.

TypeScript

import type {
    FlareErrorBoundaryProps,
    FlareErrorBoundaryFallbackProps,
    FlareReactErrorHandlerCallback,
    FlareReactErrorHandlerOptions,
    FlareReactContext,
    ComponentStackFrame,
    MinifiedReactError,
} from '@flareapp/react';

Type	Description
`FlareErrorBoundaryProps`	Props accepted by the `FlareErrorBoundary` component.
`FlareErrorBoundaryFallbackProps`	Props passed to the fallback render function (`error`, `componentStack`, `resetErrorBoundary`).
`FlareReactErrorHandlerCallback`	The callback signature returned by `flareReactErrorHandler()`: `(error: unknown, errorInfo: { componentStack?: string }) => void`.
`FlareReactErrorHandlerOptions`	Options accepted by `flareReactErrorHandler()` (`flare`, `beforeEvaluate`, `beforeSubmit`, `afterSubmit`).
`FlareReactContext`	Shape of the `context` argument passed to `beforeSubmit` / `afterSubmit` (`{ react: { componentStack, componentStackFrames, version?, minifiedError? } }`).
`ComponentStackFrame`	A single parsed frame from `context.react.componentStackFrames` (`component`, `file`, `line`, `column`).
`MinifiedReactError`	The shape of `context.react.minifiedError`, present only for a minified production React error (`number`, `args`, `url`).

`@flareapp/react/profiler`

import { FlareProfiler, withFlareProfiler } from '@flareapp/react/profiler';

Export	Description
`FlareProfiler`	Component that records one `browser_component` span for its mount. Takes a required `name` prop. See profiling introduction.
`withFlareProfiler`	Higher order component that wraps a component in `FlareProfiler` without changing how it's rendered where it's used: `(Component, options?: { name?: string }) => FunctionComponent`. Both the options argument and `name` are optional. Without a `name`, the span is named from `Component.displayName`, then `Component.name`, then falls back to `'Unknown'`.

import type { FlareProfilerProps } from '@flareapp/react/profiler';

FlareProfilerProps is { name: string; children?: ReactNode }. name is required on FlareProfiler itself; it's only optional through withFlareProfiler's options.

`@flareapp/react/tanstack-router`

import { traceTanStackRouter } from '@flareapp/react/tanstack-router';

Export	Description
`traceTanStackRouter`	Traces a TanStack Router instance: `(router: TanStackRouterLike) => () => void`. Adds the matched route to the pageload span, and opens a `browser_navigation` span per route change that contains the matched route. Returns a stop function. See tracing introduction.

Also exports the structural TypeScript types the function accepts (TanStackRouterLike, TanStackLocationLike, TanStackMatchLike, TanStackNavEventLike), for typing a router you build or mock by hand.

`@flareapp/react/react-router`

import { traceReactRouter } from '@flareapp/react/react-router';

Export	Description
`traceReactRouter`	Traces a React Router v7 data router (`createBrowserRouter`, `createHashRouter`, or `createMemoryRouter`): `(router: ReactRouterLike) => () => void`. Adds the matched route pattern to the pageload span, and opens a `browser_navigation` span per route change that contains the matched route pattern. Returns a stop function. See tracing introduction.
`routeNameFromMatches`	Rebuilds a parameterized route pattern (for example `/products/:id`) from a router's matches array: `(matches: ReactRouterMatchLike[] \| undefined) => string \| undefined`. Used internally by `traceReactRouter`; exported in case you want the same naming logic elsewhere.

Also exports the structural TypeScript types the functions accept (ReactRouterLike, ReactRouterLocationLike, ReactRouterMatchLike, ReactRouterNavigationLike, ReactRouterRouteLike, ReactRouterStateLike).

`@flareapp/react/inject`

import { FlareErrorBoundary, flareReactErrorHandler } from '@flareapp/react/inject';

Exports the same FlareErrorBoundary and flareReactErrorHandler 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 or a React identity tag. Every call needs an explicit flare prop or option instead of falling back to a default. Use this when you're embedding Flare's React integration somewhere that isn't a normal web page, for example a renderer process that already manages its own Flare instance.

Identifying users