skagedal Posts

skagedal

•Created by skagedal on 9/18/2024 in #❓-help

Automatically decode custom errors on client

Hi! We're using tRPC v10.45.2 with React Query in a Next.js app. I'm looking for a nice way to pass custom error payloads to the browser. What I've done so far is have something like this:

export type MyAppErrorDetails = { $type: 'ILL_FORMED_BANANA'; shape: BananaShape; } | { $type: 'NOT_HUNGRY' }; 
export class MyAppError extends TRPCError {
  public readonly details;

  constructor(opts: { message?: string; code: TRPC_ERROR_CODE_KEY; cause?: unknown; details: MyAppErrorDetails }) {
    super(opts);

    this.details = opts.details;
  }
}

export type MyAppErrorDetails = { $type: 'ILL_FORMED_BANANA'; shape: BananaShape; } | { $type: 'NOT_HUNGRY' }; 
export class MyAppError extends TRPCError {
  public readonly details;

  constructor(opts: { message?: string; code: TRPC_ERROR_CODE_KEY; cause?: unknown; details: MyAppErrorDetails }) {
    super(opts);

    this.details = opts.details;
  }
}

Then, I create the TRPC context like this:

const t = initTRPC.context<typeof createTRPCContext>().create({
  transformer: superjson,
  errorFormatter({ shape, error }) {
    if (error instanceof MyAppError) {
      return {
        ...shape,
        data: {
          ...shape.data,
          details: error.details,
        },
      };
    }
    return shape;
  },
});

const t = initTRPC.context<typeof createTRPCContext>().create({
  transformer: superjson,
  errorFormatter({ shape, error }) {
    if (error instanceof MyAppError) {
      return {
        ...shape,
        data: {
          ...shape.data,
          details: error.details,
        },
      };
    }
    return shape;
  },
});

So far, all good! (Right? This is a good way to do this?) But then, on the client side, I have to do something like this everywhere:

if (error instanceof TRPCClientError) {
  const { data } = error;
  const { details } = data as { details: MyAppErrorDetails };
  if (details.$type === 'ILL_FORMED_BANANA') {
     // ....

if (error instanceof TRPCClientError) {
  const { data } = error;
  const { details } = data as { details: MyAppErrorDetails };
  if (details.$type === 'ILL_FORMED_BANANA') {
     // ....

I guess that's not that bad, but it would be nice if I could just do something like:

if (error instanceof MyAppError) {
  if (error.details.$type === 'ILL_FORMED_BANANA') {
     // ...
}

if (error instanceof MyAppError) {
  if (error.details.$type === 'ILL_FORMED_BANANA') {
     // ...
}

So – is there a way to add some kind of middleware that decodes error payloads so your onError handlers for mutations and error return value in queries could be simplified?

2 replies

TtRPC

•Created by skagedal on 5/10/2024 in #❓-help

How can I get lint warnings for onSuccess/onError?

Maybe this isn't exactly a trpc question, but I'm thinking someone here would know. I would like to keep our project prepared for the transition to tRPC v.11 and the changes that come because of TanStack Query v.5.x. We have a lot of usage of onSuccess/onError in useQuery. So now I bumped tRPC to the latest 4.x (4.36.1) where they are marked as deprecated. I then realized that our lint setup does not warn for deprecations, so I added eslint-plugin-deprecation and enabled it per instructions. I then got a bunch of other deprecation warnings, so the plugin seems to be working, but nothing on these onSuccess / onError callbacks. Is this supposed to be working this way, or is there another way I could make it work?

2 replies