Panel can break with usage of an errorFormatter

[ferm10n]

Describe the bug

When an errorFormatter is used, the response can be modified such that it satisfies the type of TRPCErrorShape from @trpc/server/rpc, but not the zod schema from this package, TRPCErrorSchema. This causes an error response to be interpreted as a successful, crashing the panel and giving a blank screen.

• TRPCErrorSchema

  • this should probably make code and httpStatus optional or have some default

• I feel like there is also a logic error here too

  • when parseError is called, the response is an error (it's called from the catch of measureAsyncDuration
  • however, the returned value of { isError: success } is dependent on if the zod schema parse succeeded
  • meanwhile, isError in the ProcedureForm is interpreted as "did the request succeed or not?" and controls whether the ErrorComponent or the Response component is rendered

TLDR: When a formatted error is sent from tRPC, and fails the TRPCErrorSchema schema, the ProcedureForm uses Response when it should be using ErrorComponent.

To Reproduce

Steps to reproduce the behavior:

1. use an errorFormatter like I described above
2. open trpc-ui panel
3. trigger a procedure that returns an error
4. page blanks

trpc-ui version: 1.0.15

trpc adapter used: express

Are you using superjson: no, but I don't think it matters

Expected behavior

The panel doesn't explode

Reproduction

https://stackblitz.com/edit/sb1-5tevmaui?file=src%2Fserver%2Ftrpc.ts

👍: I have this issue
👎: This issue has already been fixed
🚀: I would like to work on / be assigned this issue (@aidansunbury to get assigned)

[ferm10n]

I'm willing to write a PR to fix it, I just want some confirmation on what the plan should be. I'm thinking:

• making code and httpStatus optional in TRPCErrorSchema
• making isError always true when returned from parseError
• changing the type of ProcedureForm's response to { isError: true; response: TRPCErrorType | undefined } | { isError: false; response: unknown }
• this will cause other errors in ErrorComponent because it doesn't like the undefined type in response. This is an area I would need guidance on how to address.
• chase other type errors around
• ...?
• profit

[aidansunbury]

@ferm10n I think that initial approach would work. There is still a good amount of code from the original library author I haven't looked at too closely. I'll take a closer look soon and let you know if there is anything else I would add.

I'll assign the issue to you and would more than welcome any contributions!