error.tsx

type ErrorBoundariesProps<TContext> =
  | {
      children: ReactNode;
      errorFallback: ReactNode | ((props: { error: Error }) => ReactNode);
      onError?: (error: Error, context: TContext) => void;
    }
  | {
      children: ReactNode;
      errorFallback:
        | ReactNode
        | ((props: TContext & { error: Error }) => ReactNode);
      context: TContext;
      onError?: (error: Error, context: TContext) => void;
    };

type ErrorBoundariesState =
  | { hasError: false }
  | { hasError: true; error: Error };

class ErrorBoundaries<TContext extends object> extends PureComponent<
  ErrorBoundariesProps<TContext>,
  ErrorBoundariesState
> {
  state: ErrorBoundariesState = { hasError: false };

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

  constructor(props: ErrorBoundariesProps<TContext>) {
    super(props);
  }

  render() {
    if (!this.state.hasError) {
      return this.props.children;
    }

    const { errorFallback: ErrorComponent } = this.props;

    if (typeof ErrorComponent === 'function') {
      const ctx = 'context' in this.props ? this.props.context : {};
      return <ErrorComponent {...(ctx as TContext)} error={this.state.error} />;
    }

    return ErrorComponent;
  }

  componentDidCatch(error: Error): void {
    const { onError } = this.props;
    if (onError) {
      const ctx =
        'context' in this.props ? this.props.context : ({} as TContext);
      onError(error, ctx);
    }
  }
}