[매일메일] Error Boundary란? (FE.250205)

Error Boundary

React 컴포넌트에서 발생하는 오류를 잡아내고, 전체 어플리케이션이 먹통 것을 방지하기 위한 컴포넌트

 

Error Boundary는 클래스형 컴포넌트에서만 사용할 수 있음 (함수 컴포넌트로 작성할 수 없음)

componentDidCatch, getDerivedStateFromError 두 가지 라이프 사이클 메서드 사용

 

Error Boundary의 필요성

React는 기본적으로 비동기 작업에서 발생하는 오류를 자동으로 처리하지 않음.

오류가 발생할 경우 흰 화면만 뜨거나, 사용자는 이해할 수 없는 화면이 뜰 수 있음.

어플리케이션의 신뢰도와 사용자 경험에 직결되는 굉장히 큰 문제임.

 

에러가 발생한 영역에서 대체 UI(Fallback UI)를 표시하고, 어플리케이션의 나머지 부분은 정상적으로 동작하도록 도움

(사용자는 어떤 문제 때문에 지금 화면이 표시되지 않는지 이해할 수 있음)

 

Error Boundary는 오류 발생 시 대체 UI 로직을 선언형으로 작성할 수 있음

'어떻게 해야할지' 세부적인 절차를 직접 작성하지 않아도 되고, '무엇을 해야 하는지' 정의해야 하는 방식

 

✅개발자가 정의하는 부분: 컴포넌트가 오류를 감지하면 특정 대체 UI를 보여준다

✅ 컴포넌트가 알아서 처리하는 부분: 오류 발생 시 실행되는 세부적인 절차

 

선언형 코드가 명령형 코드에 비해 직관적이고 간결해 가독성이 높아 유지보수에 도움이 됨

 

Error Boundary로 감싼 영역이 어떤 방식으로 에러를 처리할지 한 눈에 알 수 있음

비즈니스 로직과 에러 로직이 명확히 분리되어 코드의 복잡성이 낮아짐

 

Error Boundary 구현 예제

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

  static getDerivedStateFromError(error) {
    // state를 업데이트하여 다음 렌더링에 fallback UI가 표시되도록 합니다.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // 사용자 지정 fallback UI를 렌더링할 수 있습니다.
      return this.props.fallback;
    }

    return this.props.children;
  }
}

 

오류에 대한 응답으로 state를 업데이트함 (hasError: true)

사용자에게 오류 메시지를 표시함: getDerivedStateFromError

분석 서비스에 오류를 기록함: componentDidCatch

 

<ErrorBoundary fallback={<p>Something went wrong</p>}>
  <Profile />
</ErrorBoundary>

 

컴포넌트 트리 일부를 래핑함.

Profile 또는 하위 컴포넌트가 오류를 발생시키면 Error Boundary가 오류를 포착함.

 

 

 

---

출처

 

[1] 매일메일. 250205. Error Boundary가 무엇이며, 이를 사용하는 이유는 무엇인가요? 75번. https://maeil-mail.kr 

[2] React docs. Error Boundary. https://ko.react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary