Http request exceptions captured twice in Angular 9

Package + Version

@sentry/browser@5.15.4

Angular Version 9

Description

Implementing Sentry with Angular following the docs captures two event for http requests that return a 401 error.

I implemented a minimal version in Stackblitz

In app.component.ts a request to a protected API throws a 401 error. The console logs show the beforeSend logs having two events captures, also visible in the networks tab.

Replace the sentry init config dsn to use a different Sentry Account to see the logs in sentry.

If Sentry.captureException is outcommented in app.module, still there is one event captured.

[kamilogorek]

@lujakob thanks for letting me know. Did some debugging around this issue and it appears that HttpClient (which is using XHR underneath) is interacting with Zone.js in a way, where request timeouts are triggered inside setTimeout loop. This means that whenever it throws, our setTimeout instrumentation will catch it, in addition to it being passed to Angular error handler.

There are 2 options. Disabling setTimeout instrumentation (not preferable):

import * as Sentry from '@sentry/angular';

Sentry.init({
  dsn: '...',
  integrations: [new Sentry.Integrations.TryCatch({
    setTimeout: false,
  })]
});

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent, HelloComponent ],
  providers: [{ provide: ErrorHandler, useValue: Sentry.createErrorHandler() }],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

or filtering out HttpErrorResponse and migrating to @sentry/angular that handler deals with this type of error, extracting correct data (preferable). Keep in mind that it requires Angular update to at least v9, as we need TS3.5+ for a correct compilation - https://update.angular.io/?v=8.0-9.0 :

import * as Sentry from '@sentry/angular';

Sentry.init({
  dsn: 'https://[e-mail]/1352844',
  beforeSend(event, hint) {
    // Handled by NgModule's ErrorHandler
    if (hint?.originalException instanceof HttpErrorResponse) {
      return null;
    }
    return event;
  }
});

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent, HelloComponent ],
  providers: [{ provide: ErrorHandler, useValue: Sentry.createErrorHandler() }],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Repro:

After update to @sentry/browser@6.8.0:

After update to @sentry/angular@6.8.0 and using a correct error handler (https://github.com/getsentry/sentry-javascript/tree/master/packages/angular#errorhandler):

After update to @sentry/angular@6.8.0, using a correct error handler and using beforeSend filter for HttpErrorResponse:

Hope that helps! Cheers

[kamilogorek]

cc @Lms24