1.9 KiB
1.9 KiB
title, category, tags, created
| title | category | tags | created | |||||
|---|---|---|---|---|---|---|---|---|
| 애플리케이션 안정성 및 로깅 (Error Boundary) | Software Architecture |
|
2026-04-20 |
Reliability_Safety_First (애플리케이션 안정성)
📌 한 줄 통찰 (The Karpathy Summary)
에러는 막는 것이 아니라 '우아하게 격리'하는 것이다. 컴포넌트 하나가 무너져도 전체 시스템은 안전하게 순항해야 한다.
📖 구조화된 지식 (Synthesized Content)
- Error Boundary (에러 바운더리):
- 리액트의
componentDidCatch생명 주기를 활용하여, 특정 하위 컴포넌트 트리의 런타임 에러를 포착하고 '대체 UI'를 보여주는 최후의 방어선이다. - 적용 전략: 전체 앱을 감싸는 전역 바운더리 외에도, 독립적으로 동작하는 위젯(예: 사이드바, 게시글 목록) 단위로 세밀하게 감싸는 것이 유리하다.
- 리액트의
- Observability (로깅 및 관측 가능성):
- Sentry 연동: 클라이언트 사이드에서 발생하는 에러를 스택 트레이스와 함께 실시간 수집하여, 사용자가 제보하기 전에 개발자가 먼저 인지하게 한다.
- Contextual Logging: 에러 발생 시 사용자의 브라우저 버전, 마지막 행동(Breadcrumbs)을 함께 기록하여 재현 가능성을 높인다.
- Graceful Fallback:
- 에러 발생 시 단순한 "에러 발생" 문구보다는 "일시적인 오류입니다. [다시 시도하기]" 버튼을 제공하여 사용자 경험 단절을 최소화한다.
⚠️ 모순 및 업데이트 (RL Update)
- 모든 곳에 에러 바운더리를 칠 필요는 없다. 데이터와 UI가 1:1로 매칭되는 구조라면 차라리 상위에서 에러를 처리하는 것이 논리적으로 명확할 수 있다.
🔗 지식 연결 (Graph)
- Related: System_Debugging_Protocol , React_Testing_Strategy
- Foundation: System_Protocol_Standard