# 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](/docs/javascript/reference/api).

`@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`

```ts
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](/docs/react/errors/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](/docs/react/errors/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

```ts
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`

```ts
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](/docs/react/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'`. |

```ts
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`

```ts
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](/docs/react/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`

```ts
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](/docs/react/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`

```ts
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.