일정 시간 내에 서버로부터 응답이 오지 않으면 해당 요청을 취소할 수 있도록 axios를 이용하여 적용 후 테스트하기 위해 timeout 시간을 100ms로 설정하여 테스트 했습니다.
하지만 timeout error가 발생한 후 서버로부터 응답도 받았습니다.
서버가 정상적으로 응답할 경우 카카오톡으로 메시지를 받도록 되어 있는데 에러도 발생하고 카카오톡 메시지도 받는 결과를 얻었습니다.
본 내용에서는 axios timeout을 설정하여 timeout이 발생했음에도 서버로부터 응답을 받았는지에 대해 원인을 찾아보는 글입니다.
Axios timeout 설정 방법은 링크를 참고해주세요.
HTTP 통신
먼저, HTTP 통신은 TCP/IP를 통해 이루어집니다.
클라이언트와 서버는 TCP/IP 커넥션을 맺어 이를 통해 클라이언트와 서버 간의 데이터를 안전하게 송수신할 수 있습니다. 그 과정은 다음과 같습니다.
- 클라이언트가 서버의 IP와 Port를 이용하여 서버에 커넥션을 요청합니다.
- 서버는 클라이언트의 커넥션 요청을 수락하는 응답을 전송합니다.
- 커넥션이 수립되고, 클라이언트는 서버로 요청 데이터를 전송합니다.
- 서버는 클라이언트로부터 받은 요청 데이터에 대해 처리한 후 응답을 클라이언트로 전송합니다.
Connection timeout
클라이언트가 서버에 요청을 보내기 전, 먼저 클라이언트는 서버와 커넥션 맺어야 합니다.
Connection timeout은 클라이언트가 서버와 커넥션 자체가 일정 시간 내 성공하지 못하여 실패되었을 때 발생하는 timeout 입니다.
따라서, 일정 시간 내에 커넥션 수락이 오지 않으면 connection timeout이 발생합니다.
Read timeout
커넥션이 수립된 후 클라이언트는 서버로 요청 데이터를 전송합니다. 클라이언트와 서버가 커넥션에는 성공했으나 실제 데이터를 전송하는 과정이 길어지면서 일정 시간이 경과하게 되면 클라이언트는 커넥션을 끊었을 때 발생하는 timeout 입니다.
따라서, 서버로부터 일정 시간 내에 응답이 오지 않을 경우 read timeout이 발생합니다.
원인
Connection timeout을 기대하고, axios timeout을 설정했으나 axios는 read timeout으로 동작합니다.
일정 시간 내에 응답이 오지 않으면 timeout이 발생합니다.
Timeout을 5초로 설정했다고 가정합니다.
클라이언트의 요청을 서버에서 정상적으로 받았고, 서버는 6초에 응답을 보냈다면 클라이언트는 5초 내에 응답을 받지 못했으므로 timeout이 발생한 후 응답은 늦게 도착합니다.
그래서 저의 경우 timeout이 발생했음에도 카카오톡 메시지를 받을 수 있었습니다.
해결방법
Axios를 이용해서 해결하지는 못했습니다.
Axios timeout을 설정한 이유는 사용자가 요청에 대해 일정 시간 내에 응답을 받지 못했을 경우, 재시도할 수 있도록 안내를 하기 위함이었는데 timeout이 발생하고도 카카오톡 메시지를 받게 되어 axios timeout으로는 원하는 기능을 구현하기 힘들것이라 판단했습니다.
해당 요청을 하기 전에 health check를 하여 요청 시간과 응답 시간을 계산하여 5초가 초과할 경우, 요청을 하지 못하도록 하는 방법으로 구현했습니다.
⇒ 다른 분들의 도움을 받아 얻어낸 해결책입니다.. 힣
Java의 경우 각 timeout 설정을 할 수 있다는데 JavaScript는 언어의 한계인지 라이브러리의 한계인지 아직 방법을 찾지 못했습니다.
마무리
- 두 가지 timeout에 간단히 설명했지만 다른 종류의 timeout이 더 있습니다. 저는 이 두 가지의 차이로 인해 문제가 발생했기 때문에 다른 timeout에 대해 설명하지 않았습니다.
- 이번 일을 계기로 timeout의 종류가 다양함을 알게 되었고 네트워크 공부를 더 해봐야겠다는 생각이 들었습니다.(언제 할지는 모름..)
- 해당 내용에 대해 간단히 글을 작성하려고 구글링을 했는데 화수분처럼 나오는 자세한 내용들로 인해 깜짝 놀랬습니다.(그래서 더 공부를 해야겠다 싶은데.. 언제..?)
참고
