add flare react error handler function for react 19 support

Author: Sébastien Henau

packages/react/src/FlareErrorBoundary.ts

@@ -2,6 +2,7 @@ import { flare } from '@flareapp/js';
 import { Component, ErrorInfo, type PropsWithChildren, type ReactNode } from 'react';
 
 import { formatComponentStack } from './format-component-stack';
+import { FlareReactContext } from './types';
 
 export type FlareErrorBoundaryFallbackProps = {
     error: Error;
@@ -35,7 +36,7 @@ export class FlareErrorBoundary extends Component<FlareErrorBoundaryProps, Flare
             errorInfo,
         });
 
-        const context = {
+        const context: FlareReactContext = {
             react: {
                 componentStack: formatComponentStack(errorInfo.componentStack ?? ''),
             },

packages/react/src/convert-to-error.ts

@@ -0,0 +1,10 @@
+export function convertToError(error: unknown): Error {
+    if (error instanceof Error) {
+        return error;
+    }
+    if (typeof error === 'string') {
+        return new Error(error);
+    }
+
+    return new Error(String(error));
+}

packages/react/src/flare-react-error-handler.ts

@@ -0,0 +1,23 @@
+import { flare } from '@flareapp/js';
+
+import { convertToError } from './convert-to-error';
+import { formatComponentStack } from './format-component-stack';
+import { FlareReactContext } from './types';
+
+export type FlareReactErrorHandlerCallback = (error: unknown, errorInfo: { componentStack?: string }) => void;
+
+export function flareReactErrorHandler(callback?: FlareReactErrorHandlerCallback): FlareReactErrorHandlerCallback {
+    return (error: unknown, errorInfo: { componentStack?: string }) => {
+        const errorObject = convertToError(error);
+
+        const context: FlareReactContext = {
+            react: {
+                componentStack: formatComponentStack(errorInfo.componentStack ?? ''),
+            },
+        };
+
+        flare.report(errorObject, context);
+
+        callback?.(error, errorInfo);
+    };
+}

packages/react/src/index.ts

@@ -4,3 +4,5 @@ export {
     type FlareErrorBoundaryFallbackProps,
     type FlareErrorBoundaryState,
 } from './FlareErrorBoundary';
+
+export { flareReactErrorHandler, type FlareReactErrorHandlerCallback } from './flare-react-error-handler';

packages/react/src/types.ts

@@ -0,0 +1,5 @@
+export type FlareReactContext = {
+    react: {
+        componentStack: string[];
+    };
+};

playground/react/main.tsx

@@ -6,4 +6,15 @@ import { App } from './App';
 
 createSidebar();
 
-createRoot(document.querySelector('#root')!).render(<App />);
+createRoot(document.querySelector('#root')!, {
+    // Not using callbacks here because FlareErrorBoundary already reports caught errors. Using both would result in duplicate reports.
+    // onCaughtError: flareReactErrorHandler((error, errorInfo) => {
+    //     console.log('onCaughtError', error, errorInfo.componentStack);
+    // }),
+    // onUncaughtError: flareReactErrorHandler((error, errorInfo) => {
+    //     console.log('onUncaughtError', error, errorInfo.componentStack);
+    // }),
+    // onRecoverableError: flareReactErrorHandler((error, errorInfo) => {
+    //     console.log('onRecoverableError', error, errorInfo.componentStack);
+    // }),
+}).render(<App />);