@newrelic/browser-agent 0.0.9 → 0.1.230

package/src/features/metrics/instrument/index.js

@@ -0,0 +1,44 @@
+import { InstrumentBase } from '../../utils/instrument-base'
+import { insertSupportMetrics } from './workers-helper'
+import { FEATURE_NAME, SUPPORTABILITY_METRIC_CHANNEL } from '../constants'
+import { handle } from '../../../common/event-emitter/handle'
+import { FEATURE_NAMES } from '../../../loaders/features/features'
+import { wrapConsole } from '../../../common/wrap'
+import { stringify } from '../../../common/util/stringify'
+
+export class Instrument extends InstrumentBase {
+  static featureName = FEATURE_NAME
+  constructor (agentIdentifier, aggregator, auto = true) {
+    super(agentIdentifier, aggregator, FEATURE_NAME, auto)
+    insertSupportMetrics(tag => handle(SUPPORTABILITY_METRIC_CHANNEL, [tag], undefined, FEATURE_NAMES.metrics, this.ee))
+
+    this.addConsoleSupportabilityMetrics()
+
+    this.importAggregator()
+  }
+
+  addConsoleSupportabilityMetrics () {
+    // For now we are just capturing supportability metrics on `console` usage to assess log forwarding feature.
+    const consoleEE = wrapConsole(this.ee)
+
+    for (const method of ['Debug', 'Error', 'Info', 'Log', 'Trace', 'Warn']) {
+      consoleEE.on(`${method.toLowerCase()}-console-start`, function (args, target) {
+        // Parsing the args individually into a new array ensures that functions and Error objects are represented with
+        // useful string values. By default, functions stringify to null and Error objects stringify to empty objects.
+        // Note that stack traces printed by the console.trace method are not captured.
+        let parsedArgs = []
+        for (const arg of args) {
+          if (typeof arg === 'function' ||
+            (arg && arg.message && arg.stack) // Duck typing for Error objects
+          ) {
+            parsedArgs.push(arg.toString())
+          } else {
+            parsedArgs.push(arg)
+          }
+        }
+        const parsedArgsJSON = stringify(parsedArgs)
+        handle(SUPPORTABILITY_METRIC_CHANNEL, [`Console/${method}/Seen`, parsedArgsJSON.length], undefined, FEATURE_NAMES.metrics, consoleEE)
+      })
+    }
+  }
+}

package/src/features/metrics/instrument/workers-helper.js

@@ -0,0 +1,110 @@
+import { globalScope, isWorkerScope } from '../../../common/util/global-scope'
+import { warn } from '../../../common/util/console'
+
+/**
+ * True for each Worker type supported in browser's execution context. Not all browser versions may support certain Workers or options however.
+ * - Warning: service workers are not available on unsecured HTTP sites
+ */
+const workersApiIsSupported = {
+  dedicated: Boolean(globalScope?.Worker),
+  shared: Boolean(globalScope?.SharedWorker),
+  service: Boolean(globalScope?.navigator?.serviceWorker)
+}
+
+let origWorker, origSharedWorker, origServiceWorkerCreate
+/**
+ * Un-instrument support metrics for Workers.
+ * @returns void
+ */
+function resetSupportability () {
+  if (origWorker) globalScope.Worker = origWorker // Worker was changed by this module
+  if (origSharedWorker) globalScope.SharedWorker = origSharedWorker
+  if (origServiceWorkerCreate) globalScope.navigator.serviceWorker.register = origServiceWorkerCreate
+  origWorker = origSharedWorker = origServiceWorkerCreate = undefined
+}
+
+/**
+ * Injects code to report Web Workers supportability and usage as metrics, replacing the native API in global scope as a side effect.
+ * @param {Function} report - a cb used to report data
+ * @returns void
+ */
+export function insertSupportMetrics (report) {
+  // Of the 3, the normal worker is the most widely supported, so we can be sure metric was already inserted w/o checking other 2.
+  if (origWorker) return
+
+  if (!workersApiIsSupported.dedicated) {
+    reportUnavailable('All')
+    return // similarly, if dedicated is n/a, none of them are supported so quit
+  } else {
+    origWorker = Worker
+    try { globalScope.Worker = extendWorkerConstructor(origWorker, 'Dedicated') }
+    catch (e) { handleInsertionError(e, 'Dedicated') }
+  }
+
+  if (!workersApiIsSupported.shared) {
+    reportUnavailable('Shared')
+  } else {
+    origSharedWorker = SharedWorker
+    try { globalScope.SharedWorker = extendWorkerConstructor(origSharedWorker, 'Shared') }
+    catch (e) { handleInsertionError(e, 'Shared') }
+  }
+  if (!workersApiIsSupported.service) {
+    reportUnavailable('Service')
+  } else {
+    origServiceWorkerCreate = navigator.serviceWorker.register
+    try { globalScope.navigator.serviceWorker.register = extendServiceCreation(origServiceWorkerCreate) }
+    catch (e) { handleInsertionError(e, 'Service') }
+  }
+  return
+
+  // Internal helpers - Core
+  /**
+     * Report each time a Worker or SharedWorker is created in page execution. Note the current trap is set for only "new" and Reflect.construct operations.
+     * @param {func obj} origClass - Worker() or SharedWorker()
+     * @param {string} workerType - 'Dedicated' or 'Shared'
+     * @returns Proxy worker that intercepts the original constructor
+     */
+  function extendWorkerConstructor (origClass, workerType) {
+    if (typeof Proxy === 'undefined') {
+      return origClass
+    }
+
+    const newHandler = {
+      construct (oConstructor, args) {
+        reportWorkerCreationAttempt(workerType, args[1]?.type)
+        return new oConstructor(...args)
+      }
+    }
+    // eslint-disable-next-line
+        return new Proxy(origClass, newHandler);
+  }
+  /**
+     * Report each time a ServiceWorkerRegistration is created or updated in page execution.
+     * @param {func} origFunc - method responsible for creating a ServiceWorker
+     * @returns Refer to ServiceWorkerContainer.register()
+     */
+  function extendServiceCreation (origFunc) {
+    return (...args) => {
+      reportWorkerCreationAttempt('Service', args[1]?.type)
+      return origFunc.apply(navigator.serviceWorker, args) // register() has to be rebound to the ServiceWorkerContainer object
+    }
+  }
+
+  // Internal helpers - Reporting & logging
+  function reportUnavailable (workerType) {
+    if (isWorkerScope) return // assume that the main browser window has already reported unsupported worker APIs (once per page life);
+    // on top of that, not all workers are available inside a certain worker per se--e.g. no sharedWorker() inside Worker
+    report(`Workers/${workerType}/Unavailable`)
+  }
+  function reportWorkerCreationAttempt (workerType, optionType) {
+    if (optionType === 'module') {
+      report(`Workers/${workerType}/Module`)
+    } else {
+      report(`Workers/${workerType}/Classic`)
+    }
+  }
+  function handleInsertionError (e, workerType) { // indicates the browser version doesn't support how code is injected, such as Proxy API
+    report(`Workers/${workerType}/SM/Unsupported`) // expected to be niche & for older borderline-ES6 browser versions
+    warn(`NR Agent: Unable to capture ${workerType} workers.`, e)
+  }
+}

package/src/features/page_action/aggregate/index.js

@@ -0,0 +1,113 @@
+/*
+ * Copyright 2020 New Relic Corporation. All rights reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { mapOwn } from '../../../common/util/map-own'
+import { stringify } from '../../../common/util/stringify'
+import { registerHandler as register } from '../../../common/event-emitter/register-handler'
+import { HarvestScheduler } from '../../../common/harvest/harvest-scheduler'
+import { cleanURL } from '../../../common/url/clean-url'
+import { getConfigurationValue, getInfo, getRuntime } from '../../../common/config/config'
+import { AggregateBase } from '../../utils/aggregate-base'
+import { FEATURE_NAME } from '../constants'
+import { drain } from '../../../common/drain/drain'
+import { isBrowserScope } from '../../../common/util/global-scope'
+
+export class Aggregate extends AggregateBase {
+  static featureName = FEATURE_NAME
+  constructor (agentIdentifier, aggregator) {
+    super(agentIdentifier, aggregator, FEATURE_NAME)
+    this.eventsPerMinute = 240
+    this.harvestTimeSeconds = getConfigurationValue(this.agentIdentifier, 'page_action.harvestTimeSeconds') || getConfigurationValue(this.agentIdentifier, 'ins.harvestTimeSeconds') || 30
+    this.eventsPerHarvest = this.eventsPerMinute * this.harvestTimeSeconds / 60
+    this.referrerUrl
+    this.currentEvents
+
+    this.events = []
+
+    this.att = getInfo(this.agentIdentifier).jsAttributes // per-agent, aggregators-shared info context
+
+    if (isBrowserScope && document.referrer) this.referrerUrl = cleanURL(document.referrer)
+
+    register('api-addPageAction', (...args) => this.addPageAction(...args), this.featureName, this.ee)
+
+    var scheduler = new HarvestScheduler('ins', { onFinished: (...args) => this.onHarvestFinished(...args) }, this)
+    scheduler.harvest.on('ins', (...args) => this.onHarvestStarted(...args))
+    this.ee.on(`drain-${this.featureName}`, () => { if (!this.blocked) scheduler.startTimer(this.harvestTimeSeconds, 0) })
+
+    // if rum response determines that customer lacks entitlements for ins endpoint, block it
+    register('block-ins', () => {
+      this.blocked = true
+      scheduler.stopTimer(true)
+    }, this.featureName, this.ee)
+
+    drain(this.agentIdentifier, this.featureName)
+  }
+
+  onHarvestStarted (options) {
+    const { userAttributes, atts } = getInfo(this.agentIdentifier)
+    var payload = ({
+      qs: {
+        ua: userAttributes,
+        at: atts
+      },
+      body: {
+        ins: this.events
+      }
+    })
+
+    if (options.retry) {
+      this.currentEvents = this.events
+    }
+
+    this.events = []
+    return payload
+  }
+
+  onHarvestFinished (result) {
+    if (result && result.sent && result.retry && this.currentEvents) {
+      this.events = this.events.concat(this.currentEvents)
+      this.currentEvents = null
+    }
+  }
+
+  // WARNING: Insights times are in seconds. EXCEPT timestamp, which is in ms.
+  addPageAction (t, name, attributes) {
+    if (this.events.length >= this.eventsPerHarvest || this.blocked) return
+    var width
+    var height
+    var eventAttributes = {}
+
+    if (isBrowserScope && window.document.documentElement) {
+      // Doesn't include the nav bar when it disappears in mobile safari
+      // https://github.com/jquery/jquery/blob/10399ddcf8a239acc27bdec9231b996b178224d3/src/dimensions.js#L23
+      width = window.document.documentElement.clientWidth
+      height = window.document.documentElement.clientHeight
+    }
+
+    var defaults = {
+      timestamp: t + getRuntime(this.agentIdentifier).offset,
+      timeSinceLoad: t / 1000,
+      browserWidth: width,
+      browserHeight: height,
+      referrerUrl: this.referrerUrl,
+      currentUrl: cleanURL('' + location),
+      pageUrl: cleanURL(getRuntime(this.agentIdentifier).origin),
+      eventType: 'PageAction'
+    }
+
+    mapOwn(defaults, set)
+    mapOwn(getInfo(this.agentIdentifier).jsAttributes, set)
+    if (attributes && typeof attributes === 'object') {
+      mapOwn(attributes, set)
+    }
+    eventAttributes.actionName = name || ''
+
+    this.events.push(eventAttributes)
+
+    function set (key, val) {
+      eventAttributes[key] = (val && typeof val === 'object' ? stringify(val) : val)
+    }
+  }
+}

package/src/features/page_action/constants.js

@@ -0,0 +1,3 @@
+import { FEATURE_NAMES } from '../../loaders/features/features'
+
+export const FEATURE_NAME = FEATURE_NAMES.pageAction

package/src/features/page_action/index.js

@@ -0,0 +1 @@
+export { Instrument as PageAction } from './instrument/index'

package/src/features/page_action/instrument/index.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright 2020 New Relic Corporation. All rights reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { InstrumentBase } from '../../utils/instrument-base'
+import { FEATURE_NAME } from '../constants'
+
+export class Instrument extends InstrumentBase {
+  static featureName = FEATURE_NAME
+  constructor (agentIdentifier, aggregator, auto = true) {
+    super(agentIdentifier, aggregator, FEATURE_NAME, auto)
+    this.importAggregator()
+  }
+}

package/src/features/page_view_event/aggregate/index.js

@@ -0,0 +1,134 @@
+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 { 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 * as CONSTANTS from '../constants'
+import { getActivatedFeaturesFlags } from './initialized-features'
+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 = CONSTANTS.FEATURE_NAME
+  constructor (agentIdentifier, aggregator) {
+    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 () {
+    return getConfigurationValue(this.agentIdentifier, 'ssl') === false ? 'http' : 'https'
+  }
+
+  sendRum () {
+    const info = getInfo(this.agentIdentifier)
+    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)
+
+    // 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 })
+
+    var measuresMetrics = this.aggregator.get('measures')
+
+    var measuresQueryString = mapOwn(measuresMetrics, function (metricName, measure) {
+      return '&' + metricName + '=' + measure.params.value
+    }).join('')
+
+    // currently we only have one version of our protocol
+    // in the future we may add more
+    var protocol = '1'
+
+    var scheduler = new HarvestScheduler('page_view_event', {}, this)
+
+    var chunksForQueryString = [scheduler.harvest.baseQueryString()]
+
+    chunksForQueryString.push(measuresQueryString)
+
+    chunksForQueryString.push(param('tt', info.ttGuid))
+    chunksForQueryString.push(param('us', info.user))
+    chunksForQueryString.push(param('ac', info.account))
+    chunksForQueryString.push(param('pr', info.product))
+    chunksForQueryString.push(param('af', getActivatedFeaturesFlags(this.agentIdentifier).join(',')))
+
+    if (globalScope.performance && typeof (globalScope.performance.timing) !== 'undefined') {
+      var navTimingApiData = ({
+        timing: addPT(agentRuntime.offset, globalScope.performance.timing, {}),
+        navigation: addPN(globalScope.performance.navigation, {})
+      })
+      chunksForQueryString.push(param('perf', stringify(navTimingApiData)))
+    }
+
+    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')
+      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))
+    chunksForQueryString.push(param('at', info.atts))
+
+    var customJsAttributes = stringify(info.jsAttributes)
+    chunksForQueryString.push(param('ja', customJsAttributes === '{}' ? null : customJsAttributes))
+
+    var queryString = fromArray(chunksForQueryString, agentRuntime.maxBytes)
+
+    // Capture bytes sent to RUM call endpoint (currently `1`) as a supportability metric. See metrics aggregator (on unload).
+    agentRuntime.bytesSent[protocol] = (agentRuntime.bytesSent[protocol] || 0) + queryString?.length || 0
+
+    const isValidJsonp = submitData.jsonp(
+      this.getScheme() + '://' + info.beacon + '/' + protocol + '/' + info.licenseKey + queryString,
+      jsonp
+    )
+    // 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, CONSTANTS.FEATURE_NAME)
+  }
+}

package/src/features/page_view_event/aggregate/initialized-features.js

@@ -0,0 +1,31 @@
+import { FEATURE_NAMES } from '../../../loaders/features/features'
+
+/**
+ * Get an array of flags required by downstream (NR UI) based on the features initialized in this agent
+ * (aka what is running on the page).
+ * @param {String} agentId - the ID of the initialized agent on the page, mapping to the one under the global 'newrelic' object
+ * @returns {String[]} Up to 5 short strings corresponding to ingest mapping of features.
+ */
+export function getActivatedFeaturesFlags (agentId) {
+  const flagArr = []
+
+  Object.keys(newrelic.initializedAgents[agentId].features).forEach(featName => {
+    switch (featName) {
+      case FEATURE_NAMES.ajax:
+        flagArr.push('xhr'); break
+      case FEATURE_NAMES.jserrors:
+        flagArr.push('err'); break
+      case FEATURE_NAMES.pageAction:
+        flagArr.push('ins'); break
+      case FEATURE_NAMES.sessionTrace:
+        flagArr.push('stn'); break
+      case FEATURE_NAMES.spa:
+        flagArr.push('spa'); break
+    }
+  })
+
+  return flagArr
+}
+
+// Note: this module and the "af" param in src/features/page_view_event/aggregate/index.js can be removed in the future at such time
+// that it's no longer being used. For the browser agent, this is an unused flag system.

package/src/features/page_view_event/constants.js

@@ -0,0 +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'

package/src/features/page_view_event/index.js

@@ -0,0 +1 @@
+export { Instrument as PageViewEvent } from './instrument/index'

package/src/features/page_view_event/instrument/index.js

@@ -0,0 +1,33 @@
+
+import { handle } from '../../../common/event-emitter/handle'
+import { isiOS } from '../../../common/browser-version/ios-version'
+import { InstrumentBase } from '../../utils/instrument-base'
+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 = CONSTANTS.FEATURE_NAME
+  constructor (agentIdentifier, aggregator, auto = true) {
+    super(agentIdentifier, aggregator, CONSTANTS.FEATURE_NAME, auto)
+
+    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)
+
+      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.
+
+    this.importAggregator()
+  }
+}