ui-next: error boundary

Author: renbaoshuo

packages/ui-next-plugin-sample/ui/before.tsx

@@ -1,4 +1,5 @@
 export default function BeforeComponent() {
     console.log('before app');
+    // throw new Error('test error boundary in before interceptor');
     return <div>before app via @hydrooj/ui-next-plugin-sample</div>;
 }

packages/ui-next/src/registry/error-boundary.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+interface SlotErrorBoundaryProps {
+  slotName: string;
+  label?: string;
+  children: React.ReactNode;
+}
+
+interface SlotErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class SlotErrorBoundary extends React.Component<SlotErrorBoundaryProps, SlotErrorBoundaryState> {
+  state: SlotErrorBoundaryState = { hasError: false, error: null };
+
+  static getDerivedStateFromError(error: Error): SlotErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo): void {
+    const tag = this.props.label
+      ? `[Hydro] SlotErrorBoundary(${this.props.slotName}/${this.props.label})`
+      : `[Hydro] SlotErrorBoundary(${this.props.slotName})`;
+    console.error(tag, error, info.componentStack);
+  }
+
+  render(): React.ReactNode {
+    if (!this.state.hasError) return this.props.children;
+
+    const { slotName, label } = this.props;
+    return (
+      <div
+        style={{
+          padding: '8px 12px',
+          margin: '4px 0',
+          border: '1px solid #e74c3c',
+          borderRadius: '4px',
+          backgroundColor: '#fdf0ed',
+          color: '#c0392b',
+          fontSize: '13px',
+          fontFamily: 'monospace',
+        }}
+      >
+        <strong>Slot Error</strong> in <code>{slotName}</code>
+        {label && <> / <code>{label}</code></>}
+        <pre style={{ margin: '4px 0 0', whiteSpace: 'pre-wrap' }}>
+          {this.state.error?.message}
+        </pre>
+      </div>
+    );
+  }
+}

packages/ui-next/src/registry/index.ts

@@ -1,3 +1,4 @@
+export { SlotErrorBoundary } from './error-boundary';
 export { after, before, intercept, patch, replace, wrap } from './interceptors';
 export { installPlugin } from './plugin';
 export type { PluginAPI, PluginDefinition } from './plugin';

packages/ui-next/src/registry/interceptors.tsx

@@ -1,3 +1,4 @@
+import { SlotErrorBoundary } from './error-boundary';
 import { store } from './store';
 import type { Interceptor, InterceptorOptions, SlotName } from './types';
 
@@ -15,11 +16,14 @@ export function before<P extends Record<string, any> = Record<string, any>>(
   Comp: React.FC<P>,
   opts?: InterceptorOptions,
 ): () => void {
+  const label = `before:${Comp.displayName || Comp.name || '?'}`;
   return intercept<P>(
     name,
     (props, next) => (
       <>
-        <Comp {...props} />
+        <SlotErrorBoundary slotName={name} label={label}>
+          <Comp {...props} />
+        </SlotErrorBoundary>
         {next()}
       </>
     ),
@@ -33,12 +37,15 @@ export function after<P extends Record<string, any> = Record<string, any>>(
   Comp: React.FC<P>,
   opts?: InterceptorOptions,
 ): () => void {
+  const label = `after:${Comp.displayName || Comp.name || '?'}`;
   return intercept<P>(
     name,
     (props, next) => (
       <>
         {next()}
-        <Comp {...props} />
+        <SlotErrorBoundary slotName={name} label={label}>
+          <Comp {...props} />
+        </SlotErrorBoundary>
       </>
     ),
     { priority: 100, ...opts },
@@ -64,9 +71,14 @@ export function replace<P extends Record<string, any> = Record<string, any>>(
   Replacement: React.FC<P>,
   opts?: { id?: string, priority?: number },
 ): () => void {
+  const label = `replace:${Replacement.displayName || Replacement.name || '?'}`;
   return intercept<P>(
     name,
-    (props, _next) => <Replacement {...props} />,
+    (props, _next) => (
+      <SlotErrorBoundary slotName={name} label={label}>
+        <Replacement {...props} />
+      </SlotErrorBoundary>
+    ),
     { priority: 0, ...opts },
   );
 }
@@ -77,9 +89,14 @@ export function wrap<P extends Record<string, any> = Record<string, any>>(
   Wrapper: React.FC<{ children: React.ReactNode } & P>,
   opts?: InterceptorOptions,
 ): () => void {
+  const label = `wrap:${Wrapper.displayName || Wrapper.name || '?'}`;
   return intercept<P>(
     name,
-    (props, next) => <Wrapper {...props}>{next()}</Wrapper>,
+    (props, next) => (
+      <SlotErrorBoundary slotName={name} label={label}>
+        <Wrapper {...props}>{next()}</Wrapper>
+      </SlotErrorBoundary>
+    ),
     { priority: -10, ...opts },
   );
 }

packages/ui-next/src/registry/slot.tsx

@@ -1,21 +1,30 @@
 import { useMemo, useSyncExternalStore } from 'react';
+import { SlotErrorBoundary } from './error-boundary';
 import { store } from './store';
 import type { InterceptorEntry, SlotName } from './types';
 
 function buildChain<P extends Record<string, any>>(
   interceptors: InterceptorEntry<P>[],
   DefaultComp: React.FC<P>,
+  slotName: SlotName,
 ): (props: P) => React.ReactNode {
-  let pipeline: (props: P) => React.ReactNode = (props) => <DefaultComp {...props} />;
+  let pipeline: (props: P) => React.ReactNode = (props) => (
+    <SlotErrorBoundary slotName={slotName} label="default">
+      <DefaultComp {...props} />
+    </SlotErrorBoundary>
+  );
 
   for (let i = interceptors.length - 1; i >= 0; i--) {
-    const { interceptor } = interceptors[i];
+    const { interceptor, id } = interceptors[i];
     const downstream = pipeline;
 
-    pipeline = (props: P) =>
-      interceptor(props, (overrideProps) =>
-        downstream(overrideProps ? { ...props, ...overrideProps } : props),
-      );
+    pipeline = (props: P) => (
+      <SlotErrorBoundary slotName={slotName} label={`interceptor:${id}`}>
+        {interceptor(props, (overrideProps) =>
+          downstream(overrideProps ? { ...props, ...overrideProps } : props),
+        )}
+      </SlotErrorBoundary>
+    );
   }
 
   return pipeline;
@@ -34,9 +43,13 @@ export function defineSlot<P extends Record<string, any>>(
     const version = useSyncExternalStore(subscribeSlot, getSnapshot);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    const chain = useMemo(() => buildChain(store.getInterceptors(name), store.getDefault(name)!), [version]);
+    const chain = useMemo(() => buildChain(store.getInterceptors(name), store.getDefault(name)!, name), [version]);
 
-    return <>{chain(props)}</>;
+    return (
+      <SlotErrorBoundary slotName={name} label="slot">
+        {chain(props)}
+      </SlotErrorBoundary>
+    );
   };
 
   SlotComponent.displayName = `Slot(${name})`;