React - Error boundary not catching error

Question

I have a component where I am fetching mock data. I am doing a query by using react-query with Suspense. I was following their docs. This is the component:

export const WorkHistory = () => {
    const { caseId } = useContext();
    const { api: mockApi } = useMockApi();
    const { data: workHistory } = mockApi.getWorkHistory(caseId.toString());

    return (
        <QueryErrorResetBoundary>
            {({ reset }) => (
                <ErrorBoundary
                    fallbackRender={({ error, resetErrorBoundary }) => (
                        <div>
                            There was an error! <Button onClick={() => resetErrorBoundary()}>Try again</Button>
                            <pre style={{ whiteSpace: "normal" }}>{error.message}</pre>
                        </div>
                    )}
                    onReset={reset}
                >
                    <Suspense
                        fallback={
                            <div className="flex justify-center">
                                <Loader size="3xlarge" title="Loading..." />
                            </div>
                        }
                    >
                        <WorkHistory workHistory={workHistory} />
                    </Suspense>
                </ErrorBoundary>
            )}
        </QueryErrorResetBoundary>
    );
};

And this is the getWorkHistory in mockApi:

const getWorkHistory = (caseId: string) =>
        useQuery({
            queryKey: `workHistory`,
            queryFn: (): Promise<WorkHistoryDto[]> => fakeFetch(JSON.parse(localStorage.getItem(`workHistory`))),
            staleTime: Infinity,
            suspense: true,
        });

const fakeFetch = (result): Promise<any> =>
        new Promise((resolve, reject) => {
            setTimeout(() => reject(new Error("fail")), 1000);
        });

But, this ErrorBoundary is not catching this error. I get this:

Uncaught Error: fail

What am I doing wrong here?

TkDodo · Accepted Answer · 2023-03-25 11:42:02Z

You are calling useQuery outside of the ErrorBoundary:

export const WorkHistory = () => {
    // ⬇️ useQuery is called here
    const { data: workHistory } = mockApi.getWorkHistory(caseId.toString());

    return (
        <QueryErrorResetBoundary>
            {({ reset }) => (
            // ⬇️ your ErrorBoundary starts here
                <ErrorBoundary
                  ...
                </ErrorBoundary>
            )}
        </QueryErrorResetBoundary>
    );
};

The useQuery call is what throws the error to the nearest ErrorBoundary, so it has to be inside the ErrorBoundary, not above it.

unrelated, but still important: You are violating the rules of hooks by calling useQuery inside a function called getWorkHistory. Hooks must be called in functional components or other hooks, so you would need to name that function useWorkHistory or useGetWorkHistory.

Pawel · Accepted Answer · 2023-03-24 12:19:54Z

0

I am not sure but I think Error Boundary is not able to catch asynchronous errors according to this article: https://blog.logrocket.com/handling-javascript-errors-react-error-boundaries/

answered Mar 24, 2023 at 12:19

Pawel

881 silver badge9 bronze badges

1 Comment

TkDodo Over a year ago

react-query catches the async errors and re-throws them during rendering so that error boundaries can catch them. it's a react-query feature to integrate with error boundaries.

Collectives™ on Stack Overflow

React - Error boundary not catching error

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related