React error boundary errors are not actually sent

[frehner]

Following the docs here https://github.com/airbrake/airbrake-js/tree/master/packages/browser/examples/react

I tried adding params to the notify call but they never showed up in Airbrake. I then discovered that they aren't sent in the network API call either. Further digging revealed the following:

1. window.onerror is being called before the React error boundary is being called
2. When the error is caught by the error boundary, it tries to notify again. However, there is a filter built in called makeDebounceFilter that prevents the React error boundary error from actually being sent

So, it appears that you either need to turn off window.onerror for React apps or find another way to report the errors caught by error boundaries?

[frehner]

Turns out that adding {ignoreWindowError: true} itself throws an error:

opt.instrumentation is undefined

on this line https://github.com/airbrake/airbrake-js/blob/master/packages/browser/src/notifier.ts#L50

looks like it supposed to be deprecated

[frehner]

ah. it appears that when react is in dev mode, it throws the error again (to go to window.onerror) and then catches the new one that it threw.

In production mode, react doesn't throw again so the boundary should be the only one that reports it.

source: react issues

[sgray]

Hi, @frehner. Were you able to get this issue sorted out? I'm unclear on whether or not there is a problem here.

[frehner]

I thought that had solved it, but from what I’ve been seeing it still appears that the window.onerror handler is catching the error most of the time, instead of the error boundary. Which means I’m missing out on the additional information the error boundary adds but the window handler doesn’t

[sgray]

the window.onerror handler is catching the error most of the time, instead of the error boundary

Can you please elaborate on this? I'm confused by the "most of the time" part. Under what circumstances does the error boundary catch the error instead of the window.onerror handler?

[frehner]

Looking through the airbrake error log for a project, it appears that none of the errors that I looked through were caught by the ErrorBoundary and instead all were caught by the window.onerror listener.

I'll try clean some stuff up with the ErrorBoundary, and possibly also add a console.error('in error boundary') in the render of the ErrorBoundary (which should then be added to the breadcrumbs of the error, right?) to try and debug if the ErrorBoundary is being rendered but not catching it, or if something else is at play here.

[sgray]

Sounds good. Yep, your console.error should be added to the Breadcrumbs. Let me know how it goes.

[frehner]

Things are looking good after cleaning some stuff up. I'll close this for now; thanks for your help.

[adititipnis]

@frehner can you elaborate on how did you fix this?

[r4geee]

@frehner can you elaborate on how did you fix this?

airbrake = new Notifier({
    environment,
    ignoreWindowError: true,
    instrumentation: {
      fetch: true,
      history: true,
      xhr: true,
    },
    projectId,
    projectKey,
  });

I had the same issue and this seems to have fixed it