[Bug]: React Router swallows render error

[LefanTan]

What version of React Router are you using?

6.22.3

Steps to Reproduce

Stackblitz: https://react-router-v6-sample-om51kn.stackblitz.io

I noticed that any renderer error thrown in components rendered by createBrowserRouter will swallow up the error, which means that the parent <ErrorBoundary /> will not be able to catch this error too.

I tried creating another component that make use of useRouteError, but exceptions thrown during render doesn't show up

export default function ReactRouterErrorBoundary() {
  const error = useRouteError() as ErrorResponse;

  // Is undefined
  console.log(error)

  return <ErrorPage componentStack={JSON.stringify(error.data)} />;
}

main.tsx

const router = createBrowserRouter(
  [
    {
      errorElement: <ReactRouterErrorBoundary />,
      children: [
        {
          path: "/",

Expected Behavior

Errors throw in the components should be resurfaced such that the React ErrorBoundary can catch it.

Actual Behavior

N/A

[brophdawg11]

Errors currently don't propagate outside the RouterProvider - you need to handle them in a ErrorBoundary/errorElement on your root route (or on a pathless layout route above it). If you need to get the error outside RouterProvider, you can re-throw it from there to get it to your external error boundary: https://stackblitz.com/edit/react-router-v6-sample-lh43gm

Related: #10166 (comment)