Merge pull request #574 from getsentry/full-nav-urls

Include full urls (query, doc fragment) in navigation breadcrumbs

Author: benvinegar

src/raven.js

@@ -714,9 +714,9 @@ Raven.prototype = {
         // Use only the path component of the URL if the URL matches the current
         // document (almost all the time when using pushState)
         if (parsedLoc.protocol === parsedTo.protocol && parsedLoc.host === parsedTo.host)
-            to = parsedTo.path;
+            to = parsedTo.relative;
         if (parsedLoc.protocol === parsedFrom.protocol && parsedLoc.host === parsedFrom.host)
-            from = parsedFrom.path;
+            from = parsedFrom.relative;
 
         this.captureBreadcrumb({
             category: 'navigation',

src/utils.js

@@ -114,10 +114,15 @@ function urlencode(o) {
 function parseUrl(url) {
     var match = url.match(/^(([^:\/?#]+):)?(\/\/([^\/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?$/);
     if (!match) return {};
+
+    // coerce to undefined values to empty string so we don't get 'undefined'
+    var query = match[6] || '';
+    var fragment = match[8] || '';
     return {
         protocol: match[2],
         host: match[4],
-        path: match[5]
+        path: match[5],
+        relative: match[5] + query + fragment // everything minus origin
     };
 }
 function uuid4() {

test/integration/test.js

@@ -659,15 +659,16 @@ describe('integration', function () {
               function () {
                   // some browsers trigger onpopstate for load / reset breadcrumb state
                   Raven._breadcrumbs = [];
+
                   history.pushState({}, '', '/foo');
-                  history.pushState({}, '', '/bar');
+                  history.pushState({}, '', '/bar?a=1#fragment');
                   history.pushState({}, '', {}); // pushState calls toString on non-string args
                   history.pushState({}, '', null); // does nothing / no-op
 
                   // can't call history.back() because it will change url of parent document
                   // (e.g. document running mocha) ... instead just "emulate" a back button
                   // press by calling replaceState + onpopstate manually
-                  history.replaceState({}, '', '/bar');
+                  history.replaceState({}, '', '/bar?a=1#fragment');
                   window.onpopstate();
                   done();
               },
@@ -679,22 +680,22 @@ describe('integration', function () {
 
                   assert.equal(breadcrumbs.length, 4);
                   assert.equal(breadcrumbs[0].category, 'navigation'); // (start) => foo
-                  assert.equal(breadcrumbs[1].category, 'navigation'); // foo => bar
-                  assert.equal(breadcrumbs[2].category, 'navigation'); // bar => [object%20Object]
-                  assert.equal(breadcrumbs[3].category, 'navigation'); // [object%20Object] => bar(back button)
+                  assert.equal(breadcrumbs[1].category, 'navigation'); // foo => bar?a=1#fragment
+                  assert.equal(breadcrumbs[2].category, 'navigation'); // bar?a=1#fragment => [object%20Object]
+                  assert.equal(breadcrumbs[3].category, 'navigation'); // [object%20Object] => bar?a=1#fragment (back button)
 
                   // assert end of string because PhantomJS uses full system path
                   assert.ok(/\/test\/integration\/frame\.html$/.test(Raven._breadcrumbs[0].data.from), '\'from\' url is incorrect');
                   assert.ok(/\/foo$/.test(breadcrumbs[0].data.to), '\'to\' url is incorrect');
 
                   assert.ok(/\/foo$/.test(breadcrumbs[1].data.from), '\'from\' url is incorrect');
-                  assert.ok(/\/bar$/.test(breadcrumbs[1].data.to), '\'to\' url is incorrect');
+                  assert.ok(/\/bar\?a=1#fragment$/.test(breadcrumbs[1].data.to), '\'to\' url is incorrect');
 
-                  assert.ok(/\/bar$/.test(breadcrumbs[2].data.from), '\'from\' url is incorrect');
+                  assert.ok(/\/bar\?a=1#fragment$/.test(breadcrumbs[2].data.from), '\'from\' url is incorrect');
                   assert.ok(/\[object Object\]$/.test(breadcrumbs[2].data.to), '\'to\' url is incorrect');
 
                   assert.ok(/\[object Object\]$/.test(breadcrumbs[3].data.from), '\'from\' url is incorrect');
-                  assert.ok(/\/bar/.test(breadcrumbs[3].data.to), '\'to\' url is incorrect');
+                  assert.ok(/\/bar\?a=1#fragment/.test(breadcrumbs[3].data.to), '\'to\' url is incorrect');
               }
             );
         });

test/utils.test.js

@@ -232,27 +232,31 @@ describe('utils', function () {
     describe('parseUrl', function () {
         it('should parse fully qualified URLs', function () {
             assert.deepEqual(parseUrl('http://example.com/foo'), {
+                protocol: 'http',
                 host: 'example.com',
                 path: '/foo',
-                protocol: 'http'
+                relative: '/foo'
             });
-            assert.deepEqual(parseUrl('//example.com/foo'), {
+            assert.deepEqual(parseUrl('//example.com/foo?query'), {
+                protocol: undefined,
                 host: 'example.com',
                 path: '/foo',
-                protocol: undefined
+                relative: '/foo?query'
             });
         });
 
         it('should parse partial URLs, e.g. path only', function () {
             assert.deepEqual(parseUrl('/foo'), {
-                host: undefined,
                 protocol: undefined,
-                path: '/foo'
-            });
-            assert.deepEqual(parseUrl('example.com/foo'), {
                 host: undefined,
+                path: '/foo',
+                relative: '/foo'
+            });
+            assert.deepEqual(parseUrl('example.com/foo#derp'), {
                 protocol: undefined,
-                path: 'example.com/foo'
+                host: undefined,
+                path: 'example.com/foo',
+                relative: 'example.com/foo#derp'
                 // this is correct! pushState({}, '', 'example.com/foo') would take you
                 // from example.com => example.com/example.com/foo (valid url).
             });