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.

TkDodo · Accepted Answer · 2023-04-30 14:24:42Z

0

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.

answered Apr 30, 2023 at 14:24

TkDodo

30.4k5 gold badges85 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get rid of AxiosError message in React?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related