프론트에서 restapi를 이용한 http 통신을 할때 4xx번대 에러 또는 500번대에서 network 오류가 발생 했을때 크롬의 network 오류 표시

backend에서 일부러 403 에러를 던지게 구성 했을때

 

특정한 에러를 감지하기 위해 try catch 또는 .catch 등 특정 에러를 처리 하기 위해 제공 되는것들을 활용한다.
그렇게 했을때 console.log를 출력 해보면 Axios를 이용 했을때 catch 문이 실행 되면서 AxiosError를 출력 해볼 수 있고, 이것을 통해서 에러를 핸들링 하거나 처리 할 수 있다. 근데 나는 항상 프론트 개발을 하면서 크롬 브라우저에서 해당 빨간색 에러 network에러가 보이는게 너무 거슬렸다. 특히나 accessToken이 만료되어 refreshToken을 이용하여 다시 accessToken을 발급 하는 로직을 구성 했을때 뭐만 하면 401 에러가 크롬 브라우저 콘솔에 뜨는게 거슬렸다. 결론부터 말하자면 할 수 있는 모든 방법을 동원 했지만 해당 에러는 네트워크 에러로 나오는게 정상이다.

 

쓸데 없는걸로 삽질 한것 같지만, 항상 궁금했고, 또 안나오게 할 수 있는 방법을 찾아 보는게 재밋었다.

 

정 보기 싫으면 크롬 개발자도구 콘솔 옵션에서 Hide network 탭을 누르면 된다.