🟡[P2] fix(frontend): generic ErrorBoundary defined but not mounted at app root — provider tree uncovered

[teddylee777]

컨텍스트 블록

Key	Value
Category	frontend
Checklist	ISS-UI-R8 — Missing React error boundaries for client-side crashes
Priority	P2 🟡
Scan Date	2026-04-16
Flagged By	@code-review

요약

• WHAT: frontend/src/shared/components/ErrorBoundary.tsx에 generic ErrorBoundary 정의되어 있으나 app/layout.tsx나 MainLayoutClient.tsx에서 마운트되지 않음. ThreadErrorBoundary만 thread view 내부에 사용
• WHY: StreamProvider, AssistantConfigProvider 등 client-side provider tree에서 발생하는 크래시가 캐치되지 않아 전체 페이지 white screen
• WHERE: frontend/src/shared/components/ErrorBoundary.tsx (정의), frontend/src/app/layout.tsx / frontend/src/shared/components/layout/MainLayoutClient.tsx (미사용)
• SEVERITY: MEDIUM — 부분 크래시 시 전체 화면 깨짐 (UX 저하), 기존 #61과 보완적

Evidence

#	File	Line	Finding	Flagged By	Confidence
1	frontend/src/shared/components/ErrorBoundary.tsx	—	generic ErrorBoundary 컴포넌트 정의	@code-review	High
2	frontend/src/app/layout.tsx	—	ErrorBoundary import / 사용 없음	@code-review	High
3	frontend/src/shared/components/layout/MainLayoutClient.tsx	—	ErrorBoundary import / 사용 없음	@code-review	High
4	frontend/src/features/chat/components/ThreadErrorBoundary.tsx	—	Thread 전용 ErrorBoundary, ThreadContent 내부에만 적용	@code-review	High

영향 분석

영향 범위

• 채팅 외 영역의 모든 client provider 크래시 (Settings, AssistantConfig, AuthProvider 등)
• StreamProvider 내부의 SSE 처리 에러
• 라우팅 전환 중 미캐치 에러

장애 시나리오

1. 사용자 로그인 후 chat 페이지 접근
2. AssistantConfigProvider가 잘못된 응답으로 throw
3. ThreadErrorBoundary 범위 외부이므로 전파 → React 16+ 기본 동작으로 unmount 후 white screen
4. 사용자는 새로고침 외 복구 불가

긴급도

• 기존 이슈 #61이 Next.js의 error.tsx 라우트 boundary를 다룸 — 이는 server/render 단계
• 본 이슈는 React component-tree 레벨의 client-side runtime 에러를 다룸 — 상보적, 둘 다 필요

제안 해결 방안

접근 방법

MainLayoutClient.tsx 또는 app/layout.tsx에서 provider tree 전체를 ErrorBoundary로 감싸기:

// frontend/src/shared/components/layout/MainLayoutClient.tsx
import { ErrorBoundary } from \"@/shared/components/ErrorBoundary\";

export function MainLayoutClient({ children }: Props) {
  return (
    <ErrorBoundary
      fallback={(error) => <RootErrorFallback error={error} />}
      onError={(error, info) => {
        console.error(\"[root] uncaught\", error, info);
        // 옵션: Sentry, LogRocket 등 외부 모니터링 전송
      }}
    >
      <SessionProvider>
        <AuthProvider>
          <SettingsProvider>
            <AssistantConfigProvider>
              {children}
            </AssistantConfigProvider>
          </SettingsProvider>
        </AuthProvider>
      </SessionProvider>
    </ErrorBoundary>
  );
}

RootErrorFallback은 "오류가 발생했습니다 / 새로고침" 메시지 + reload 버튼 + 에러 코드 표시.

대안

• Next.js error.tsx만 사용: 기존 🟠[P1] fix(frontend): no error.tsx error boundaries in any app route #61 해결되면 일부 커버되지만 client runtime 에러는 별개
• react-error-boundary 라이브러리 도입: 공식 가이드 잘 정리된 라이브러리, 자체 구현 대신 사용 가능

수용 기준

• MainLayoutClient.tsx에서 ErrorBoundary로 provider tree 감싸기
• 의도적 throw로 fallback UI 동작 검증
• 새로고침 버튼 작동 확인
• 테스트: cd frontend && pnpm test

참조

• 관련 파일: frontend/src/shared/components/ErrorBoundary.tsx, frontend/src/shared/components/layout/MainLayoutClient.tsx, frontend/src/app/layout.tsx
• Checklist 항목: ISS-UI-R8
• 관련 이슈: 🟠[P1] fix(frontend): no error.tsx error boundaries in any app route #61 (Next.js error.tsx route boundary — 보완적)

재현 방법

사전 조건

• dev 서버

단계

1. AssistantConfigProvider에 의도적 throw 삽입 (테스트용)
2. 페이지 로드
3. UI 응답 확인

기대 결과

ErrorBoundary fallback UI 표시

실제 결과

React unmount → white screen, console에 uncaught error

관련 코드 컨텍스트

File	Role	Relevance
frontend/src/shared/components/ErrorBoundary.tsx	Generic ErrorBoundary 컴포넌트	활용 대상
frontend/src/shared/components/layout/MainLayoutClient.tsx	Client root layout	수정 대상
frontend/src/features/chat/components/ThreadErrorBoundary.tsx	Thread 전용 boundary	참고 패턴

---

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