문제 상황

Server-Sent Events(SSE) 구현 시 다음과 같은 문제가 발생했습니다:

1. 백엔드에서 전송된 SSE 메시지가 서버사이드에서만 확인 가능

1. 클라이언트 사이드에서 메시지 확인 불가
2. 클라이언트에서 로그를 통한 디버깅이 어려움

// 기존에 확인된 문제의 예시 로그
page.tsx:176 SSE 메시지 파싱 에러: SyntaxError: Unexpected token 'e', "event:Connect " is not valid JSON
page.tsx:176 SSE 메시지 파싱 에러: SyntaxError: Unexpected token 'C', "Connect to"... is not valid JSON

원인 분석

1. SSE 메시지 형식 불일치
   • 백엔드에서 보내는 메시지가 항상 JSON 형식이 아님
   • 연결 상태 메시지는 일반 텍스트 형식으로 전송됨
2. 메시지 파싱 전략 부재
   • 모든 메시지를 JSON으로 파싱하려고 시도
   • 다양한 메시지 형식에 대한 처리 로직 없음

해결 방안

메시지 파싱 함수 구현

function formatSSEMessage(message: string): string {
  // 빈 메시지 처리
  if (!message.trim()) return '';

  // 이미 SSE 형식인 경우 그대로 반환
  if (message.startsWith('data: ') || message.startsWith('event: ')) {
    return message + '\\\\n\\\\n';
  }

  // JSON 파싱 시도
  try {
    const parsed = JSON.parse(message);
    return `data: ${JSON.stringify(parsed)}\\\\n\\\\n`;
  } catch {
    // JSON이 아닌 일반 텍스트인 경우
    return `data: ${message}\\\\n\\\\n`;
  }
}

동작 방식

1. 메시지 검증
   • 빈 메시지 체크 및 처리
   • 이미 SSE 형식인 메시지 확인
2. 형식 변환
   • JSON 형식 메시지 파싱 및 재포맷
   • 일반 텍스트 메시지의 SSE 형식 변환
3. 에러 처리
   • JSON 파싱 실패 시 일반 텍스트로 처리
   • 모든 메시지 타입에 대한 안전한 처리 보장

개선 효과