How to show errors inside queryFn in production build?

[KonradLinkowski]

Errors thrown inside queryFn are not logged to the console in production.

useQuery({
    queryKey: ['appointment', appointmentId],
    queryFn: async () => {
      const { data } = await axios.get<Appointment>(
        `/some-url`
      );
      // shows up in the console in development mode just fine
      // but does not appear in production
      throw new Error('test');

      return data;
    },
  })

Is it by design?
Can it be turned on?

[TkDodo]

yes it's by design, see: https://tanstack.com/query/v4/docs/guides/migrating-to-react-query-4#logging-in-production

[KonradLinkowski]

Can this behaviour be changed in any way?

[TkDodo]

no, what do you need it for? Generally, the logger is seen more like a dev tool that gives warning and hints, similar to how react does it.

[KonradLinkowski]

I am validating the response inside the queryFn. It is very useful to see which field is missing in the production.
I guess I can move this logic to the hook that is wrapping useQuery, but it will be kind of a chore.
Thanks for the answer anyway :)

[TkDodo]

Well the query goes into error state anyways, so you would see it then?

What you can also do is setup a global onError handler in the queryCache and the logging there?

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: (error) => console.error(error)
  })
})

[KonradLinkowski]

I see only that the error happened, but I can't see what field exactly is wrong and I don't want to display this information to a non-tech user.
Adding console.error in every component that is receiving something from the backend isn't an option either.
But this custom onError handler seems like a solution :)