과거에는 컴포넌트 내부 자바스크립트 에러가 React 내부 상태를 훼손하고
다음 렌더링에서 암호화 에러를 방출하곤 했다
애플리케이션 이전 단계의 에러로 인해 발생하지만
리액트는 컴포넌트 내에서 에러를 정상적으로 처리할 수 있는 방법을 제공하지 않았었다
에러 바운더리
UI 일부에 존재하는 에러가 전체 애플리케이션을 중단시키지 않도록
React 16 부터 에러 경계라는 개념이 도입되었다
에럭 경계는 하위 컴포넌트 트리 어디서든 자바스크립트 에러를 기록하고
망가진 컴포넌트 트리 대신 fallback UI 를 보여주는 React 컴포넌트다
에러 경계는 렌더링 도중 생명주기 메소드를 포함 그 아래 있는 전체 트리에서 에러를 잡아낸다
에러 바운더리가 잡지 않는 에러
- 이벤트 핸들러
- 비동기 코드
- 서버사이드 렌더링
- 에러 경계 자체에서 발생한 에러
생명주기 메소드인 static getDerivedStateFromError() 와
componentDidCatch() 중 하나 또는 모두 정의하면
클래스 컴포넌트 자체가 에러 경계가 된다
static getDerivedStateFromError() 는
에러가 발생한 뒤에 폴백 UI 를 렌더링하기 위해서 사용
componentDidCatch() 는 에러 정보를 기억하기 위해 사용
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: flase };
}
static getDerivedStateFromError(error) {
return { hasError: true }; // 다음 렌더링에서 fallback UI 를 상태 업데이트
}
componentDidCatch(error, errorInfo) {
logErrorToMyService(error, errorInfo); // 에러 리포팅 서비스에 에러 기록
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
}
return this.props.children;
}정의한 에러 바운더리를 일반 컴포넌트로 사용할 수 있다
<ErrorBoundary>
<Widget />
</ErrorBoundary>에러 경계는 자바스크립트 catch {} 구문과 유사하게 동작하지만
컴포넌트에 적용된다
또한 클래스 컴포넌트만 에러 경계가 될 수 있다
대부분의 경우 컴포넌트 한 번만 선언하여 애플리케이션 전체에 활용하려 한다
에러 경계는 트리 내 하위 컴포넌트 에러만을 포착
에러 경계 자체적으로는 에러를 포착할 수 없다
에러 경계가 에러메시지를 렌더링하는 데 실패하면 에러는 가장 가까운 에러 경계로 전파된다
에러 경계를 배치할 위치
에러 경계의 좀 더 세분화된 부분은 개발자가 전하는 것이다
서버사이드 프레임워크가 충돌을 해결하는 것과 같이
최상위 경로의 컴포넌트를 감싸 유저에게 에러 발생을 알릴 수 있다
또 에러 경계의 각 위젯을 에러 경계로 감싸
애플리케이션 나머지 부분이 충돌하지 않도록 보호할 수도 있다
포착되지 않는 에러에 대한 새로운 동작
React 16 부터는 에러 경계에서 포착되지 않은 에러로 인해
전체 React 컴포넌트 트리의 마운트가 해제된다
손상된 UI를 제거하는 것 보다 그대로 남겨두는 것이 더 위험하다
에러 경계를 추가함으로 문제 발생 시 더 나은 사용자 경험을 제공할 수 있다
페이스북 메신저는 사이드 바, 정보 패널, 대화 기록, 메시지 입력을
각각 별도의 에러 경계로 감싸두었다
이 중 하나의 컴포넌트에서 충돌이 발생하면 나머지 컴포넌트는 대화형으로 유지된다
예외 상황에 대해 학습하고 수정할 수 있도록 자바스크립트 에러 리포팅 서비스를 활용 or 직접 작성
컴포넌트 스택 추적
React 16은 애플리케이션이 실수로 에러를 삼킨 경우에도
개발 과정에서 렌더링하는 동안 발생한 모든 에러를 콘솔에 출력한다
에러 메시지 및 자바스크립트 스택과 함께 컴포넌트 스택 추적 또한 제공한다
정확히 트리의 어느 부분에 에러가 발생했는지 알 수 있게 됐다
컴포넌트 스택 추적 내에서 파일 이름과 줄 번호도 확인할 수 있다
-> CRA 프로젝트 내에서 기본적으로 동작
-> CRA 가 아니라면 플러그인을 Babel 설정으로 추가할 수 있다
개발 단계에서만 사용해야 한다
try / catch
try / catch 는 명령형 코드에서만 동작한다
리액트 컴포넌트는 선언적이며 무엇을 렌더링할지 구체화 한다
에러 경계는 선언적 특성을 보존하고 예상대로 동작한다
깊은 트리의 상태에서 발생한 에러도 가장 가까운 에러 경계에 바르게 전달된다
이벤트 핸들러
React 는 이벤트 핸들러의 에러를 해결하기 위해 에러 경계를 필요로 하지 않는다
이벤트 핸들러는 렌더링 중에 발생하지 않기 때문에 UI 렌더링에 영향을 주지 않는다
이벤트 핸들러의 경우는 try / catch 를 사용하면 된다
