Bug: RSC render errors aren't caught by Error Boundaries

[jviall]

Developing a new Next.js App, the recommended patterns is to fetch data within React Server Components as much as possible. RSCs seem to pair quite nicely with suspense boundaries, as their async resolution triggers the fallback UI. The same cannot be said for Error Boundaries. Error Boundaries, which at the moment must but client components, do not catch rendering errors that occur in a RSC. An error that originates from a RSC will be uncaught on the client.

Now, Next.js implements their own abstraction on top of React Server Components, the error.js file. This proprietary file does catch and handle render errors that occur on the server, proving that in some shape or form it is possible for Error Boundaries to catch server-side errors. Unfortunately, the error.js file is tightly couple to Next.js's concepts of Route Segments, and so it drastically limits the possibilities of the one's granularity of error handling with Error Boundaries when using RSCs.

Given the strong push of React Server Components, it seems like an unfortunate gap in the feature set, where if I'd like to implement fallback UI for my data fetching with an Error Boundary, I'm forced to bring the data fetching back to the client from an RSC.

React version: 18.3.0-canary-6c7b41da3-20231123

Next.js version: 14.0.4-canary.18

Steps To Reproduce

1. In a Next.js App Router setup, render a React Server Component which throws an error.
2. Wrap the given RSC in a client-side Error Boundary
3. Observe that the error is not caught.

Link to code example: https://codesandbox.io/p/devbox/nextjs-error-boundary-catches-server-throws-mmvlsd

The current behavior

Using the given sandbox, observe that the BadComponent implemented as an RSC throws an error, which is not caught by the ErrorBoundary component, but is caught by Next.js's error.tsx file. Adding the "use client;" directive to the BadComponent allows the ErrorBoundary as expected.

The expected behavior

Error Boundaries should be able to catch RSC render errors.

[jviall]

Related issue in Next.js issue: https://github.com/vercel/next.js/issues/58754

[Yashshiva75]

@M-Izadmehr hello ,good morning

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!