Record fetch requests in breadcrumb (#744)

romainneutron · benvinegar · commit 36719312109f · 2016-10-26T10:25:00.000-07:00
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "bundle-collapser": "^1.2.1",
     "chai": "2.3.0",
     "derequire": "2.0.3",
+    "es6-promise": "^4.0.5",
     "grunt": "^0.4.5",
     "grunt-browserify": "^4.0.1",
     "grunt-cli": "^0.1.13",
@@ -43,7 +44,8 @@
     "proxyquireify": "^3.0.2",
     "sinon": "1.7.3",
     "through2": "^2.0.0",
-    "typescript": "^1.8.10"
+    "typescript": "^1.8.10",
+    "whatwg-fetch": "^1.0.0"
   },
   "keywords": [
     "exceptions",
diff --git a/src/raven.js b/src/raven.js
@@ -128,7 +128,7 @@ Raven.prototype = {
             xhr: true,
             console: true,
             dom: true,
-            location: true
+            location: true,
         };
 
         var autoBreadcrumbs = globalOptions.autoBreadcrumbs;
@@ -971,6 +971,43 @@ Raven.prototype = {
             }, wrappedBuiltIns);
         }
 
+        if (autoBreadcrumbs.xhr && 'fetch' in _window) {
+            fill(_window, 'fetch', function(origFetch) {
+                return function (fn, t) { // preserve arity
+                    // Make a copy of the arguments to prevent deoptimization
+                    // https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#32-leaking-arguments
+                    var args = new Array(arguments.length);
+                    for(var i = 0; i < args.length; ++i) {
+                        args[i] = arguments[i];
+                    }
+
+                    var method = 'GET';
+
+                    if (args[1] && args[1].method) {
+                        method = args[1].method;
+                    }
+
+                    var fetchData = {
+                        method: method,
+                        url: args[0],
+                        status_code: null
+                    };
+
+                    self.captureBreadcrumb({
+                        type: 'http',
+                        category: 'fetch',
+                        data: fetchData
+                    });
+
+                    return origFetch.apply(this, args).then(function (response) {
+                        fetchData.status_code = response.status;
+
+                        return response;
+                    });
+                };
+            }, wrappedBuiltIns);
+        }
+
         // Capture breadcrumbs from any click that is unhandled / bubbled up all the way
         // to the document. Do this before we instrument addEventListener.
         if (autoBreadcrumbs.dom && this._hasDocument) {
diff --git a/test/integration/frame.html b/test/integration/frame.html
@@ -3,6 +3,8 @@
 <head>
   <meta charset="utf-8">
   <title></title>
+  <script src="../../node_modules/es6-promise/dist/es6-promise.auto.js"></script>
+  <script src="../../node_modules/whatwg-fetch/fetch.js"></script>
   <script>
     // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
     // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
diff --git a/test/integration/test.js b/test/integration/test.js
@@ -405,6 +405,7 @@ describe('integration', function () {
                     assert.equal(breadcrumbs.length, 1);
 
                     assert.equal(breadcrumbs[0].type, 'http');
+                    assert.equal(breadcrumbs[0].category, 'xhr');
                     assert.equal(breadcrumbs[0].data.method, 'GET');
                     // NOTE: not checking status code because we seem to get
                     //       statusCode 0/undefined from Phantom when fetching
@@ -441,6 +442,46 @@ describe('integration', function () {
             );
         });
 
+        it('should record a fetch request', function (done) {
+            var iframe = this.iframe;
+
+            iframeExecute(iframe, done,
+                function () {
+                    // some browsers trigger onpopstate for load / reset breadcrumb state
+                    Raven._breadcrumbs = [];
+
+                    fetch('/test/integration/example.json').then(function () {
+                        setTimeout(done);
+                    }, function () {
+                        setTimeout(done);
+                    });
+                },
+                function () {
+                    var Raven = iframe.contentWindow.Raven,
+                        breadcrumbs = Raven._breadcrumbs;
+
+                    if ('fetch' in window) {
+                        assert.equal(breadcrumbs.length, 1);
+
+                        assert.equal(breadcrumbs[0].type, 'http');
+                        assert.equal(breadcrumbs[0].category, 'fetch');
+                        assert.equal(breadcrumbs[0].data.method, 'GET');
+                    } else {
+                        // otherwise we use a fetch polyfill based on xhr
+                        assert.equal(breadcrumbs.length, 2);
+
+                        assert.equal(breadcrumbs[0].type, 'http');
+                        assert.equal(breadcrumbs[0].category, 'fetch');
+                        assert.equal(breadcrumbs[0].data.method, 'GET');
+
+                        assert.equal(breadcrumbs[1].type, 'http');
+                        assert.equal(breadcrumbs[1].category, 'xhr');
+                        assert.equal(breadcrumbs[1].data.method, 'GET');
+                    }
+                }
+            );
+        });
+
         it('should record a mouse click on element WITH click handler present', function (done) {
             var iframe = this.iframe;
 
