Search code examples
javascriptangularsentryraven

Raven Sentry not working in latest Angular 4

I am creating an app using Angular 4 and I am using Sentry as a remote logging platform.

The problem is that today I decided to update my packages to their latest versions and now the Sentry is crashing my entire application.

Here is my code:

Raven.config(environment.ravenUrl).install();

export class RavenErrorHandler implements ErrorHandler {
  handleError(err: any): void {
    Raven.captureException(err);
  }
}

@NgModule({
  declarations: [
  // My components
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpModule,
    AppRoutingModule,
    NgbModule.forRoot(),
    StoreModule.forRoot({
      orders: ordersReducer,
      login: loginReducer,
      routerReducer: routerReducer
    }),
    StoreRouterConnectingModule,
    EffectsModule.forRoot([
      OrderEffect,
      LoginEffect
    ]),
    !environment.production ? StoreDevtoolsModule.instrument() : [],
    PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG)
  ],
  providers: [
    { provide: ErrorHandler, useClass: RavenErrorHandler }
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

As you can see I just followed the Sentry documentation on how to install it on Angular.

I've done some checking in the code and I saw that Raven.config(environment.ravenUrl).install(); if I remove this call the error goes away, but I don't want to do this.

On Google Chrome the error is this:

zone.js:195 Uncaught RangeError: Maximum call stack size exceeded
    at http://localhost:4200/polyfills.bundle.js:5303:31
    at XMLHttpRequest.proto.(anonymous function) (http://localhost:4200/polyfills.bundle.js:3819:24)
    at XMLHttpRequest.open (http://localhost:4200/vendor.bundle.js:17409:37)
    at Raven._makeRequest (http://localhost:4200/vendor.bundle.js:18090:17)
    at Raven._sendProcessedPayload (http://localhost:4200/vendor.bundle.js:18014:56)
    at Raven._send (http://localhost:4200/vendor.bundle.js:17956:22)
    at Raven._processException (http://localhost:4200/vendor.bundle.js:17730:14)
    at Raven._handleStackInfo (http://localhost:4200/vendor.bundle.js:17636:14)
    at Raven.captureException (http://localhost:4200/vendor.bundle.js:16774:18)
    at XMLHttpRequest.wrapped (http://localhost:4200/vendor.bundle.js:16710:22)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:2970:31)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.bundle.js:2737:47)
    at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.bundle.js:3044:34)
    at invokeTask (http://localhost:4200/polyfills.bundle.js:3972:14)
    at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.bundle.js:3990:17)
    at http://localhost:4200/polyfills.bundle.js:5303:31
    at XMLHttpRequest.proto.(anonymous function) (http://localhost:4200/polyfills.bundle.js:3819:24)
    at XMLHttpRequest.open (http://localhost:4200/vendor.bundle.js:17409:37)
    at Raven._makeRequest (http://localhost:4200/vendor.bundle.js:18090:17)
    at Raven._sendProcessedPayload (http://localhost:4200/vendor.bundle.js:18014:56)
    at Raven._send (http://localhost:4200/vendor.bundle.js:17956:22)
    at Raven._processException (http://localhost:4200/vendor.bundle.js:17730:14)
    at Raven._handleStackInfo (http://localhost:4200/vendor.bundle.js:17636:14)
    at Raven.captureException (http://localhost:4200/vendor.bundle.js:16774:18)
    at XMLHttpRequest.wrapped (http://localhost:4200/vendor.bundle.js:16710:22)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:2970:31)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.bundle.js:2737:47)
    at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.bundle.js:3044:34)
    at invokeTask (http://localhost:4200/polyfills.bundle.js:3972:14)
    at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.bundle.js:3990:17)
    at http://localhost:4200/polyfills.bundle.js:5303:31
    at XMLHttpRequest.proto.(anonymous function) (http://localhost:4200/polyfills.bundle.js:3819:24)
    at XMLHttpRequest.open (http://localhost:4200/vendor.bundle.js:17409:37)
    at Raven._makeRequest (http://localhost:4200/vendor.bundle.js:18090:17)
    at Raven._sendProcessedPayload (http://localhost:4200/vendor.bundle.js:18014:56)
    at Raven._send (http://localhost:4200/vendor.bundle.js:17956:22)
    at Raven._processException (http://localhost:4200/vendor.bundle.js:17730:14)
    at Raven._handleStackInfo (http://localhost:4200/vendor.bundle.js:17636:14)
    at Raven.captureException (http://localhost:4200/vendor.bundle.js:16774:18)
    at XMLHttpRequest.wrapped (http://localhost:4200/vendor.bundle.js:16710:22)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:2970:31)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.bundle.js:2737:47)
    at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.bundle.js:3044:34)
    at invokeTask (http://localhost:4200/polyfills.bundle.js:3972:14)
    at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.bundle.js:3990:17)
    at http://localhost:4200/polyfills.bundle.js:5303:31
    at XMLHttpRequest.proto.(anonymous function) (http://localhost:4200/polyfills.bundle.js:3819:24)
    at XMLHttpRequest.open (http://localhost:4200/vendor.bundle.js:17409:37)
    at Raven._makeRequest (http://localhost:4200/vendor.bundle.js:18090:17)
    at Raven._sendProcessedPayload (http://localhost:4200/vendor.bundle.js:18014:56)

And on Firefox I just get an error saying that I've reached the maximum limit for recursion.

This error just keeps happening in an infinite loop, so I can get hundreds of these in a second.

Has anyone else experienced this? Please note that I am using Angular 4.4.2 and the latest version of the Angular CLI (1.4.2).

UPDATE

I also found this error on Chrome that is happening a few times before the Maximum call stack size exceeded error:

zone.js:195 Uncaught <failed to convert exception to string>
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask  @   zone.js:195
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask   @   zone.js:499
invokeTask  @   zone.js:1427
globalZoneAwareCallback @   zone.js:1445
(anonymous) @   zone.js:2758
proto.(anonymous function)  @   zone.js:1274
(anonymous) @   raven.js:1023
_makeRequest    @   raven.js:1704
_sendProcessedPayload   @   raven.js:1628
_send   @   raven.js:1570
_processException   @   raven.js:1344
_handleStackInfo    @   raven.js:1250
captureException    @   raven.js:388
wrapped @   raven.js:324
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask   @   zone.js:425
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask  @   zone.js:192
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask   @   zone.js:499
invokeTask  @   zone.js:1427
globalZoneAwareCallback @   zone.js:1445
(anonymous) @   zone.js:2758
proto.(anonymous function)  @   zone.js:1274
(anonymous) @   raven.js:1023
_makeRequest    @   raven.js:1704
_sendProcessedPayload   @   raven.js:1628
_send   @   raven.js:1570
_processException   @   raven.js:1344
_handleStackInfo    @   raven.js:1250
captureException    @   raven.js:388
wrapped @   raven.js:324
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
wrapped @   raven.js:321
wrapFn  @   zone.js:1075
Solution

  • This is an issue on Zone.js side, which thankfully has been already resolved (still to be published), please read the details here https://github.com/getsentry/raven-js/issues/1016#issuecomment-328494778