# React


The guide below installs Flare's React integration and lets you choose the package manager, bundler, and sourcemap preferences that match your app.

> Laravel Mix is deprecated. We recommend Vite for new projects.

> 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`. Swap that prefix for the project's own package manager: `yarn add`, `pnpm add`, or `bun add`.
> 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, Yarn, pnpm, or Bun

**If you don't upload sourcemaps to Flare:**

```shell
npm install @flareapp/js @flareapp/react
```

**If you use Vite and upload sourcemaps to Flare:**

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

**If you use Webpack and upload sourcemaps to Flare:**

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

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

```shell
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`:

```javascript
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`:

```javascript
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 enable tracing:**

Tracing shows you where time goes during a page load, a navigation, and the requests your page makes. Add this inside the same production check, after `flare.light()`. Read more in [how tracing works](/docs/javascript/tracing/how-tracing-works) and [sampling](/docs/javascript/tracing/sampling).

In `src/App.js`:

```javascript
flare.configure({
    enableTracing: true,
    // Sends 10% of traces. Raise it for more detail, lower it to save quota.
    tracesSampleRate: 0.1,
});
```

**If you use Vite and upload sourcemaps to Flare:**

Configure Vite to upload sourcemaps to Flare:

In `vite.config.js`:

```javascript
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`:

```javascript
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`:

```javascript
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`:

```javascript
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:

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

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

_Note: If you bundle React for development, you will see that many errors are reported twice. This is expected behaviour and will not occur in a production bundle (read more: https://github.com/facebook/react/issues/10474)._

## Reporting React errors in your own error boundaries

If you have your own error boundary components, e.g. for displaying a fallback component when something goes wrong, the error won't bubble up to Flare's error boundary and the error won't be reported to the Flare app automatically.

If you still want to know about these errors, you manually report it to Flare:

```javascript
import { flare } from "@flareapp/js";
import { reportReactError } from "@flareapp/react";

export default class ErrorBoundary extends React.Component {
    componentDidCatch(error) {
        flare.report(error);
    }
}
```

## Sourcemaps

If your React application is bundled for production, configure sourcemap uploads so Flare can resolve minified stack traces back to your source. Start with the guide above for the common setup path, and use the [resolving bundled code guide](/docs/javascript/errors/sourcemaps) for advanced bundler configuration or manual upload options.