Angular: Sentry.init sends errors without captureException()

I have a project where I followed the Sentry angular documentation at: https://docs.sentry.io/platforms/javascript/angular/ And it worked fine and we were getting errors.

Seemed to work find for 7+ months. Soon as we started getting more users, we noticed that the number of errors in Sentry had increased a lot - a few 10s of thousands more than what we expected.

On debugging, I tried just disabling Sentry and was surprised to see quite a lot of errors still being reported!

I am using Angular 7 with "@sentry/browser": "^5.5.0",

The error is from a network call that is giving me a unauthorized because some users try to access something they are not supposed to. We catch these and show them a “Unauthorized” page appropriately. So, I don’t want Sentry to report these!

The way we set it up is:

import * as Sentry from '@sentry/browser';
import { ErrorHandler, Injectable } from '@angular/core';


@Injectable()
export class SentryErrorHandler implements ErrorHandler {
    constructor() {
        Sentry.init({dsn: '.....'});
    }
    handleError(error: Error) {
        if (error instanceof Error) {
            console.error(error);
            // Sentry.captureException(error); // <--- Even after commenting this out, Errors are reported.
        }
    }
}

I’m trying to figure out what is reporting these errors. I see the stacktrace to be from Angular’s zone modules. but I haven’t configured it to report anything there to the best of my knowledge.

[kamilogorek]

@Iar0 this is caused by Angular http client using setTimeout to detect http call progress. And when the call fails, it throws an exception inside that timeout that bubbles up higher to the main Angular’s error handler.

You can either disable this integration completely or if you still want to make sure that your click handlers and other timing APIs are wrapped correctly, filter this specific type of errors.

Sentry.init({
  integrations(integrations) {
    return integrations.filter(i => i.name !== "TryCatch");
  }
});

or

Sentry.init({
  beforeSend(event) {
    try {
      if (event.extra.__serialized__.error === "ProgressEvent") {
        return null;
      }
    } catch (o_O) {}

    return event;
  }
});

(this try/catch is only so you don’t have to write event.extra && event.extra.__serialized__ && event.extra.__serialized__.error === "ProgressEvent" as null coercion is still not available in JS 😛)

[jugglingthebits]

I am running into this issue, too. However, the second (more targeted) solution proposed by @kamilogorek doesn’t seem to work for me. The event passed into the given callback function doesn’t have the error property set to ProgressEvent. Instead, it is a plain js object with message set to whatever error message string the http call returned. The first solution (disabling the TryCatch integration) does work however. Could you describe what kind of events can be missed when the integration is disabled and all errors are caught through an Angular SentryErrorHandler?