[Bug]: Errors in nested <Route> components are not bubbling up to parent routes

[evoyy]

What version of React Router are you using?

6.4.0

Steps to Reproduce

An error boundary is specified for the top level data API route, and an error is thrown further down the component tree.

function Root() {
  const router = createBrowserRouter([{
    path: "settings/*",
    element: <Settings />,
    errorElement: <div>Error!</div>,
  }]);

  return (
    <RouterProvider router={router} />
  );
}

function Settings() {
  return (
    <Routes>
      <Route path="email-address" element={<EmailAddress />} />
      <Route path="email-preferences" element={<EmailPreferences />} />
      // ...
    </Routes>
  );
}

function EmailAddress() {
  throw 'Some error';
}

React Router will catch the error and display an error template. The error does not bubble up to the root error boundary.

The only way that errors reach the root error boundary is if an errorElement is specified for every <Route> in order to catch and re-throw the error:

// catch and re-throw
function ErrorBoundary() {
  let error = useRouteError();
  throw error;
};

function Settings() {
  return (
    <Routes>
      <Route path="email-address" element={<EmailAddress />} errorElement={<ErrorBoundary />} />
      <Route path="email-preferences" element={<EmailPreferences />} errorElement={<ErrorBoundary />} />
      // ...
    </Routes>
  );
}

Expected Behavior

I expect that the error will bubble up the root error boundary if no errorBoundary is specified.

According to the documentation:

When a route does not have an errorElement, errors will bubble up through parent routes. This lets you get as granular or general as you like.

Put an errorElement at the top of your route tree and handle nearly every error in your app in one place. Or, put them on all of your routes and allow the parts of the app that don't have errors to continue to render normally.

Actual Behavior

React Router catches the error. It does not bubble up to the root error boundary unless it is re-thrown.

[timdorr]

The Routes component is separate from the new data router components. It doesn't participate in data loading or error handling (see the note here). As a result, it doesn't know about the data router or pass errors to it.

[evoyy]

@timdorr The project direction seems to be pushing towards data router components. Please can you clarify if it is a possibility that the Routes component might be deprecated in the future?

I need to use Routes because I use the stateful modal technique (passing a previous location to the Routes behind the modal). I also like to have access to the router instance for asserting tests. It seems "catch and re-throw" is the only way I can unify my error handling.

[timdorr]

They won't be deprecated, they are just an older form of using React Router. They essentially exist separately from the data routers, so you should use one or the other. Using both is not recommended, unless you are okay with the limitations.

[evoyy]

Got it. Thank you.

[nishant23122000]

@evoyy @timdorr so is there any way to handle errors by putting errorElement on the top level?

[evoyy]

@nishant23122000 Yes. My issue was mixing the <Routes> component with the new data router API. If you define all your routes using the new data router API then you can catch all errors with a single errorElement at the top.

[nishant23122000]

Hi, @evoyy can you share any example or link as I am new in react-router?. I used createBrowserRouter

[evoyy]

@nishant23122000 Have you tried the tutorial? https://reactrouter.com/en/main/start/tutorial

[nishant23122000]

@evoyy Thanks for sharing this. I got my answer :)

[woodreamz]

@timdorr I am facing the same issue. I recently migrated from a classic <HashRouter> to a Data router component to be able to use the "new" unstable_useBlocker, we don't use the data loading:

// Initialize router.
const router = createHashRouter([
  {
    path: '*',
    element: <AppContent />,
    errorElement: <ErrorElement />,
  },
]);

const App = () => {
  return (
      <ErrorBoundary
        renderFallback={({ message, stack }) => (
          <ErrorPage location="Unexpected error" message={message} stack={stack} />
        )}
      >
        <RouterProvider router={router} fallbackElement={<Loader />} />
      </ErrorBoundary>
  );
};

Our web application is complex and has multiple levels of routing, we cannot define the routing at the root of the application because it's not static. Currently, each level defines its routes and has a <Routes>. Our web app is also built with some widgets/modules which can be added dynamically, each modules owns its routing (using <Routes>). And all the error management is done with pure <ErrorBoundary> at different level. Today, I was really surprised to discover that each <Route> is catching errors, it's a breaking change for me, I think it should be clearly documented.

I did not know it's not recommended to have <Routes> with a Data Provider, what's the limitations you mention? I can't find anything in the documentation.

• Is there a way to disable the use of the errorElement by react-router-dom?
• Do you have any suggestions on how to remove <Routes> and inject routes dynamically to the Data provider?

Thanks!

[timdorr]

@woodreamz That kind of thing is coming via #9996

[corymharper]

The Routes component is separate from the new data router components. It doesn't participate in data loading or error handling (see the note here). As a result, it doesn't know about the data router or pass errors to it.

@timdorr I just wanted to mention that the comment you link to doesn't mention error handling at all. It would've been really helpful if it did when I was doing a migration from v5 over the past few days and ended up catching this while testing all of the changes. Might be worth adding it to the documentation along with the fact that it doesn't participate in data loading.