React-router errorElement does not catch errors #11913

FuturMill · 2024-08-21T12:00:29Z

FuturMill
Aug 21, 2024

When using react-router 6.18 the top level errorElement is not rendered on error. I define my routes like this:

Routes.tsx

const routes: RouteObject[] = [
  {
    element: <App />,
    children: [
      {
        path: '/',
        errorElement: <h1>ERROR PAGE</h1>,
        element: (
          <MainLayoutProvider>
            <MainLayout />
          </MainLayoutProvider>
        ),
        children: [
          {
            index: true,
            //loader: () => {throwError(); return null;},
            element: <><Ecommerce />{throwError()}</>
          }
        ]
      }
    ]
  }
];

export const router = createBrowserRouter(routes);

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import { router } from 'Routes';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
            <RouterProvider router={router} />
  </React.StrictMode>
);

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>MY APP</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

and use the following function to throw the error:

const throwError = () => {
  throw new Response("MY ERROR RESPONSE");
}

When I throw the error in the loader the error element is rendered as expected. However when I throw it in the element Uncaught runtime error overlay is rendered and when I close it there is just a blank screen underneath. Why is that? And how can I fix it? I have also tried to include the errorElement in each route but it does not seem to have an effect.

Here is the whole error message:

Uncaught runtime errors:
ERROR

[object Response]
handleError@http://localhost:3000/static/js/bundle.js:667010:67
@http://localhost:3000/static/js/bundle.js:667029:18

Console output:

[Error] [object Response]
    __webpack_require__ (bundle.js:765864)
    (anonymous function) (bundle.js:767119)
    Global Code (bundle.js:767121)

EDIT
When I wrap the error in a component:

function ErrorComponent() {

  useEffect(() => {
    throwError();
  }, []);

  return (
    <div>
      <h1>SOME TEXT</h1>
    </div>
  );
}

const routes: RouteObject[] = [
  {
    element: <App />,
    errorElement: <h1>ERROR PAGE</h1>,
    path: '/',
    children: [
      {
        path: 'a',
        element: (
          <MainLayoutProvider>
            <MainLayout />
          </MainLayoutProvider>
        ),
        children: [
          {
            index: true,
            element: <><Ecommerce /><ErrorComponent/></>
          }
        ]
      }
    ]
  }
];

the errorElement is now rendered but the "uncaught runtime error" overlay still remains. How can I get rid of it?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React-router errorElement does not catch errors #11913

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

React-router errorElement does not catch errors #11913

FuturMill Aug 21, 2024

Replies: 0 comments

FuturMill
Aug 21, 2024