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")
        }
      }
    })
  }));

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,
  });

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.

No replies yetBe the first to reply to this messageJoin

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

Similar Threads

Similar Threads

Similar Threads