Tarky
Tarky•3d ago

Catch the error on trycatch and show the message

Hello, I am throwing a TRPCError inside my procedure 
throw new TRPCError({
                    code: "BAD_REQUEST",
                    message: "Not enough credits",
                });
throw new TRPCError({
                    code: "BAD_REQUEST",
                    message: "Not enough credits",
                });
How can I get this message in my react onSubmit handler? 
async function onSubmit(values: z.infer<typeof formSchema>) {
        try {
            await createImage({
                prompt: values.prompt,
                type: values.type,
            });

            router.refresh();
        } catch (cause) {
            console.log(cause);
            toast({
                title: "Error",
                description:
                    "An error occurred while creating your image. Please try again.",
            });
        }
    }
async function onSubmit(values: z.infer<typeof formSchema>) {
        try {
            await createImage({
                prompt: values.prompt,
                type: values.type,
            });

            router.refresh();
        } catch (cause) {
            console.log(cause);
            toast({
                title: "Error",
                description:
                    "An error occurred while creating your image. Please try again.",
            });
        }
    }
`
1 Reply
Nick
Nick•3d ago
Do you have an error formatter set up? https://trpc.io/docs/server/error-formatting
Error Formatting | tRPC
The error formatting in your router will be inferred all the way to your client (& React components)

Did you find this page helpful?