Sentry-javascript: crash in raven.js when autobreadcrumbs.xhr is true in angular2 project

[rajendra2]

I started seeing following crash after upgrading to latest angular2/angular-cli and raven-js. I have narrowed the problem to be happening because of Raven.config().install(). I dont see the crash if I comment out this line.

The crash does not happen if I set autobreadcrumbs.xhr to null.

here is the version of the packages I am using:

"dependencies": {
"@angular/common": "2.4.1",
"@angular/compiler": "2.4.1",
"@angular/core": "2.4.1",
"@angular/forms": "2.4.1",
"@angular/http": "2.4.1",
"@angular/platform-browser": "2.4.1",
"@angular/platform-browser-dynamic": "2.4.1",
"@angular/router": "3.4.1",
"bootstrap": "3.3.7",
"core-js": "2.4.1",
"raven-js": "3.9.1",
"rxjs": "5.0.1",
"ts-helpers": "1.1.2",
"zone.js": "0.7.4"

Here is the stack trace in chrome:

Unhandled Promise rejection: this.removeAttribute is not a function ; Zone: ; Task: Promise.then ; Value: TypeError {stack: "TypeError: this.removeAttribute is not a function
…Queue (http://me:4200/vendor.bundle.js:138602:35)", message: "this.removeAttribute is not a function"} TypeError: this.removeAttribute is not a function
at XMLHttpRequest.desc.get [as onreadystatechange] (http://me:4200/vendor.bundle.js:139100:26)
at XMLHttpRequest.send (http://me:4200/vendor.bundle.js:120071:70)
at ResourceLoaderImpl.get (http://me:4200/vendor.bundle.js:68578:13)
at DirectiveNormalizer._fetch (http://me:4200/vendor.bundle.js:17818:43)
at http://me:4200/vendor.bundle.js:17935:53
at Array.map (native)
at DirectiveNormalizer._loadMissingExternalStylesheets (http://me:4200/vendor.bundle.js:17935:14)
at DirectiveNormalizer.normalizeExternalStylesheets (http://me:4200/vendor.bundle.js:17912:21)
at http://me:4200/vendor.bundle.js:17847:168
at ZoneDelegate.invoke (http://me:4200/vendor.bundle.js:138426:26)
at Zone.run (http://me:4200/vendor.bundle.js:138297:43)
at http://me:4200/vendor.bundle.js:138704:57
at ZoneDelegate.invokeTask (http://me:4200/vendor.bundle.js:138459:35)
at Zone.runTask (http://me:4200/vendor.bundle.js:138335:47)
at drainMicroTaskQueue (http://me:4200/vendor.bundle.js:138602:35)
Error {originalStack: "Error: Uncaught (in promise): TypeError: this.remo…Queue (http://me:4200/vendor.bundle.js:138602:35)", zoneAwareStack: "Error: Uncaught (in promise): TypeError: this.remo…tp://me:4200/vendor.bundle.js:138602:35) []", rejection: TypeError: this.removeAttribute is not a function
at XMLHttpRequest.desc.get [as onreadystatecha…, promise: ZoneAwarePromise, zone: Zone…}

Stacktrace in Safari:

console.js:26Unhandled Promise rejection: (8)
"this.removeAttribute is not a function. (In 'this.removeAttribute(prop)', 'this.removeAttribute' is undefined)"
"; Zone:"
""
"; Task:"
"Promise.then"
"; Value:"
TypeError: this.removeAttribute is not a function. (In 'this.removeAttribute(prop)', 'this.removeAttribute' is undefined)
get — zone.js:916
(anonymous function) — raven.js:1003
get — resource_loader_impl.js:44
_fetch — directive_normalizer.js:67
(anonymous function) — directive_normalizer.js:184
map
_loadMissingExternalStylesheets — directive_normalizer.js:184
normalizeExternalStylesheets — directive_normalizer.js:161
run — zone.js:113
(anonymous function) — zone.js:520
invokeTask — zone.js:275
runTask — zone.js:151
drainMicroTaskQueue — zone.js:418
promiseReactionJob

code around raven.js:1003

                var props = ['onload', 'onerror', 'onprogress'];
                for (var j = 0; j < props.length; j++) {
                    wrapProp(props[j], xhr);
                }

1003: =====> if ('onreadystatechange' in xhr && isFunction(xhr.onreadystatechange)) {
fill(xhr, 'onreadystatechange', function (orig) {
return self.wrap(orig, undefined, onreadystatechangeHandler);
} /* intentionally don't track this instrumentation */);
} else {
// if onreadystatechange wasn't actually set by the page on this xhr, we
// are free to set our own and capture the breadcrumb
xhr.onreadystatechange = onreadystatechangeHandler;
}

[mmeylan]

Having the same issue.

[rajendra2]

@Starscream27 , here is one workaround I am using in the meantime.

var options = { 'release' : 'a2.1.0', 'autoBreadcrumbs':{'xhr':false}}
Raven.config(__PUBLIC_DSN__, options).install()

[log2-hwan]

zone.js 0.7.2 works fine for me.
Seems zone.js 0.7.4 has issue.

[alexandrehebert]

@rajendra2 thanks, worked for me

[kiruto]

@rajendra2 worked for me! Thanks! !

[benvinegar]

To me this is not a bug in Raven, this is a real error (unhandled promise rejection) somewhere in your code that is being caught by Raven. I'm guessing this is caused by some AJAX library (jQuery?) that uses a Promise-based API, and the failed XHR is not being handled (e.g. .fail()).

[paynoattn]

@rajendra2 your fix worked for me, though is this going to stop sending error breadcrumbs to raven?

[QuentinFchx]

It has been reported on the zone.js project. You can track it here

[QuentinFchx]

The issue seems to have been fixed with [email protected]. Can you check and close accordingly?

[rajendra2]

@QuentinFchx , yes it seems to have fixed with [email protected]. I am not getting the crash anymore.