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.

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:

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 for advanced bundler configuration or manual upload options.