How to get rid of AxiosError message in React?

Question

To check the behavior of ErrorBoundary, I used axios to send an api get request with the path parameter intentionally missing.

const Container = () => {
  return (
    <ErrorBoundary>
      <SusPense>
        <Component/>
      </SusPense>
    </ErrorBoundary>
  )
}

const Component = () => {
  const { data } = useTestReactQuery();
  return <div>{ data.name }</div>
}

const useTestReactQuery = () => {
  return useQuery({
    queryKey: ["something"],
    queryFn: () => axios.get("wrongURL"),
    suspesne: true,
  })
}

ErrorBoundary works fine but, I got this Error message. I understand that an error message is displayed in the browser console window, but the error message is still displayed on the screen as shown in the picture below, which is annoying me. I wish there was a way to get rid of it.

Error Msg Img

version info - react: v18.2.0, @tanstack/react-query: v4.29.3, axios: v1.3.4

I wish there was a way to get rid of this Error message.

score 0 · Answer 1 · answered Apr 30 '23 at 14:24

This entirely depends on your development environment. Errors thrown to Error Boundaries are treated by some dev envs (next, create-react-app) as "unhandled errors", so they additionally show an overlay so that devs don't miss them. In nextJs, there is no official way to turn it off I believe (see this discussion).

So, the overlays are only shown in dev mode and do not affect production code.

How to get rid of AxiosError message in React?

1 Answers1