---
id: P-REINFORCE-AI-ERROR-BOUNDARY
category: "10_Wiki/💡 Topics/AI"
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`와 `getDerivedStateFromError` 생명주기 메서드를 가진 클래스 컴포넌트로 구현.
    - 에러 발생 시 상태를 업데이트하고 부모 쪽에서 에러 로그를 전송(Sentry 등).
- **Graceful Degradation**: 에러가 난 특정 위젯만 "데이터를 불러오지 못했습니다"라고 표시하고 나머지 앱 기능은 정상 유지.

## ⚠️ 모순 및 업데이트 (RL Update)
- 에러 바운더리는 렌더링 중 에러만 잡으며, '비동기 호출(API)'이나 '이벤트 핸들러' 내부의 에러는 잡지 못한다. 따라서 이들은 별도의 `try-catch`나 리액트 쿼리의 에러 핸들링과 병행해야 한다. 최신 패턴은 명령형(Imperative) 에러 처리와 선언적(Declarative) 바운더리를 조밀하게 결합하는 방향으로 간다.

## 🔗 지식 연결 (Graph)
- Related: Reliability-Patterns , React-Advanced-Patterns
- Analytics: Sentry-Error-Tracking