cadams•13mo ago

When error in tRPC route, the error message is vauge

There are no line numbers when a runtime error happens in a tRPC route. Surely I am missing something? Would be impossible to debug larger apps.

9 Replies

Tamás Soós•13mo ago

Could you share repo for reproduction?

cadamsOP•13mo ago

Just need a route that has a runtime error in it. for eg const arr = []; console.log(arr[0]); this will produce a runtime error

Tamás Soós•13mo ago

That example with the console would just print undefined as it should, but if I do something like:

import { procedure, router } from '@/server/trpc';
import { TRPCError } from '@trpc/server';

export const appRouter = router({
  magicNumber: procedure.query(() => {
    try {
      const arr: number[] = [];
      console.log(arr[0].toFixed());
    } catch (e) {
      throw new TRPCError({
        message: 'Magic number procedure error',
        code: 'BAD_REQUEST',
      });
    }
    return 42;
  }),
});

export type AppRouter = typeof appRouter;

import { procedure, router } from '@/server/trpc';
import { TRPCError } from '@trpc/server';

export const appRouter = router({
  magicNumber: procedure.query(() => {
    try {
      const arr: number[] = [];
      console.log(arr[0].toFixed());
    } catch (e) {
      throw new TRPCError({
        message: 'Magic number procedure error',
        code: 'BAD_REQUEST',
      });
    }
    return 42;
  }),
});

export type AppRouter = typeof appRouter;

It gives me Magic number procedure error on the client side. I'm using this setup. It has no additional error formatting.

GitHub

GitHub - tsoos99dev/trpc-next-app-dir-minimal

Contribute to tsoos99dev/trpc-next-app-dir-minimal development by creating an account on GitHub.

Tamás Soós•13mo ago

I can print the stack trace locally:

'use client';

import { trpc } from '@/util/trpc';

export default function MagicNumber() {
  const { data, error, isError, isLoading } = trpc.magicNumber.useQuery();
  console.log(error?.data?.stack);

  if (isLoading) {
    return <span>Loading...</span>;
  }

  if (isError) {
    return <span>Error: {error.message}</span>;
  }

  return <span>Your magic number is {data}</span>;
}

'use client';

import { trpc } from '@/util/trpc';

export default function MagicNumber() {
  const { data, error, isError, isLoading } = trpc.magicNumber.useQuery();
  console.log(error?.data?.stack);

  if (isLoading) {
    return <span>Loading...</span>;
  }

  if (isError) {
    return <span>Error: {error.message}</span>;
  }

  return <span>Your magic number is {data}</span>;
}

To get:

TRPCError: Magic number procedure error
    at eval (webpack-internal:///(:3000/rsc)/./src/server/routers/app.ts:15:19)
    at resolveMiddleware (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/index.mjs:431:36)
    at callRecursive (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/index.mjs:467:38)
    at resolve (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/index.mjs:497:30)
    at callProcedure (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/config-4c0f8e88.mjs:189:12)
    at inputToProcedureCall (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/resolveHTTPResponse-68c8befb.mjs:54:83)
    at eval (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/resolveHTTPResponse-68c8befb.mjs:177:51)
    at Array.map (<anonymous>)
    at resolveHTTPResponse (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/resolveHTTPResponse-68c8befb.mjs:177:32)

TRPCError: Magic number procedure error
    at eval (webpack-internal:///(:3000/rsc)/./src/server/routers/app.ts:15:19)
    at resolveMiddleware (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/index.mjs:431:36)
    at callRecursive (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/index.mjs:467:38)
    at resolve (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/index.mjs:497:30)
    at callProcedure (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/config-4c0f8e88.mjs:189:12)
    at inputToProcedureCall (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/resolveHTTPResponse-68c8befb.mjs:54:83)
    at eval (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/resolveHTTPResponse-68c8befb.mjs:177:51)
    at Array.map (<anonymous>)
    at resolveHTTPResponse (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/resolveHTTPResponse-68c8befb.mjs:177:32)

Which includes the line number.

Tamás Soós•13mo ago

Or send it to some other place automatically as described in the docs.

Error Handling | tRPC

Whenever an error occurs in a procedure, tRPC responds to the client with an object that includes an "error" property. This property contains all the information that you need to handle the error in the client.

Tamás Soós•13mo ago

Does that answer your questions?

aryzing•13mo ago

@cadams how are you even getting those messages printed? Is there an onError formatter set up on the server?

Derock•13mo ago

looks like you are using create-t3-app, and by default it sets a onError handler

cadamsOP•13mo ago

yes it thank you ! ag i see, thank you !