Throwing error in mutation handler is uncaught

[hmbrg]

When I throw an error inside a mutation handler I still get an uncaught error.

My code looks like this:

  const { mutateAsync, status, isError } = useMutation(async () => {
    const { data } = await api();

    if (!data?.data?.allow_action) throw new Error('action denied');

    return data;
  });

I would expect the error to be caught by react-query. What am I doing wrong here?

[TkDodo]

it works for me: https://codesandbox.io/s/compassionate-frost-4zoh1?file=/pages/index.js

do you have a codesandbox that shows your issue please?

[hmbrg]

Yes it works the same way for me, but I still get this error dialog by NextJS. Is this the expected behaviour, because it doesn't happen in your example:

[TkDodo]

I can take a look if you create a minimal reproducible example on codesandbox

[RyanMacBern]

I'm encountering this as well. The error is not caught and appears in the console. I see this with @TkDodo 's codesandbox too.

[TkDodo]

react-query logs errors to the console per default - it's not an uncaught error just because you see it in the console. you can also turn that off: https://react-query.tanstack.com/reference/setLogger#_top

[shayanakhlaghian]

Instead of throwing an error you can return a promise in which you call reject:

if (!data?.data?.allow_action) return new Promise((_, rej)) => rej('action denied'));

[Maxim-Mazurok]

Having the same issue in react app, getting "Uncaught runtime errors"

Doing it the same as in docs (https://tanstack.com/query/v5/docs/framework/react/guides/mutations)

export const useSubscribeMutation = () =>
  useMutation({
    mutationFn: (email: string) => {
      return axios.post(
        new URL(`subscribe`, process.env.REACT_APP_API_BASE_URL).toString(),
        { email }
      );
    },
  });

[Maxim-Mazurok]

Figured it out, I was using subscribeMutation.mutateAsync and not doing try-catch there.

Now it works fine:

subscribeMutation
  .mutateAsync(email)
  .then(() => {
    mixpanel.track("subscribe-dialog-submitted-success", { email });
    handleClose("submitted");
  })
  .catch(() => {
    mixpanel.track("subscribe-dialog-submitted-error", { email });
  });

[jonahallibone]

I am also facing this problem. I guess I wrongly assumed mutateAsync would internally catch the error and set the error state of the hook

[TkDodo]

use mutate, not mutateAsync

[brianamalgama]

I know this is really old but I'm having a similar issue:

I have this big mutation that composes other mutations.
I use mutateAsync for the internal once so error handling is cleaner I don't have to repeat the logic for each point of failure. However, this is not working. I see the error being thrown in the debugger but onError is never called. Thoughts @TkDodo?

export default function useCreatePrediction() {
  const router = useRouter();
  const { toast } = useToast();
  const form = usePredictionForm();
  const findOrCreateCase = useFindOrCreateCase();
  const runPrediction = useRunPrediction();

  return useMutation({
    mutationFn: async () => {
      const result = schema.safeParse(form.getValues());
      if (!result.success) throw new Error("Invalid form data");
      try {
        const newCase = await findOrCreateCase.mutateAsync(result.data);
        if (!newCase) return;
        await runPrediction.mutateAsync({
          caseId: newCase.id,
          values: result.data,
        });
        void trackOnClient().predictionCreated(form.trackingValues());
      } catch {
        throw new Error("Error creating prediction");
      }
    },
    onSuccess: () => router.push(Routes.success),
    onError: () =>
      toast({
        variant: "error",
        description:
          "There was an error creating the prediction. Please try again.",
      }),
  });
}

[brianamalgama]

I found the cause pretty quickly after writing this...the called will be called after all retries, what makes total sense. The issue was I had a default setting of 5 retries on all mutations, and that was being turned into 25 retries because of my nesting. Interesting side-effect of that config