React component render error inside ErrorBoundary captured twice

[bourds]

Do you want to request a feature or report a bug?

Report a bug

What is the current behavior?

I'm using [email protected] with [email protected]. When I wrap a component that throws an error during render in an ErrorBoundary component that invokes Raven.captureException() I'm actually getting duplicate errors logged (and not combined).

https://repl.it/repls/TotalHandmadeBrowser

My theory is that in react when a unit of work fails it tries to 'replayUnitOfWork' before giving up. This method uses a fake event which I think is triggering the raven-wrapped event listening mechanism which triggers the additional Raven.captureException() call. If I look at that second recorded error the 'mechanism' is as follows:

{
“mechanism”: {
“type”: “instrument”,
“data”: {
“target”: “EventTarget”,
“function”: “addEventListener”,
“handler”: “callCallback”
}
}
}

If I set a breakpoint inside Raven.captureException() I see it is getting invoked twice: once from my ErrorBoundary and once from inside Ravens function wrap for the above mechanism.

What is the expected behavior?
It should only log the captured error once.

I'm using version 3.26.3 of raven-js which I pulled down via NPM. I'm also using the on-premise version of sentry.io.

[kamilogorek]

Hey, it's caused by React bubbling up all the errors from ErrorBoundries to the main onerror handler in development mode. Once you build your app and use production code, it won't report 2 separate events.
Could you give it a try?

[bourds]

Right you are! Production mode eliminates the dupe.

I also found this interesting (and long) discussion on the topic.

facebook/react#10474

Thanks! I'll close.