Error boundary란

과거에는 컴포넌트가 마운트되는 과정에서 그 내부에 자바스크립트의 코드들이 발생하는 에러를 핸들링할 방법이 존재하지 않았다. 따라서, 일부 UI의 자바스크립트가 에러를 발생시킬 경우 전체 어플리케이션이 중단되는 불편함이 존재하였다.

물론, 모든 컴포넌트에서 에러를 잡기 위해 try{}catch{} 를 사용하는 방법이 대안이 될 수는 있다.
하지만, 그것은 비효율적일 뿐더러 명령적인 프로그래밍이기 때문에 내부 코드가 점점 지저분해지는 단점이 존재한다.

이를 특정 바운더리를 설정하여 그 바운더리 내부에서 발생하는 모든 에러를 폴백 UI로 보여주는 방법을 도입한 것이 바로 React Error boundary 이다.

How to catch error

리엑트의 생명주기 메서드 중, _static getDerivedStateFromError()와, componentDidCatch()를 이용하여 UI를 만들어낸다고 기술되어 있다.

에러를 다루는 생명주기 함수를 가진 컴포넌트로 하위 컴포넌트를 감싸면 자식 컴포넌트가 발생시키는 에러이벤트 객체를 감지할 수 있다.

참고로, 이벤트 핸들러에 존재하는 함수 내부의 에러는 초기 랜더링 시점에서 포착될 필요가 없기 때문에 Error boundary에서 다뤄지지 않는다.(관심사의 밖이다) 만약 이벤트 핸들러의 에러 캐치가 필요하다면 try...catch 를 이용해야 한다.

refference

Error boundray