Estoy tratando de usar el componente ErrorBoundry de Sentry en mi proyecto de reacción para poder contener los errores informados a Sentry solo para mi aplicación React, ya que se encuentra en muchos sitios web diferentes y no quiero detectar cada error de JS en cada página web y sitio web.

Sin embargo, cada error que brota de mi aplicación de reacción en ErrorBoundry produce un error muy oscuro y poco informativo como TypeError: Cannot read properties of undefined (reading 'componentStack')

El error real sin el componente ErrorBoundry debería ser TypeError: Cannot read properties of undefined (reading '0')

Parece que el componentStack Stack está anulando y evitando cualquier informe útil según estas dos imágenes con ErrorBoundy deshabilitado y habilitado respectivamente. Estas imágenes están tomadas de mi entorno de desarrollo y soy la versión de CRACO.

Componente ErrorBoundry agregado

Componente ErrorBoundry eliminado

Código de referencias.

 ReactDOM.render( <Sentry.ErrorBoundary fallback={<ErrorFallback />}> <ApolloProvider client={client}> <App shop={shop} customiserId={customiserId} /> </ApolloProvider> </Sentry.ErrorBoundary>, customiser );

con un componente alternativo que parece

 const ErrorFallback = () => { return ( <div>An error has occurred</div> ) }