Mugetsu•3y ago

Handling error globally

According to the docs on errors https://trpc.io/docs/v10/error-handling I should get such error object on client side when its thrown from procedure If I understand correctly. But Im having a problem with it as it doesnt seem to be typed as TRPCError on the client and dont contain few props from described in docs.

        queryCache: new QueryCache({
          onError: async (error: any) => {
            console.log(error.id);
            console.log(error.message);
            console.log(error.code);
            console.log(error.data);
            console.log(error?.data?.httpStatus === 401);
            if (
              error?.data?.httpStatus === 401 ||
              error.message === "UNAUTHORIZED"
            ) {
              await signOut({ redirect: false });
            }
          },
        }),

        queryCache: new QueryCache({
          onError: async (error: any) => {
            console.log(error.id);
            console.log(error.message);
            console.log(error.code);
            console.log(error.data);
            console.log(error?.data?.httpStatus === 401);
            if (
              error?.data?.httpStatus === 401 ||
              error.message === "UNAUTHORIZED"
            ) {
              await signOut({ redirect: false });
            }
          },
        }),

5 Replies

Unknown User•3y ago

Message Not Public

MugetsuOP•3y ago

>All errors that occur in a procedure go through the onError method before being sent to the client I care about the part which lands on the client. Does it mean I cant get proper typings and all information regarding the error on the client? Or Am I doing something worng

Unknown User•3y ago

Message Not Public

MugetsuOP•3y ago

Its not in my desire to define onerror for every query/mutation I make. I want a global error handler of 401 but I wonder why some info is missing from onError in QueryCache(global handler)

Walter•4d ago

I finally found a solution that works really well: Use the build-in retryLink to intercept all errors on a global level.

import { createTRPCClient, retryLink } from '@trpc/client';

createTRPCClient<AppRouter>({
  links: [
    retryLink({
      retry: (opts) => {
        const code = opts.error.data?.code;

        if (code === "UNAUTHORIZED") {
          // Redirect to login
        }

        return false; // Never retry
      },
    }),
    // Your other links...
  ],
});

import { createTRPCClient, retryLink } from '@trpc/client';

createTRPCClient<AppRouter>({
  links: [
    retryLink({
      retry: (opts) => {
        const code = opts.error.data?.code;

        if (code === "UNAUTHORIZED") {
          // Redirect to login
        }

        return false; // Never retry
      },
    }),
    // Your other links...
  ],
});

Handling error globally

Did you find this page helpful?