@newrelic/browser-agent 1.239.1 → 1.241.0

package/src/common/harvest/harvest.test.js

@@ -159,6 +159,10 @@ describe('_send', () => {
     jest.mocked(configModule.getRuntime).mockReturnValue({
       maxBytes: Infinity
     })
+    jest.mocked(configModule.getConfiguration).mockReturnValue({
+      ssl: undefined,
+      proxy: {}
+    })
 
     spec = {
       endpoint: faker.datatype.uuid(),
@@ -223,6 +227,19 @@ describe('_send', () => {
     })
   })
 
+  test('able to use and send to proxy when defined', () => {
+    jest.mocked(configModule.getConfiguration).mockReturnValue({ proxy: { beacon: 'some_other_string' } })
+    const result = harvestInstance._send(spec)
+
+    expect(result).toEqual(true)
+    expect(submitMethod).toHaveBeenCalledWith({
+      body: JSON.stringify(spec.payload.body),
+      headers: [{ key: 'content-type', value: 'text/plain' }],
+      sync: undefined,
+      url: expect.stringContaining(`https://some_other_string/${spec.endpoint}/1/${licenseKey}?`)
+    })
+  })
+
   test('should use the custom defined url', () => {
     spec.customUrl = faker.internet.url()
 

package/src/common/vitals/__mocks__/web-vitals.js

@@ -0,0 +1,19 @@
+const continuouslyReportMetric = c => {
+  let count = 0
+  const vital = { value: 1, entries: [{ startTime: 1, name: 'name', size: 1, id: `id${++count}`, url: 'url', element: { tagName: 'tagName' } }], id: 'id' }
+  // report a new metric every quarter second
+  const callcb = () => {
+    setTimeout(() => {
+      c(vital)
+      callcb()
+    }, 250)
+  }
+  callcb()
+}
+
+export const onCLS = c => continuouslyReportMetric(c)
+export const onFCP = c => continuouslyReportMetric(c)
+export const onFID = c => continuouslyReportMetric(c)
+export const onINP = c => continuouslyReportMetric(c)
+export const onLCP = c => continuouslyReportMetric(c)
+export const onTTFB = c => continuouslyReportMetric(c)

package/src/common/vitals/constants.js

@@ -0,0 +1,10 @@
+export const VITAL_NAMES = {
+  FIRST_PAINT: 'fp',
+  FIRST_CONTENTFUL_PAINT: 'fcp',
+  FIRST_INPUT_DELAY: 'fi',
+  LARGEST_CONTENTFUL_PAINT: 'lcp',
+  CUMULATIVE_LAYOUT_SHIFT: 'cls',
+  INTERACTION_TO_NEXT_PAINT: 'inp',
+  LONG_TASK: 'lt',
+  TIME_TO_FIRST_BYTE: 'ttfb'
+}

package/src/common/vitals/cumulative-layout-shift.js

@@ -0,0 +1,13 @@
+import { onCLS } from 'web-vitals'
+import { VITAL_NAMES } from './constants'
+import { VitalMetric } from './vital-metric'
+import { isBrowserScope } from '../constants/runtime'
+
+export const cumulativeLayoutShift = new VitalMetric(VITAL_NAMES.CUMULATIVE_LAYOUT_SHIFT, (x) => x)
+
+if (isBrowserScope) {
+  onCLS(({ value, entries }) => {
+    if (cumulativeLayoutShift.roundingMethod(value) === cumulativeLayoutShift.current.value) return
+    cumulativeLayoutShift.update({ value, entries })
+  }, { reportAllChanges: true })
+}

package/src/common/vitals/cumulative-layout-shift.test.js

@@ -0,0 +1,71 @@
+afterEach(() => {
+  jest.resetModules()
+  jest.resetAllMocks()
+  jest.clearAllMocks()
+})
+
+const getFreshCLSImport = async (codeToRun) => {
+  const { cumulativeLayoutShift } = await import('./cumulative-layout-shift')
+  codeToRun(cumulativeLayoutShift)
+}
+
+describe('cls', () => {
+  test('reports cls', (done) => {
+    getFreshCLSImport(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
+    }))
+
+    getFreshCLSImport(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
+    getFreshCLSImport(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 new values', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: true
+    }))
+    let triggered = 0
+    getFreshCLSImport(metric => {
+      metric.subscribe(({ value }) => {
+        triggered++
+        expect(value).toEqual(1)
+        expect(triggered).toEqual(1)
+        setTimeout(() => {
+          expect(triggered).toEqual(1)
+          done()
+        }, 1000)
+      })
+    })
+  })
+})

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

@@ -0,0 +1,31 @@
+import { onFCP } from 'web-vitals'
+// eslint-disable-next-line camelcase
+import { iOSBelow16, initiallyHidden, isBrowserScope } from '../constants/runtime'
+import { VITAL_NAMES } from './constants'
+import { VitalMetric } from './vital-metric'
+
+export const firstContentfulPaint = new VitalMetric(VITAL_NAMES.FIRST_CONTENTFUL_PAINT)
+
+/* First 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 (isBrowserScope) {
+  // eslint-disable-next-line camelcase
+  if (iOSBelow16) {
+    try {
+      if (!initiallyHidden) { // see ios-version.js for detail on this following bug case; tldr: buffered flag doesn't work but getEntriesByType does
+        const paintEntries = performance.getEntriesByType('paint')
+        paintEntries.forEach(entry => {
+          if (entry.name === 'first-contentful-paint') {
+            firstContentfulPaint.update({ value: Math.floor(entry.startTime), entries: paintEntries })
+          }
+        })
+      }
+    } catch (e) {
+    // ignore
+    }
+  } else {
+    onFCP(({ value, entries }) => {
+      if (initiallyHidden || firstContentfulPaint.isValid) return
+      firstContentfulPaint.update({ value, entries })
+    })
+  }
+}

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

@@ -0,0 +1,124 @@
+beforeEach(() => {
+  jest.resetModules()
+  jest.resetAllMocks()
+  jest.clearAllMocks()
+})
+
+const getFreshFCPImport = async (codeToRun) => {
+  const { firstContentfulPaint } = await import('./first-contentful-paint')
+  codeToRun(firstContentfulPaint)
+}
+
+describe('fcp', () => {
+  test('reports fcp from web-vitals', (done) => {
+    getFreshFCPImport(firstContentfulPaint => firstContentfulPaint.subscribe(({ value }) => {
+      expect(value).toEqual(1)
+      done()
+    }))
+  })
+
+  test('reports fcp from paintEntries if ios<16', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      iOSBelow16: true,
+      initiallyHidden: false,
+      isBrowserScope: true
+    }))
+    global.performance.getEntriesByType = jest.fn(() => [{ name: 'first-contentful-paint', startTime: 1 }])
+
+    getFreshFCPImport(firstContentfulPaint => firstContentfulPaint.subscribe(({ value }) => {
+      expect(value).toEqual(1)
+      done()
+    }))
+  })
+
+  test('does NOT report if not browser scoped', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: false
+    }))
+
+    getFreshFCPImport(metric => {
+      metric.subscribe(({ value, attrs }) => {
+        console.log('should not have reported...')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 1000)
+    })
+  })
+
+  test('Does NOT report values from paintEntries other than fcp', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      iOSBelow16: true,
+      initiallyHidden: false,
+      isBrowserScope: true
+    }))
+    global.performance.getEntriesByType = jest.fn(() => [{ name: 'other-timing-name', startTime: 1 }])
+
+    getFreshFCPImport(firstContentfulPaint => {
+      firstContentfulPaint.subscribe(() => {
+        console.log('should not have reported')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 1000)
+    })
+  })
+
+  test('Does NOT report fcp from paintEntries if ios<16 && initiallyHidden', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      iOSBelow16: true,
+      initiallyHidden: true,
+      isBrowserScope: true
+    }))
+    global.performance.getEntriesByType = jest.fn(() => [{ name: 'first-contentful-paint', startTime: 1 }])
+
+    getFreshFCPImport(firstContentfulPaint => {
+      firstContentfulPaint.subscribe(() => {
+        console.log('should not have reported....')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 2000)
+    })
+  })
+
+  test('multiple subs get same value', done => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: true
+    }))
+    let sub1, sub2
+    getFreshFCPImport(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,
+      iOSBelow16: false,
+      initiallyHidden: false,
+      isBrowserScope: true
+    }))
+    let triggered = 0
+    getFreshFCPImport(firstContentfulPaint => firstContentfulPaint.subscribe(({ value }) => {
+      triggered++
+      expect(value).toEqual(1)
+      expect(triggered).toEqual(1)
+      setTimeout(() => {
+        expect(triggered).toEqual(1)
+        done()
+      }, 1000)
+    })
+    )
+  })
+})

package/src/common/vitals/first-input-delay.js

@@ -0,0 +1,20 @@
+import { onFID } from 'web-vitals'
+import { VitalMetric } from './vital-metric'
+import { VITAL_NAMES } from './constants'
+import { initiallyHidden, isBrowserScope } from '../constants/runtime'
+
+export const firstInputDelay = new VitalMetric(VITAL_NAMES.FIRST_INPUT_DELAY)
+
+if (isBrowserScope) {
+  onFID(({ value, entries }) => {
+    if (initiallyHidden || firstInputDelay.isValid || entries.length === 0) return
+
+    // CWV will only report one (THE) first-input entry to us; fid isn't reported if there are no user interactions occurs before the *first* page hiding.
+    firstInputDelay.update({
+      value: entries[0].startTime,
+      entries,
+      attrs: { type: entries[0].name, fid: Math.round(value) },
+      shouldAddConnectionAttributes: true
+    })
+  })
+}

package/src/common/vitals/first-input-delay.test.js

@@ -0,0 +1,88 @@
+beforeEach(() => {
+  jest.resetModules()
+  jest.resetAllMocks()
+  jest.clearAllMocks()
+})
+
+const getFreshFIDImport = async (codeToRun) => {
+  const { firstInputDelay } = await import('./first-input-delay')
+  codeToRun(firstInputDelay)
+}
+
+describe('fid', () => {
+  test('reports fcp from web-vitals', (done) => {
+    getFreshFIDImport(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
+    }))
+
+    getFreshFIDImport(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,
+      isBrowserScope: false
+    }))
+
+    getFreshFIDImport(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
+    getFreshFIDImport(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
+    getFreshFIDImport(metric => metric.subscribe(({ value }) => {
+      triggered++
+      expect(value).toEqual(1)
+      expect(triggered).toEqual(1)
+      setTimeout(() => {
+        expect(triggered).toEqual(1)
+        done()
+      }, 1000)
+    })
+    )
+  })
+})

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