React Error Boundaries and Handling (React 에러 경계 및 예외 처리)

📌 한 줄 통찰 (The Karpathy Summary)

"애플리케이션의 특정 부분에서 발생한 예외가 전체 시스템을 붕괴시키지 않도록 격리하고, 사용자에게는 우아한 폴백(Fallback) UI를 제공하여 서비스의 회복 탄력성을 확보하라" — 선언적 에러 처리를 통해 런타임 안정성을 극대화하는 React의 핵심 안전 장치.

추출된 패턴: "Graceful Degradation and Isolated Resilience" — 하위 컴포넌트 트리에서 발생한 에러를 포착하여 에러 로그를 기록하고, 깨진 컴포넌트 대신 미리 준비된 대체 UI를 렌더링하는 패턴.
2025년 기준 에러 관리 핵심 요소:
- Declarative Error Boundaries: 클래스 컴포넌트나 react-error-boundary 라이브러리를 사용하여 에러 발생 구역을 명확히 선언.
- Fallback UI Strategy: 스켈레톤 화면이나 "잠시 후 다시 시도해 주세요" 메시지 등 사용자 경험을 저해하지 않는 대체 화면 구성.
- Observability Integration: Sentry, LogRocket 등을 통해 에러의 맥락(Stack Trace, 사용자 세션)을 자동으로 수집 및 분석.
- Recovery Loops: 에러 발생 시 사용자가 직접 초기화(Reset)하거나 시스템이 자동 재시도하는 매커니즘 구축.
의의: 예측 불가능한 런타임 에러로부터 전체 앱의 화이트아웃(White-out) 현상을 방지하고 비즈니스 연속성을 보장함.

과거 데이터와의 충돌: 과거에는 try-catch를 남발하여 명령형으로 에러를 처리했으나, 현대 정책은 컴포넌트 레벨의 선언적 에러 경계(Error Boundary) 사용을 원칙으로 함. 또한 비동기 에러(API 호출 등)는 에러 경계에서 기본적으로 잡히지 않으므로, 전역 에러 핸들러나 별도의 상태 관리 정책이 병행되어야 함.
정책 변화: Antigravity 프로젝트는 모든 주요 도메인 엔티티(결제, 인증, 콘텐츠)를 독립된 에러 경계로 감싸는 'Fault-Tolerant UI' 아키텍처를 강제하며, 모든 치명적 에러는 0.5초 이내에 모니터링 시스템에 리포팅되어야 함.

React-Architecture, UX-Design-Principles, Sentry-LogRocket-Monitoring, Frontend-Performance-Optimization-Guide
Raw Source: 00_Raw/React Error Boundaries.md, 00_Raw/Error Handling in 2025.md