Http request exceptions captured twice in Angular 9

[lujakob]

Package + Version

@sentry/[email protected]

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.

[HazAT]

Thank you for the 🥇 bug report.
We will take a look, what's going on.

[HazAT]

Just collecting my observations so far, if you disable the
TryCatch integration it's not sent twice

integrations(integrations) {
    return integrations.filter(
      integration => integration.name !== "TryCatch"
    );
  },

[HazAT]

@kamilogorek do you have a better idea? It seems that by wrapping XHR and/or all other methods this will be reported twice no matter what. We are also not marking the error so we would be able to filter it out in the Angular Error handler.

[josh-m-sharpe]

It seems like disabling the try/catch integration should be a non-option since that would obviously hide any errors that occur outside of Angular.

[josh-m-sharpe]

Can we get a sitrep here? I'm a paying customer and timely responses would be appreciated. Thanks!

[kamilogorek]

It seems like disabling the try/catch integration should be a non-option since that would obviously hide any errors that occur outside of Angular.

That is not accurate. See: #2169 (comment)

[kamilogorek]

Closing the issue as a part of large repository cleanup, due to it being inactive and/or outdated.
Please do not hesitate to ping me if it is still relevant, and I will happily reopen and work on it.
Cheers!

[lujakob]

@kamilogorek this issue is still relevant. For error in http requests, Sentry events are sent twice. You can test it running the stackblitz example i posted in the description, verifying the console.log output. I still think this is an important issue to not pollute the Sentry errors list. Thanks.

[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://[email protected]/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/[email protected]:

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

After update to @sentry/[email protected], using a correct error handler and using beforeSend filter for HttpErrorResponse:

Hope that helps!
Cheers

[lujakob]

@kamilogorek your second proposal using @sentry/angular seems to work. That's awesome, thanks very much. So for me the issue is resolved then.
(Not sure anymore, I guess we originally implemented using a custom error handler because at the time there was no @sentry/angular available.)

[kamilogorek]

(Not sure anymore, I guess we originally implemented using a custom error handler because at the time there was no @sentry/angular available.)

Correct, there was none back then :) Glad to hear that, thanks!

[pfei5]

@kamilogorek @sentry/angular continues to report duplicate events for Http errors: https://github.com/pfei5/sentry-duplicate-events.git
Your workaround works for me, i.e.:

Sentry.init({
  beforeSend(event, hint) {
    if (hint?.originalException instanceof HttpErrorResponse) {
      return null;
    }
    return event;
  }
});

It is however disconcerting that I need to research for hours to solve a known yet undocumented issue that's been in the wild for years.

related: #2744

[kamilogorek]

cc @Lms24