[React] ErrorBoundary

ErrorBoundary는 React 16부터 도입된 개념으로, 컴포넌트 트리에서 발생하는 JavaScript 오류를 처리하기 위한 방법이다.


공식문서

• https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
• (Deprecated) https://legacy.reactjs.org/docs/error-boundaries.html
• (Live Demo) https://codepen.io/gaearon/pen/wqvxGa?editors=0010

1. ErrorBoundary의 기능

• 자식 컴포넌트 트리에서 발생한 렌더링 에러를 감지
• error 로깅
• 자식 컴포넌트 트리 대신 fallback 컴포넌트 렌더링

❗️렌더링이 깨지지 않는 에러라면 감지되지 않는다.

// 렌더링이 깨지지 않는 에러 - 버튼을 클릭하면 에러는 던져지지만 렌더링은 그대로임
const Hello = () => {
  return <button onClick={
    () => {throw new Error();
    }
  }>World</button>;
}
 
// 렌더링이 깨지는 에러 - 버튼을 클릭하면 Hello가 렌더링하는 것이 없음
const Hello = () => {
  const [error, setError] = useState(false);
 
  if(error)
    return <button onClick={
      () => setError(true)
	}>World</button>;
}

2. ErrorBoundary가 감지하지 않는 에러

• 이벤트 핸들러
• 비동기로 실행되는 코드 (Ex. setTimeout, requestAnimationFrame)
• SSR
• ErrorBoundary 자체에서 발생하는 에러
• 렌더링이 깨지지 않는 에러

3. ErrorBoundary 컴포넌트를 작성하는 방법

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
 
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
 
  componentDidCatch(error, errorInfo) {
    logErrorToMyService(error, errorInfo);
  }
 
  render() {
    if (this.state.hasError) {
      return this.props.fallback ? this.props.fallback : <h1>Something went wrong.</h1>;
    }
 
    return this.props.children;
  }
}

• getDerivedStateFromError: 오류가 발생했을 때 state를 업데이트 함
• componentDidCatch: error 정보를 사용하여 로그를 기록하거나 시스템에 오류 보고를 할 수 있음

4. react-error-boundary 라이브러리 사용하기

공식문서: https://github.com/bvaughn/react-error-boundary

React 공식 문서에서 안내된 기능과 거의 유사한 기능을 제공하면서, 함수형으로 ErrorBoundary를 사용할 수 있다는 장점이 있다.

4-1. 기본 사용법

"use client";
 
import { ErrorBoundary } from "react-error-boundary";
 
<ErrorBoundary fallback={<div>Something went wrong</div>}>
  <ExampleApplication />
</ErrorBoundary>

에러를 감지하고 싶은 컴포넌트를 ErrorBoundary 컴포넌트로 감싼다.

props

• fallback: default fallback 컴포넌트
• fallbackRender: 데이터에 따라 동적으로 생성한 fallback 컴포넌트를 리턴하는 함수
• FallbackComponent: 데이터에 따라 동적으로 생성되는 fallback 컴포넌트 (왜 얘만 대문자로 시작하지??)
• onError: 에러가 발생했을 때 실행되는 함수
• onReset: ErrorBoundary가 리셋될 때 호출되는 함수. fallback 내부에서 resetErrorBoundary가 실행될 때 실행된다.
• resetKeys: 특정 key 값을 가지고 있는 배열. key 값이 변경되면 ErrorBoundary를 리셋한다.

❓fallback, fallbackRender, FallbackComponent의 차이는?

• fallback: 단순히 ReactNode를 직접 제공
• fallbackRender: 함수 형태로 제공
• FallbackComponent: 컴포넌트 형태로 제공

fallbackRender와 FallbackComponent는 큰 차이는 없는 것 같다..

4-2. useErrorBoundary 훅 사용법

"use client";
 
import { useErrorBoundary } from "react-error-boundary";
 
function Example() {
  const { showBoundary } = useErrorBoundary();
 
  useEffect(() => {
    fetchGreeting(name).then(
      response => {
        // Set data in state and re-render
      },
      error => {
        // Show error boundary
        showBoundary(error);
      }
    );
  });
 
  // Render ...
}
 
function ErrorFallback({ error }) {
  const { resetBoundary } = useErrorBoundary();
 
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{ color: "red" }}>{error.message}</pre>
      <button onClick={resetBoundary}>Try again</button>
    </div>
  );
}

에러를 감지하고 싶은 컴포넌트 내부에서 명시적으로 에러를 처리한다.
이 방법을 사용하면 ErrorBoundary가 감지할 수 없는 에러들도 처리할 수 있다.

• showBoundary: 호출 시 가장 가까이 있는 ErrorBoundary를 사용한다.
• resetBoundary: 호출 시 가장 가까이 있는 ErrorBoundary를 리셋한다.

4-3. withErrorBoundary HOC 사용법

❓HOC란?
고차 컴포넌트(Higher-Order Components)는 컴포넌트를 취하여 새로운 컴포넌트를 반환하는 함수이다.

"use client";
 
import {withErrorBoundary} from 'react-error-boundary'
 
const ComponentWithErrorBoundary = withErrorBoundary(ExampleComponent, {
  fallback: <div>Something went wrong</div>,
  onError(error, info) {
    // Do something with the error
    // E.g. log to an error logging client here
  },
})

ComponentWithErrorBoundary는 ExampleComponent에 ErrorBoundary가 적용된 컴포넌트이다.