add fallback property to flare error boundary component

Author: Sébastien Henau

packages/react/src/FlareErrorBoundary.ts

@@ -3,13 +3,26 @@ import { Component, ErrorInfo, type PropsWithChildren, type ReactNode } from 're
 
 import { formatComponentStack } from './format-component-stack';
 
-type Props = PropsWithChildren<{
+export type FlareErrorBoundaryFallbackProps = {
+    error: Error;
+};
+
+export type FlareErrorBoundaryProps = PropsWithChildren<{
+    fallback?: ReactNode | ((props: FlareErrorBoundaryFallbackProps) => ReactNode);
     onError?: (error: Error, errorInfo: ErrorInfo) => void;
 }>;
 
-type State = {};
+export type FlareErrorBoundaryState = {
+    error: Error | null;
+};
+
+export class FlareErrorBoundary extends Component<FlareErrorBoundaryProps, FlareErrorBoundaryState> {
+    state: FlareErrorBoundaryState = { error: null };
+
+    static getDerivedStateFromError(error: Error): FlareErrorBoundaryState {
+        return { error };
+    }
 
-export class FlareErrorBoundary extends Component<Props, State> {
     componentDidCatch(error: Error, errorInfo: ErrorInfo) {
         const context = {
             react: {
@@ -22,7 +35,21 @@ export class FlareErrorBoundary extends Component<Props, State> {
         this.props.onError?.(error, errorInfo);
     }
 
-    render(): ReactNode {
+    render() {
+        const { error } = this.state;
+
+        if (error !== null) {
+            const { fallback } = this.props;
+
+            if (typeof fallback === 'function') {
+                return fallback({
+                    error,
+                });
+            }
+
+            return fallback ?? null;
+        }
+
         return this.props.children;
     }
 }

packages/react/src/index.ts

@@ -1 +1,6 @@
-export { FlareErrorBoundary } from './FlareErrorBoundary';
+export {
+    FlareErrorBoundary,
+    type FlareErrorBoundaryProps,
+    type FlareErrorBoundaryFallbackProps,
+    type FlareErrorBoundaryState,
+} from './FlareErrorBoundary';

playground/react/App.tsx

@@ -28,7 +28,10 @@ export function App() {
                 Reset render error
             </Button>
             {showBuggy && (
-                <FlareErrorBoundary onError={() => console.log('FlareErrorBoundary onError callback')}>
+                <FlareErrorBoundary
+                    onError={() => console.log('FlareErrorBoundary onError callback')}
+                    fallback={({ error }) => <p>There has been an error: {error.message}</p>}
+                >
                     <BuggyComponent />
                 </FlareErrorBoundary>
             )}