React | ErrorBoundary

ErrorBoundary

오류 경계는 클라이언트에서의 오류 처리를 위한 방법이다
클라이언트에서 JavaSciprt 오류를 처리하여
애플리케이션의 다른 부분이 함께 멈추지 않도록 하는 우아한 방법이다
에러로 인해 페이지가 충돌하는 것을 방지하는 것 외에도 지정된 폴백 구성 요소를 제공하고
오류 정보를 기록할 수도 있다

Next.js 에 오류 경계를 사용하려면 ErrorBoundary 클래스 컴포넌트를 만들고
사용하고자 하는 부분에 래핑해야 한다

페이지 오류를 추적하는 hasError 의 값이 true 면 fallback 구성 요소를,
false 면 자식 요소를 렌더링 한다

Next.js 를 사용한다면 error 페이지를 통해 간편하게 페이지 오류에 대한 처리를 할 수 있지만
세밀한 컴포넌트 단위로 에러 처리를 하려면 여전히 ErrorBoundary 를 사용해야 한다

React 에서 사용한다면 react-error-boundary 라이브러리를 이용해 간편히 ErrorBoundary 를 사용할 수 있다
간편하고, 가볍고, 클래스 컴포넌트를 피할 수 있다

import React from "react";
/**
 * ErrorBoundary 컴포넌트의 프로퍼티를 정의합니다.
 * @interface ErrorBoundaryProps
 */
interface ErrorBoundaryProps {
  fallback: JSX.Element;
  children: JSX.Element;
}

/**
 * ErrorBoundary의 state 프로퍼티를 정의합니다.
 * @interface ErrorBoundaryState
 */
interface ErrorBoundaryState {
  hasError: boolean;
}

/**
 * 에러를 처리하고 대체 UI를 표시하는 React 컴포넌트입니다.
 * @class ErrorBoundary
 * @extends {React.Component<ErrorBoundaryProps, ErrorBoundaryState>}
 */
class ErrorBoundary extends React.Component<
  ErrorBoundaryProps,
  ErrorBoundaryState
> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
    console.error("Error caught by componentDidCatch:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

return (
	<ErrorBoundary fallback={<h1>에러 발생</h1>}>
    	<Component />
  	</ErrorBoundary>
)

https://velog.io/@shyunju7/ERROR-BOUNDARY-%EB%8B%A4%EB%A3%A8%EA%B8%B0ErrorBoundary-react-error-boundary

수정한 코드

import React from "react";

interface ErrorBoundaryProps {
  fallback: React.ReactNode;
  children: React.ReactNode;
}
interface ErrorBoundaryState {
  hasError: boolean;
}

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

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
    console.error("Error caught by componentDidCatch:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;