useSWRMutation does not catch error if thrown in fetcher

[joepetrillo]

Bug report

Description / Observed Behavior

The useSWRMutation hook does not catch the errors I throw in the passed fetcher function likes it claims in the docs. Maybe it does catch it somehow, but I am still seeing the error thrown by the nextjs dev server overlay. Maybe I am using it wrong?

Expected Behavior

The error is caught and I can use the error variable to access it. No nextjs/react error is thrown on the dev server overlay.

Repro Steps / Code Example

  const authedFetch = useAuthedFetch();
  const [name, setName] = useState("");

  async function updateName(key: string, { arg }: { arg: string }) {
    try {
      updateCourseNamePATCH.body.parse({ name: arg });
    } catch (error) {
      const zodError = error as z.ZodError;
      throw new Error(zodError.issues[0].message);
    }

    try {
      const res = await authedFetch(`/courses/${course_id}/name`, {
        method: "PATCH",
        body: JSON.stringify({ name: arg }),
      });

      const data = await res.json();

      if (!res.ok) {
        if (data.error) throw new Error(data.error);
        else throw new Error("An unknown error occurred");
      }

      return data.name;
    } catch (error) {
      if (error instanceof Error) throw new Error(error.message);
      else throw new Error("An unknown error occurred");
    }
  }

  const { error, trigger, isMutating } = useSWRMutation(
    `${process.env.NEXT_PUBLIC_API_URL}/courses/${course_id}`,
    updateName,
    {
      revalidate: false,
      populateCache: (newCourseName, existingCourseData) => {
        return { ...existingCourseData, name: newCourseName };
      },
    }
  );

Additional Context

SWR version = 2.1.2

[koba04]

@joepetrillo As the documentation explains, useSWRMutation throws an error from trigger by default, so you have to catch and handle it.
https://swr.vercel.app/docs/mutation#basic-usage

If you don't want to do that, and want to handle the error through error returned from useSWRMutation, you can do throwOnError = false so that trigger doesn't throw an error.
https://swr.vercel.app/docs/mutation#parameters-1

[joepetrillo]

Ohh I see now, I was thrown off because the error variable is described as the error thrown by fetcher (or undefined) which I now see is true but requires some additional config to use. (Since this is not required in the regular useSWR hook)

Is there any reason throwOnError is true by default? If I need to show the error and not have to keep my own state for it, what would catching it from trigger help with? In other words, what are you doing when you catch the error on the frontend other than showing it? I also noticed I am not using the key argument in the fetcher which seems incorrect to me but works ok (not sure if its proper usage). I am still new to SWR so forgive me if these things are obvious.

Thank you for the help!

[koba04]

@joepetrillo

what are you doing when you catch the error on the frontend other than showing it?

For example, you can show a notification toast when an error happens. You can see the example here.
https://swr.vercel.app/examples/optimistic-ui

[jmayergit]

The expected behavior is that the error property is populated AND there is no runtime error AND the onSuccess function is not called.

This is impossible in my understanding

[jmayergit]

Instead we need to manage error state ourselves