bulletproof-react icon indicating copy to clipboard operation
bulletproof-react copied to clipboard

React-query + axios errors trigger app crash with react-error-boundary

Open galih56 opened this issue 2 years ago • 1 comments

What if i don't use "useErrorBoundaries" in defaultQueryOptions? My app always crash on the first mount when calling useAuth. The query returns 401 on the first fetch and it throws an error and crash the app. I already have axios interceptors built as a component wrapper to catch the 401. That doesn't solve the problem either. So i turned off the "useErrorBoundaries" and problem solved. But i wonder what kind of disadvantage i get when i deactivate the useErrorBoundaries. As far as i know, ErrorBoundary component is supposed to handle rendering error. Do we need react-error-boundary to handle server state error? I could've just navigate the page to login page if the user is unauthenticated

Any another ideas to solve this issue?

image

authentication functions https://github.com/galih56/manpro-v2/blob/dev/resources/js/lib/authentication.tsx

Axios interceptor wrapper https://github.com/galih56/manpro-v2/blob/dev/resources/js/lib/axios.tsx

galih56 avatar Feb 12 '23 12:02 galih56