[express | axios] socket hang up

발단

  현재 내가 작업을 진행하는 방향은 프론트 > api서버 > db서버 로 Axios를 2번을 거치고 있다.

그런데 api서버까지는 정상적으로 요청이 들어오고 있는데 db서버로 접근할 때 Axios쪽에서 socket hang up 오류가 발생했다. 

 

똑같이 post로 요청을 보냈고, 같은 값을 본문에 포함해서 보냈는데 어떤 점이 문제였을까?

 

해결방법

  문제점을 다행히 금방 찾았다. 결론부터 말하면 axios에 보낸 본문의 크기가 너무 컸기 때문이다.

 

  요청한 본문이 달랐고, 처음 프론트에서 받아왔을 때 express의 request.body에 있는 값중 하나를 받아와서 DB에 저장하기 위해 다시 axios로 해당 값을 보내야 하는데 변수로 저장한 값이 가공한 값이 아니라 req.body 자체였다. 객체구조할당을 통해서 받았어야 했는데.. 너무 기초적인 실수를 했다.   

// data에는 req.body 요청본문 자체가 담긴다. 
const data = req.body
// data에는 req.body의 data 프로퍼티의 값이 담긴다.
const { data } = req.body

 

  그런데 여기서 의문이 있다. req.body 자체를 보냈다고 해도 프론트에서 요청한 값이 커봤자 얼마나 크다고? 

그와중에 프론트에서도 비슷한 실수를 했다. axios로 get을 해서 받아온 값에서 가공을 해서 나온 결과값에 post로 다시 서버로 전달하는 상황인데, get할 때 프로퍼티를 지정하지 않고 받아온 response 자체를 가지고 보내면서 axios의 응답값 전체를 서버로 요청본문에 넣어 보내면서 너무 큰 값이 들어온 것이다. 

 

코멘트

  처음에 갈피를 잘못 잡아서 express의 request에 user 등 커스텀해서 인터페이스와 타입을 지정하면서 잘못 확장해서 다른 값이 req.body로 딸려들어오는건지 디버깅도 해보고 했는데 먼저 내 실수를 캐치하고 이건 휴먼 이슈일 수 있겠다고....ㅋㅋ 직감했다. 프론트쪽 코드를 보고 바로 캐치해서 다행이다. 

  그리고 여태까지 해당 에러를 본 적이 없어서 바보같은 실수를 했지만 나름 좋은 경험을 한 것 같다.