Throwing Error in queryFn returns uncaught and unmounts entire app

[nikoisonfire]

Sorry in advance for not being able to share screenshots, I have to access the internet from work inside the slowest VM you've ever seen and I can't share any image etc. between this and VSC.

I'm trying to use TSQ in this case to poll an API that returns a "custom" status code contained in the response body. Status is either "In Progress", "Completed" or "Failed". Polling and the sucess-state work fine so far (using retry and a bit of wrangling), but I'm having issues dealing with the "Failed" state.

Whenever the simulation fails, the queryFn naturally throws an Error (as per the docs), but this error ends up not being caught and unmounts the entire React app, causing it to crash (see: https://legacy.reactjs.org/docs/error-boundaries.html - under "New Behavior for Uncaught Errors")

my console output looks like this:

.... in progres... (polling)

Error: 500                                                                                     react_devtools_backend.js:4012
    at Object.getSimData [as queryFn] (apiCalls.ts:132:11)

Uncaught Error: 500                                                                 useErrorBoundary.ts:39
    at Object.getSimData [as queryFn] (apiCalls.ts:132:11)

query:

const { data } = useQuery({
    queryKey: [initials.simId, initials.token],
    queryFn: getSimData,
    retry: (failureCount, error) => {
      if (error.message) {
        if (error.message === "500") {
          showBoundary("Simulation fehlgeschlagen. Bitte erneut versuchen.");
          return false;
        }
        if (error.message === "401") {
          setError(
            "Fehler bei der Authentisierung, bitte Seite neu laden oder erneut anmelden."
          );
          return false;
        }

        return true;
      }
      return false;
    },
    retryDelay: 2000,
    enabled: !!initials.token && initials.simId !== "",
    onSuccess: (data) => {
      console.log("data", data);
      setError(null);
    },
    select: (data) => {
      if (data.output_parameters) {
        return {
          ...valuesToFixed(data.output_parameters),
        };
      }
    },
    onError: (error) => console.log("error ", error),
    useErrorBoundary: (error, query) => showBoundary(error),

queryFn:

export const getSimData = async ({ queryKey }: any) => {
  const [simId, token] = queryKey;
  console.log("getSimData called with: ", simId);
  const url = `${window.REACT_APP_SIMULATION_API_URL}/${simId}`;
  const options = {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${token}`,
    },
  };
  // Returns a promise ... postToProjects.then/.catch
  const response = await fetch(url, options);
  if (!response.ok) {
    throw new Error("401");
  }
  const jdata = await response.clone().json();
  if (jdata.status === "Failed") {
    throw new Error("500");
  }
  if (jdata.status === "InProgress") {
    console.log("sim in progress");
    throw new Error("Simulation still in progress");
  }
  if (jdata.status === "Completed") {
    console.log("sim complete");
    return response.json();
  }
};

using TSQ version: "react-query": "^3.38.1",
and the react-error-boundary npm package ("react-error-boundary": "^4.0.2",)

weirdly, throwing a "simulation still in progress" error doesn't trigger anything, and the function keeps retrying...

I've also tried not using an errorBoundary but the behavior doesnt change,.

is there anyway to explicitly "catch" the error within the useQuery hook?

[TkDodo]

retry is not meant to be a function that executes side-effects. You should only return true or false, defining if you want a retry or not given the error you receive.

further, what is showBoundary doing? You are leaving out the most important part ... That's why standalone codesandbox reproductions are always better than codesnippets or screenshots, but you'd have to do the actual work of creating those ...

[nikoisonfire]

removed the side-effects from retry, nothing changed.

further, what is showBoundary doing?

A function from the react-error-boundary hook : https://github.com/bvaughn/react-error-boundary#useerrorboundary-hook

const { showBoundary } = useErrorBoundary();

That's why standalone codesandbox reproductions are always better than codesnippets or screenshots

True, but it would also take me 2 working days to get a complex example like this up and running. Just for you to see the exact same output mentioned above.

[TkDodo]

You don't need a complex example, just a minimal one.

I'm guessing your problem is:

useErrorBoundary: (error, query) => showBoundary(error),

you don't want to show the boundary yourself. You want to tell react-query to please handle errors by throwing them to error boundaries. useErrorBoundary expects you to return a boolean:

useErrorBoundary: (error) => isErrorThatShouldBeThrownToBoundary(error) ? true : false

[nikoisonfire]

you don't want to show the boundary yourself. You want to tell react-query to please handle errors by throwing them to error boundaries. useErrorBoundary expects you to return a boolean:

useErrorBoundary: (error) => isErrorThatShouldBeThrownToBoundary(error) ? true : false

I've tried this, both by just returning true and using the boolean variant of useErrorBoundary. Reproduces the same issue.

Is there any way to explicitly handle Errors in TSQ?

I also don't get why the error thrown by "in Progress" get's completely ignored while the one three lines above crashes and burns everything

if (jdata.status === "InProgress") {
    console.log("sim in progress");
    throw new Error("Simulation still in progress");
  }

[nikoisonfire]

I've given up on making suspense and error boundary together work, set useErrorBoundary:false and handling the error manually now.

[nikoisonfire]

Ok next question: why can't I call setState within onError?

[TkDodo]

I mean, you can? But a) we are deprecating the callbacks on useQuery and b) it won't work with suspense because that unmounts your component, so at the time the callback is fired, your component "isn't there"...

I can't help any further without a runnable reproduction though. Just take one of our examples in the docs, fork it, and add useErrorBoundary and a bit of throwing errors in the QueryFunction. You should see that it works fine. I'm using that in production :)