리액트에서 @stomp/stompjs 라이브러리로 웹소켓을 구현하는 도중 개발자도구 콘솔에서 this.debug si not a function이라는 에러가 발생했다.

client.js:256 Uncaught (in promise) TypeError: this.debug is not a function

이 에러는 라이브러리 내부에서 debug 속성을 함수로 예상했지만 실제로는 함수가 아닌 다른 값이 들어가면 발생하는 에러이다.

Client 객체 생성 시 debug 속성을 undefined 또는 함수가 아닌 타입으로 주면 이런 에러가 발생할 수 있다.

나의 경우에는 undefined로 설정하여 해당 문제가 발생하게 되었다.

해결 방법

이전 코드

// STOMP 클라이언트 생성
const socket = new SockJS("[url]"); 
// config.ts에서 설정한 웹소켓 URL 사용
const client = new Client({
  webSocketFactory: () => socket,
  reconnectDelay: RECONNECT_DELAY,
  heartbeatIncoming: 10000,
  heartbeatOutgoing: 10000,
  debug: process.env.NODE_ENV !== 'production' ? 
  (msg) => console.log('STOMP 디버그: ', msg) : undefined,
});

원래 코드는 debug가 undefined 속성일 수도 있도록 설정했다. 하지만 stompjs는 해당 값을 함수로 기대하게 된다.

수정 코드

// STOMP 클라이언트 생성
const socket = new SockJS("[url]"); 
// config.ts에서 설정한 웹소켓 URL 사용
const client = new Client({
  webSocketFactory: () => socket,
  reconnectDelay: RECONNECT_DELAY,
  heartbeatIncoming: 10000,
  heartbeatOutgoing: 10000,
  debug: process.env.NODE_ENV !== 'production' 
    ? (msg) => console.log('STOMP 디버그: ', msg) 
    : () => {}, // 빈 함수라도 반드시 함수여야 함
});

production 환경에서도 debug는 함수여야 한다는 것을 () => {}으로 처리하여 문제를 해결했다.