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
TS
Tamás Soós169d ago
Could you share repo for reproduction?
C
cadams167d 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
TS
Tamás Soós167d 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.
TS
Tamás Soós167d 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.
TS
Tamás Soós167d 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.
TS
Tamás Soós167d ago
Does that answer your questions?
A
aryzing167d ago
@cadams how are you even getting those messages printed? Is there an onError formatter set up on the server?
D
Derock166d ago
looks like you are using create-t3-app, and by default it sets a onError handler
No description
C
cadams163d ago
yes it thank you ! ag i see, thank you !
More Posts
How to have 2 separate trpc clients for http and websockets?I'm trying to have a setup where I can use trpc with 2 separate clients, one for normal HTTP requestHow to configure context for a standalone server?Are there any examples out there on how to set up context for a standalone server? The docs do incluDocs hard to follow with so much `next` codeNot having a great experience with the docs. There are many examples that use `next`, making it hardadding information to the QueryKey that is not part of the procedure inputwe have the situation that we have our trpc routes read some specific information from the browsesr How to make typed error responses in the context of a specific query?Each query has a typed (success) response, although it seems all queries have a shared type for the What's the negative code returned in error responses?What's the negative error code returned in errors responses and how is it meant to be used by the clTRPC File as InputHi can someone pls help me: https://stackoverflow.com/questions/77381516/nextjs-trpc-file-as-input`refetchOnWindowFocus` with RSC?Hi. Is there any way to have `refetchOnWindowFocus` work with server components? Seems like it onlyMulti useSubscription with trpc react -query integration failed to find second subusing trpc in nx monorepo, node version is 20 with yarn. backend is using trpc with express integratIs there any easy way to create a Type for a trpc routerI want to publish a set of trpc api client to npm, which will be used by my customer directly. But iTRPC with Nextjs 13 App RouterIm trying to implement TRPC with my already existing Nextjs 13 App to get typesafe API's. I've managSecurity: DDOS attack prevention for open endpoints tRPCSo we are building an application and got multiple trpc endpoints associated with it, some of them aIs there any information about caching in `@trpc/react-query`?How does query caching work? I want to create library for Angular and I would like to understand Reacache craziness?can someone sanity check something for me? i'm using sst + trpc + drizzleorm + aws + rds + postgretRPC over WebSocket with Next.js and NextAuthHi. I'm trying to set up Next 13 with tRPC over a WebSocket and NextAuth. I got it mostly working wiServer Side Calls in tRPC not working (Next 13, App Router)Where do I make the helper?Project structure ?I greatly appreciate for your insight on this, especially if you're an experienced fullstack dev: BAccess procedures with same names and same parameters, but in different routers, genericallyMy trpc structure looks something like this: ``` trpc - router1 - routerX - proc1 - rDisable trpc route cahce?```ts import { protectedProcedure, router } from "@/lib/trpc/server/trpc"; import { TRPCError } fromHow do you set headers or cookies in procedure ?Having trouble figuring out how to set headers within a procedure in Next 13.