feat(react): prevent recursive expose fallback when fallback throw error

toss · Jan 6, 2025 · 5e08d23 · 5e08d23
1 parent 07b6b77
commit 5e08d23
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 6 deletions.
diff --git a/packages/react/src/ErrorBoundary.spec.tsx b/packages/react/src/ErrorBoundary.spec.tsx
@@ -293,6 +293,28 @@ describe('<ErrorBoundary/>', () => {
       await waitFor(() => expect(screen.queryByText(errorText)).toBeInTheDocument())
     }
   )
+
+  it('should re-throw error occurred by fallback', async () => {
+    render(
+      <ErrorBoundary fallback={() => <>This is expected</>}>
+        <ErrorBoundary
+          fallback={() => (
+            <Throw.Error message={ERROR_MESSAGE} after={100}>
+              ErrorBoundary's fallback before error
+            </Throw.Error>
+          )}
+        >
+          <Throw.Error message={ERROR_MESSAGE} after={100}>
+            ErrorBoundary's children before error
+          </Throw.Error>
+        </ErrorBoundary>
+      </ErrorBoundary>
+    )
+
+    expect(screen.queryByText("ErrorBoundary's children before error")).toBeInTheDocument()
+    await waitFor(() => expect(screen.queryByText("ErrorBoundary's fallback before error")).toBeInTheDocument())
+    await waitFor(() => expect(screen.queryByText('This is expected')).toBeInTheDocument())
+  })
 })
 
 describe('<ErrorBoundary.Consumer/>', () => {

diff --git a/packages/react/src/ErrorBoundary.tsx b/packages/react/src/ErrorBoundary.tsx
@@ -115,6 +115,9 @@ class BaseErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState
   }
 
   componentDidCatch(error: Error, info: ErrorInfo) {
+    if (error instanceof InternalFallbackError) {
+      throw error.fallbackError
+    }
     if (error instanceof SuspensiveError) {
       throw error
     }
@@ -147,12 +150,12 @@ class BaseErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState
         throw error
       }
 
-      if (typeof fallback === 'function') {
-        const FallbackComponent = fallback
-        childrenOrFallback = <FallbackComponent error={error} reset={this.reset} />
-      } else {
-        childrenOrFallback = fallback
-      }
+      const Fallback = fallback
+      childrenOrFallback = (
+        <InternalFallbackErrorBoundary>
+          {typeof Fallback === 'function' ? <Fallback error={error} reset={this.reset} /> : Fallback}
+        </InternalFallbackErrorBoundary>
+      )
     }
 
     return (
@@ -163,6 +166,25 @@ class BaseErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState
   }
 }
 
+class InternalFallbackError extends Error {
+  fallbackError: Error
+  constructor(error: Error) {
+    super(error.message)
+    this.fallbackError = error
+  }
+}
+class InternalFallbackErrorBoundary extends Component<{ children: ReactNode }> {
+  componentDidCatch(fallbackError: Error) {
+    if (fallbackError instanceof SuspensiveError) {
+      throw fallbackError
+    }
+    throw new InternalFallbackError(fallbackError)
+  }
+  render() {
+    return this.props.children
+  }
+}
+
 /**
  * This component provides a simple and reusable wrapper that you can use to wrap around your components. Any rendering errors in your components hierarchy can then be gracefully handled.
  * @see {@link https://suspensive.org/docs/react/ErrorBoundary Suspensive Docs}