I am trying to use the ErrorBoundry component of Sentry in my react project so that I can contain the errors reported to sentry just for my React app as it lives on many different websites and I don't want to pick up every JS error on every web page and website.

However, every error that is bubbling up from my react app into the ErrorBoundry produces a very obscure and uninformative error such as TypeError: Cannot read properties of undefined (reading 'componentStack')

The actual error without the ErrorBoundry component should be TypeError: Cannot read properties of undefined (reading '0')

It seems like the componentStack is overriding and preventing any useful reporting as per these two images with the ErrorBoundy disabled and enabled respectively. These images are taken from my dev environment and I am the CRACO version.

ErrorBoundry component added

ErrorBoundry component removed

Code references.

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

with a fallback component that looks like

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