Common place to handle errors in React client

[strblr]

Hello,

What would be the easiest way to setup a global error handler on the client? (React + tanstack query)
I'd like to have a popup show up everytime either a query or a mutation fails. It's unclear where I should put this logic.

Going through the doc: https://orpc.unnoq.com/docs/tanstack-query/basic#error-handling
This mentions local error handling for specific mutations.

To have it globally for mutations, I can do:

export const queryClient = new QueryClient({
  defaultOptions: {
    mutations: {
      onError: error => {
        console.log("Got error", error);
      }
    }
  }
});

But for queries, there is no onError.
Maybe one idea would be to have the default fetch logic exported from orpc, so I can pass in a custom fetch to RPCLink and wrap the default one just to catch errors. Or an onError handler on RPCLink? Wdyt?

Any other idea?

Thank you!

[unnoq]

I think TanStack has a way to listen for query errors, though I'm not sure since I haven't used it in a while. But in oRPC, you can handle that using the interceptors option in RPCLink

[strblr]

Great, thanks!

[strblr]

For those finding this thread through search, the following works well:

const link = new RPCLink({
  url: "...",
  interceptors: [
    options => {
      return options.next().catch(error => {
        if (error instanceof ORPCError) {
          notifications.show({
            title: "Error",
            message: error.message,
            color: "red"
          });
        }
        throw error;
      });
    }
  ]
});