fix: Broken non-agent traffic detection + bad mock XHR in component test

Author: ptang-nr

src/features/generic_events/instrument/index.js

@@ -87,21 +87,24 @@ export class Instrument extends InstrumentBase {
 
     wrapFetch(this.ee)
     wrapXhr(this.ee)
-    this.ee.on('send-xhr-start', (_, xhr) => {
-      emitIfNonAgentTraffic.call(this, parseUrl(xhr.responseURL))
+    this.ee.on('open-xhr-start', (args, xhr) => {
+      if (!isInternalTraffic(args[1])) {
+        xhr.addEventListener('readystatechange', () => {
+          if (xhr.readyState === 2) { // HEADERS_RECEIVED
+            handle('uaXhr', [], undefined, FEATURE_NAMES.genericEvents, this.ee)
+          }
+        })
+      }
     })
     this.ee.on('fetch-start', (fetchArguments) => {
-      if (fetchArguments.length >= 1) { emitIfNonAgentTraffic.call(this, parseUrl(extractUrl(fetchArguments[0]))) }
+      if (fetchArguments.length >= 1 && !isInternalTraffic(extractUrl(fetchArguments[0]))) {
+        handle('uaXhr', [], undefined, FEATURE_NAMES.genericEvents, this.ee)
+      }
     })
 
-    function emitIfNonAgentTraffic (parsedUrl) {
-      try {
-        let host
-        if (parsedUrl) host = parsedUrl.hostname + ':' + parsedUrl.port
-        if (host && !agentRef.beacons.includes(host)) {
-          handle('uaXhr', [], undefined, FEATURE_NAMES.genericEvents, this.ee)
-        }
-      } catch {}
+    function isInternalTraffic (url) {
+      const parsedUrl = parseUrl(url)
+      return agentRef.beacons.includes(parsedUrl.hostname + ':' + parsedUrl.port)
     }
 
     /** If any of the sources are active, import the aggregator. otherwise deregister */

tests/components/generic_events/instrument/index.test.js

@@ -179,25 +179,37 @@ describe('User frustrations - XMLHttpRequest', () => {
 class MockXMLHttpRequest {
   constructor () {
     this.readyState = 0
-    this.status = 200
+    this.status = 0
     this.responseText = ''
     this.responseURL = ''
-    this.onreadystatechange = null
+    this._url = ''
+  }
+
+  onreadystatechange (url) {
+    if (this.readyState === 1) {
+      this._url = url
+    } else if (this.readyState === 2) {
+      this.responseURL = this._url
+    }
+    if (this._onreadystatechange) this._onreadystatechange()
   }
 
   open (method, url) {
     this.method = method
-    this.responseURL = url
     this.readyState = 1
+    this.onreadystatechange(url)
   }
 
   send () {
-    this.readyState = 4
+    this.readyState = 2
     this.responseText = 'Mock response'
-    if (this.onreadystatechange) {
-      this.onreadystatechange()
-    }
+    this.status = 200
+    this.onreadystatechange()
   }
 
-  addEventListener = jest.fn()
+  addEventListener = (event, handler) => {
+    if (event === 'readystatechange' && typeof handler === 'function') {
+      this._onreadystatechange = handler
+    }
+  }
 }