[FE] axios 오류처리

} else if (error.request) {
                    console.log('Error', error.request);
                    // 여기서 문제
                    alert('error request');

error.request에서 오류가 발생하는 문제가 생겼다.

axios 라이브러리 오류처리 방법은 아래와 같다.

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다.
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    }
    else if (error.request) {
      // 요청이 이루어 졌으나 응답을 받지 못했습니다.
      // `error.request`는 브라우저의 XMLHttpRequest 인스턴스 또는
      // Node.js의 http.ClientRequest 인스턴스입니다.
      console.log(error.request);
    }
    else {
      // 오류를 발생시킨 요청을 설정하는 중에 문제가 발생했습니다.
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

 

config 옵션 중에서는 vadidateStatus를 사용하면 사용자 정의 HTTP 상태 코드 오류범위를 정의할 수 있다. 

(사용해본적은 없음)

axios.get('/user/12345', {
  validateStatus: function (status) {
    // 상태 코드가 500 이상일 경우 거부. 나머지(500보다 작은)는 허용.
    return status < 500;
  }
})

 

아무튼 문제는 React.js로 하이브리드 개발 중인데, 웹에서 통신이 잘되는 것이

타블렛에서 error.request 케이스를 뱉어내고 있다는 것이다.

ex. 웹에서는 200

타블렛 앱은 firebase로 app distributuion을 통해서 배포하고 있는데, 디버깅을 어떻게 해야할지 모르겠다.

배포해보면서 메시지를 찾아가는 방법밖에 없는데,,

 

axios에서 error.request에 걸리는 경우는

1. 요청은 되었는데 응답을 받지 못한 경우이다.

 

확인해보니,

타블렛과 웹이 바라보는 서버 url이 각각 다른데 서버 명을 잘못입력함.

그리고 API 전송할 때 header authorization에 bear 블라블라salkdjasldkjakldjalkdjkl 값을 입력하는 것이있는데,

이게 계속 바껴서 하드코딩으로 했으면 안됐음.

 

타블렛으로 확인하면서 로컬 api로 보내니깐 당연히 응답이 안올 수 밖에 없음.

 

 

공식 가이드북 참고

https://xn--xy1bk56a.run/axios/guide/error-handling.html

오류 처리 | Axios 러닝 가이드