Merge pull request #341 from MindscapeHQ/bh/network-tracking-update

Network tracking bug fix

CHANGELOG.md

@@ -1,3 +1,6 @@
+* v2.18.1
+  - Fixes an issue with how the network tracking util integrates with the fetch snippet 
+
 * v2.18.0
   - Missing XHR timings are no longer tracked by default. Instead a configuration option exists to enable these via 'captureMissingRequests'
   - Set the maximum duration of missing XHR calls to 5 minutes

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "raygun4js",
-  "version": "2.18.0",
+  "version": "2.18.1",
   "homepage": "http://raygun.io",
   "authors": [
     "Mindscape <[email protected]>"

package.json

@@ -6,7 +6,7 @@
   ],
   "title": "Raygun4js",
   "description": "Raygun.io plugin for JavaScript",
-  "version": "2.18.0",
+  "version": "2.18.1",
   "homepage": "https://github.com/MindscapeHQ/raygun4js",
   "author": {
     "name": "MindscapeHQ",

raygun4js.nuspec

@@ -2,7 +2,7 @@
 <package xmlns="http://schemas.microsoft.com/packaging/2010/07/nuspec.xsd">
   <metadata>
     <id>raygun4js</id>
-    <version>2.18.0</version>
+    <version>2.18.1</version>
     <title>Raygun4js</title>
     <authors>Mindscape Limited</authors>
     <owners>Mindscape Limited</owners>

src/raygun.network-tracking.js

@@ -132,21 +132,23 @@ window.raygunNetworkTrackingFactory = function(window, Raygun) {
     }
 
     var disableFetchLogging = function() {};
+
+    /**
+     * Two window objects can be defined inside the installation code snippets that users inject into their page when using Raygun4JS.
+     * These are used to intercept the original fetch method before a reference to it can be made.
+     * Because if a stored reference to the fetch method is made, we cannot get the status code from that point onwards. 
+     * 
+     * window.__raygunOriginalFetch - the window.fetch method as of when the code snippet was executed
+     * window.__raygunFetchCallback - a callback which is executed when the code snippet fetch method is called 
+     */
+    var originalFetch = window.__raygunOriginalFetch || window.fetch;
+
     // If fetch has been polyfilled we don't want to hook into it as it then uses XMLHttpRequest
     // This results in doubled up breadcrumbs
     // Can't reliably detect when it has been polyfilled but no IE version supports fetch
     // So if this is IE, don't hook into fetch
-    if (typeof window.fetch === 'function' && typeof window.fetch.polyfill === 'undefined' && !Raygun.Utilities.isIE()) {
-
-      /**
-       * Two window objects can be defined inside the installation code snippets that users inject into their page when using Raygun4JS.
-       * These are used to intercept the original fetch method before a reference to it can be made.
-       * Because if a stored reference to the fetch method is made, we cannot get the status code from that point onwards. 
-       * 
-       * window.__raygunOriginalFetch - the window.fetch method as of when the code snippet was executed
-       * window.__raygunFetchCallback - a callback which is executed when the code snippet fetch method is called 
-       */
-      var originalFetch = window.__raygunOriginalFetch || window.fetch;
+    if (typeof originalFetch === 'function' && typeof originalFetch.polyfill === 'undefined' && !Raygun.Utilities.isIE()) {
+
 
       var processFetch = function() {
         var fetchInput = arguments[0];
@@ -235,8 +237,11 @@ window.raygunNetworkTrackingFactory = function(window, Raygun) {
         return promise;
       };
 
-      window.fetch = processFetch;
-      window.__raygunFetchCallback = processFetch;
+      if(!!window.__raygunOriginalFetch) {
+        window.__raygunFetchCallback = processFetch;
+      } else {
+        window.fetch = processFetch;
+      }
 
       disableFetchLogging = function() {
         window.fetch = originalFetch;

tests/fixtures/v2/rumReferencedFetchWithFetchSnippet.html

@@ -47,7 +47,25 @@
           }
       })(window,document,"script","/dist/raygun.js","rg4js");
 
-        var referencedFetch = window.fetch;
+      /**
+       * Overrides the fetch method to assert that once raygun4js has loaded, 
+       * subsequent overrides to the window.fetch method still work
+       */
+      window.__completedCalls = [];
+
+      if (typeof window.fetch !== 'undefined') {
+        var originalFetch = window.fetch;
+
+        window.fetch = function() {
+          var url = arguments[0];
+
+          return originalFetch.apply(null, arguments).then(function() {
+            window.__completedCalls.push(url);
+          });
+        };
+      }
+
+      var referencedFetch = window.fetch;
     </script>
   </head>
   <body>

tests/specs/v2/rumXhrStatusTracking.js

@@ -94,6 +94,42 @@ describe("RUM status code tracking", function() {
 
         checkStatusCodes();
       });
+
+      it('overriden fetch methods are stilled called', () => {
+        browser.url('http://localhost:4567/fixtures/v2/rumReferencedFetchWithFetchSnippet.html');
+
+        browser.pause(1000);
+
+        var supportsFetch = browser.execute(function() {
+          return window.supportsFetch;
+        }).value;
+
+        if (!supportsFetch) {
+          return;
+        }
+
+        browser.pause(34000);
+
+        var completedCalls = browser.execute(function () {
+          return window.__completedCalls;
+        }).value;
+
+        if (completedCalls.length < 4) {
+          fail("test did not wait long enough for ajax requests to be sent to Raygun");
+        }
+
+        var expectedCalls = [
+          'foo.html',
+          'rumXhrStatusCodes.html', 
+          'rumXhrStatusCodes.html?foo=bar', 
+          'http://localhost:4567/fixtures/v2/rumXhrStatusCodes.html'
+        ];
+
+        for (var i = 0; i < expectedCalls.length; i++) {
+          var url = expectedCalls[i];
+          expect(completedCalls.indexOf(url)).not.toBe(-1);
+        }
+      });
     });
   });