diff --git a/.changeset/eager-emus-sort.md b/.changeset/eager-emus-sort.md new file mode 100644 index 000000000..5572f9bd1 --- /dev/null +++ b/.changeset/eager-emus-sort.md @@ -0,0 +1,5 @@ +--- +"@stackflow/react": minor +--- + +Add an option for customizing error boundary in ErrorHandler of structured activity components diff --git a/integrations/react/src/__internal__/PluginRenderer.tsx b/integrations/react/src/__internal__/PluginRenderer.tsx index 113fe7e57..109a55e14 100644 --- a/integrations/react/src/__internal__/PluginRenderer.tsx +++ b/integrations/react/src/__internal__/PluginRenderer.tsx @@ -98,18 +98,22 @@ function renderStructuredActivityComponent( ) : ( node ), - (node) => - errorHandler?.component ? ( - { + if (!errorHandler) return node; + + const ErrorBoundary = + errorHandler.boundary ?? StructuredActivityComponentErrorBoundary; + + return ( + ( )} > {node} - - ) : ( - node - ), + + ); + }, (node) => layout?.component ? ( {node} diff --git a/integrations/react/src/__internal__/StructuredActivityComponentType.tsx b/integrations/react/src/__internal__/StructuredActivityComponentType.tsx index 4007c3fad..82258624a 100644 --- a/integrations/react/src/__internal__/StructuredActivityComponentType.tsx +++ b/integrations/react/src/__internal__/StructuredActivityComponentType.tsx @@ -105,14 +105,23 @@ export function loading( export interface ErrorHandler

{ component: ComponentType<{ params: P; error: unknown; reset: () => void }>; + boundary?: CustomErrorBoundary; } +export type CustomErrorBoundary = ComponentType<{ + children: ReactNode; + renderFallback: (error: unknown, reset: () => void) => ReactNode; +}>; + export function errorHandler( component: ComponentType<{ params: InferActivityParams; error: unknown; reset: () => void; }>, + options?: { + boundary?: CustomErrorBoundary; + }, ): ErrorHandler> { - return { component }; + return { component, boundary: options?.boundary }; }