Issue Check!
앱 Datadog에서 운영 서버에 https://[production-domain]:443/ws 에러가 단기간 100회 이상 추출되었습니다.
Trouble Shooting☀️
- Datadog에 /ws 에러 100회+ 감지
- devServer HMR이 ws:// 대신 https:// 로 요청
- 프록시 설정이 /ws 포함 전체 경로를 운영서버로 전달
- proxy ws: false 로 웹소켓 프록시 스킵
/ws 는 웹소켓 통신 path라고 백엔드 개발자분들께서 말씀해주셨고, 웹소켓은 웹소켓 프로토콜을 사용하기 때문에 https 프로토콜이 붙는 상황이 이해되지 않았습니다.
Safari를 확인해보니 ws://local.[dev-domain]:3000/ws 를 1초마다 요청하며 에러를 뱉고 있었습니다. 동료 개발자가 운영 도메인 URL이 전역변수로 어딘가에 선언되어서 URL을 만드는 곳이 있을 것이라는 의견을 주셨고, 코드를 찾아보니 딱 한 곳에 해당 URL을 전역변수로 사용하고 있었습니다.
getFrontDevUrl 함수를 따라가보니 개발 서버 도메인으로 들어오는 요청을 운영 서버 도메인으로 프록시 하는 로직을 찾을 수 있었습니다.
devServer 공식문서를 찾아보니 로컬에서 코드가 변경되었을 때 실시간으로 브라우저에 적용해주는 핫 모듈 리플레이스먼트 기능을 위해 웹소켓을 사용하고 있었습니다.
처음에는 /ws string을 제외하고 프록시를 보내는 방법으로 구현하였습니다.
용현님께서 같이 보시자고 제안을 주셔서 같이 다시한번 프로세스를 따라갔는데, devServer websocket protocol 이라고 구글링 하시고는 하나의 블로그를 보셨습니다. https://velog.io/@tw4204/React-개발환경에서의-CORS를-위한-proxy-설정
이 블로그에서는 현 상황과는 다르게 서버와의 양방향 통신을 위해 웹소켓을 사용하였고, 현 상황과 같이 프록시 도중 프로토콜이 https로 바뀌면서 websocket을 사용할 수 없게 되었고, ws: true 옵션을 통해 해결하려 하였지만 실패하였습니다.
용현님께서는 여기까지 읽어보시고는 ws: false 를 하면되지 않을까? 하시고는 적용하였는데 이슈가 해결이되었습니다…!
왜 ws: false 를 시도해보셨냐고 여쭤봤더니, 프록시 설정인데 ws를 false로 처리하면 웹소켓 요청은 프록시에서 패스하지 않을까 생각하셨다고 합니다…
웹소켓 주소가 https 프로토콜 주소로 만들어져서 에러로 추출된 것을 보고 https 프로토콜 주소가 전역으로 선언되어 어느 곳에서 /ws url을 만들 것이라 판단한 것
proxy에서 ws: false 를 하면 웹소켓은 프록시 과정 중에 스킵될 것이라 판단한 것
두가지는 별게 아니라고 생각이 들 수 있겠지만, 개발자로서 이 사고까지 넘어가는 것은 크나 큰 실력 차이라는 생각이 듭니다.
나는 내가 이미 겪어본 문제는 거의 까먹지 않아 다시 비슷한 상황이 재현되었을 때 빠르게 문제 해결을 할 수 있는 능력이 있습니다. 하지만, 겪어보지 않은 문제에 도달했을 때 머리가 멍해지고 다음 단계에 대한 갈피를 못잡는 경향이 있습니다.
위 두가지 사고를 통해 세 가지 action item을 시도해보고자 합니다.
- 의도하지 않은 데이터 값이 만들어진 경우, 해당 데이터를 전역적으로 관리하는 로직을 찾아봅시다.
- 해결해보지 않은 이슈가 있다면, chatGPT 보다는 영어로 구글링 합시다.
- 유명한 모듈일수록 사용자가 이해하기 쉽도록 구현되어있습니다. 무분별한 시도를 하지말고 상식 선에서 해당 옵션이 무슨 역할을 할지 고민 후 시도합시다.