title: Handling errors in React (Error Boundary, React-Query, Axios Interceptor)
body: <p>I have a Create React App (that uses <code>react-router</code> v6) that is setup the following way to communicate with the API.</p>
  <p>At the top level - I wrapped my app in an <code>ErrorBoundary</code> (<code>Sentry.ErrorBoundary</code>).</p>
  <p>When fetching the API, the front-end calls a <code>useQuery</code> method from <code>react-query</code> (which uses an axios instance to fetch the requested API URL).</p>
  <p><em><strong>But how do I handle an error 404 or 500 from axios?</strong></em></p>
  <p>Currently the <code>ErrorBoundary</code> renders an <code>ErrorPage</code> that is blocking the UI. I'm trying to find a better way that don't block the UI.</p>
  <p>The way I see it, I can handle errors in the following way:</p>
  <ol>
  <li><p>using axios interceptor directly - but currently it's in a separate file and don't use useNavigate() of React Router - so either I use window to redirect to <code>/404</code> or <code>/500</code> or I wrap it inside a <code>React.Context</code> (itself wrapped in my React Router context) so that it can use <code>useNavigate()</code> inside of it from <code>react-router</code> to redirect to <code>/404</code> or <code>/500</code>.</p>
  </li>
  <li><p>using <code>onError</code> handler from react-query (directly inside my <code>QueryClient</code> config) that will be passed an <code>AxiosError</code> and redirect to <code>/404</code> or <code>/500</code> based on axios error response status</p>
  </li>
  <li><p>Using the error object that comes from <code>Sentry.ErrorBoundary</code> and render a different UI based on the error response status from axios</p>
  </li>
  </ol>
  <p>Solution 1 and 2 will leverage <code>useNavigate()</code> by <code>react-router</code> to redirect (or window.pathname) but I'm not satisfied with these... The solution 3 is more interesting for me (as I can have a 404 UI without changing pathname!) but the solution 3 does not handle the error (it'll be uncaught)...</p>
  <p>Any recommendation or better idea?</p>
  <p>I haven't found that much regarding handling errors in an SPA - thank you for your time :)</p>