tRPC•3d ago

trpc error formatting

Hello,

I am wondering if it is possible to properly type my "cause.code"? I am hoping to create custom error codes so my frontend can decide which type of UI to display to the user. But, ideally this would be in a typesafe way so im not guessing what the error codes are. Is there a way i can tell trpc this, without having to use

as CustomErrorCodes

as CustomErrorCodes

as CustomErrorCodes

as CustomErrorCodes in every instance I want to use it in?

client:

    const { error: invalidCaptcha } = await tryCatch(
        api.verification.isCaptchaValid({ guildId, uuid }),
    );

    console.log(invalidCaptcha?.cause?.code); // Property code does not exist on type {}.

    const { error: invalidCaptcha } = await tryCatch(
        api.verification.isCaptchaValid({ guildId, uuid }),
    );

    console.log(invalidCaptcha?.cause?.code); // Property code does not exist on type {}.

    const { error: invalidCaptcha } = await tryCatch(
        api.verification.isCaptchaValid({ guildId, uuid }),
    );

    console.log(invalidCaptcha?.cause?.code); // Property code does not exist on type {}.

    const { error: invalidCaptcha } = await tryCatch(
        api.verification.isCaptchaValid({ guildId, uuid }),
    );

    console.log(invalidCaptcha?.cause?.code); // Property code does not exist on type {}.

server:

            if (!verificationCache) {
                throw new TRPCError({
                    code: "BAD_REQUEST",
                    message:
                        "This captcha has expired.",
                    cause: {
                        code: "CAPTCHA_EXPIRED",
                    },
                });
            }

            if (!verificationCache) {
                throw new TRPCError({
                    code: "BAD_REQUEST",
                    message:
                        "This captcha has expired.",
                    cause: {
                        code: "CAPTCHA_EXPIRED",
                    },
                });
            }

            if (!verificationCache) {
                throw new TRPCError({
                    code: "BAD_REQUEST",
                    message:
                        "This captcha has expired.",
                    cause: {
                        code: "CAPTCHA_EXPIRED",
                    },
                });
            }

            if (!verificationCache) {
                throw new TRPCError({
                    code: "BAD_REQUEST",
                    message:
                        "This captcha has expired.",
                    cause: {
                        code: "CAPTCHA_EXPIRED",
                    },
                });
            }

Nick•12/14/25, 10:45 AM

Using the errorFormatter function you can define your own global error shape which gets inferred into the client, so yes it’s possible

NNick Using the errorFormatter function you can define your own global error shape whi...

v28OP•12/15/25, 3:08 AM

hi, thank you for the response.

Do you happen to have an example of this? When I try to define it i get no changes on the types when trying to use it on the client.

const t = initTRPC.context<typeof createTRPCContext>().create({
    transformer: superjson,
    errorFormatter({ shape, error }) {
        return {
            ...shape,
            message:
                error.cause instanceof ZodError
                    ? error?.cause?.issues[0]?.message
                    : shape.message,
            data: {
                ...shape.data,
                zodError:
                    error.cause instanceof ZodError ? error.cause.flatten() : null,
                customError: "123",
            },
            customError: "123",
        };
    },
});

const t = initTRPC.context<typeof createTRPCContext>().create({
    transformer: superjson,
    errorFormatter({ shape, error }) {
        return {
            ...shape,
            message:
                error.cause instanceof ZodError
                    ? error?.cause?.issues[0]?.message
                    : shape.message,
            data: {
                ...shape.data,
                zodError:
                    error.cause instanceof ZodError ? error.cause.flatten() : null,
                customError: "123",
            },
            customError: "123",
        };
    },
});

the goal is to have something like this, where the "data: code" type is accessible on the client, so im not guessing.

            if (!verificationCache) {
                throw new TRPCError({
                    code: "BAD_REQUEST",
                    message:
                        "This captcha has expired. Please go back to the verification message and click the verify button for a new captcha link.",
                    cause: {
                        data: {
                            code: "CAPTCHA_EXPIRED",
                        },
                    },
                });
            }

            if (!verificationCache) {
                throw new TRPCError({
                    code: "BAD_REQUEST",
                    message:
                        "This captcha has expired. Please go back to the verification message and click the verify button for a new captcha link.",
                    cause: {
                        data: {
                            code: "CAPTCHA_EXPIRED",
                        },
                    },
                });
            }

v28OP•12/15/25, 3:50 PM