React.Component API Error Boundaries

一、説明
エラー境界は、Reactのコンポーネントツリーであり、サブアセンブリツリー内の任意の位置でJavaScriptエラーをキャプチャすることができ、ログを打つことができ、またはエラーを表示するUIコンポーネントである.
エラー境界は、レンダリング中、ライフサイクル法、およびその下のツリー全体の構造関数においてエラーを捕捉することができる.
1つのクラスのコンポーネントが次のライフサイクル方法のいずれかまたは2つを定義している場合、このようなコンポーネントはエラー境界となります.

static get DerivedStation Froom()

component DidCatch()

上記のライフサイクル方法から未処理のjavascriptエラーをキャプチャし、エラーインターフェースを表示するUIを更新することができる.
エラー境界の使用にも一定の要求があります.

は、エラー境界のみを使用して異常を捕捉することができ、または異常から

を回復することができる.

は、エラー境界を制御フロー

に使用できない.
より多くのエラー境界の情報はエラー境界の文書を見ることができます.
https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html
エラー境界はまた、ツリーの中性子コンポーネントのエラーをキャプチャすることができます.エラー境界は、自身のエラーをキャプチャすることができません.
二、static get DerivedStteFrome()
この方法はサブアセンブリがエラーを投げた後に呼び出すことができ、受信したパラメータerrはサブアセンブリが投げたエラーであり、このコンポーネントでは、stateを更新して、コンポーネント全体のプレゼンテーションを更新するべきである.

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

注意get DerivedStation Frome()はレンダー段階で呼び出されたので、get DerivedStation Frome()で副作用が許されません.副作用用例を使うなら、componentDidCatch()が使えます.
三、component DidCatch()
componentDidCatch(error,info)というライフサイクルは、サブアセンブリがエラーを出した時に呼び出します.主に二つのパラメータを受信します.

error:投げたエラー情報

info:コンポーネントエラースタックを有するオブジェクトは、どのコンポーネントによって引き起こされたエラー情報を含んでいますか?
エラー境界の文書がもっと見られます.https://reactjs.org/docs/error-boundaries.html#component-stack-tracces
component DidCatch()はcomit段階で呼び出されたので、エラー情報を記録する必要がある場合などの副作用が可能です.

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

  static getDerivedStateFromError(error) {
    //       state
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    //   ："componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logComponentStackToMyService(info.componentStack);
  }
  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children; 
  }
}

注意エラーが発生した場合は、componentDidCatchを使ってエラー情報をレンダリングするUIをsetStateに呼び出すことができますが、このような方法は将来のバージョンでは利用できません.
間違った情報をレンダリングするUIは、get DerivedStation Froom()で処理しなければならない.