next.js icon indicating copy to clipboard operation
next.js copied to clipboard

Non-NextJS Error Boundary doesn't catch errors originating from server components.

Open jviall opened this issue 2 years ago • 9 comments

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 ErrorBoundary component
  • 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.

jviall avatar Nov 22 '23 06:11 jviall