Replace CWV metrics with GoogleChrome/web-vitals library NEWRELIC-6214 (#435)

* Swap LCP NEWRELIC-7102

* Remove nav-cookie NR-57391 & update agent start times and offset

* Swap FID NEWRELIC-7103

* Swap FP & FCP NEWRELIC-7105

* Cap LCP, FCP, and FID to once after swap

* Swap TTFB and PVE instrument timings NEWRELIC-7106

* Change fe & dc to event end instead of event start

* Exclude onTTFB from non-main ctx agents & remove old test

* Update failing addeventlistener test

* Recalibrate vitals matchers and fix PVE tests

* Swap CLS NEWRELIC-7104

* Fix a cls browser test

* Undo onCLS callback capping

* Defer PVE & PVT loader code to post-load time

* Exclude current ios from FCP test

* Update LCP browser tests after pvt agg change

* Revert ios FCP test exclusion & introduce fallback

* Combine if-cases in PVE

Author: cwli24

src/common/browser-version/ios-version.js

@@ -0,0 +1,10 @@
+export const isiOS = /(iPad|iPhone|iPod)/g.test(navigator.userAgent)
+
+/* Feature detection to get our version(s). */
+
+// Shared Web Workers introduced in iOS 16.0+ and n/a in 15.6-
+export const iOS_below16 = isiOS && Boolean(typeof SharedWorker === 'undefined')
+/* ^ It was discovered in Safari 14 (https://bugs.webkit.org/show_bug.cgi?id=225305) that the buffered flag in PerformanceObserver
+	did not work. This affects our onFCP metric in particular since web-vitals uses that flag to retrieve paint timing entries.
+	This was fixed in v16+.
+*/

src/common/cookie/nav-cookie.js

@@ -3,8 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export var paintMetrics = {}
-
-export function addMetric (name, value) {
-  paintMetrics[name] = value
-}
+export const paintMetrics = {}

src/common/metrics/paint-metrics.js

@@ -3,12 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-/**
- * This is TO BE REMOVED AND REPLACED by web-vitals TTFB
- * @type {number} - An integer time-stamp representing the time the agent side-effects first ran
-*/
-export const importTimestamp = new Date().getTime()
-
+// This is our own layer around performance.now. It's not strictly necessary, but we keep it in case of future mod-ing of the value for refactor purpose.
 export function now () {
   return Math.round(performance.now())
 }

src/common/timing/now.js

@@ -10,7 +10,7 @@
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent#Browser_Name
 var agentName = null
 var agentVersion = null
-var safari = /Version\/(\S+)\s+Safari/
+const safari = /Version\/(\S+)\s+Safari/
 
 if (navigator.userAgent) {
   var userAgent = navigator.userAgent

src/common/timing/stopwatch.js

@@ -22,7 +22,3 @@ export function subscribeToVisibilityChange (cb, toHiddenOnly = false) {
     cb(document.visibilityState)
   }
 }
-
-export function initializeHiddenTime () {
-  return document.visibilityState === 'hidden' ? -1 : Infinity
-}

src/common/util/user-agent.js

@@ -1,25 +1,52 @@
-import { measure } from '../../../common/timing/stopwatch'
+import { handle } from '../../../common/event-emitter/handle'
+import { FEATURE_NAMES } from '../../../loaders/features/features'
+import { isiOS } from '../../../common/browser-version/ios-version'
+import { onTTFB } from 'web-vitals'
 import { mapOwn } from '../../../common/util/map-own'
 import { param, fromArray } from '../../../common/url/encode'
 import { addPT, addPN } from '../../../common/timing/nav-timing'
 import { stringify } from '../../../common/util/stringify'
-import { addMetric as addPaintMetric } from '../../../common/metrics/paint-metrics'
+import { paintMetrics } from '../../../common/metrics/paint-metrics'
 import { submitData } from '../../../common/util/submit-data'
 import { getConfigurationValue, getInfo, getRuntime } from '../../../common/config/config'
 import { HarvestScheduler } from '../../../common/harvest/harvest-scheduler'
 import { AggregateBase } from '../../utils/aggregate-base'
-import { FEATURE_NAME } from '../constants'
+import * as CONSTANTS from '../constants'
 import { getActivatedFeaturesFlags } from './initialized-features'
-import { globalScope } from '../../../common/util/global-scope'
+import { globalScope, isBrowserScope } from '../../../common/util/global-scope'
 import { drain } from '../../../common/drain/drain'
 
 const jsonp = 'NREUM.setToken'
 
 export class Aggregate extends AggregateBase {
-  static featureName = FEATURE_NAME
+  static featureName = CONSTANTS.FEATURE_NAME
   constructor (agentIdentifier, aggregator) {
-    super(agentIdentifier, aggregator, FEATURE_NAME)
-    this.sendRum()
+    super(agentIdentifier, aggregator, CONSTANTS.FEATURE_NAME)
+
+    if (typeof PerformanceNavigationTiming !== 'undefined' && !isiOS) {
+      this.alreadySent = false // we don't support timings on BFCache restores
+      const agentRuntime = getRuntime(agentIdentifier) // we'll store timing values on the runtime obj to be read by the aggregate module
+
+      /* Time To First Byte
+        This listener must record these values *before* PVE's aggregate sends RUM. */
+      onTTFB(({ value, entries }) => {
+        if (this.alreadySent) return
+        this.alreadySent = true
+
+        agentRuntime[CONSTANTS.TTFB] = Math.round(value) // this is our "backend" duration; web-vitals will ensure it's lower bounded at 0
+
+        // Similar to what vitals does for ttfb, we have to factor in activation-start when calculating relative timings:
+        const navEntry = entries[0]
+        const respOrActivStart = Math.max(navEntry.responseStart, navEntry.activationStart || 0)
+        agentRuntime[CONSTANTS.FBTWL] = Math.max(Math.round(navEntry.loadEventEnd - respOrActivStart), 0) // our "frontend" duration
+        handle('timing', ['load', Math.round(navEntry.loadEventEnd)], undefined, FEATURE_NAMES.pageViewTiming, this.ee)
+        agentRuntime[CONSTANTS.FBTDC] = Math.max(Math.round(navEntry.domContentLoadedEventEnd - respOrActivStart), 0) // our "dom processing" duration
+
+        this.sendRum()
+      })
+    } else {
+      this.sendRum() // timings either already in runtime from instrument or is meant to get 0'd.
+    }
   }
 
   getScheme () {
@@ -31,15 +58,15 @@ export class Aggregate extends AggregateBase {
     if (!info.beacon) return
     if (info.queueTime) this.aggregator.store('measures', 'qt', { value: info.queueTime })
     if (info.applicationTime) this.aggregator.store('measures', 'ap', { value: info.applicationTime })
+    const agentRuntime = getRuntime(this.agentIdentifier)
 
-    // some time in the past some code will have called stopwatch.mark('starttime', Date.now())
-    // calling measure like this will create a metric that measures the time differential between
-    // the two marks.
-    measure(this.aggregator, 'be', 'starttime', 'firstbyte')
-    measure(this.aggregator, 'fe', 'firstbyte', 'onload')
-    measure(this.aggregator, 'dc', 'firstbyte', 'domContent')
+    // These 3 values should've been recorded after load and before this func runs. They are part of the minimum required for PageView events to be created.
+    // Following PR #428, which demands that all agents send RUM call, these need to be sent even outside of the main window context where PerformanceTiming
+    // or PerformanceNavigationTiming do not exists. Hence, they'll be filled in by 0s instead in, for example, worker threads that still init the PVE module.
+    this.aggregator.store('measures', 'be', { value: isBrowserScope ? agentRuntime[CONSTANTS.TTFB] : 0 })
+    this.aggregator.store('measures', 'fe', { value: isBrowserScope ? agentRuntime[CONSTANTS.FBTWL] : 0 })
+    this.aggregator.store('measures', 'dc', { value: isBrowserScope ? agentRuntime[CONSTANTS.FBTDC] : 0 })
 
-    const agentRuntime = getRuntime(this.agentIdentifier)
     var measuresMetrics = this.aggregator.get('measures')
 
     var measuresQueryString = mapOwn(measuresMetrics, function (metricName, measure) {
@@ -64,29 +91,25 @@ export class Aggregate extends AggregateBase {
 
     if (globalScope.performance && typeof (globalScope.performance.timing) !== 'undefined') {
       var navTimingApiData = ({
-        timing: addPT(getRuntime(this.agentIdentifier).offset, globalScope.performance.timing, {}),
+        timing: addPT(agentRuntime.offset, globalScope.performance.timing, {}),
         navigation: addPN(globalScope.performance.navigation, {})
       })
       chunksForQueryString.push(param('perf', stringify(navTimingApiData)))
     }
 
-    if (globalScope.performance && globalScope.performance.getEntriesByType) {
+    try { // PVTiming sends these too, albeit using web-vitals and slightly different; it's unknown why they're duplicated, but PVT should be the truth
       var entries = globalScope.performance.getEntriesByType('paint')
-      if (entries && entries.length > 0) {
-        entries.forEach(function (entry) {
-          if (!entry.startTime || entry.startTime <= 0) return
-
-          if (entry.name === 'first-paint') {
-            chunksForQueryString.push(param('fp',
-              String(Math.floor(entry.startTime))))
-          } else if (entry.name === 'first-contentful-paint') {
-            chunksForQueryString.push(param('fcp',
-              String(Math.floor(entry.startTime))))
-          }
-          addPaintMetric(entry.name, Math.floor(entry.startTime))
-        })
-      }
-    }
+      entries.forEach(function (entry) {
+        if (!entry.startTime || entry.startTime <= 0) return
+
+        if (entry.name === 'first-paint') {
+          chunksForQueryString.push(param('fp', String(Math.floor(entry.startTime))))
+        } else if (entry.name === 'first-contentful-paint') {
+          chunksForQueryString.push(param('fcp', String(Math.floor(entry.startTime))))
+        }
+        paintMetrics[entry.name] = Math.floor(entry.startTime) // this is consumed by Spa module
+      })
+    } catch (e) {}
 
     chunksForQueryString.push(param('xx', info.extra))
     chunksForQueryString.push(param('ua', info.userAttributes))
@@ -102,6 +125,6 @@ export class Aggregate extends AggregateBase {
     )
     // Usually `drain` is invoked automatically after processing feature flags contained in the JSONP callback from
     // ingest (see `activateFeatures`), so when JSONP cannot execute (as with module workers), we drain manually.
-    if (!isValidJsonp) drain(this.agentIdentifier, this.featureName)
+    if (!isValidJsonp) drain(this.agentIdentifier, CONSTANTS.FEATURE_NAME)
   }
 }

src/common/window/page-visibility.js

@@ -1,3 +1,6 @@
 import { FEATURE_NAMES } from '../../loaders/features/features'
 
 export const FEATURE_NAME = FEATURE_NAMES.pageViewEvent
+export const TTFB = 'firstbyte'
+export const FBTDC = 'domcontent'
+export const FBTWL = 'windowload'

src/features/page_view_event/aggregate/index.js

@@ -1,35 +1,33 @@
 
 import { handle } from '../../../common/event-emitter/handle'
-import { now, importTimestamp } from '../../../common/timing/now'
-import { mark } from '../../../common/timing/stopwatch'
+import { isiOS } from '../../../common/browser-version/ios-version'
 import { InstrumentBase } from '../../utils/instrument-base'
-import { onDOMContentLoaded, onWindowLoad } from '../../../common/window/load'
-import { FEATURE_NAME } from '../constants'
+import * as CONSTANTS from '../constants'
 import { FEATURE_NAMES } from '../../../loaders/features/features'
 import { getRuntime } from '../../../common/config/config'
+import { onDOMContentLoaded, onWindowLoad } from '../../../common/window/load'
+import { now } from '../../../common/timing/now'
 
 export class Instrument extends InstrumentBase {
-  static featureName = FEATURE_NAME
+  static featureName = CONSTANTS.FEATURE_NAME
   constructor (agentIdentifier, aggregator, auto = true) {
-    super(agentIdentifier, aggregator, FEATURE_NAME, auto)
+    super(agentIdentifier, aggregator, CONSTANTS.FEATURE_NAME, auto)
 
-    mark(agentIdentifier, 'starttime', getRuntime(agentIdentifier).offset)
-    mark(agentIdentifier, 'firstbyte', importTimestamp)
+    if ((typeof PerformanceNavigationTiming === 'undefined' || isiOS) && typeof PerformanceTiming !== 'undefined') {
+      // For majority browser versions in which PNT exists, we can get load timings later from the nav entry (in the aggregate portion). At minimum, PT should exist for main window.
+      // *cli Mar'23 - iOS 15.2 & 15.4 testing in Sauce still fails with onTTFB. Hence, all iOS will fallback to this for now. Unknown if this is similar in nature to iOS_below16 bug.
+      const agentRuntime = getRuntime(agentIdentifier)
 
-    onDOMContentLoaded(() => this.measureDomContentLoaded())
-    onWindowLoad(() => this.measureWindowLoaded(), true) // we put this in the front of load listeners (useCapture=true) for better precision on measuring when it fires!
-    this.importAggregator() // the measureWindowLoaded cb should run *before* the page_view_event agg runs
-  }
-
-  // should be called on window.load or window.onload, will not be called if agent is loaded after window load
-  measureWindowLoaded () {
-    var ts = now()
-    mark(this.agentIdentifier, 'onload', ts + getRuntime(this.agentIdentifier).offset)
-    handle('timing', ['load', ts], undefined, FEATURE_NAMES.pageViewTiming, this.ee)
-  }
+      agentRuntime[CONSTANTS.TTFB] = Math.max(Date.now() - agentRuntime.offset, 0)
+      onDOMContentLoaded(() => agentRuntime[CONSTANTS.FBTDC] = Math.max(now() - agentRuntime[CONSTANTS.TTFB], 0))
+      onWindowLoad(() => {
+        const timeNow = now()
+        agentRuntime[CONSTANTS.FBTWL] = Math.max(timeNow - agentRuntime[CONSTANTS.TTFB], 0)
+        handle('timing', ['load', timeNow], undefined, FEATURE_NAMES.pageViewTiming, this.ee)
+      })
+    }
+    // Else, inference: inside worker or some other env where these events are irrelevant. They'll get filled in with 0s in RUM call.
 
-  // should be called on DOMContentLoaded, will not be called if agent is loaded after DOMContentLoaded
-  measureDomContentLoaded () {
-    mark(this.agentIdentifier, 'domContent', now() + getRuntime(this.agentIdentifier).offset)
+    this.importAggregator()
   }
 }