Theo's Typesafe Cult•8mo ago

Error handling with new create-t3-app app dir template

Since the OnError callback got removed from usequery in tanstack query v5, how can i now handle (read: catch) errors when calling a protected procedure that is not a mutation? I am trying to call the "post.getSecretMessage" endpoint which is a protected procedure without being logged in, and it obviously is throwing an TRPCError. The problem is that this error stops the whole application and is not being handled correctly. I read the blog post from TkDodo (https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose) about how to do error handling in v5, but it doesnt work. This is the code as suggested in the blog:

const [queryClient] = useState(() => new QueryClient({
    queryCache: new QueryCache({
      onError: (error, query) => {
        console.log("THIS IS AN ERROR MESSAGE HALLOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO")
        if(query.meta?.errorMessage) {
          console.log(query.meta.errorMessage)
          return
        }     
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        //@ts-ignore
        if(error?.message) {
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          //@ts-ignore
          console.log("THIS IS AN ERROR MESSAGE HALLOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO")
        }
      }
    })
  }));

const [queryClient] = useState(() => new QueryClient({
    queryCache: new QueryCache({
      onError: (error, query) => {
        console.log("THIS IS AN ERROR MESSAGE HALLOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO")
        if(query.meta?.errorMessage) {
          console.log(query.meta.errorMessage)
          return
        }     
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        //@ts-ignore
        if(error?.message) {
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          //@ts-ignore
          console.log("THIS IS AN ERROR MESSAGE HALLOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO")
        }
      }
    })
  }));

When an error message is thrown, none of the console logs are being called and the error is not handled properly, thus breaking the application. The console log on api/trpc/[trpc]/route.ts is being called however.

const handler = (req: NextRequest) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: () => createTRPCContext({ req }),
    onError:
      env.NODE_ENV === "development"
        ? ({ path, error }) => {
            console.error(
              `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
            );
          }
        : undefined,
  });

const handler = (req: NextRequest) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: () => createTRPCContext({ req }),
    onError:
      env.NODE_ENV === "development"
        ? ({ path, error }) => {
            console.error(
              `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
            );
          }
        : undefined,
  });

Breaking React Query's API on purpose

Why good API design matters, even if it means breaking existing APIs in the face of resistance.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Error handling with new create-t3-app app dir template