Angular default sentry configuration crashes app

Hey guys,

I am using Angular: "@angular/core": "7.2.4", and sentry: "@sentry/browser": "4.6.3",.

With the following code my application correctly throws an error:

// import * as Sentry from '@sentry/browser';
//
// Sentry.init({
//   dsn: 'mydsn',
//   debug: true
// });

@Injectable()
export class SentryErrorHandler implements ErrorHandler {
  constructor() {}
  handleError(error) {
    throw error;
    // Sentry.captureException(error.originalError || error);
    // throw error;
  }
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // imports
  ],
  providers: [
    {provide: ErrorHandler, useClass: SentryErrorHandler},
  ],
  bootstrap: [AppComponent]
})

However, as soon as I uncomment sentry, my app just hangs on error, eg:

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

Sentry.init({
    dsn: 'mydsn',
    debug: true
});

@Injectable()
export class SentryErrorHandler implements ErrorHandler {
  constructor() {}
  handleError(error) {
    Sentry.captureException(error.originalError || error);
    throw error;
  }
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // imports
  ],
  providers: [
    // {provide: ErrorHandler, useClass: SentryErrorHandler},
  ],
  bootstrap: [AppComponent]
})

I have debug set to true and the console returns:

Sentry Logger [Log]: Integration installed: Dedupe
logger.js:30 Sentry Logger [Log]: Integration installed: InboundFilters
logger.js:30 Sentry Logger [Log]: Integration installed: FunctionToString
logger.js:30 Sentry Logger [Log]: Integration installed: ExtraErrorData
logger.js:30 Sentry Logger [Log]: Integration installed: TryCatch
logger.js:30 Sentry Logger [Log]: Integration installed: Breadcrumbs
logger.js:30 Sentry Logger [Log]: Integration installed: GlobalHandlers
logger.js:30 Sentry Logger [Log]: Integration installed: LinkedErrors
logger.js:30 Sentry Logger [Log]: Integration installed: UserAgent

In task manager on Google Chrome, CPU spikes and then ultimately the page crashes.

The error I am trying to test with is placing an arbitrary console.log(t); Where t is an undefined variable.

I am running this from localhost and can confirm I have allowed all traffic in the sentry project settings and can also confirm that the DSN is for the correct account.

Any help would be appreciated.

Thanks,

Ian

Thanks for the detailed report.

I have a repro case for this online: https://codesandbox.io/s/jpm71lq17w

I can confirm the CPU spikes but the page doesn’t crash.
We will investigate what’s going on.

Can you try to use version 4.6.2? (we may have introduced this in 4.6.3)

Hi HazAT

I tried with 4.6.2 and still get the same issue.

The error is never thrown.

This time debugger “Paused before out of memory crash” on line 194 of @sentry/utils/object.js

Cheers,

No luck with 4.6.1 and 4.5.3 as well.

Ok, thats odd. Can you produce this also on the link I sent your (codesandbox)?

HI HazAT,

I haven’t been able to reproduce the error on that sandbox, but I have narrowed down the issue if it helps, I am going to continue looking further, but it seems like it hits an infinite recursive loop inside ExtraErrorData.prototype.enhanceEventWithErrorData on the line:

var normalizedErrorData = object_1.safeNormalize(errorData);

Eventually calls:

decycle

Putting a breakpoint inside decycle just never ends.

Will keep you posted with any updates.

Hey, can you please upgrade to 4.6.4 we changed the internals of serialize and it should work correctly now.

HazAT

It now works like a charm! Thank you so much for being so quick on fixing this issue.

Ian