Customized useErrorBoundary errors

[AntoineDeloy]

Hello, I discovered that we can force reactQuery to propagate the errors to the nearest errorBoundary, which is working fine in my application ! But the problem is, we can't propagate custom errors with custom messages, or can we ? I can't seem to find an appropriate solution.
To be clear, I would like to send a custom message for 404 errors from specific queries, and custom error objects.

Can you help me ? Thanks in advance !

[TkDodo]

usually, your error would contain specifics about the error itself. For example, if you're using axios, you'll get an AxiosError, which contains the status code as well as the response body, so that you can display more information.

so, it really depends on how you're doing the actual data fetching. As far as react-query is concerned, whatever you throw will wind up in the error boundary. You can also roll your own à la:

const fetcchTodos = async () => {
  const response = fetch('/todos')
  if (response.status === 404) {
    throw new Error("Not found")
  }
  if (!response.ok) {
    throw new Error("Something went wrong")
  }
  return response.json()
}

useQuery('todos', fetchTodos, { useErrorBoundary: true })

[AntoineDeloy]

Thanks for your response ! But I thought error boundary can't catch error from queries ? So if I throw errors from queries it will not work, or am I wrong ? I, indeed, use axios to fetch my data.
But does the error boundary can receive a custom error object ? Right now, it receives an "Error" object, and so i don't know from which part of my application the error come.
Do you think I can send a custom object in my error throwing ?

[TkDodo]

That’s where useErrorBoundary comes in. If you set it t to true, RQ will re-throw the error in the next render cycle so that the ErrorBoundary will catch it. See: https://tkdodo.eu/blog/react-query-error-handling

[AntoineDeloy]

Okay, I understand, but my error boundary only receive a message, not a proper status so i can't really do nice error handling nor conditional rendering in my error boundary, there is no solution to send a custom error object to my error boundary ?

[TkDodo]

The error boundary will receive whatever you throw. If you throw a new Error, it will contain a .message. But you can throw anything in javascript. You can also create a sub-class of Error and throw that. This is not react-query specific.

[AntoineDeloy]

Sorry to seem like a newbie, but the errorBoundary component have a function "getDerivedStateFromError" which is mandatory and can only receive an "Error" type, i can't change it to "AxiosError" because otherwise all others errors (react errors in components rendering) will be unhandled, I think i'm missing something here but don't know what precisely..

[TkDodo]

error is typed as any in getDerivedStateFromError:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a0301652ad87f74874bb348acaca55b508071e54/types/react/index.d.ts#L657-L664

[AntoineDeloy]

Thanks ! I succeeded to do something nice thanks to your advice and it's working now !