Antigravity Agent
1.8 KiB
1.8 KiB
id: P-Reinforce-AI-ERROR-BOUNDARY category: Unified confidence_score: 0.99 tags: [React, Patterns, Resilience, Reliability] last_reinforced: 2026-04-20
Error-Boundary-Pattern (에러 바운더리 패턴)
📌 한 줄 통찰 (The Karpathy Summary)
"하나의 컴포넌트가 무너진다고 앱 전체가 폭발하게 두지 마라." 하위 컴포넌트의 자바스크립트 에러를 감지하여 차단막을 치고, 대신 우아한 대체 화면(Fallback UI)을 보여주는 웹 프론트엔드의 방화벽이다.
📖 구조화된 지식 (Synthesized Content)
- The Core Problem: 리액트에서는 렌더링 중 발생한 하나의 에러가 처리되지 않으면 전체 컴포넌트 트리가 해제되어 화면이 하얗게 변함(White screen of death).
- Implementation:
componentDidCatch와getDerived[[State|State]]FromError생명주기 메서드를 가진 클래스 컴포넌트로 구현.- 에러 발생 시 상태를 업데이트하고 부모 쪽에서 에러 로그를 전송(Sentry 등).
- Graceful Degradation: 에러가 난 특정 위젯만 "데이터를 불러오지 못했습니다"라고 표시하고 나머지 앱 기능은 정상 유지.
⚠️ 모순 및 업데이트 (RL Update)
- 에러 바운더리는 렌더링 중 에러만 잡으며, '비동기 호출(API)'이나 '이벤트 핸들러' 내부의 에러는 잡지 못한다. 따라서 이들은 별도의
try-catch나 리액트 쿼리의 에러 핸들링과 병행해야 한다. 최신 패턴은 명령형(Imperative) 에러 처리와 선언적(Declarative) 바운더리를 조밀하게 결합하는 방향으로 간다.
🔗 지식 연결 (Graph)
- Related: Reliability-Patterns , React-Advanced-Patterns
- Analytics: Sentry-Error-Tracking