Neither react router dom nor react error boundary npm package catching errors

Question

I am using react router v6 and react-error-boundary npm package

export const routes: RouteObject[] = [
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/signup",
    element: <Signup />,
  },
  {
    index: true,
    element: <Dashboard />,
    // errorElement: <RouteError />,

  },
];
export default createBrowserRouter([
  {
    element: <App />,
    ErrorBoundary: RouteError ,
    children: routes,
  },
]);

This is my route object

<React.StrictMode>
    <ErrorBoundary fallbackRender={ErrorFallback}>
      <Provider store={store}>
        <RouterProvider router={routes} />
      </Provider>
    </ErrorBoundary>
  </React.StrictMode>

This is my index react file

export default function Dashboard() {
  const queryClient = useQueryClient();
  const userQuery = useQuery(["user", "data"], {
    queryFn: () => getUserData(),
    staleTime: convertTime(5, "min", "ms"),
  });
  React.useEffect(() => {
    queryClient.invalidateQueries();
  }, [queryClient]);
  throw Error("iudnxerif")
  if (userQuery.isLoading) {
    return <Loading />;
  }
  if (userQuery.isError) {
    return <Navigate to="/login" />;
  }
  return (
    <Box>
      <Navbar />
      <Stack>
        <Stack>Users Stories</Stack>
        <Stack>
          <Stack>Posts</Stack>
          <Stack>Chats</Stack>
        </Stack>
      </Stack>
    </Box>
  );
}

this is my dashboard file in which i am intentionally throwing a render error However neither react router dom nor Errorboundary in index file catching the error and backdrop with error stack trace is being displayed. Any help reagrding this will be appreciated

Tharuka Dananjaya · Accepted Answer · 2023-07-25 05:36:12Z

0

we need to move the line containing throw Error("iudnxerif") after the conditionals, as it currently causes the function to throw an error unconditionally.

import React from "react";
import { useQuery, useQueryClient } from "react-query";
import { Navigate } from "react-router-dom";

import { getUserData } from "../api"; // Assuming you have an API 
function to fetch user data.
import Loading from "./Loading";
import Navbar from "./Navbar";

export default function Dashboard() {
const queryClient = useQueryClient();
const userQuery = useQuery(["user", "data"], {
queryFn: () => getUserData(),
staleTime: convertTime(5, "min", "ms"), // Assuming convertTime is 
 defined elsewhere.
});

React.useEffect(() => {
 queryClient.invalidateQueries();
}, [queryClient]);

if (userQuery.isLoading) {
 return <Loading />;
}

if (userQuery.isError) {
 return <Navigate to="/login" />;
}

throw Error("iudnxerif"); // This line will now throw an error only when 
needed.

return (
<Box>
  <Navbar />
  <Stack>
    <Stack>Users Stories</Stack>
    <Stack>
      <Stack>Posts</Stack>
      <Stack>Chats</Stack>
    </Stack>
  </Stack>
 </Box>
 );
}

answered Jul 25, 2023 at 5:36

Tharuka Dananjaya

5061 gold badge5 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

akshay23codes Over a year ago

I am throwing unconditionally (intentionally) because i am trying to find why renders are uncaught

Collectives™ on Stack Overflow

Neither react router dom nor react error boundary npm package catching errors

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related