React integration for Flare error tracking and logging. Provides an error boundary component and a React 19+ error handler for catching and reporting React component errors to Flare.
npm install @flareapp/react @flareapp/jsInitialize the Flare client and wrap your component tree with the error boundary:
import { flare } from '@flareapp/js';
import { FlareErrorBoundary } from '@flareapp/react';
flare.light('YOUR_FLARE_API_KEY');
function App() {
return (
<FlareErrorBoundary fallback={<p>Something went wrong.</p>}>
<MyComponent />
</FlareErrorBoundary>
);
}Beyond errors, the client can send structured logs. Logs are opt-in: enable them with enableLogs, then call any of the
eight syslog levels (debug, info, notice, warning, error, critical, alert, emergency).
import { flare } from '@flareapp/js';
flare.configure({ enableLogs: true });
flare.logger.info('Checkout started', { cartId: cart.id, total: cart.total });In production, React throws minified errors like Minified React error #418; visit https://react.dev/errors/418?args[]=Foo.
The client parses these into structured fields and attaches them, along with the running React version, to the report
context:
react: {
version: '19.0.0',
minifiedError: {
number: 418,
args: ['Foo', 'Bar'],
url: 'https://react.dev/errors/418?args[]=Foo&args[]=Bar',
},
}Flare uses react.minifiedError and react.version on the backend to look up React's error-code map and surface the
full, human-readable message. No error-code map is bundled into the client. Non-minified errors are reported unchanged.
import { flare } from '@flareapp/js';
flare.setUser({ id: 123, email: 'jane@example.com', fullName: 'Jane Doe' });See the JavaScript identifying-users docs for the full field list. Pass null to clear.
Full documentation on the error boundary, the React 19+ error handler, lifecycle callbacks, and more is available at flareapp.io/docs/react/general/installation.
- React 16, 17, 18, 19
flareReactErrorHandlerrequires React 19+
The MIT License (MIT). Please see License File for more information.