이슈노트 #3: Axios의 timeout이 동작하지 않는 문제

axios를 통해 주기적으로 다른 API를 호출하는 시스템이 있었는데, 이게 가끔가다 요청을 하다 그대로 무한대기를 유발해서 시스템이 뻗는 문제가 있었다.

소스 자체는 별게 없었고

import axios from 'axios';
...

await axios.post('...', {
    timeout: 1000,
};

당연히 타임아웃 설정을 했었다.
타임아웃을 걸었으면 항상 무조건 저 시간 안에 성공을 하듬 실패를 하든 해야하는데, 그렇지 않은 것이다.

도대체 어디서 문제가 생겼나 했는데... 알고보니 axios 모듈 자체에 기능적 맹점이 있었다.
axios의 timeout은 실제로 커넥션을 생성하고, 요청을 보낸 상태에서 시간제한을 걸어줄 뿐이란 것이다.

이게 뭔 소리냐 하면, 애초에 커넥션이 이루어지지 않는다면 timeout이 동작하지 않는다는 것이다.

그래서 무조건적인 timeout 처리를 원한다면, axios의 cancelToken이란 기능을 통해서 명시적으로 중단을 시켜줘야 한다.

import axios from 'axios';
...

const source = axios.CancelToken.source();

// 10초가 지나면 무조건 axios 호출 중단
const timeout = setTimeout(() => {
	source.cancel()
}, 10000);

await axios.post('...', {
    cancelToken: source.token, 
    timeout: 1000,
};

// 성공하면 정리
clearTimeout(timeout)

이런건 자동으로 해줘야 할텐데, 모듈을 뭐 이모양으로 만들어뒀는지...
대충 만들어놓고 관리를 제대로 하지 않는 axios 개발진들의 과오가 큰 부분이라 하겠다.

참조
https://stackoverflow.com/questions/36690451/timeout-feature-in-the-axios-library-is-not-working