@newrelic/browser-agent 1.239.0 → 1.240.0

package/src/{features/page_view_timing → common/vitals}/first-paint.js

@@ -1,28 +1,24 @@
-/**
- * Calls the `onReport` function when the 'first-paint' PerformancePaintTiming entry is observed.
- * The argument supplied is an object similar to the Metric type used by web-vitals library.
- *
- * @param {Function} onReport - callback that accepts a `metric` object as the single parameter
- */
-export const onFirstPaint = (onReport) => {
+import { initiallyHidden, isBrowserScope } from '../constants/runtime'
+import { VITAL_NAMES } from './constants'
+import { VitalMetric } from './vital-metric'
+
+export const firstPaint = new VitalMetric(VITAL_NAMES.FIRST_PAINT)
+
+if (isBrowserScope) {
   const handleEntries = (entries) => {
     entries.forEach(entry => {
-      if (entry.name === 'first-paint') {
+      if (entry.name === 'first-paint' && !firstPaint.isValid) {
         observer.disconnect()
 
         /* Initial hidden state and pre-rendering not yet considered for first paint. See web-vitals onFCP for example. */
-        const metric = {
-          name: 'FP',
-          value: entry.startTime
-        }
-        onReport(metric)
+        firstPaint.update({ value: entry.startTime, entries })
       }
     })
   }
 
   let observer
   try {
-    if (PerformanceObserver.supportedEntryTypes.includes('paint')) {
+    if (PerformanceObserver.supportedEntryTypes.includes('paint') && !initiallyHidden) {
       observer = new PerformanceObserver((list) => {
         // Delay by a microtask to workaround a bug in Safari where the
         // callback is invoked immediately, rather than in a separate task.
@@ -34,8 +30,6 @@ export const onFirstPaint = (onReport) => {
       observer.observe({ type: 'paint', buffered: true })
     }
   } catch (e) {
-    // Do nothing.
+  // Do nothing.
   }
-
-  /* BFCache restore not yet considered for first paint. See web-vitals onFCP for example. */
 }

package/src/common/vitals/first-paint.test.js

@@ -0,0 +1,127 @@
+beforeEach(() => {
+  jest.resetModules()
+  jest.resetAllMocks()
+  jest.clearAllMocks()
+
+  const mockPerformanceObserver = jest.fn(cb => ({
+    observe: () => {
+      const callCb = () => {
+        // eslint-disable-next-line
+        cb({getEntries: () => [{ name: 'first-paint', startTime: 1 }] })
+        setTimeout(callCb, 250)
+      }
+      setTimeout(callCb, 250)
+    },
+    disconnect: jest.fn()
+  }))
+  global.PerformanceObserver = mockPerformanceObserver
+  global.PerformanceObserver.supportedEntryTypes = ['paint']
+})
+
+const getFreshFPImport = async (codeToRun) => {
+  const { firstPaint } = await import('./first-paint')
+  codeToRun(firstPaint)
+}
+
+describe('fp', () => {
+  test('reports fp', (done) => {
+    getFreshFPImport(metric => metric.subscribe(({ value }) => {
+      expect(value).toEqual(1)
+      done()
+    }))
+  })
+
+  test('Does NOT report values if initiallyHidden', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      initiallyHidden: true,
+      isBrowserScope: true
+    }))
+
+    getFreshFPImport(metric => {
+      metric.subscribe(() => {
+        console.log('should not have reported')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 1000)
+    })
+  })
+
+  test('does NOT report if not browser scoped', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      initiallyHidden: false,
+      isBrowserScope: false
+    }))
+
+    getFreshFPImport(metric => {
+      metric.subscribe(({ value, attrs }) => {
+        console.log('should not have reported...')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 1000)
+    })
+  })
+
+  test('does NOT report other metrics', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      initiallyHidden: false,
+      isBrowserScope: true
+    }))
+
+    const mockPerformanceObserver = jest.fn(cb => ({
+      // eslint-disable-next-line
+      observe: () => cb({getEntries: () => [{ name: 'other-metric', startTime: 1 }] }),
+      disconnect: jest.fn()
+    }))
+    global.PerformanceObserver = mockPerformanceObserver
+    global.PerformanceObserver.supportedEntryTypes = ['paint']
+
+    getFreshFPImport(metric => {
+      metric.subscribe(() => {
+        console.log('should not have reported...')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 1000)
+    })
+  })
+
+  test('multiple subs get same value', done => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: true
+    }))
+    let sub1, sub2
+    getFreshFPImport(metric => {
+      const remove1 = metric.subscribe(({ entries }) => {
+        sub1 ??= entries[0].id
+        if (sub1 === sub2) { remove1(); remove2(); done() }
+      })
+
+      const remove2 = metric.subscribe(({ entries }) => {
+        sub2 ??= entries[0].id
+        if (sub1 === sub2) { remove1(); remove2(); done() }
+      })
+    })
+  })
+
+  test('reports only once', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      initiallyHidden: false,
+      isBrowserScope: true
+    }))
+    let triggered = 0
+    getFreshFPImport(metric => metric.subscribe(({ value }) => {
+      triggered++
+      expect(value).toEqual(1)
+      expect(triggered).toEqual(1)
+      setTimeout(() => {
+        expect(triggered).toEqual(1)
+        done()
+      }, 1000)
+    })
+    )
+  })
+})

package/src/common/vitals/interaction-to-next-paint.js

@@ -0,0 +1,13 @@
+import { onINP } from 'web-vitals'
+import { VitalMetric } from './vital-metric'
+import { VITAL_NAMES } from './constants'
+import { isBrowserScope } from '../constants/runtime'
+
+export const interactionToNextPaint = new VitalMetric(VITAL_NAMES.INTERACTION_TO_NEXT_PAINT)
+
+if (isBrowserScope) {
+/* Interaction-to-Next-Paint */
+  onINP(({ value, entries, id }) => {
+    interactionToNextPaint.update({ value, entries, attrs: { metricId: id } })
+  })
+}

package/src/common/vitals/interaction-to-next-paint.test.js

@@ -0,0 +1,74 @@
+beforeEach(() => {
+  jest.resetModules()
+  jest.resetAllMocks()
+  jest.clearAllMocks()
+})
+
+const getFreshINPImport = async (codeToRun) => {
+  const { interactionToNextPaint } = await import('./interaction-to-next-paint')
+  codeToRun(interactionToNextPaint)
+}
+
+describe('inp', () => {
+  test('reports fcp from web-vitals', (done) => {
+    getFreshINPImport(metric => metric.subscribe(({ value, attrs }) => {
+      expect(value).toEqual(1)
+      expect(attrs.metricId).toEqual('id')
+      done()
+    }))
+  })
+
+  test('does NOT report if not browser scoped', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: false
+    }))
+
+    getFreshINPImport(metric => {
+      metric.subscribe(() => {
+        console.log('should not have reported...')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 1000)
+    })
+  })
+
+  test('multiple subs get same value', done => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: true
+    }))
+    let sub1, sub2
+    getFreshINPImport(metric => {
+      const remove1 = metric.subscribe(({ entries }) => {
+        sub1 ??= entries[0].id
+        if (sub1 === sub2) { remove1(); remove2(); done() }
+      })
+
+      const remove2 = metric.subscribe(({ entries }) => {
+        sub2 ??= entries[0].id
+        if (sub1 === sub2) { remove1(); remove2(); done() }
+      })
+    })
+  })
+
+  test('reports more than once', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: true
+    }))
+    let triggered = 0
+    getFreshINPImport(metric => {
+      metric.subscribe(({ value }) => {
+        triggered++
+        expect(value).toEqual(1)
+        expect(triggered).toEqual(1)
+      })
+      setTimeout(() => {
+        // the metric emits every quarter second
+        expect(triggered).toBeGreaterThanOrEqual(3)
+        done()
+      }, 1000)
+    })
+  })
+})

package/src/common/vitals/largest-contentful-paint.js

@@ -0,0 +1,29 @@
+import { onLCP } from 'web-vitals'
+import { VitalMetric } from './vital-metric'
+import { VITAL_NAMES } from './constants'
+import { initiallyHidden, isBrowserScope } from '../constants/runtime'
+import { cleanURL } from '../url/clean-url'
+
+export const largestContentfulPaint = new VitalMetric(VITAL_NAMES.LARGEST_CONTENTFUL_PAINT)
+
+if (isBrowserScope) {
+  onLCP(({ value, entries }) => {
+  /* Largest Contentful Paint - As of WV v3, it still imperfectly tries to detect document vis state asap and isn't supposed to report if page starts hidden. */
+    if (initiallyHidden || largestContentfulPaint.isValid) return
+
+    const lcpEntry = entries[entries.length - 1] // this looks weird if we only expect one, but this is how cwv-attribution gets it so to be sure...
+    largestContentfulPaint.update({
+      value,
+      entries,
+      ...(entries.length > 0 && {
+        attrs: {
+          size: lcpEntry.size,
+          eid: lcpEntry.id,
+          ...(!!lcpEntry.url && { elUrl: cleanURL(lcpEntry.url) }),
+          ...(!!lcpEntry.element?.tagName && { elTag: lcpEntry.element.tagName })
+        }
+      }),
+      shouldAddConnectionAttributes: true
+    })
+  })
+}

package/src/common/vitals/largest-contentful-paint.test.js

@@ -0,0 +1,94 @@
+beforeEach(() => {
+  jest.resetModules()
+  jest.resetAllMocks()
+  jest.clearAllMocks()
+})
+
+const getFreshLCPImport = async (codeToRun) => {
+  const { largestContentfulPaint } = await import('./largest-contentful-paint')
+  codeToRun(largestContentfulPaint)
+}
+
+describe('lcp', () => {
+  test('reports lcp from web-vitals', (done) => {
+    getFreshLCPImport(metric => metric.subscribe(({ value, attrs }) => {
+      expect(value).toEqual(1)
+      expect(attrs).toMatchObject({
+        size: expect.any(Number),
+        eid: expect.any(String),
+        elUrl: expect.any(String),
+        elTag: expect.any(String)
+      })
+      done()
+    }))
+  })
+
+  test('does NOT report if not browser scoped', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: false
+    }))
+
+    getFreshLCPImport(metric => {
+      metric.subscribe(() => {
+        console.log('should not have reported...')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 1000)
+    })
+  })
+
+  test('Does NOT report values if initiallyHidden', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      initiallyHidden: true,
+      isBrowserScope: true
+    }))
+
+    getFreshLCPImport(metric => {
+      metric.subscribe(() => {
+        console.log('should not have reported')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 1000)
+    })
+  })
+
+  test('multiple subs get same value', done => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: true
+    }))
+    let sub1, sub2
+    getFreshLCPImport(metric => {
+      const remove1 = metric.subscribe(({ entries }) => {
+        sub1 ??= entries[0].id
+        if (sub1 === sub2) { remove1(); remove2(); done() }
+      })
+
+      const remove2 = metric.subscribe(({ entries }) => {
+        sub2 ??= entries[0].id
+        if (sub1 === sub2) { remove1(); remove2(); done() }
+      })
+    })
+  })
+
+  test('reports only once', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      initiallyHidden: false,
+      isBrowserScope: true
+    }))
+    let triggered = 0
+    getFreshLCPImport(metric => metric.subscribe(({ value }) => {
+      triggered++
+      expect(value).toEqual(1)
+      expect(triggered).toEqual(1)
+      setTimeout(() => {
+        expect(triggered).toEqual(1)
+        done()
+      }, 1000)
+    })
+    )
+  })
+})

package/src/common/vitals/long-task.js

@@ -0,0 +1,52 @@
+import { isBrowserScope } from '../constants/runtime'
+import { subscribeToEOL } from '../unload/eol'
+import { VITAL_NAMES } from './constants'
+import { VitalMetric } from './vital-metric'
+
+export const longTask = new VitalMetric(VITAL_NAMES.LONG_TASK)
+
+if (isBrowserScope) {
+  const handleEntries = (entries) => {
+    entries.forEach(entry => {
+      longTask.update({
+        value: entry.duration,
+        entries: [entry],
+        attrs: {
+          ltFrame: entry.name, // MDN: the browsing context or frame that can be attributed to the long task
+          ltStart: entry.startTime, // MDN: a double representing the time (millisec) when the task started
+          ltCtr: entry.attribution[0].containerType, // MDN: type of frame container: 'iframe', 'embed', or 'object' ... but this can also be 'window',
+          ...(entry.attribution[0].containerType !== 'window' && {
+            ltCtrSrc: entry.attribution[0].containerSrc, // MDN: container's 'src' attribute
+            ltCtrId: entry.attribution[0].containerId, // MDN: container's 'id' attribute
+            ltCtrName: entry.attribution[0].containerName // MDN: container's 'name' attribute
+          })
+        }
+      })
+    })
+  }
+
+  let observer
+  try {
+    if (PerformanceObserver.supportedEntryTypes.includes('longtask')) {
+      observer = new PerformanceObserver((list) => {
+      // Delay by a microtask to workaround a bug in Safari where the
+      // callback is invoked immediately, rather than in a separate task.
+      // See: https://github.com/GoogleChrome/web-vitals/issues/277
+        Promise.resolve().then(() => {
+          handleEntries(list.getEntries())
+        })
+      })
+      observer.observe({ type: 'longtask', buffered: true })
+    }
+  } catch (e) {
+  // Do nothing.
+  }
+
+  if (observer) {
+    subscribeToEOL(() => {
+      handleEntries(observer.takeRecords())
+    }, true) // this bool is a temp arg under staged BFCache work that runs the func under the new page session logic -- tb removed w/ the feature flag later
+
+  /* No work needed on BFCache restore for long task. */
+  }
+}

package/src/common/vitals/long-task.test.js

@@ -0,0 +1,122 @@
+beforeEach(() => {
+  jest.resetModules()
+  jest.resetAllMocks()
+  jest.clearAllMocks()
+
+  const mockPerformanceObserver = jest.fn(cb => ({
+    observe: () => {
+      const callCb = () => {
+        // eslint-disable-next-line
+        cb({
+          getEntries: () => ([{
+            name: 'longtask',
+            duration: 1,
+            startTime: 1,
+            attribution: [{
+              containerType: 'object',
+              containerSrc: 'src',
+              containerId: 'id',
+              containerName: 'name'
+            }]
+          }])
+        })
+        setTimeout(callCb, 250)
+      }
+      setTimeout(callCb, 250)
+    },
+    disconnect: jest.fn()
+  }))
+  global.PerformanceObserver = mockPerformanceObserver
+  global.PerformanceObserver.supportedEntryTypes = ['longtask']
+})
+
+const getFreshLTImport = async (codeToRun) => {
+  const { longTask } = await import('./long-task')
+  codeToRun(longTask)
+}
+
+describe('lt', () => {
+  test('reports lt', (done) => {
+    getFreshLTImport(metric => metric.subscribe(({ value, attrs }) => {
+      expect(value).toEqual(1)
+      expect(attrs).toMatchObject({
+        ltFrame: 'longtask',
+        ltStart: 1,
+        ltCtr: 'object',
+        ltCtrSrc: 'src',
+        ltCtrId: 'id',
+        ltCtrName: 'name'
+      })
+      done()
+    }))
+  })
+
+  test('does NOT report if not browser scoped', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: false
+    }))
+
+    getFreshLTImport(metric => {
+      metric.subscribe(() => {
+        console.log('should not have reported...')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 1000)
+    })
+  })
+
+  test('does NOT report if browser does not support longtask', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: true
+    }))
+
+    global.PerformanceObserver.supportedEntryTypes = ['paint']
+
+    getFreshLTImport(metric => {
+      metric.subscribe(() => {
+        console.log('should not have reported...')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 1000)
+    })
+  })
+
+  test('multiple subs get same value', done => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: true
+    }))
+    let sub1, sub2
+    getFreshLTImport(metric => {
+      const remove1 = metric.subscribe(({ entries }) => {
+        sub1 ??= entries[0].id
+        if (sub1 === sub2) { remove1(); remove2(); done() }
+      })
+
+      const remove2 = metric.subscribe(({ entries }) => {
+        sub2 ??= entries[0].id
+        if (sub1 === sub2) { remove1(); remove2(); done() }
+      })
+    })
+  })
+
+  test('reports more than once', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: true
+    }))
+    let triggered = 0
+    getFreshLTImport(metric => metric.subscribe(({ value }) => {
+      triggered++
+      expect(value).toEqual(1)
+      expect(triggered).toEqual(1)
+      setTimeout(() => {
+        expect(triggered).toBeGreaterThanOrEqual(3)
+        done()
+      }, 1000)
+    })
+    )
+  })
+})

package/src/common/vitals/time-to-first-byte.js

@@ -0,0 +1,21 @@
+import { globalScope, isBrowserScope, isiOS, offset } from '../constants/runtime'
+import { VITAL_NAMES } from './constants'
+import { VitalMetric } from './vital-metric'
+import { onTTFB } from 'web-vitals'
+
+export const timeToFirstByte = new VitalMetric(VITAL_NAMES.TIME_TO_FIRST_BYTE)
+
+if (isBrowserScope && typeof PerformanceNavigationTiming !== 'undefined' && !isiOS) {
+  onTTFB(({ value, entries }) => {
+    if (!timeToFirstByte.isValid) timeToFirstByte.update({ value, entries })
+  })
+} else {
+  if (!timeToFirstByte.isValid) {
+    const entry = {}
+    // convert real timestamps to relative timestamps to match web-vitals behavior
+    for (let key in globalScope?.performance?.timing || {}) entry[key] = Math.max(globalScope?.performance?.timing[key] - offset, 0)
+
+    // ttfb is equiv to document's responseStart property in timing API --> https://developer.mozilla.org/en-US/docs/Web/API/PerformanceTiming/responseStart
+    timeToFirstByte.update({ value: entry.responseStart, entries: [entry] })
+  }
+}