TRPC error handling (on client) is confusing

I'm not quite sure whether I'm doing this wrong or this is just how it's supposed to be, and I don't like it.

const onSubmit = async (data: FormData) => {
        createThing.mutateAsync(
            {
                slug: data.slug,
                name: data.name,
            },
            {
                onSuccess: async (res) => {
                    router.push(`/${res.slug}`);
                },
                onError: (e) => {
                    const err = e.data;
                    if (err && err.code === "CONFLICT") {
                        setError(e.message);
                    }
                },
            },
        );
    };

const onSubmit = async (data: FormData) => {
        createThing.mutateAsync(
            {
                slug: data.slug,
                name: data.name,
            },
            {
                onSuccess: async (res) => {
                    router.push(`/${res.slug}`);
                },
                onError: (e) => {
                    const err = e.data;
                    if (err && err.code === "CONFLICT") {
                        setError(e.message);
                    }
                },
            },
        );
    };

Like, this work as intended, but then I get the "Uncaught" error in the console, and this makes no sense to me.

3 Replies

deforestor•6mo ago

And this is how I'm throwing the error

deforestor•6mo ago

So I'm wondering, isn't "onError" already handling the error? Then how is it uncaught?

deviana•5mo ago

so many questions about trpc error handling in the app router but no answers

Gaming

Programming

TRPC error handling (on client) is confusing