Error Handling

ErrorBoundary

：Reactではエラーをハンドリングするには、ErrorBoundaryクラス型コンポーネントを使用します。（関数型ではありません！）

　エラーが発生した時にstateを管理する関数をクラス型のErrorBoundaryが持っているためです。

　<ErrorBoundary>で囲んでいる子供コンポーネントでエラーが発生すると、ErrorBoundaryコンポーネントをお見せします。

　try - catchと同じだと考えて貰えば！！

<script type="text/babel">
      const rootElement = document.getElementById("root");

      // childでエラーが発生した時、エラーをハンドリング (catchと一緒)
      // クラス型(<-> 関数型)
      class ErrorBoundary extends React.Component {
        state = { error: null };
        // 에러가 났을 때의 state 관리
        static getDerivedStateFromError(error) {
          return { error };
        }

        // クラス型コンポーネントだけのrender()を持っている。
        render() {
          const { error } = this.state;
          if (error) {
            // fallback : エラーが発生した時に、出力するコンポーネントをfallbackに設定する。
            //return this.props.fallback;
            return <this.props.fallback error={error} />;
          }
          return this.props.children;
        }
      };
      
      const Child = () => {
        throw new Error("Something Wrong...");
        return <p>Child Component</p>;
      };

      const FallBack = ({ error }) => {
        alert(error.message);
        return <p>Threr is some Error...</p>;
      };
      
      // Childでエラーが発生した時、ErrorBoundaryコンポーネントが作成されます。
      const App = () => {
        return (
          <>
            <p>App</p>
            <ErrorBoundary fallback={FallBack}>
              <Child />
            </ErrorBoundary>
          </>
        );
      };

      ReactDOM.render(<App />, rootElement);
    </script>

 

 

 

      const App = () => {
        return (
          <>
            <p>App</p>
            <ErrorBoundary fallback={FallBack}>
              <Child />
            </ErrorBoundary>
          </>
        );
      };

⇨　エラーハンドリングErrorBoundaryの子のChildコンポーネントでエラーが発生すると、ErrorBoundaryが出力される。

　fallback propsはエラーが発生した時に、ErrorBoundaryコンポーネントに出力する内容！

 

const Child = () => {
     throw new Error("Something Wrong...");
     return <p>Child Component</p>;
};

const FallBack = ({ error }) => {
     alert(error.message);
     return <p>Threr is some Error...</p>;
};

⇨ Childでエラーを起こす。

ErrorBoundaryコンポーネントにfallback propsとしてFallback関数を渡す。

 

class ErrorBoundary extends React.Component {
     state = { error: null };
     // 에러가 났을 때의 state 관리
     static getDerivedStateFromError(error) {
       return { error };
　　　　}

     　// 클래스 컴포넌트는 렌더 함수를 따로 가지고 있다.
      render() {
      　　　const { error } = this.state;
      　　　if (error) {
      　　　// fallback : ErrorBoundary에서 에러가 발생 했을 경우, 보여줄 컴포넌트를 fallback에 설정한다
      　　　//return this.props.fallback;
      　　　return <this.props.fallback error={error} />;
    　　　}
    return this.props.children;
  }
}

⇨ getDerivedStateFromError(error)はstateを管理する内臓関数。childコンポーネントのnew Error(~)を受け取ります！

クラス型コンポーネントはrender()を持っており、Fallbackコンポーネントのerror propsにerrorを渡します！

 

ーthis.props.fallbackは以下ー

 

ƒ FallBack(_ref) {
  var error = _ref.error;
  alert(error.message);
  return React.createElement("p", null, "Threr is some Error...");
}