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

.changeset/pretty-brooms-float.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/react": minor
+---
+
+feat(react): prevent recursive expose fallback when fallback throw error

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/>', () => {

packages/react/src/ErrorBoundary.tsx

@@ -115,6 +115,9 @@ class BaseErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState
   }
 
   componentDidCatch(error: Error, info: ErrorInfo) {
+    if (error instanceof ErrorInFallback) {
+      throw error.originalError
+    }
     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 = (
+        <FallbackBoundary>
+          {typeof Fallback === 'function' ? <Fallback error={error} reset={this.reset} /> : Fallback}
+        </FallbackBoundary>
+      )
     }
 
     return (
@@ -163,6 +166,22 @@ class BaseErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState
   }
 }
 
+class ErrorInFallback extends Error {
+  originalError: Error
+  constructor(originalError: Error) {
+    super()
+    this.originalError = originalError
+  }
+}
+class FallbackBoundary extends Component<{ children: ReactNode }> {
+  componentDidCatch(originalError: Error) {
+    throw originalError instanceof SuspensiveError ? originalError : new ErrorInFallback(originalError)
+  }
+  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}