그림으로 보는 Error Boundaries

| Error Boundary의 등장

JS component의 error는 React 상태 흐름을 방해하고 숨은 에러를 발생킨다. 

이런 오류로 인해 app 전체를 정지시켜선 안되므로 "error boundary"가 등장했다.

 

✨ Error bounaries는 자식 component tree 어디서에나 일어난 JS error 를 잡고, error를 loging하고 fallback UI를 보여준다.

 

 

 

다만 아래 error들은 catch 하지 않는다

• 이벤트 핸들러
• 비동기 code ( setTimeout ... )
• SSR (server side rendering)
• error boundary 자식이 뱉는 error

 

Error Boundary의 사용처와 Uncaught Errors

Error Boundaries는 JS의 caatch 처럼 동작하며, Class형 component만 error bounaries가 될 수 있다.

Error boundaries를 어디에 정의할 지는 상황에 따라 다른데, 

최상위 route Component에 공통으로 둘 수도 있고, 각 component별로 감싸서 에러가 난 대상만 보여줄 수 도 있다.

 

React 16에서는 Error boundary에서 잡히지 않은 에러가 발생하면 React component전체를 렌더링 하지 않는다.

잘못된 UI를 보여주는 것보다 보여주지  않는 것이 사용자 경험에 낫다 판단했기 때문이다.

 

 

React는 렌더링 되는동안에 모든 error를 개발 console에 표시하는데, 

정확히 component tree의 어띠서 error가 났는지 확인할 수 있다. 

error 제세지, JS stack, component stack trace , 파일명과 몇번째 라인인지 까지도!!

-->  component이름은 Function.name을 참고하므로 구버전에서는 대체 프로그램을 추가해야 함

 

try/catch는 어떨까?

try catch는  좋지만 명령형 코드에서 작성해야 한다.

React component는 선언적이며 특정 상황에 무엇이 렌더링되야 하는지 정확히 알아야 한다.

 

Error boundary는 React의 선언적 프로그래밍에 정확하게 동작한다.

예시로 setState에 의해 componentDidUpdate과정에서 error가 일어났다 하더라도, page단위에서 가장 근접한 error bondary를 호출한다.

 

Event Handler( 이벤트 핸들러) 는 ?

Error boundary는 이벤드 핸들러 내부 error를 잡지 않는다.

React는 이벤트 핸들러 내부의 error boundary가 필요하지 않은데, 이벤트 핸들러가 렌더링 동안에 일어나는  렌더링 혹은 생명주기 메서드가 아니기 때문이다.

-> event Handler error를 처리하기 위해선느 try/catch 사용이 필요하다.

 

 

https://kentcdodds.com/blog/use-react-error-boundary-to-handle-errors-in-react