feat: Client side error transformation

[RyanClementsHax]

Describe the feature you'd like to request

Sometimes TRPC calls don't directly go to the TRPC server. Sometimes they go through proxies that process the request against rules including checking the authorization header.

If you don't control these proxies, they can return JSON that isn't in the format that TRPC expects which results in a formatting error.

For example, Supabase's edge functions return the following response on an invalid JWT.

{"msg": "Invalid JWT"}

This line fails because result.type doesn't exist in the json. The TRPC loggerLink then logs it like this.

 ERROR   << mutation #1 recipes.create '{"context": {}, "elapsedMs": 203, "input": {"recipe": {"description": "", "ingredients": [Array], "name": "test", "steps": [Array]}}, "result": [TRPCClientError: Unable to transform response from server]}'

Describe the solution you'd like to see

What I'd like to do is

1. Recover from the error if possible
2. Make it easier to debug when it happens

In service of that, it would be nice to have one of the following

1. Ability to transform the json parsed without completely overhauling deserialization
2. Ability to introspect the json parsed for logging/debugging purposes

Describe alternate solutions

I attempted to use a custom link, but this error happens inside of the httpBatchLink itself and doesn't expose the json or error in what is returned down the chain.

I also looked at using the transformer option, but this isn't defined as of @trpc/client@10.45.2.

I considered overriding the fetch function that was used by TRPC, but it would be hard to transform the response since TRPC parses the json itself without giving the option for transformation

Additional information

No response

👨‍👧‍👦 Contributing

• [ ] 🙋‍♂️ Yes, I'd be down to file a PR implementing this feature!

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

[KATT]

You should be able to do a custom link to intercept it this - the error should contain the Response in the context that you can sniff

[RyanClementsHax]

Oh so something like this?

const customLoggingLink = (): TRPCLink<AppRouter> => () => {
    return ({ next, op }) => {
        return observable((observer) => {
            return next(op)
                .pipe(
                    tap({
                        error(err) {
                            const response = err?.meta?.response;
                        },
                    })
                )
                .subscribe(observer);
        });
    };
};

[KATT]

https://trpc.io/docs/client/links#example