react error boundary class

https://www.digitalocean.com/community/tutorials/react-error-boundaries

import React from 'react';

class MyErrorBoundaryExample extends React.Component {
  state = {
    error: null,
  };

  static getDerivedStateFromError(error) {
    // Update state so next render shows fallback UI.
    return { error: error };
  }

  componentDidCatch(error, info) {
    // Log the error to an error reporting service
    logErrorToExampleService(error, info);
  }

  render() {
    if (this.state.error) {
      // You can render any custom fallback UI
      return <p>Something broke</p>;
    }
    return this.props.children;
  }
}

export default MyErrorBoundaryExample;

• implementaion

MyErrorBoundaryExample 클래스는 React.Component를 상속받아 Error Boundary 컴포넌트를 구현합니다.

state에는 error라는 상태가 있습니다. 이 상태는 초기값으로 null을 가지며, 오류가 발생하면 해당 오류 객체로 업데이트됩니다

static getDerivedStateFromError 메소드는 Error Boundary에서 오류가 발생했을 때 호출되는 정적 메소드입니다. 이 메소드는 인자로 전달된 오류 객체를 사용하여 상태를 업데이트하고, 다음 렌더링에서 폴백 UI를 표시하도록 합니다.

componentDidCatch 메소드는 Error Boundary에서 오류가 발생했을 때 호출되는 메소드입니다. 이 메소드에서는 인자로 전달된 오류 객체와 정보를 사용하여 오류 보고 서비스에 로그를 남깁니다.

• how to use

다른 React 컴포넌트들을 이 컴포넌트로 감싸주면 됩니다. 그러면 이 컴포넌트가 자식 컴포넌트들에서 발생하는 오류를 가로채어 처리할 수 있습니다.

1. MyErrorBoundaryExample 컴포넌트를 사용하여 다른 컴포넌트들을 감싸줍니다.

import React from 'react';
import MyErrorBoundaryExample from './MyErrorBoundaryExample';

function App() {
  return (
    <MyErrorBoundaryExample>
      <h1>Hello, world!</h1>
    </MyErrorBoundaryExample>
  );
}

export default App;

2. 오류를 발생시키는 코드를 추가하여 Error Boundary가 작동하는지 확인합니다.

import React from 'react';
import MyErrorBoundaryExample from './MyErrorBoundaryExample';

function BuggyComponent() {
  throw new Error('Simulated error');
  return <h2>This will not be rendered</h2>;
}

function App() {
  return (
    <MyErrorBoundaryExample>
      <h1>Hello, world!</h1>
      <BuggyComponent />
    </MyErrorBoundaryExample>
  );
}

export default App;

위의 예제 코드에서 BuggyComponent는 렌더링될 때 오류를 발생시키는 컴포넌트입니다. 이 컴포넌트가 MyErrorBoundaryExample 컴포넌트로 감싸져 있기 때문에 오류가 발생하면 MyErrorBoundaryExample 컴포넌트가 이를 가로채어 처리하고 폴백 UI를 렌더링합니다.