반응 오류 경계

이 기사에서는 React 오류 경계를 사용하여 오류를 포착하는 방법을 설명하고 사용자에게 웹 사이트에서 무언가가 제대로 작동하지 않음을 알리는 추상적인 오류 페이지를 보여줍니다.

React는 본질적으로 오류를 어떻게 처리합니까?

렌더링 중에 javascript 오류가 발생하면 React는 이를 해결하고 복구하는 방법을 실제로 알 수 없습니다. React가 렌더링에서 발생하는 오류를 이해하기 위한 일반적인 청사진은 없습니다. 또한 오류가 발생하기 전에 안정적인 버전으로 되돌릴 수 없습니다. 결과적으로 React는 최후의 수단으로 모든 구성 요소를 마운트 해제합니다. 이러한 오류가 발생하면 아래와 같이 페이지가 완전히 공백이 되는 이유입니다.

이 구성 요소에서 이 오류를 고려하십시오.

import React from 'react'

const Home: React.FC = () => {
  throw new Error('Error happend!');
  return (
    <div>Home</div>
  )
}

export default Home

해당 오류의 결과는 다음과 같습니다.



전체 구성 요소 트리가 마운트 해제되어 최종 사용자에게 매우 논란이 될 수 있습니다. 기다려야 한다고 생각하거나 자신에게 문제가 있다고 생각할 수 있습니다.

모든 사용자가 웹 페이지를 검사하고 웹 응용 프로그램의 문제점을 찾을 수 있는 것은 아닙니다. 따라서 React는 오류 경계를 제공합니다.

반응 오류 경계

오류 경계는 구성 요소 트리의 모든 위치에서 javascript 오류를 기록하고 애플리케이션에 문제가 있음을 사용자에게 알리는 사용자 지정 폴백 UI를 제공하여 처리하는 React 구성 요소입니다.

오류 경계는 오류를 포착하는 데 도움이 되고 관련되지 않은 구성 요소의 마운트 해제를 방지합니다.

React 애플리케이션에서 오류 경계 사용

구성 요소를 만들고 그 안에 다음을 추가합니다.

import React from "react";
import ErrorPage from "../components/Error";


interface IErrorBoundryState {
    hasError: boolean;
}
interface IErrorBoundryProps {
    children: React.ReactNode;
}


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

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

    componentDidCatch(error: Error, info: any) {
        console.log('Error in component did Catch', error);
        console.log('any info', info);
    }
    render() {
        if (this.state.hasError) {
            return <ErrorPage />; // Fallback Customizable component 
        }
        return this.props.children;
    }
}


export default ErrorBoundary;

이제 남은 것은 오류를 포착하려는 구성 요소를 위의 구성 요소로 래핑하는 것입니다.
특정 구성 요소를 래핑하거나 더 일반적으로 기본 항목을 래핑할 수 있습니다.

import ErrorBoundary from './helpers/ErrorBoundry';

root.render(
  <React.StrictMode>
    <ErrorBoundary>
      <App />
    </ErrorBoundary>
  </React.StrictMode>
);

이제 이전에 발생한 이전 오류는 다음과 같이 이 오류 경계의 도움으로 포착됩니다.

결론

오류 경계는 오류를 처리하고 웹 응용 프로그램에서 오류가 발생할 때 전체 구성 요소의 충돌 및 마운트 해제를 방지하는 매우 중요한 개념입니다. 또한 빈 페이지를 표시하는 대신 최종 사용자에게 오류에 대해 알려주는 좋은 방법입니다.

React의 공식 문서에서 오류 경계에 대해 자세히 알아보세요.