overleaf/services/web/frontend/js/infrastructure/error-boundary.tsx

import { captureException } from './error-reporter'
import {
  withErrorBoundary as rebWithErrorBoundary,
  FallbackProps,
} from 'react-error-boundary'
import { ComponentType, ErrorInfo } from 'react'

function errorHandler(error: Error, errorInfo: ErrorInfo) {
  captureException(error, {
    extra: {
      componentStack: errorInfo.componentStack,
    },
    tags: {
      handler: 'react-error-boundary',
    },
  })
}

function DefaultFallbackComponent() {
  return <></>
}

function withErrorBoundary(
  WrappedComponent: ComponentType<any>,
  FallbackComponent?: ComponentType<FallbackProps>
) {
  return rebWithErrorBoundary(WrappedComponent, {
    onError: errorHandler,
    FallbackComponent: FallbackComponent || DefaultFallbackComponent,
  })
}

export default withErrorBoundary