AsyncBoundary.tsx

import React, { Suspense } from "react";

interface Props {
  renderLoading?: () => React.ReactNode;
  renderError?: (error: Error) => React.ReactNode;
  children: React.ReactNode;
}

interface State {
  hasError: boolean;
  error: Error | null;
}

export class AsyncBoundary extends React.Component<Props, State> {
  readonly state: State = {
    hasError: false,
    error: null as Error | null,
  };

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

  static readonly defaultProps = {
    renderLoading() {
      return <div>Loading...</div>;
    },
    renderError(error: Error) {
      return (
        <div>
          <h1>エラーが発生しました</h1>
          <p>{error.message}</p>
        </div>
      );
    },
  };

  render() {
    return (
      this.state.hasError ? (
        this.props.renderError!(this.state.error!)
      ) : (
        <Suspense fallback={this.props.renderLoading!()}>
          {this.props.children}
        </Suspense>
      )
    );
  }
}