웹소켓 에러는 try-catch가 안되는 이유, 이벤트 기반 에러핸들링

WebSocket 연결 에러 처리에 대해서

상황

webrtc를 위한 웹 소켓 연결을 수립할 때 만약 시그널링 서버가 존재하지 않거나 특정한 이유로 인해 웹소켓 서버와의 연결이 실패하는 문제가 발생할 수 있다.

사용자 혹은 개발자에게 애플리케이션이 작동하지 않는 이유를 빠르게 알리기 위해서라도 웹 소켓 연결 실패에 대한 처리를 해줘야겠다고 판단했다.

오류를 잡는 대표적인 try-catch 구문

개발에서 대표적으로 오류를 캐치하는 구문인 try-catch 구문을 사용해서 socket 연결 오류를 잡아보려고 했다.

 

코드

useEffect(() => {
	try {
		// 소켓 연결
		const newSocket = io(
		  import.meta.env.VITE_SIGNALING_SERVER_URL || "<http://localhost:3000>"
		);
		
		setSocket(newSocket);
		
		// ref 값을 useEffect 안에서 캡처
		const connections = peerConnections;
		
		return () => {
		  Object.values(connections.current).forEach((pc) => {
		    // 모든 이벤트 리스너 제거
		    pc.ontrack = null;
		    pc.onicecandidate = null;
		    pc.oniceconnectionstatechange = null;
		    pc.onconnectionstatechange = null;
		    // 연결 종료
		    pc.close();
		  });
		  newSocket.close();
		};
	} catch (error) {
		console.error('시그널링 서버 연결 중 에러발생',error);
	}
}, []);

해당 코드에는 얼핏봐서는 error를 잘 처리하는 것처럼 보인다. 하지만 이 코드의 실행 결과는 try-catch가 없을 때와 똑같이 작동한다. 즉, 에러를 잡지 못했다.

결과

Socket 자체에 에러 핸들러를 추가하기

웹소켓은 기본적으로 이벤트 기반으로 동작한다고 한다. 그래서 아래 코드와 같이 이벤트 핸들러 형식으로 에러처리를 해야한다.

const socket = io('<http://localhost:3000>');
socket.on('connect_error', (e) => {});

개선한 코드

소켓에 on 메서드를 사용해서 이벤트의 종류와 핸들러를 전달해서 오류 처리를 할 수 있다. 아래 코드에서는 webRTC에서 시그널링 서버와의 웹 소켓 연결을 시도하고 실패했을 때 실행되는 핸들러를 바인딩해주었다.

useEffect(() => {
  // 소켓 연결
  const newSocket = io(
    import.meta.env.VITE_SIGNALING_SERVER_URL || "<http://localhost:3000>"
  );
  newSocket.on("connect_error", () => {
    console.error("시그널링 서버와의 연결에 실패했습니다.");
  });

  setSocket(newSocket);

  // ref 값을 useEffect 안에서 캡처
  const connections = peerConnections;

  return () => {
    Object.values(connections.current).forEach((pc) => {
      // 모든 이벤트 리스너 제거
      pc.ontrack = null;
      pc.onicecandidate = null;
      pc.oniceconnectionstatechange = null;
      pc.onconnectionstatechange = null;
      // 연결 종료
      pc.close();
    });
    newSocket.close();
  };
}, []);

결과

기존 try-catch에서 잡히지 않던 오류를 이벤트 핸들러 방식으로 하니 처리가 가능한 모습을 볼 수 있었다.

웹소켓 에러는 try-catch로 잡히지 않는 이유

• 웹소켓의 연결 동작 자체는 비동기 작업이다. 소켓 서버와의 연결 시도 후 에러는 코드 실행 시점 이후에 발생하기 때문에 효과가 없었다.
• 웹소켓은 이벤트 기반이기 때문에 이벤트 기반 에러 처리가 필요하다.
  • io 라이브러리에서는 on 함수에 이벤트 종류와 핸들러를 전달해서 처리할 수 있다