Use hashchange listener to catch location.hash changes

src/interaction.js

@@ -15,6 +15,7 @@ const allowedEventTypes = {
   mouseup: true,
 };
 
+
 export class SplunkUserInteractionPlugin extends UserInteractionPlugin {
   getZoneWithPrototype() {
     // FIXME work out ngZone issues with Angular  PENDING
@@ -25,6 +26,25 @@ export class SplunkUserInteractionPlugin extends UserInteractionPlugin {
     return allowedEventTypes[eventType];
   }
 
+  emitRouteChangeSpan(oldHref) {
+    const tracer = window.SplunkRum._provider.getTracer('route');
+    const span = tracer.startSpan('routeChange');
+    span.setAttribute('component', this.moduleName);
+    span.setAttribute('prev.href', oldHref);
+    // location.href set with new value by default
+    span.end(span.startTime);
+  }
+
+  patch() {
+    const plugin = this;
+    // Hash can be changed with location.hash = '#newThing', no way to hook that directly...
+    window.addEventListener('hashchange', function(event) {
+      plugin.emitRouteChangeSpan(event.oldURL);
+    });
+    return super.patch();
+  }
+
+
   // FIXME find cleaner way to patch
   _patchHistoryMethod() {
     const plugin = this;
@@ -34,13 +54,7 @@ export class SplunkUserInteractionPlugin extends UserInteractionPlugin {
         const result = original.apply(this, args);
         const newHref = location.href;
         if (oldHref !== newHref) {
-          // FIXME names of attributes/span/component
-          const tracer = window.SplunkRum._provider.getTracer('route');
-          const span = tracer.startSpan('routeChange');
-          span.setAttribute('component', plugin.moduleName);
-          span.setAttribute('prev.href', oldHref);
-          // location.href set with new value by default
-          span.end(span.startTime);
+          plugin.emitRouteChangeSpan(oldHref);
         }
         return result;
       };

test/init.test.js

@@ -289,14 +289,28 @@ describe('test manual report', () => {
 
 describe('test route change', () => {
   it('should report a span', () => {
+    const oldUrl = location.href;
     capturer.clear();
     history.pushState({}, 'title', '/thisIsAChange#WithAHash');
     const span = capturer.spans[capturer.spans.length - 1];
     assert.strictEqual(span.name, 'routeChange');
     assert.ok(span.attributes['location.href'].includes('/thisIsAChange#WithAHash'));
-    assert.ok(span.attributes['prev.href'].length > 0);
+    assert.strictEqual(oldUrl, span.attributes['prev.href']);
     assert.strictEqual(span.attributes['component'], 'user-interaction');
   });
+  it('should capture location.hash changes', (done) => {
+    capturer.clear();
+    const oldUrl = location.href;
+    location.hash = '#hashChange';
+    setTimeout(()=>{
+      const span = capturer.spans[capturer.spans.length - 1];
+      assert.strictEqual(span.name, 'routeChange');
+      assert.ok(span.attributes['location.href'].includes('#hashChange'));
+      assert.strictEqual(oldUrl, span.attributes['prev.href']);
+      assert.strictEqual(span.attributes['component'], 'user-interaction');
+      done();
+    }, 0);
+  });
 });
 
 describe('can remove wrapped event listeners', () => {

test/patchchecks.test.js

@@ -12,6 +12,7 @@ describe('check patching assumptions', () => {
     assert.ok(typeof new DocumentLoad()._getEntries === 'function');
   });
   it('userinteraction', () => {
+    assert.ok(typeof new UserInteractionPlugin().patch === 'function');
     assert.ok(typeof new UserInteractionPlugin()._allowEventType === 'function');
     assert.ok(typeof new UserInteractionPlugin()._patchHistoryMethod === 'function');
   });