ErrorBoundary.tsx

import React, {PureComponent} from 'react'

class Boundary extends PureComponent<any, any> {
  static getDerivedStateFromError(error: any) {
    return {hasError: true, error: error.toString()}
  }

  state = {
    hasError: false,
    error: '',
  }

  componentDidCatch(error: any, errorInfo: any) {
    console.error(error, errorInfo)
  }

  render() {
    const {hasError, error} = this.state
    const {children} = this.props
    if (hasError) {
      return (
        <div className="flex flex-1 flex-shrink-0 min-w-0">
          <h1
            data-testid="error-boundary-header"
            className="text-red-600 text-2xl"
          >
            <p>The error occured during component rendering</p>
            <p>{error}</p>
          </h1>
        </div>
      )
    }

    return children
  }
}

export default (C: any): any => (props: any) => (
  <Boundary>
    <C {...props} />
  </Boundary>
)