[NPM] Axios Error

어느 날 잘 되던 axios가 error를 catch 하지 못하고 그냥 디폴트 에러 메시지만 계속 보여주고 있는 걸 발견했습니다.

그건 axios가 업데이트되면서 생겼던 문제였는데 하나씩 오류 원인과 해결 방법을 정리해 보고자 포스팅을 합니다.

생각보다 간단한거긴해서 글 내용은 좀 짧겠네요.

 

이슈 발견

서버에서 에러코드를 받아 에러코드에 따라 다른 메시지를 화면에 뿌려야 하는데 계속 디폴트 에러메시지만 보여주고 있었어요.

콘솔에는 에러 메시지가 찍혔죠.

axios 에러

 

원인

내용인즉슨 endsWith라는 프로퍼티가 없다는거였어요.

axios 에러 디버깅

 

콜스택을 따라 들어가 보니 request 하고 에러가 났을 때 err객체를 받아서 stack을 호출하는 게 보였죠.

우리는 axios 인스턴스를 만들고 response intercepter에서 에러 객체의 response.data를 리젝에 담아서 리턴을 해주고 있었거든요.

그게 각 컴포넌트에서 에러 핸들링하기 편해서 그렇게 만들어 둔 거죠.

http.interceptors.response.use(
    (response) => {
        return response.data;
    },
    async (error) => {
        return Promise.reject(error.response.data);
    },
);

 

대충 간단히 요약하자면 이런 식으로 말이에요.

 

reject(error) 을 하면 사실 간단히 해결될 문제 같죠?! 근데 각 컴포넌트에서 API를 호출하고 catch 하는 구문에서 원래 리턴해 주던 error.response.data를 바라보고 있으니 reject(error)로 리턴하게 된다면 컴포넌트마다 모두 수정해야 하는 배보다 배꼽이 더 큰 상황이 되는 거죠.

 

아.. axios 잠수함 패치가 이렇게 골 때리게 오류를 뱉을 거라고는...

이건  v1.6.5를 쓰고 있다가 v1.6.6으로 패치되면서 오류가 났던 거였어요.

 

해결

의외로 해결책은 간단했어요. 역시 이미 이 상황을 겪었던 선배님들이 계셨기 때문인데 바로 이슈 리포트에 남겨서 axios에서 패치해 줬습니다. 

v1.6.7 버전으로 업데이트하면 기존 소스 건드리지 않고 바로 해결됩니다.

삽질 아닌 삽질이지만 기록차 남겨둬요.

 

참고

https://github.com/axios/axios/discussions/6201