Non-NextJS Error Boundary doesn't catch errors originating from server components.
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/nextjs-error-boundary-catches-server-throws-mmvlsd
To Reproduce
- Create your own
ErrorBoundarycomponent - Render a Server component which throws as a child of a
<ErrorBoundary />with some arbitrary fallback UI - run the dev server
Current vs. Expected behavior
Current Behavior:
any custom <ErrorBoundary /> component will not catch an error that is thrown from a descendent server component, instead it will be uncaught, unless a error.tsx file is defined somewhere for the given route.
Expected Behavior:
<ErrorBoundary />-like components should catch server errors without needing to be implemented as Route Segment error.tsx files.
Verify canary release
- [X] I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: linux
Arch: x64
Version: #1 SMP PREEMPT_DYNAMIC Sun Aug 6 20:05:33 UTC 2023
Binaries:
Node: 20.9.0
npm: 10.1.0
Yarn: 1.22.19
pnpm: N/A
Relevant Packages:
next: 14.0.4-canary.9
eslint-config-next: 14.0.2
react: 18.2.0
react-dom: 18.2.0
typescript: 5.2.2
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
App Router
Additional context
In the linked sandbox, adding "use client"; to the <BadComponent /> resolves the issue, proving the gap in functionality between Next's proprietary error boundary and how "native" error boundaries behave. I also don't believe this discrepancy has always been the case.