React의 ErrorBoundary 사용 꿀팁!

ErrorBoundary를 React의 컴포넌트 중 하나이다. (라이브러리 X)

특정 범위의 컴포넌트를 렌더링할 때 발생하는 JavaScript 에러를 감지 및 처리하도록 돕는다.

이와 같은 역할을 할 수 있는데 자세한 사용 예시 등 꿀팁은 글을 통해서 확인해보자!

- 에러 기록

- 에러 영향 범위 축소

- 사용자에게 에러 화면 제공

 

1. ErrorBoundary의 에러 감지 범위

ErrorBoundary는 렌더링 시 발생하는 에러를 감지하며, Errorboundry 하위 컴포넌트 영역에서 발생한 에러를 감지한다.

아래 예시에서 두 children에서 발생한 에러들을 감지할 수 있다.

<ErrorBoundary>
   <children1>
      <children2 />
   </children1>
</ErrorBoundary>

 

2. ErrorBoundary의 에러 감지

[ErrorBoundary가 잡을 수 있는 JavaScript 관련 에러]

1. Error: 기본적인 에러 객체로, 일반적인 JavaScript 에러를 나타냄
2. SyntaxError: 문법적인 오류로, 코드가 잘못 작성되었을 때 발생
3. TypeError: 변수 또는 매개변수의 유형이 잘못되었을 때 발생
4. RangeError: 숫자나 객체의 크기가 유효한 범위를 벗어났을 때 발생 
5. ReferenceError: 정의되지 않은 변수를 참조하려고 할 때 발생
6. URIError: encodeURI() 또는 decodeURI()와 같은 URI를 다루는 함수에서 잘못된 URI를 처리하려고 할 때 발생
7. EvalError: eval() 함수 내에서 발생
8. InternalError: JavaScript 엔진 내부에서 발생하는 오류로, 주로 엔진의 오작동을 나타냄
9. AggregateError: 여러 개의 에러를 하나로 묶어 처리할 때 사용됨
10. PromiseRejectionEvent: 프로미스의 reject 상태에서 발생하는 이벤트 오류

[ErrorBoundary가 잡을 수 없는 에러]

• 이벤트 핸들러 (더 알아보기): try/catch를 통해 에러 감지 가능
• 비동기적 코드 (예: setTimeout 혹은 requestAnimationFrame 콜백)
• 서버 사이드 렌더링
• 자식에서가 아닌 Errorboundary 자체에서 발생하는 에러

 

3. ErrorBoundary의 다양한 prop

ErrorBoundary의 prop을 사용한 기능을 알아보자

1) fallbackComponent: 에러 컴포넌트를 대체하여 화면에 표시할 컴포넌트

   - 에러 컴포넌트를 화면에 그대로 렌더한다면 에러로 인해 프로젝트 전체가 죽어버리지만, 대체 컴포넌트를 표시하여 그 상황을 막을 수 있다.

2) onError: 에러가 발생했을 때 실행할 함수

    - onError를 사용하면 error와 info 인자를 사용할 수 있다.

   - 이를 통해 에러를 기록 가능하고, 에러에 따른 처리가 가능하다.

       - error: 에러의 세부 정보(메시지, 스택)

{
  message: "TypeError: Cannot read property 'x' of undefined",
  stack: "at MyComponent (MyComponent.js:10:15) ..."
}

     

       - info:  에러가 발생한 컴포넌트의 스택 정보

{
  componentStack: `
    in MyComponent (at App.js:5)
    in ErrorBoundary (at App.js:1)
  `
}

 

3) resetKeys: 해당 값이 변경되면 ErrorBoundary 초기화 및 에러 여부를 재검토한다. 즉, 에러가 해결되었음을 확인 가능하다.

   ex) - resetKeys에 사용자가 입력할 속성을 등록하면, 속성 값이 변경될 때마다 에러 발생 여부를 검토함

         - 속성 변경으로 인해 에러가 발생하면 fallbackComponent를 표시하고, 발생하지 않았다면 정상적인 컴포넌트 표시 가능

 

- 사용 예시

function myComponent(userProp) {
  const handleError = (error, info) => {
    console.log("Handled error:", error);
    console.log("Error info:", info);
  };
  
  const FallbackComponent = ({ error }) => (
    <div>
      <h1>Oops! Something went wrong.</h1>
      <p>{error.message}</p>
    </div>
  );

  return (
    <ErrorBoundary fallbackComponent={FallbackComponent} onError={handleError} resetKeys={[userProp]}>
      <MyComponent prop={userProp}/>
    </ErrorBoundary>
  );
}

 

4. Custom ErrorBoundary

ErrorBoundary는 생명주기 메서드 중 에러를 감지하는 getDerivedStateFromError(), componentDidCatch()를 사용하여 만들어졌다.

해당 코드를 제공 React 공식 문서에서 제공하고 있으니 참고하여 에러가 발생했을 때 어떤 반응을 할지 등을 커스텀 가능하다.

 

5. 마무리

사용자 입장: 서비스가 오류로 중단되었을 때 에러 화면을 제공받는다면, 사용자에게 서비스에 대한 신뢰도가 유지될 수 있다. 오류에 대한 정보가 제공되면, 사용자 경험이 향상된다.

개발자 입장: 모든 에러 케이스를 완벽하게 통제할 수 없는 상황에서 ErrorBoundary는 큰 도움이 된다. 이를 통해 다음과 같은 이점을 누릴 수 있다.

1. 자동 에러 수집: 에러가 발생했을 때, 원인과 함께 해당 정보를 자동으로 기록할 수 있다. 이를 통해 에러의 발생 원인을 분석하고 신속하게 대응할 수 있다.
2. 에러 영향 범위 축소: 컴포넌트 렌더링 중 에러가 발생하면 전체 서비스가 중단될 수 있다. 하지만 예상되는 범위에 ErrorBoundary를 설정하면, 해당 컴포넌트의 에러가 상위 컴포넌트에 영향을 미치지 않도록 할 수 있다.

ErrorBoundary를 활용하여 보다 안정적이고 신뢰할 수 있는 서비스를 구축해 나갑시다!

 

 

출처)  React ErrorBoundary 문서