🟠[P1] fix(frontend): ConnectionList switch handler has unhandled async rejection

[teddylee777]

컨텍스트 블록

Key	Value
Category	frontend
Checklist	ISS-UI-R2 — Uncaught promise rejections in event handlers
Priority	P1 🟠
Scan Date	2026-04-16
Flagged By	@code-review

요약

• WHAT: handleSwitchConnection은 async 함수로서 onClick/onKeyDown에 바로 전달됨. 내부에서 호출하는 switchConnection()이 server action updateConnectionAction을 await하지만 try/catch 없음
• WHY: 네트워크 장애 또는 서버 액션 실패 시 promise rejection이 globalUnhandledRejection으로 빠짐. UI는 아무 피드백 없이 멈춘 듯 보이고, 사용자는 계속 클릭 시도하며 UX 악화
• WHERE: frontend/src/shared/components/settings/ConnectionList.tsx:106-121, :242 (핸들러 등록)
• SEVERITY: HIGH — 사용자가 장애를 인지하지 못하고 반복 클릭 → 데이터 불일치 가능

Evidence

#	File	Line	Finding	Flagged By	Confidence
1	frontend/src/shared/components/settings/ConnectionList.tsx	106-121	handleSwitchConnection = async (connection) => { await switchConnection(connection.id) } — try/catch 없음	@code-review	High
2	frontend/src/shared/components/settings/ConnectionList.tsx	242	onClick={() => handleSwitchConnection(connection)} — async 함수를 바로 핸들러로 전달, rejection 무시	@code-review	High
3	frontend/src/providers/AssistantConfig.tsx (참고)	—	유사 패턴 다른 곳에도 존재 — 프로젝트 전반 async 에러 핸들링 부족	@code-review	Medium

영향 분석

영향 범위

• 연결 전환 시도하는 모든 사용자
• LangGraph 서버 장애 / 네트워크 불안정 환경

장애 시나리오

1. 사용자가 Connection A에서 B로 전환 클릭
2. 네트워크 일시 장애로 updateConnectionAction throw
3. UI는 아무 표시 없이 기존 Connection A 상태 유지
4. 사용자가 B로 전환된 줄 알고 채팅 → 잘못된 assistant에 메시지 전송
5. 또는 사용자가 반복 클릭 → 여러 transition 레이스 컨디션

긴급도

• 네트워크 오류는 상시 발생 가능한 일반적 시나리오
• 사일런트 실패는 디버깅 어려움

제안 해결 방안

접근 방법

handleSwitchConnection에 try/catch + 사용자 피드백 추가:

const handleSwitchConnection = async (connection: Connection) => {
  setIsSwitching(connection.id);
  try {
    await switchConnection(connection.id);
    toast.success(\"Connection switched\");
  } catch (error) {
    console.error(\"[ConnectionList] switch failed\", error);
    toast.error(\"Failed to switch connection. Please try again.\");
  } finally {
    setIsSwitching(null);
  }
};

추가로 onClick 핸들러 내부에서 fire-and-forget을 명시적으로:

onClick={() => { void handleSwitchConnection(connection); }}

전 프로젝트 공통 패턴으로 useAsyncHandler 또는 safeAsync 유틸을 도입해 일관성 확보 고려.

대안

• window.onunhandledrejection 글로벌 처리: 최후의 보루지만 context 정보 부족
• sonner/react-hot-toast 같은 전역 에러 토스트: 이미 프로젝트에 toast 시스템이 있다면 활용

수용 기준

• handleSwitchConnection에 try/catch 추가
• 에러 시 사용자에게 toast 또는 inline 에러 표시
• isSwitching state로 버튼 disabled 처리 (중복 클릭 방지)
• 테스트: LangGraph 서버 중지 상태에서 전환 시도 → 에러 토스트 확인
• 테스트 커맨드: cd frontend && pnpm test

참조

• 관련 파일: frontend/src/shared/components/settings/ConnectionList.tsx
• Checklist 항목: ISS-UI-R2
• 관련 이슈: 없음

재현 방법

사전 조건

• dev 서버 실행, 연결 2개 이상 설정됨

단계

1. 네트워크 throttling을 "offline"으로 설정 (DevTools > Network)
2. 다른 연결로 전환 클릭
3. 응답 관찰

기대 결과

에러 토스트/메시지 표시 + 버튼 복구

실제 결과

UI 정지, 에러 메시지 없음, DevTools Console에 unhandled rejection

관련 코드 컨텍스트

File	Role	Relevance
frontend/src/shared/components/settings/ConnectionList.tsx	연결 관리 UI	수정 대상
frontend/src/app/actions.ts	updateConnectionAction server action	에러 throw 주체
frontend/src/shared/hooks/useToast.ts 또는 유사	toast 시스템	활용

---

Detected by oh-my-braincrew `omb:issue` scan
Category: frontend | Scan date: 2026-04-16
`omb-issue-scan category=frontend checklist=ISS-UI-R2`