Skip to content

fix: 렌더 중 STOMP 채팅 재구독 방지 - #55

Merged
aryu1217 merged 3 commits into
mainfrom
dev
Aug 23, 2026
Merged

fix: 렌더 중 STOMP 채팅 재구독 방지#55
aryu1217 merged 3 commits into
mainfrom
dev

Conversation

@aryu1217

@aryu1217 aryu1217 commented Aug 23, 2026

Copy link
Copy Markdown
Member

변경 사항

  • 채팅 메시지·삭제·backfill callback을 최신 ref로 전달해 렌더 callback 변경이 STOMP 구독 effect를 다시 실행하지 않게 했습니다.
  • 채팅 topic과 사용자 오류 topic의 생명주기를 분리했습니다.
  • room token, room slug, 로그인 사용자 slug, 활성화 상태별 subscribe/unsubscribe 및 pending timer 정리를 회귀 테스트로 고정했습니다.
  • 원인과 재사용 가능한 websocket subscription 규칙을 incident 및 로컬 skill 문서에 기록했습니다.

원인

useRoomChat이 렌더마다 새 삭제 callback을 만들었고, 이 함수 identity가 message handler와 subscription effect dependency까지 전파됐습니다. 채팅 수신으로 상태가 갱신될 때 React effect cleanup이 같은 topic을 먼저 UNSUBSCRIBE한 뒤 다시 SUBSCRIBE하여 짧은 미구독 구간을 만들 수 있었습니다.

사용자 영향

  • 같은 room slug와 access token에서는 화면 렌더와 callback 교체가 채팅 구독을 끊지 않습니다.
  • callback 교체 이후 이벤트는 최신 handler로 전달됩니다.
  • 실제 room/token/사용자/활성화 identity가 바뀔 때만 필요한 구독과 이전 pending 상태를 정리합니다.

검증

  • npm run test -- src/features/room/chat/hooks/useRoomChatRealtime.test.tsx src/features/room/chat/hooks/useRoomChatHistory.test.tsx src/features/room/page/ui/RoomPlaybackScreen.test.tsx — 3 files / 23 tests passed
  • npm run lint — passed
  • npm run test — 149 files / 589 tests passed
  • npm run build — passed
  • git diff --check — passed
  • fresh read-only QA — pass

잔여 확인

운영 broker에서 UNSUBSCRIBE → SUBSCRIBE 반복이 사라졌는지와 누락 메시지 시각의 상관관계는 실제 세션 frame 관찰이 필요합니다. 실제 WebSocket transport close는 이번 동일 연결 내 subscription churn과 별도 경로입니다.

Summary by CodeRabbit

  • 개선 사항

    • 채팅 화면에서 콜백이나 렌더링 변경만으로 웹소켓 구독이 불필요하게 끊기고 다시 연결되는 현상을 개선했습니다.
    • 동일한 방과 인증 상태에서는 기존 연결을 유지하면서 최신 이벤트 처리가 적용됩니다.
    • 방, 사용자, 인증 정보가 변경되거나 채팅이 비활성화될 때 관련 구독과 대기 중인 메시지가 올바르게 정리됩니다.
    • 메시지 삭제 이벤트가 안정적으로 반영됩니다.
  • 테스트 및 문서

    • 다양한 구독 전환과 메시지 처리 시나리오에 대한 검증 및 운영 참고 문서를 추가했습니다.

@vercel

vercel Bot commented Aug 23, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
queuing Ready Ready Preview Aug 23, 2026 12:24am

@coderabbitai

coderabbitai Bot commented Aug 23, 2026

Copy link
Copy Markdown

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 9c3e5486-7240-4acb-97e7-88e3cb503847

📥 Commits

Reviewing files that changed from the base of the PR and between cf90bcc and ce2164d.

📒 Files selected for processing (10)
  • .agents/skills/queuing-qa-reviewer/SKILL.md
  • .agents/skills/queuing-ui-flow/SKILL.md
  • docs/agent-harness/incidents/2026-08-23-chat-callback-resubscription-gap.md
  • docs/exec-plans/active/2026-08-23-chat-subscription-stability/delivery-state.md
  • docs/exec-plans/active/2026-08-23-chat-subscription-stability/plan.md
  • docs/exec-plans/active/2026-08-23-chat-subscription-stability/qa-report.md
  • docs/exec-plans/active/README.md
  • src/features/room/chat/hooks/useRoomChat.ts
  • src/features/room/chat/hooks/useRoomChatRealtime.test.tsx
  • src/features/room/chat/hooks/useRoomChatRealtime.ts

📝 Walkthrough

Walkthrough

채팅 realtime 구독이 callback 변경만으로 재생성되지 않도록 수정했다. 최신 callback은 ref로 전달한다. 채팅·사용자 구독 lifecycle을 분리하고 room, token, 사용자, 활성화 상태 및 unmount별 정리 동작을 테스트했다.

Changes

채팅 구독 안정화

Layer / File(s) Summary
최신 콜백 라우팅
src/features/room/chat/hooks/useRoomChat.ts, src/features/room/chat/hooks/useRoomChatRealtime.ts
메시지 삭제 처리를 handleMessageDeleted로 분리했다. 최신 메시지, 삭제, backfill 및 사용자 이벤트 handler를 ref로 동기화한다.
구독 lifecycle 분리
src/features/room/chat/hooks/useRoomChatRealtime.ts
채팅 구독과 사용자 구독을 분리한다. room slug, access token, 사용자 slug, 활성화 상태 및 unmount 변경에 따라 구독과 pending 전송을 정리하거나 교체한다.
lifecycle 회귀 검증 및 운영 기록
src/features/room/chat/hooks/useRoomChatRealtime.test.tsx, .agents/skills/*, docs/agent-harness/incidents/*, docs/exec-plans/active/2026-08-23-chat-subscription-stability/*, docs/exec-plans/active/README.md
callback 변경, room·token·사용자 변경, 비활성화 및 unmount 동작을 검증한다. 구독 안정화 규칙, QA 결과, 실행 계획 및 잔여 모니터링 작업을 기록한다.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant useRoomChatRealtime
  participant STOMPBroker
  participant ChatCallback
  participant UserEventCallback

  useRoomChatRealtime->>STOMPBroker: 채팅 destination 구독
  STOMPBroker->>ChatCallback: 메시지·삭제 이벤트 전달
  ChatCallback->>useRoomChatRealtime: 최신 callback ref 호출
  useRoomChatRealtime->>STOMPBroker: 사용자 destination 구독
  STOMPBroker->>UserEventCallback: 사용자 room 이벤트 전달
  UserEventCallback->>useRoomChatRealtime: 최신 handler ref 호출
  useRoomChatRealtime->>STOMPBroker: 구독 식별자 변경 시 unsubscribe·resubscribe
Loading
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch dev

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@aryu1217
aryu1217 marked this pull request as ready for review August 23, 2026 00:26
@aryu1217
aryu1217 merged commit 5913eda into main Aug 23, 2026
3 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant