Sentry-javascript: Angular - errors are reported multiple times

[kamilchlebek]

Package + Version

• [x] @sentry/browser
• [x] @sentry/integrations

Version:

^5.19.1

Description

I'm having an issue with errors being reported multiple times. One error is correctly catched via angular ErrorHandler, second one is catched by captureException executed inside sentryWrapped function.

I tried proposed solution for angular, shown below:

// TryCatch has to be configured to disable XMLHttpRequest wrapping, as we are going to handle
// http module exceptions manually in Angular's ErrorHandler and we don't want it to capture the same error twice.
// Please note that TryCatch configuration requires at least @sentry/browser v5.16.0.
integrations: [new Sentry.Integrations.TryCatch({
    XMLHttpRequest: false,
})],

but it didn't help. To block additional error reports I had to set:

setTimeout: false

It's just a workaround that I'd rather not use, since errors may also occur outside angular.

I started debugging which setTimeout was the root cause of duplicated reports. I found that it's caused by hostReportError from rxjs ( https://github.com/ReactiveX/rxjs/blob/f5278aa89ea164caf5cf10e77d7bd00eff26fc0f/src/internal/util/hostReportError.ts#L6 )

Starting from rxjs v6.0.0 they changed the way of reporting the errors from sync to async mode.

error handling: Unhandled errors are no longer caught and rethrown, rather they are caught and scheduled to be thrown, which causes them to be reported to window.onerror or process.on('error'), depending on the environment.
_https://github.com/ReactiveX/rxjs/blob/master/CHANGELOG.md#breaking-changes-10_

As a part from investigation I tried to switch back to sync error reporting (using rxjs config.useDeprecatedSynchronousErrorHandling = true).

After this change, to stop duplicated error reports I had to set TryCatch options to eventTarget: false (setTimeout: false was no more needed).

Seems that Sentry is wrapping addEventListener for angular http client https://github.com/angular/angular/blob/master/packages/common/http/src/xhr.ts#L311. Setting XMLHttpRequest: false doesn't work.

As a temporary fix I'll probably check error report in beforeSend and skip unwanted ones, but could you fix it internally? Thanks :)

Related issues

https://github.com/getsentry/sentry-javascript/issues/2533
https://github.com/getsentry/sentry-javascript/issues/2532
https://github.com/getsentry/sentry-javascript/issues/2169

[kamilogorek]

I'm currently working on @sentry/angular specific package. I'll make sure to take this into account, thanks!

[kamilchlebek]

Great! Thank you. Looking forward to new package.

[PhilippMeissner]

I'm currently working on @sentry/angular specific package. I'll make sure to take this into account, thanks!

Sounds great! Let us know when we can be of any help :)

[szechyjs]

I'm currently working on @sentry/angular specific package. I'll make sure to take this into account, thanks!

Looking forward to this, would love for these Non-Error exception captured with keys: error, headers, message, name, ok errors to stop.