Error Boundaries 👀

오늘은 Error Boundary라는 것에 대해 알아볼께요
공식문서 보다가 발견했어요 히히

📮 Error Boundary

: 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트

과거에는 컴포넌트 내부의 자바스크립트 에러를 정상적으로 처리할 수 있는 방법이 없었는데, 이제 에러 바운더리를 설정해주면 바운더리 내의 컴포넌트와 그 하위 컴포넌트에서 발생하는 에러를 감지해서 fallback UI를 띄어줄 수 있게 된것이다!!

클래스 컴포넌트만 사용이 가능하고 함수형에서도 react-error-boundary를 사용하면 에러 페이지를 보여줄 수 있다

모든 에러에서 사용이 가능한것은 아니다
예외사항들은 다음과 같다.

🚨 예외
1. 이벤트 핸들러
2. 비동기적 코드 (예: setTimeout 혹은 requestAnimationFrame 콜백)
3. 서버 사이드 렌더링
4. 자식에서가 아닌 에러 경계 자체에서 발생하는 에러

특히 4번째 예외를 주의해서 봐야한다.
Error boundary는 트리 내에서 자신보다 하위에 존재하는 컴포넌트에 대한 오류만을 감지해내므로 즉 , 자기 자신에 대한 오류는 감지할 수 없다는 것이다.

🍡 사용방법

생명주기 메서드인 static getDerivedStateFromError() 와 componentDidCatch() 중 하나 (혹은 둘 다)를 정의하면 클래스 컴포넌트 자체가 에러 경계가 된다.

1️⃣ 에러가 발생한 뒤에 폴백 UI를 렌더링할래
➡️ static getDerivedStateFromError()

2️⃣ 에러 정보 기록할래
➡️ componentDidCatch()

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 다음 렌더링에서 폴백 UI가 보이도록 상태를 업데이트 합니다.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 에러 리포팅 서비스에 에러를 기록할 수도 있습니다.
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 폴백 UI를 커스텀하여 렌더링할 수 있습니다.
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

그리고 일반컴포넌트와 이런식으로 사용한다

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

🍙 try/catch와 비교

try/catch 와 Error Boundary 모두 예외 상황을 관리하는 데 사용한다는 점에서 비슷하다.
둘의 차이는 어떤게 있는지 알아보자

1️⃣ try/catch

명령형 코드에서만 동작한다. 명령형 코드는 어떻게(How) 동작할지를 명확하게 지시하는 방식이다.

try {
  showButton();
} catch (error) {
  // ...
}

2️⃣ Error Boundary

그러나 리액트는 선언적이다.선언적 코드는 무엇(What)을 렌더링할지 선언하고, 어떻게(How) 렌더링될지는 React가 관리한다. 명령형 코드인 try/catch와 다르게 Error Boundary는 이러한 React의 선언적인 특성을 보존하여 동작한다

const App = () => (
  <div>
    <Button />
  </div>
);

✨ Reference

---

https://ko.legacy.reactjs.org/docs/error-boundaries.html