Flare

Laravel

PHP

JavaScript

React

Vue

Svelte

Protocol

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.

This guide covers every supported setup. Follow only the steps that match your project: conditional instructions start with a bold "If ..." line describing when they apply. Steps without such a line always apply. Install commands use npm install. Use yarn add instead if the project uses Yarn. Replace PROJECT PUBLIC KEY with the project's public key. You can find it in the project settings on https://flareapp.io.

Step 1: Install the package using NPM or Yarn

If you don't upload sourcemaps to Flare:

npm install @flareapp/js @flareapp/react

If you use Vite and upload sourcemaps to Flare:

npm install @flareapp/js @flareapp/react @flareapp/vite

If you use Webpack and upload sourcemaps to Flare:

npm install @flareapp/js @flareapp/react @flareapp/webpack

If you use Next.js and upload sourcemaps to Flare:

npm install @flareapp/js @flareapp/react @flareapp/nextjs

Step 2: Register Flare & configure

Wrap your app with the Flare error boundary in src/App.js:

If you upload sourcemaps to Flare:

In src/App.js:

import { createRoot } from 'react-dom/client';
import { flare } from "@flareapp/js";
import { FlareErrorBoundary } from '@flareapp/react';

// Only enable Flare in production, we don't want to waste your quota while you're developing:
if (process.env.NODE_ENV === 'production') {
    flare.light();
}

createRoot(document.getElementById('app')).render(
    <FlareErrorBoundary>
        <Root />
    </FlareErrorBoundary>
);

If you don't upload sourcemaps to Flare:

In src/App.js:

import { createRoot } from 'react-dom/client';
import { flare } from "@flareapp/js";
import { FlareErrorBoundary } from '@flareapp/react';

// Only enable Flare in production, we don't want to waste your quota while you're developing:
if (process.env.NODE_ENV === 'production') {
    flare.light('PROJECT PUBLIC KEY');
}

createRoot(document.getElementById('app')).render(
    <FlareErrorBoundary>
        <Root />
    </FlareErrorBoundary>
);

If you use Vite and upload sourcemaps to Flare:

Configure Vite to upload sourcemaps to Flare:

In vite.config.js:

import { defineConfig } from 'vite';
import flareSourcemaps from '@flareapp/vite';

export default defineConfig({
    plugins: [
        flareSourcemaps({
            apiKey: 'PROJECT PUBLIC KEY'
        }),
    ],
});

If you use Webpack and upload sourcemaps to Flare:

Configure Webpack to upload sourcemaps to Flare:

In webpack.config.js:

const { FlareWebpackPlugin } = require("@flareapp/webpack");

module.exports = {
    // ...
    devtool: "source-map",
    plugins: [ new FlareWebpackPlugin({ apiKey: "PROJECT PUBLIC KEY" }) ],
};

If you use Next.js and upload sourcemaps to Flare:

Wrap your Next.js config with withFlareSourcemaps in next.config.mjs:

In next.config.mjs:

import { withFlareSourcemaps } from '@flareapp/nextjs';

export default withFlareSourcemaps({
    // your normal Next.js config
}, {
    apiKey: 'PROJECT PUBLIC KEY',
});

Step 3: Connect your project key

If you upload sourcemaps to Flare:

When you install Flare's sourcemap build plugin, the build plugin injects your public key so flare.light() can run without an explicit key. Make sure you add the domains of your application in the project settings on Flare.

If you don't upload sourcemaps to Flare:

Pass your public key directly to flare.light('PROJECT PUBLIC KEY') and make sure you add the domains of your application in the project settings on Flare.

Step 4: Verify your setup

Add this code temporarily to verify everything is working:

In app.js:

flare.test();

If you use Vite and upload sourcemaps to Flare:

Run your Vite build command. You should see the following lines in the output:

@flareapp/vite: Uploading xx sourcemap(s) to Flare.
@flareapp/vite: Successfully uploaded all sourcemaps to Flare.

If you use Next.js and upload sourcemaps to Flare:

Run next build. You should see the following lines in the output:

@flareapp/webpack: Uploading 4 sourcemap(s) to Flare.
@flareapp/webpack: Successfully uploaded all sourcemaps to Flare.

The interactive guide above installs the packages, initializes the Flare client, connects your project key, and verifies your setup. The sections below cover the React-specific error handling you can add on top.

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';

// Initialize Flare with the production guard from the guide above
flare.light('YOUR PROJECT 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.

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:

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.

Identifying users Resolving bundled code

On this page

Wrapping your app in the error boundary
Using the React error handler (React 19+)
Reporting errors, hooks and context
Important notes