最も単純な ErrorBoundary コンポーネントをカプセル化して、React 例外を処理する

ErrorBoundaryクラスはReact.Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具);
    this.state = {hasError: false };
  }
  静的 getDerivedStateFromError(エラー) {
    // 次のレンダリングで劣化した UI を表示できるように状態を更新します
    {hasError: true } を返します。
  }
  コンポーネントDidCatch(エラー、エラー情報) {
    // エラー ログをサーバーに報告することもできます logErrorToMyService(error, errorInfo);
  }
  与える（） {
    if (this.state.hasError) {
      // ダウングレードされた UI をカスタマイズしてレンダリングできます。 return <h1>Something went wrong.</h1>;
    }
    this.props.children を返します。
  }
}

<エラー境界>
  <マイウィジェット />
</エラー境界>

ErrorBoundaryクラスはReact.Componentを拡張します。
  状態 = { エラー: false };
  静的 getDerivedStateFromError(エラー) {
    {エラー}を返します。
  }
  コンポーネントDidCatch(エラー、エラー情報) {
    エラーが発生した場合
      // レポート ログは、親コンポーネントによって挿入された関数を通じて実行されます。this.props.onError(error, errorInfo.componentStack);
    }
  }
  与える（） {
    const { フォールバック、 FallbackComponent } = this.props;
    const { error } = this.state;
    if (エラー) {
      const fallbackProps = {エラー};
      //React要素かどうかを判定する
      React.isValidElement(フォールバック)の場合{
        フォールバックを返します。
      }
      //コンポーネントメソッド if (FallbackComponent) {
        <FallbackComponent {...fallbackProps} /> を返します。
      }
      throw new Error("ErrorBoundary コンポーネントをフォールバック UI に渡す必要があります");
    }
    this.props.children を返します。
  }
}

リセットエラー境界 = () => {
  this.props.onReset() の場合、 this.props.onReset() になります。
  this.setState({ エラー: false });
};

 与える（） {
    const { fallback、 FallbackComponent、 fallbackRender } = this.props;
    const { error } = this.state;
    if (エラー) {
      const フォールバックプロパティ = {
        エラー、
        リセットエラー境界: this.resetErrorBoundary、
      };
      ...
      fallbackRender の typeof === "function") の場合は fallbackRender(fallbackProps) を返します。
      ...
    }
    this.props.children を返します。
  }

「react」からReactをインポートします。
「./core」からDefaultErrorBoundaryをインポートします。
const catchreacterror = (境界 = DefaultErrorBoundary) => 内部コンポーネント => {
  プロパティを返す => (
    <境界 {...props}>
      <InnerComponent {...props} />
    </境界>
  );
};

//関数コンポーネント const fnCount1 = ({ count }) => {
  if (count == 3) throw new Error("count is three");
  <span>{count}</span> を返します。
};
//クラスコンポーネント class fnCount2 extends React.Component {
  与える（） {
    const { count } = this.props;
    if (count == 2) throw new Error("count is two");
    <span>{count}</span> を返します。
  }
}

const errorbackfn = ({ エラー: { メッセージ }, resetErrorBoundary }) => (
  <div>
    <p>問題が発生しました</p>
    <pre>{メッセージ}</pre>
    <button onClick={resetErrorBoundary}>もう一度お試しください</button>
  </div>
);

const errorbackcom = () => <h1>エラーが発生しました。元に戻すことはできません</h1>;

//例外を開始したコンポーネントをラップし、エラー編集を処理できる高階コンポーネントを返します。const SafeCount1 = catchreacterror()(fnCount1);
const SafeCount2 = catchreacterror()(fnCount2);
//メインコンポーネントをテストする const App = () => {
  定数[count, setCount] = useState(0);
  const ListenError = (arg, info) => console.log("Error: " + arg.message, info); //エラーが発生したときのコールバック const onReset = () => setCount(0); //リセットがクリックされたときのコールバック return (
    <div className="アプリ">
      <セクション>
        <button onClick={() => setCount(count => count + 1)}>+</button>
        <button onClick={() => setCount(count => count - 1)}>-</button>
      </セクション>
      <時間 />
      <div>
        クラスコンポーネント:
        <セーフカウント2
          カウント={count}
          フォールバックレンダリング={errorbackfn}
          onReset={onReset}
          onError={ListenError}
        />
      </div>
      <div>
        機能コンポーネント:
        <セーフカウント1
          カウント={count}
          フォールバックコンポーネント={errorbackcom}
          onError={ListenError}
        />
      </div>
    </div>
  );
};