Angular default sentry configuration crashes app


#1

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


#2

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.


#3

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


#4

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,


#5

No luck with 4.6.1 and 4.5.3 as well.


#6

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


#7

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.


#8

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


#9

HazAT

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

Ian