Sugeriría otro enfoque sobre esto, que es trabajar con un componente ErrorBoundary HO personalizado, como react doc ( https://reactjs.org/docs/error-boundaries.html ) y detectar el error en el componentDidCatch() función, en cambio.

De esta manera, puede probar más fácilmente su componente hoc.

El componente de límite de error será así:

 import * as Sentry from '@sentry/browser'; type State = { hasError?: boolean, eventId?: string, error: null | Error, errorInfo?: null | {componentStack: string}, }; type Props = { children: any, } class ErrorBoundary extends React.Component<Props, State> { constructor(props: Props) { super(props); this.state = { error: null, }; } componentDidCatch(error: Error, errorInfo: any) { const { children } = this.props; // Configure what data you want to update, whenever an error happens. // Here, i update the breadcrumbs Sentry.addBreadcrumb({ type: Sentry.Severity.Error, category: 'component', message: children.props.name || 'n/a', level: Sentry.Severity.Error, }); // Here, i set tag and some extra infos, plus the exception. Sentry.configureScope((scope: any) => { scope.setTag('component', children.props.name || 'n/a'); scope.setExtra('component info', error); scope.setExtras(errorInfo); Sentry.captureException(error, scope); this.setState({ error, }); }); } render() { const { error, } = this.state; const { children, } = this.props; // In case of an error, the fallback UI kicks in. if (error) { // custom fallback UI // We return an empty component with 'data-attr' // with the failing component name (for debug purposes) return ( <> <div data-attr={children.props.name} /> </> ); } return children; } } export default ErrorBoundary;

Después de lo anterior, puede usar errorboundary hoc así:

 <ErrorBoundary> <Mycomponent /> </ErrorBoundary>

Si ocurre un error en <Mycomponent /> , <ErrorBoundary /> se representará, con la interfaz de usuario que configuró

Puede probarlo mientras prueba sus componentes de descanso, como verificar si se ha renderizado. Espero que esto ayude.