Using error boundary in React


I am working on a pretty big app where everything is wrapped under a global ErrorBoundary component.

In production mode, Sentry is initialized but no events are being shown at all in the BO even though I checked through Chrome dev tools that Sentry.withScope function is being executed.

Then I tried to wrap a specific component that was causing problems with a custom error boundary and with this approach, I was able to see events.

The thing is, both ways work in development mode but only the second way works in production. What should I do and what is the most recommended way to do this?
Adding the custom error boundary to each component is an option but I have hundreds of components.