cadams
cadams12mo 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.
No description
9 Replies
Tamás Soós
Tamás Soós12mo ago
Could you share repo for reproduction?
cadams
cadams12mo 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
Tamás Soós12mo 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
Tamás Soós12mo 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
Tamás Soós12mo 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
Tamás Soós12mo ago
Does that answer your questions?
aryzing
aryzing12mo ago
@cadams how are you even getting those messages printed? Is there an onError formatter set up on the server?
Derock
Derock12mo ago
looks like you are using create-t3-app, and by default it sets a onError handler
No description
cadams
cadams12mo ago
yes it thank you ! ag i see, thank you !