[Bug]: if no route match current URL - pathless route with errorElement or ErrorBoundary doesn't catch this error. Only root route error element catches, so error element is not rendered in outlet

[lone-cat]

What version of React Router are you using?

6.16.0

Steps to Reproduce

Just enough to follow the tutorial on the page https://reactrouter.com/en/main/start/tutorial

Expected Behavior

Not found error shoud be displayed (catched) inside pathless route wrapper (inside layout) as in tutorial, I think

Actual Behavior

In totorial "not found" component is said to be rendered inside root route's layout but actually it does not. As i can see - throwing error in route is catched and error element is being rendered inside layout (in outlet).
for example if i add into pathless route at the end such component:

[
  ....
  {
    path: '*',
    Component: () => { throw new Error() }
  }
]

it renders properly inside outlet. But not found errors bubble up to root route and only there are catched, and error element is shown directly on the page but not in outlet.
Actually other people also face same problem, for example: https://stackoverflow.com/questions/75179651/how-can-i-make-a-pathless-route-render-correctly-inside-outlet-in-react-router
I don't know if it is a bug in router or in docs =) And sorry if I've filled this form improperly - I'm creating first issue in my life =)

[brophdawg11]

Can you provide a minimal reproduction of the issue so I can better understand the scenario you are describing? It sounds like you might have a setup such as:

let routes = [{
  path: '/',
  element: <Layout />,
  errorElement: <Error />,
  children: [
     ...,
    {
      path: '*',
      Component: () => { throw new Error() }
    },
  ]
}];

And if you want the displayed error page for the splat route to be rendered inside <Layout/> then you may need to add it as a pathless layout route (I would also throw a 404 from the loader instead of throwing from the element render):

let routes = [{
  path: '/',
  element: <Layout />,
  children: [{
    errorElement: <Error />,    
    children: [
       ...,
      {
        path: '*',
        loader() {
          throw new Response(null, { status: 404 })
        }
      },
    ]
  }]
}];

[lone-cat]

No, i exactly have the second of your suggestions setup. I've said i made everything like in tutorial, the last step there was to wrap error message into layout. I actually can't understand what you mean under "reproduction"... I'll try to explain in other words. for example such config:

const routes = [
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        errorElement: <ErrorPage />,
        children: [
          {
            path: 'login',
            element: <LoginPage />
          }
        ]
      }
    ]
  }
];

when i try to visit page '/not_existing_route' should show <ErrorPage /> inside <Layout />, but with exactly this config i have DEFAULT react router error page, not <ErrorPage />. If i add errorElement also into root route such as:

const routes = [
  {
    path: '/',
    element: <Layout />,
    errorElement: <ErrorPage />,
    children: [
      {
        errorElement: <ErrorPage />,
        children: [
          {
            path: 'login',
            element: <LoginPage />
          }
        ]
      }
    ]
  }
];

, I will have my ErrorPage, but OUTSIDE of <Layout />.
but if i add * route to this config, throwing something, such as:

const routes = [
  {
    path: '/',
    element: <Layout />,
    errorElement: <ErrorPage />,
    children: [
      {
        errorElement: <ErrorPage />,
        children: [
          {
            path: 'login',
            element: <LoginPage />
          },
          {
            path: '*',
            Component: () => { throw new Response('', { status: 404 }) }
          },
        ]
      }
    ]
  }
];

, <ErrorPage /> is shown inside <Layout /> as expected. But in tutorial there is no info about adding * route, so it should behave this way whithout * route throwing response manually, as i think... https://reactrouter.com/en/main/start/tutorial#pathless-routes - this section describes this, but now i guess the point there is in LOADER throwing, not any unmatched route just throws inside layout. Am i right? so to handle unmatched routes I still need to explicitly add * route?

[illarionvk]

I experience a similar issue. I expect the MainLayoutError to show the 404 Not Found error details if the visitor tries to navigate to an undefined path, e.g., /downloads.

The error bubbles up to RootError instead.

createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <RootError />,
    children: [
      { path: '/logout', loader: logoutLoader },
      {
        element: <MainLayout />,
        errorElement: <MainLayoutError />,
        loader: mainLayoutLoader,
        children: [
          { index: true, element: <Overview /> },
          { path: '/addresses', element: <Addresses /> },
          { path: '/orders', element: <Orders /> }
        ]
      }
    ]
  }
])

[timdorr]

@illarionvk That makes sense because there's no reason to continue looking through children for matches at that point. Put another way, what would happen if you have two different pathless children, which one should match? These look logical to us as human observers, but you have to think about the underlying matching algorithm. If nothing has matched under a subtree, there's no reason to consider constituent parts of that tree as a part of the matched tree and therefore use your errorElement.

The same logic goes for the OP here. This isn't a bug. You are expecting the subtree to match, but there is no matching pattern anywhere in that tree. You have to be explicit and include a wildcard so that something matches.

The tutorial is only talking about loading a specific path with an unknown item from the list (e.g., /contacts/not-a-contact). It's not about a generalized error page for your entire app.

[illarionvk]

Thanks, @timdorr and @lone-cat! I came to the same conclusion and implemented a catch-all route that throws in the loader. Throwing in the loader ensures the router wraps the Response in a router error.

@timdorr, could you add a note to the documentation regarding the potential pitfall?

const catchAllLoader: LoaderFunction = ({ request }) => {
  throw new Response(`Not found`, { status: 404 })
}

const CatchAll: FC = () => {
  return null
}

const CatchAllError: FC = () => {
  const error = useRouteError()

  return <ErrorDetails error={error} />
}

createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <RootError />,
    children: [
      { path: '/logout', loader: logoutLoader },
      {
        element: <MainLayout />,
        errorElement: <MainLayoutError />,
        loader: mainLayoutLoader,
        children: [
          { index: true, element: <Overview /> },
          { path: '/addresses', element: <Addresses /> },
          { path: '/orders', element: <Orders /> },
          // Catch-all route to ensure the error shows at MainLayoutError
          {
            path: '/*',
            element: <CatchAll />,
            errorElement: <CatchAllError />,
            loader: catchAllLoader
          }
        ]
      }
    ]
  }
])