[HandTris] #6. Failed to send message to ExecutorSubscribableChannel[clientInboundChannel] - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기)

message:Failed to send message to ExecutorSubscribableChannel[clientInboundChannel]

😇 결론

제목의 에러는 서버의 Interceptor에서 반환되는 에러이다. 나의 경우 '같은 token을 가진 사용자 간 socket 통신을 하고자' 하여 Interceptor에서 throwerror한 케이스였다. 한 사용자가 STOMP Message를 Publish하였으나 본인을 제외한 Subscriber가 없었기에 서버의 Interceptor에서 error로 throw된 것이다. 소켓 통신 중 위 에러를 겪는다면 서버 Interceptor에서 체크하는 무언가(!)를 확인해 보면 디버깅할 수 있을 것이다.

서버 로직

서버에서는 STOMP 메시지를 클라이언트가 Publishing하면 메시지 헤더의 token을 통해 어떤 유저가 보냈는지 식별한다. 이렇게 식별한 후에 Publisher 외 메시지를 수신할 Subscriber를 찾게 된다. 여기서 어떤 Subscriber도 없는 경우 .orElseThrow() 함수로 Exception발생한다.

...
private GameMemberEssentialDTO findOtherUser(Set<GameMemberEssentialDTO> cachedUser, String nickname) {
        return cachedUser.stream()
                .filter(dto -> !dto.nickname().equals(nickname))
                .findFirst()
                .orElseThrow(MemberNotFoundException::new);
    }

...

    if (destinationUrl.equals("/app/" + roomCode + "/tetris")) {
                // Sender가 아닌 유저 찾기
                GameMemberEssentialDTO otherUser = findOtherUser(cachedUser, nickname);
                accessor.setHeader("otherUser", otherUser.nickname());
        }
...

GameMemberEssentialDTO를 보면, nickname이 같은 경우 .filter() 하여 거른 후에 .findFirst()로 가장 앞에 있는 Subscriber를 찾게 된다. 못 찾으면 .orElseThrow()로 Exception 처리가 되는 것이다.

---

지금 생각해보면 매우 매우 자명한 에러이지만, 이 에러의 원인을 찾는 것이 그리 간단하지 않았다. 왜냐하면, 백엔드 파트에서 Interceptor를 추가하며 주소에 UUID를 포함시키는 작업이 동시에 이루어졌고, 프론트엔드 파트에서도 이 API에 맞춰 수정이 이루어졌기 때문이다. 변인이 많으니 어떤 게 문제일지 감이 안 왔다.

🐛 버그의 원인을 발견하기까지의 과정

0. 잘 되던 소켓 통신!

기존의 STOMP 메시지를 주고 받기 위해 Publishing, Subcribing 하는 주소에는 {roomCode}에 관한 정보가 없었다. 단순히 '/user/queue/tetris'와 같이 설정되어 있었다. 이에 다른 방에서 플레이하고 있더라도 Publishing 하는 정보를 받게 되는 문제가 있었다. 중간발표를 위해서 간단하게 구현하였던 것으로, 방별로 분리하여 Pub, Sub 되도록 수정 작업이 필요한 상황이었다.

• Interceptor가 없음
• Pub, Sub 주소에 {roomCode}가 포함되어 있지 않음
• arc 브라우저 스플릿 뷰로 테스트 중 정상 작동

1. 에러를 만나게 된 상황

방별로 Pub, Sub 분리를 위해 백엔드 단에서는 이 시점부터 Interceptor를 도입하였다. 프론트엔드 단에서는 이 시점부터 Server에게 받은 UUID를 클라이언트 session storage에 저장하여 STOMP 구독 주소에 {roomCode}를 추가하였다.

이렇게 세팅을 마친 후에 서버 통신 테스트 결과 'Failed to send message to ExecutorSubscribableChannel[clientInboundChannel]'를 만나게 되었다.

• Interceptor가 있음
• Pub, Sub 주소에 {roomCode}가 포함되어 있지 않음
• arc 브라우저 스플릿 뷰로 테스트 중 에러 발생

2. 엔드포인트, 메시지 형식 등 재확인

백엔드 파트에서는 Interceptor, Pub, Sub 주소 등을, 프론트엔드 파트에서는 roomCode, Pub, Sub 주소 등을 다시 재확인했다. 이때까지만 해도 token에서는 문제가 없을 것이라 생각했다. 왜냐하면 스플릿 뷰로 나누어 각 창에서 따로 로그인을 했기에 token 값이 다를 것이라 추측했기 때문이다.

3. 백엔드 파트와 함께 실행 환경을 통제하며 테스트 🤔

AS-IS	TO-BE
- 프론트엔드 클라이언트 + 배포 서버 - 백엔드 클라이언트 + 로컬 서버	- 프론트엔드 클라이언트 + 배포 서버 - 프론트엔드 클라이언트 + 로컬 서버

현안에서는 어떤 쪽이 문제인지 감이 안 잡히는 상황이라 클리언트 단을 통일하고 서버만 달리 연결하여 테스트해 보았다. 사실 백엔드의 배포 서버와 로컬 서버는 동일한 코드로 작동하기에 긴가민가 한 상태에서 확인하였다. 결과는 통신이 되었다.

4. 아크 브라우저를 의심

출처: Arc

백엔드 파트의 운영체제는 윈도우였는데, 나는 맥을 사용하고 있었다. 그래서 처음에는 운영체제 차인가 싶었다. 그러던 중 브라우저에 차이가 있는 것을 알게 되었다. 맥에서 크롬브라우저 + 시크릿 모드 브라우저로 테스트해보니 정상 통신하였다.

5. 브라우저별 Stomp Header를 파싱하는 것에 의한 차이?

ChatGPT

아크 브라우저에서 되지 않는 이유로 토큰에 의한 것이라는 판단이 바로 서지 않았다. 처음에는 Socket 통신 시 헤더를 파싱 하여 Server로 보낼 때 파싱 시 크롬 브라우저와 방식과 차이가 있어서 그런 것인 줄 알았다. ChatGPT에 물어봤을 때 그럴 수도 있다고 하였기 때문이다.

6. Fiddler

구체적으로 아크와 크롬이 어떻게 다르게 메시지를 보내는지 확인하고 싶었다. 네트워크 패킷 사이즈를 확인하기 위해서 이전에 설치해뒀던 Fiddler를 다시 사용해 보기로 했다. Fiddler에서 Proxy 모드로 Server로 보내는 모든 패킷을 확인할 수 있다.

확인 결과, Message Pack에는 차이가 없었다. Fiddler에서 새로운 에러 코드를 받을 수 있었다. 이미지 우측과 같이 arc 브라우저에서 통신한 결과에는 'Reason: ProtocolError (03-EA)' 에러를 Client로 보내는 것을 확인할 수 있었다.

7. 인터셉터

백엔드 파트에 이를 공유하자, Interceptor에서 걸리는 것일 수도 있겠다고 하였다. 심지어 Interceptor는 { roomCode }를 주소에 사용하며 추가한 것이기에 유력 후보였다. 여러 .throwError() 메써드 중 token을 활용하여 nickname을 찾아내는 코드를 보며 '설마 같은 플레이어로 인식했는가?' 하는 생각이 들었다.

이를 테스트해보기 위해 아크 브라우저의 스플릿 뷰 상태에서 각각의 창에서 로그인을 하고 token 값을 확인하였다.

위 이미지와 같이 동일한 token이 담겨 있음을 알 수 있음

결과는 정답이었다. Arc 브라우저에서 시크릿 브라우저를 켜서 테스트해보니 다른 token 값이 저장되며 정상적으로 소켓 통신이 되었다. 애꿎은 Arc 브라우저를 탓했던 것이다. Token이 같아서 발생하는 에러였는데.. 😅 프론트엔드에서는 중복 로그인했을 때에 대한 처리를 추가하기로 하였다.

8. 마무리

길고 긴 의심과 검증을 끝으로 명확하게 에러가 발생하는 원인을 알 수 있었다. 가설을 세우고, 이를 검증하고, 테스트하고, 또 발견한 사실에서 가설을 세우고, 반복.. 이런 과정 속에서 많이 찾아보고, 배우고, 깨닫는 것 같다. 뿌듯했다.