fix: User frustrations logic should be gated (#1600)

Author: ptang-nr

src/features/generic_events/instrument/index.js

@@ -41,6 +41,14 @@ export class Instrument extends InstrumentBase {
     setupRegisterAPI(agentRef)
     setupMeasureAPI(agentRef)
 
+    const ufEnabled = agentRef.init.feature_flags.includes('user_frustrations')
+    let historyEE
+    if (isBrowserScope && ufEnabled) {
+      wrapFetch(this.ee)
+      wrapXhr(this.ee)
+      historyEE = wrapHistory(this.ee)
+    }
+
     if (isBrowserScope) {
       if (agentRef.init.user_actions.enabled) {
         OBSERVED_EVENTS.forEach(eventType =>
@@ -52,7 +60,43 @@ export class Instrument extends InstrumentBase {
         }
         // Capture is not used here so that we don't get element focus/blur events, only the window's as they do not bubble. They are also not cancellable, so no worries about being front of line.
         )
+
+        if (ufEnabled) {
+          globalScope.addEventListener('error', () => {
+            handle('uaErr', [], undefined, FEATURE_NAMES.genericEvents, this.ee)
+          }, eventListenerOpts(false, this.removeOnAbort?.signal))
+
+          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 && !isInternalTraffic(extractUrl(fetchArguments[0]))) {
+              handle('uaXhr', [], undefined, FEATURE_NAMES.genericEvents, this.ee)
+            }
+          })
+
+          function isInternalTraffic (url) {
+            const parsedUrl = parseUrl(url)
+            return agentRef.beacons.includes(parsedUrl.hostname + ':' + parsedUrl.port)
+          }
+
+          historyEE.on('pushState-end', navigationChange)
+          historyEE.on('replaceState-end', navigationChange)
+          window.addEventListener('hashchange', navigationChange, eventListenerOpts(true, this.removeOnAbort?.signal))
+          window.addEventListener('popstate', navigationChange, eventListenerOpts(true, this.removeOnAbort?.signal))
+
+          function navigationChange () {
+            historyEE.emit('navChange')
+          }
+        }
       }
+
       if (agentRef.init.performance.resources.enabled && globalScope.PerformanceObserver?.supportedEntryTypes.includes('resource')) {
         const observer = new PerformanceObserver((list) => {
           list.getEntries().forEach(entry => {
@@ -61,15 +105,6 @@ export class Instrument extends InstrumentBase {
         })
         observer.observe({ type: 'resource', buffered: true })
       }
-
-      const historyEE = wrapHistory(this.ee)
-      historyEE.on('pushState-end', navigationChange)
-      historyEE.on('replaceState-end', navigationChange)
-      window.addEventListener('hashchange', navigationChange, eventListenerOpts(true, this.removeOnAbort?.signal))
-      window.addEventListener('popstate', navigationChange, eventListenerOpts(true, this.removeOnAbort?.signal))
-      function navigationChange () {
-        historyEE.emit('navChange')
-      }
     }
 
     try {
@@ -81,32 +116,6 @@ export class Instrument extends InstrumentBase {
       this.abortHandler = undefined // weakly allow this abort op to run only once
     }
 
-    globalScope.addEventListener('error', () => {
-      handle('uaErr', [], undefined, FEATURE_NAMES.genericEvents, this.ee)
-    }, eventListenerOpts(false, this.removeOnAbort?.signal))
-
-    wrapFetch(this.ee)
-    wrapXhr(this.ee)
-    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 && !isInternalTraffic(extractUrl(fetchArguments[0]))) {
-        handle('uaXhr', [], undefined, FEATURE_NAMES.genericEvents, this.ee)
-      }
-    })
-
-    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 */
     if (genericEventSourceConfigs.some(x => x)) this.importAggregator(agentRef, () => import(/* webpackChunkName: "generic_events-aggregate" */ '../aggregate'))
     else this.deregisterDrain()

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

@@ -15,6 +15,9 @@ beforeAll(() => {
   mainAgent = setupAgent({
     info: {
       beacon: 'some-agent-endpoint.com:1234'
+    },
+    init: {
+      feature_flags: ['user_frustrations']
     }
   })
   genericEventsInstrument = new GenericEvents(mainAgent)