Use onError to change an application error into a TRPCError?

JJavascriptMick

6/2/2023

I want to use the onError handler to change any instance of a custom application error into a TRPCError (I want the HTTP Status code to be a 401 rather than a 500). I tried this but it doesn't work...

  onError({error}) {
    if (error instanceof AccountLimitError){
      error = new TRPCError({ code: 'UNAUTHORIZED', message:error.message })
    }
  }

  onError({error}) {
    if (error instanceof AccountLimitError){
      error = new TRPCError({ code: 'UNAUTHORIZED', message:error.message })
    }
  }

nor does this

  onError({error}) {
    if (error instanceof AccountLimitError){
      const trpcError = new TRPCError({ code: 'UNAUTHORIZED', message:error.message })
      error = Object.assign(error, trpcError)
    }
  }

  onError({error}) {
    if (error instanceof AccountLimitError){
      const trpcError = new TRPCError({ code: 'UNAUTHORIZED', message:error.message })
      error = Object.assign(error, trpcError)
    }
  }

I can set individual properties on the error object like error.message but thought there might be an easier way. Has anybody got a nifty hack for this?

AKAlex / KATT 🐱

6/2/2023

you can do this in https://trpc.io/docs/server/error-formatting example from our tests: https://github.com/trpc/trpc/blob/49b0a55b74b57bbf7451dad5976d315d9fb7785c/packages/tests/server/errors.test.ts#L227-L260

Nnlucas

6/2/2023

Thrown errors automatically get wrapped with a TRPCError and sent to the frontend Like Alex said, an error formatter is probably what you want if you need to manipulate them

JJavascriptMick

6/3/2023

ah nice, thanks guys, yep this works.....

const t = initTRPC.context<Context>().create({
  errorFormatter: (opts)=> {
    const { shape, error } = opts;
    if (!(error.cause instanceof AccountLimitError)) {
      return shape;
    }
    return {
      ...shape,
      data: {
        ...shape.data,
        httpStatus: 401,
        code: 'UNAUTHORIZED'
      },
    };
  }
})

const t = initTRPC.context<Context>().create({
  errorFormatter: (opts)=> {
    const { shape, error } = opts;
    if (!(error.cause instanceof AccountLimitError)) {
      return shape;
    }
    return {
      ...shape,
      data: {
        ...shape.data,
        httpStatus: 401,
        code: 'UNAUTHORIZED'
      },
    };
  }
})

See example in my boilerplate repo here https://github.com/JavascriptMick/nuxt3-boilerplate/blob/master/server/trpc/trpc.ts