하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트입니다.
렌더링 도중인 Life Cycle에서 에러/예외가 발생한다면 애플리케이션 중단(모든 컴포넌트가 언마운트)된다. 이는 잘못된 정보를 사용자에게 보여주는 것보다 아무것도 안 보여주는 것이 더 나은 UX이기 때문이다.
이에 대한 해결책이자 방지책이 에러 바운더리이다.
해결 및 방지책(Error Boundary 적용)
1.
static getDerivedStateFromError와 componentDidCatch를 활용하여 에러를 처리할 수 있다.
•
클래스 컴포넌트에서만 구현됬기때문에 함수형 컴포넌트에 적용불가
•
현재는 Hook에 구현은 안되있지만, 업데이트나, 라이브러리로 지원 계획(공식 홈페이지)
2.
에러가 발생한다면, 위에 두 메서드를 구현한 가장 가까운 부모 컴포넌트를 찾는다.
•
static getDerivedStateFromError(error)
◦
에러 정보를 상태값에 저장해서 화면에 나타내는 용도로 사용된다.
•
componentDidCatch(error, info)
◦
getDerivedStateFromError과 동일하게 에러 정보를 화면에 나타내는 용도로 사용되나,
◦
주로 서버로 전송하는 용도로 사용된다.
3.
Root의 Error Boundary보다는 각 컴포넌트 그룹별로 구현한다
•
페이스북 메신저는 사이드바, 정보 패널, 대화기록에 대해 각각 별도로 구현
Error Boundary로 포착하지 못하는 에러
1.
이벤트 핸들러
•
사용자의 입력(즉, 비동기적인 작업)에 의해 생기는 오류는 생명주기와 연관이 없으므로 포착 불가
•
이벤트 핸들러 내부에서 try/catch구문을 통하여 error의 상태값을 업데이트하여 포착하게 한다.
2.
비동기적 코드(setTimeout or requestAnimationFrame의 콜백함수)
3.
서버사이드 렌더링
4.
Error Boundary를 구현한 컴포넌트에서 발생한 에러