Installation

Flare's React integration uses two packages:

• @flareapp/js - the core Flare client that catches errors and sends them to Flare,
• @flareapp/react - the React integration that provides an error boundary and error handler.

React 16, 17, 18, and 19 are supported.

Optionally, you can also use the sourcemap plugin (Vite/Webpack) for resolving bundled code.

Looking for the docs for V1 of the JavaScript SDK? Find them here.

Installing the packages

Install both the Flare client and the React integration:

npm install @flareapp/js @flareapp/react
# or
yarn add @flareapp/js @flareapp/react
# or
pnpm add @flareapp/js @flareapp/react

Setting up the Flare client

Initialize the Flare client as early as possible in your application, typically in your index.js or main.tsx file:

import { flare } from '@flareapp/js';

if (process.env.NODE_ENV === 'production') {
    flare.light('YOUR PROJECT PUBLIC KEY');
}

// When using Vite, use import.meta.env.PROD instead:
if (import.meta.env.PROD) {
    flare.light('YOUR PROJECT PUBLIC KEY');
}

Please make sure that you're using your project's public key. You can find it on the project settings page, in one of the JavaScript installation sections.

If you're using the sourcemap plugin, you don't need to specify a project public key here. The plugin will automatically hook up the flare.light() call to your project.

Wrapping your app in the error boundary

Next, wrap your component tree with the FlareErrorBoundary to catch React rendering errors:

import { flare } from '@flareapp/js';
import { FlareErrorBoundary } from '@flareapp/react';

// Don't forget your production guard from above
flare.light('YOUR PROJECT PUBLIC KEY');

function App() {
    return (
        <FlareErrorBoundary>
            <Root />
        </FlareErrorBoundary>
    );
}

This will catch any errors that occur during rendering and report them to Flare with React-specific context like the component stack trace.

You can learn more about the error boundary and its options in the Error boundary docs.

Using the React error handler (React 19+)

React 19 introduced a new way of handling errors through createRoot and hydrateRoot callbacks. If you're on React 16–18, the error boundary alone handles rendering errors — you can skip this section.

You can use flareReactErrorHandler to integrate Flare with these callbacks:

import { flareReactErrorHandler } from '@flareapp/react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'), {
    onCaughtError: flareReactErrorHandler(),
    onUncaughtError: flareReactErrorHandler(),
    onRecoverableError: flareReactErrorHandler(),
});

You can learn more about the error handler in the Error handler docs.

Verifying your setup

The @flareapp/js client automatically assigns itself to window.flare, so you can interact with it from the browser console. To verify that Flare is correctly set up, build your app for production and run the following command in your browser console:

flare.test()

This will generate a test error that will show up on your project's dashboard in Flare.

If something goes wrong during the installation, enable debug mode by passing true as the second parameter: flare.light('key', true), or by calling flare.configure({ debug: true }).

Reporting errors, hooks and context

The React integration builds on top of the core JavaScript client. For features shared with the JavaScript client, see the JavaScript docs:

• Reporting errors
• Client hooks
• Adding custom context
• Adding glows

Important notes

• If flare.light() hasn't been called (e.g. in development when using the production guard), errors are silently ignored — no reports are queued. See the JavaScript installation docs for details.
• In React development mode, you will see that many errors are reported twice. This is expected behaviour caused by React's StrictMode and will not occur in a production bundle (read more).
• Errors in a development environment might not always be reported. To verify the Flare client is set up correctly, test with a production build.