@newrelic/browser-agent 1.239.1 → 1.241.0

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] })
+  }
+}

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

@@ -0,0 +1,147 @@
+beforeEach(() => {
+  jest.resetModules()
+  jest.resetAllMocks()
+  jest.clearAllMocks()
+})
+
+const getFreshTTFBImport = async (codeToRun) => {
+  const { timeToFirstByte } = await import('./time-to-first-byte')
+  codeToRun(timeToFirstByte)
+}
+
+describe('ttfb', () => {
+  test('reports ttfb from web-vitals', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isiOS: false,
+      isBrowserScope: true
+    }))
+    global.PerformanceNavigationTiming = jest.fn()
+
+    getFreshTTFBImport(metric => metric.subscribe(({ value }) => {
+      expect(value).toEqual(1)
+      done()
+    }))
+  })
+
+  test('does NOT report if not browser scoped', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: false
+    }))
+
+    getFreshTTFBImport(metric => {
+      metric.subscribe(() => {
+        console.log('should not have reported...')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 1000)
+    })
+  })
+
+  test('does NOT report ttfb from web-vitals if no PNT', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isiOS: false,
+      isBrowserScope: true
+    }))
+    global.PerformanceNavigationTiming = undefined
+
+    getFreshTTFBImport(metric => {
+      metric.subscribe(() => {
+        console.log('should not have reported...')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 1000)
+    })
+  })
+
+  test('does NOT report ttfb from web-vitals if is iOS', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isiOS: true,
+      isBrowserScope: true
+    }))
+    global.PerformanceNavigationTiming = jest.fn()
+
+    getFreshTTFBImport(metric => {
+      metric.subscribe(() => {
+        console.log('should not have reported...')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 1000)
+    })
+  })
+
+  test('reports from performance.timing if cant use web-vitals', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isiOS: true,
+      globalScope: {
+        performance: {
+          timing: {
+            responseStart: 2
+          }
+        }
+      },
+      offset: 1,
+      isBrowserScope: true
+    }))
+    global.PerformanceNavigationTiming = undefined
+
+    getFreshTTFBImport(metric => {
+      metric.subscribe(({ value }) => {
+        expect(value).toEqual(1) // responseStart (2) - offset (1) === 1
+        done()
+      })
+    })
+  })
+
+  test('multiple subs get same value', done => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: true,
+      isiOS: false
+    }))
+    global.PerformanceNavigationTiming = jest.fn()
+    let sub1, sub2
+    getFreshTTFBImport(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,
+      isiOS: true,
+      globalScope: {
+        performance: {
+          timing: {
+            responseStart: 2
+          }
+        }
+      },
+      offset: 1,
+      isBrowserScope: true
+    }))
+    let triggered = 0
+    getFreshTTFBImport(metric => metric.subscribe(({ value }) => {
+      triggered++
+      expect(value).toEqual(1)
+      expect(triggered).toEqual(1)
+      setTimeout(() => {
+        expect(triggered).toEqual(1)
+        done()
+      }, 1000)
+    })
+    )
+  })
+})

package/src/common/vitals/vital-metric.js

@@ -0,0 +1,60 @@
+export class VitalMetric {
+  #subscribers = new Set()
+  history = []
+
+  constructor (name, roundingMethod) {
+    this.name = name
+    this.attrs = {}
+    this.roundingMethod = typeof roundingMethod === 'function' ? roundingMethod : Math.floor
+  }
+
+  update ({ value, entries = [], attrs = {}, shouldAddConnectionAttributes = false }) {
+    if (value < 0) return
+    const state = {
+      value: this.roundingMethod(value),
+      name: this.name,
+      entries,
+      attrs
+    }
+    if (shouldAddConnectionAttributes) addConnectionAttributes(state.attrs)
+    this.history.push(state)
+    this.#subscribers.forEach(cb => {
+      try {
+        cb(this.current)
+      } catch (e) {
+        // ignore errors
+      }
+    })
+  }
+
+  get current () {
+    return this.history[this.history.length - 1] || {
+      value: undefined,
+      name: this.name,
+      entries: [],
+      attrs: {}
+    }
+  }
+
+  get isValid () {
+    return this.current.value >= 0
+  }
+
+  subscribe (callback, buffered = true) {
+    if (typeof callback !== 'function') return
+    this.#subscribers.add(callback)
+    // emit full history on subscription ("buffered" behavior)
+    if (this.isValid && !!buffered) this.history.forEach(state => { callback(state) })
+    return () => { this.#subscribers.delete(callback) }
+  }
+}
+
+function addConnectionAttributes (obj) {
+  var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection // to date, both window & worker shares the same support for connection
+  if (!connection) return
+
+  if (connection.type) obj['net-type'] = connection.type
+  if (connection.effectiveType) obj['net-etype'] = connection.effectiveType
+  if (connection.rtt) obj['net-rtt'] = connection.rtt
+  if (connection.downlink) obj['net-dlink'] = connection.downlink
+}

package/src/common/vitals/vital-metric.test.js

@@ -0,0 +1,171 @@
+import { VitalMetric } from './vital-metric'
+
+let vitalMetric
+beforeEach(() => {
+  vitalMetric = new VitalMetric('test')
+})
+
+afterEach(() => {
+  jest.resetAllMocks()
+})
+
+describe('vital-metric', () => {
+  test('default values', () => {
+    expect(vitalMetric).toMatchObject({
+      name: 'test',
+      history: []
+    })
+
+    expect(vitalMetric.current).toMatchObject({
+      name: 'test',
+      attrs: {},
+      entries: [],
+      value: undefined
+    })
+  })
+
+  test('update', () => {
+    let i = 0
+    vitalMetric.update({ value: i, entries: [{ test: i + 1 }], attrs: { test: i + 2 }, shouldAddConnectionAttributes: true })
+    expect(vitalMetric.current).toMatchObject({
+      value: i,
+      entries: [{ test: i + 1 }],
+      attrs: { test: i + 2 }
+    })
+
+    i++
+    vitalMetric.update({ value: i, entries: [{ test: i + 1 }], attrs: { test: i + 2 }, shouldAddConnectionAttributes: true })
+    expect(vitalMetric.current).toMatchObject({
+      value: i,
+      entries: [{ test: i + 1 }],
+      attrs: { test: i + 2 }
+    })
+  })
+
+  test('rounding', () => {
+    // default rounding
+    vitalMetric.update({ value: 1.234 })
+    expect(vitalMetric.current.value).toEqual(1)
+    // custom rounding
+    vitalMetric = new VitalMetric('test', (x) => x * 100)
+    vitalMetric.update({ value: 5 })
+    expect(vitalMetric.current.value).toEqual(500)
+  })
+
+  test('isValid', () => {
+    expect(vitalMetric.isValid).toEqual(false)
+
+    vitalMetric.update({ value: -1 })
+    expect(vitalMetric.isValid).toEqual(false)
+
+    vitalMetric.update({ value: 1 })
+    expect(vitalMetric.isValid).toEqual(true)
+  })
+
+  test('subscribers get updates when valid', (done) => {
+    vitalMetric.subscribe(({ value }) => {
+      expect(value).toEqual(1)
+      done()
+    })
+
+    vitalMetric.update({ value: 1 })
+  })
+
+  test('multiple subscribers get same update when valid', (done) => {
+    let sub1, sub2
+    let stop1 = vitalMetric.subscribe(({ entries }) => {
+      sub1 ??= entries[0].id
+      if (sub1 === sub2) { stop1(); stop2(); done() }
+    })
+
+    let stop2 = vitalMetric.subscribe(({ entries }) => {
+      sub2 ??= entries[0].id
+      if (sub1 === sub2) { stop1(); stop2(); done() }
+    })
+
+    vitalMetric.update({ value: 1, entries: [{ id: 'abcd' }] })
+  })
+
+  test('subscribers do not get updates when not valid', (done) => {
+    vitalMetric.subscribe(({ value }) => {
+      console.log(value)
+      console.log('should not have reached subscriber')
+      expect(1).toEqual(2)
+    })
+
+    vitalMetric.update({ value: -1 })
+    setTimeout(done, 1000)
+  })
+
+  test('subscribers get latest value immediately if already valid', (done) => {
+    vitalMetric.update({ value: 1 })
+
+    vitalMetric.subscribe(({ value }) => {
+      expect(value).toEqual(1)
+      done()
+    })
+  })
+
+  test('unsubscribe', (done) => {
+    const unsubscribe = vitalMetric.subscribe(({ value }) => {
+      console.log('should not have reached subscriber')
+      expect(1).toEqual(2)
+    })
+
+    unsubscribe()
+    vitalMetric.update({ value: 1 })
+    setTimeout(done, 1000)
+  })
+
+  test('addConnectionAttributes', () => {
+    global.navigator.connection = {}
+    vitalMetric.update({ value: 1, shouldAddConnectionAttributes: true })
+    expect(vitalMetric.current.attrs).toEqual(expect.objectContaining({}))
+
+    global.navigator.connection.type = 'type'
+    vitalMetric.update({ value: 1, shouldAddConnectionAttributes: true })
+    expect(vitalMetric.current.attrs).toEqual(expect.objectContaining({
+      'net-type': 'type'
+    }))
+
+    global.navigator.connection.effectiveType = 'effectiveType'
+    vitalMetric.update({ value: 1, shouldAddConnectionAttributes: true })
+    expect(vitalMetric.current.attrs).toEqual(expect.objectContaining({
+      'net-type': 'type',
+      'net-etype': 'effectiveType'
+    }))
+
+    global.navigator.connection.rtt = 'rtt'
+    vitalMetric.update({ value: 1, shouldAddConnectionAttributes: true })
+    expect(vitalMetric.current.attrs).toEqual(expect.objectContaining({
+      'net-type': 'type',
+      'net-etype': 'effectiveType',
+      'net-rtt': 'rtt'
+    }))
+
+    global.navigator.connection.downlink = 'downlink'
+    vitalMetric.update({ value: 1, shouldAddConnectionAttributes: true })
+    expect(vitalMetric.current.attrs).toEqual(expect.objectContaining({
+      'net-type': 'type',
+      'net-etype': 'effectiveType',
+      'net-rtt': 'rtt',
+      'net-dlink': 'downlink'
+    }))
+
+    global.navigator.connection = {
+      type: 'type',
+      effectiveType: 'effectiveType',
+      rtt: 'rtt',
+      downlink: 'downlink'
+    }
+    vitalMetric.update({ value: 1, shouldAddConnectionAttributes: true })
+
+    expect(vitalMetric.current.attrs).toEqual(expect.objectContaining({
+      'net-type': 'type',
+      'net-etype': 'effectiveType',
+      'net-rtt': 'rtt',
+      'net-dlink': 'downlink'
+    }))
+    global.navigator.connection = {}
+  })
+})