feat(react): Add an option for customizing error boundary in structured activity components (#659)

Co-authored-by: anakin_karrot <anakin@daangn.com>

Author: ENvironmentSet

.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

integrations/react/src/__internal__/PluginRenderer.tsx

@@ -98,18 +98,22 @@ function renderStructuredActivityComponent(
       ) : (
         node
       ),
-    (node) =>
-      errorHandler?.component ? (
-        <StructuredActivityComponentErrorBoundary
+    (node) => {
+      if (!errorHandler) return node;
+
+      const ErrorBoundary =
+        errorHandler.boundary ?? StructuredActivityComponentErrorBoundary;
+
+      return (
+        <ErrorBoundary
           renderFallback={(err, reset) => (
             <errorHandler.component params={params} error={err} reset={reset} />
           )}
         >
           {node}
-        </StructuredActivityComponentErrorBoundary>
-      ) : (
-        node
-      ),
+        </ErrorBoundary>
+      );
+    },
     (node) =>
       layout?.component ? (
         <layout.component params={params}>{node}</layout.component>

integrations/react/src/__internal__/StructuredActivityComponentType.tsx

@@ -105,14 +105,23 @@ export function loading<ActivityName extends RegisteredActivityName>(
 
 export interface ErrorHandler<P extends {}> {
   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<ActivityName extends RegisteredActivityName>(
   component: ComponentType<{
     params: InferActivityParams<ActivityName>;
     error: unknown;
     reset: () => void;
   }>,
+  options?: {
+    boundary?: CustomErrorBoundary;
+  },
 ): ErrorHandler<InferActivityParams<ActivityName>> {
-  return { component };
+  return { component, boundary: options?.boundary };
 }