@newrelic/browser-agent 1.303.0 → 1.304.0-rc.1

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

@@ -37,7 +37,7 @@ export class Aggregate extends AggregateBase {
         if (RESERVED_EVENT_TYPES.includes(eventType)) return warn(46)
         this.addEvent({
           eventType,
-          timestamp: this.toEpoch(timestamp),
+          timestamp: this.#toEpoch(timestamp),
           ...attributes
         }, target)
       }, this.featureName, this.ee)
@@ -47,7 +47,7 @@ export class Aggregate extends AggregateBase {
           this.addEvent({
             ...attributes,
             eventType: 'PageAction',
-            timestamp: this.toEpoch(timestamp),
+            timestamp: this.#toEpoch(timestamp),
             timeSinceLoad: timestamp / 1000,
             actionName: name,
             referrerUrl: this.referrerUrl,
@@ -72,7 +72,7 @@ export class Aggregate extends AggregateBase {
               const { target, timeStamp, type } = aggregatedUserAction.event
               const userActionEvent = {
                 eventType: 'UserAction',
-                timestamp: this.toEpoch(timeStamp),
+                timestamp: this.#toEpoch(timeStamp),
                 action: type,
                 actionCount: aggregatedUserAction.count,
                 actionDuration: aggregatedUserAction.relativeMs[aggregatedUserAction.relativeMs.length - 1],
@@ -149,7 +149,7 @@ export class Aggregate extends AggregateBase {
                     this.addEvent({
                       ...detailObj,
                       eventType: 'BrowserPerformance',
-                      timestamp: this.toEpoch(entry.startTime),
+                      timestamp: this.#toEpoch(entry.startTime),
                       entryName: entry.name,
                       entryDuration: entry.duration,
                       entryType: type
@@ -214,7 +214,7 @@ export class Aggregate extends AggregateBase {
             const event = {
               ...entryObject,
               eventType: 'BrowserPerformance',
-              timestamp: Math.floor(agentRef.runtime.timeKeeper.correctRelativeTimestamp(entryObject.startTime)),
+              timestamp: this.#toEpoch(entryObject.startTime),
               entryName: cleanURL(name),
               entryDuration: duration,
               firstParty
@@ -233,7 +233,7 @@ export class Aggregate extends AggregateBase {
         const event = {
           ...customAttributes,
           eventType: 'BrowserPerformance',
-          timestamp: Math.floor(agentRef.runtime.timeKeeper.correctRelativeTimestamp(start)),
+          timestamp: this.#toEpoch(start),
           entryName: n,
           entryDuration: duration,
           entryType: 'measure'
@@ -242,6 +242,24 @@ export class Aggregate extends AggregateBase {
         this.addEvent(event, target)
       }, this.featureName, this.ee)
 
+      if (agentRef.init.feature_flags.includes('websockets')) {
+        registerHandler('ws-complete', (nrData) => {
+          const event = {
+            ...nrData,
+            eventType: 'WebSocket',
+            timestamp: this.#toEpoch(nrData.timestamp),
+            openedAt: this.#toEpoch(nrData.openedAt),
+            closedAt: this.#toEpoch(nrData.closedAt)
+          }
+
+          // Report supportability metrics for WebSocket completion
+          this.reportSupportabilityMetric('WebSocket/Completed/Seen')
+          this.reportSupportabilityMetric('WebSocket/Completed/Bytes', stringify(event).length)
+
+          this.addEvent(event)
+        }, this.featureName, this.ee)
+      }
+
       this.drain()
     })
   }
@@ -274,7 +292,7 @@ export class Aggregate extends AggregateBase {
 
     const defaultEventAttributes = {
       /** should be overridden by the event-specific attributes, but just in case -- set it to now() */
-      timestamp: Math.floor(this.agentRef.runtime.timeKeeper.correctRelativeTimestamp(now())),
+      timestamp: this.#toEpoch(now()),
       /** all generic events require pageUrl(s) */
       pageUrl: cleanURL('' + initialLocation),
       currentUrl: cleanURL('' + location),
@@ -302,7 +320,7 @@ export class Aggregate extends AggregateBase {
     return { ua: this.agentRef.info.userAttributes, at: this.agentRef.info.atts }
   }
 
-  toEpoch (timestamp) {
+  #toEpoch (timestamp) {
     return Math.floor(this.agentRef.runtime.timeKeeper.correctRelativeTimestamp(timestamp))
   }
 

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

@@ -20,18 +20,23 @@ import { wrapFetch } from '../../../common/wrap/wrap-fetch'
 import { wrapXhr } from '../../../common/wrap/wrap-xhr'
 import { parseUrl } from '../../../common/url/parse-url'
 import { extractUrl } from '../../../common/url/extract-url'
+import { wrapWebSocket } from '../../../common/wrap/wrap-websocket'
 
 export class Instrument extends InstrumentBase {
   static featureName = FEATURE_NAME
   constructor (agentRef) {
     super(agentRef, FEATURE_NAME)
+    const websocketsEnabled = agentRef.init.feature_flags.includes('websockets')
+    const ufEnabled = agentRef.init.feature_flags.includes('user_frustrations')
+
     /** config values that gate whether the generic events aggregator should be imported at all */
     const genericEventSourceConfigs = [
       agentRef.init.page_action.enabled,
       agentRef.init.performance.capture_marks,
       agentRef.init.performance.capture_measures,
+      agentRef.init.performance.resources.enabled,
       agentRef.init.user_actions.enabled,
-      agentRef.init.performance.resources.enabled
+      websocketsEnabled
     ]
 
     /** feature specific APIs */
@@ -41,13 +46,13 @@ export class Instrument extends InstrumentBase {
     setupRegisterAPI(agentRef)
     setupMeasureAPI(agentRef)
 
-    const ufEnabled = agentRef.init.feature_flags.includes('user_frustrations')
-    let historyEE
+    let historyEE, websocketsEE
     if (isBrowserScope && ufEnabled) {
       wrapFetch(this.ee)
       wrapXhr(this.ee)
       historyEE = wrapHistory(this.ee)
     }
+    if (websocketsEnabled) websocketsEE = wrapWebSocket(this.ee)
 
     if (isBrowserScope) {
       if (agentRef.init.user_actions.enabled) {
@@ -106,6 +111,11 @@ export class Instrument extends InstrumentBase {
         observer.observe({ type: 'resource', buffered: true })
       }
     }
+    if (websocketsEnabled) { // this can apply outside browser scope such as in worker
+      websocketsEE.on('ws', (nrData) => {
+        handle('ws-complete', [nrData], undefined, this.featureName, this.ee)
+      })
+    }
 
     try {
       this.removeOnAbort = new AbortController()

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

@@ -192,10 +192,13 @@ export class Aggregate extends AggregateBase {
     // still send EE events for other features such as above, but stop this one from aggregating internal data
     if (this.blocked) return
 
-    if (err?.__newrelic?.[this.agentIdentifier]) {
+    if (err.__newrelic?.[this.agentIdentifier]) {
       params._interactionId = err.__newrelic[this.agentIdentifier].interactionId
       params._interactionNodeId = err.__newrelic[this.agentIdentifier].interactionNodeId
     }
+    if (err.__newrelic?.socketId) {
+      customAttributes.socketId = err.__newrelic.socketId
+    }
 
     if (this.shouldAllowMainAgentToCapture(target)) {
       const softNavInUse = Boolean(this.agentRef.features?.[FEATURE_NAMES.softNav])

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

@@ -131,12 +131,6 @@ export class Aggregate extends AggregateBase {
     // webdriver detection
     if (navigator.webdriver) this.storeSupportabilityMetrics('Generic/WebDriver/Detected')
 
-    // WATCHABLE_WEB_SOCKET_EVENTS.forEach(tag => {
-    //   registerHandler('buffered-' + WEBSOCKET_TAG + tag, (...args) => {
-    //     handleWebsocketEvents(this.storeSupportabilityMetrics.bind(this), tag, ...args)
-    //   }, this.featureName, this.ee)
-    // })
-
     /** all the harvest metadata metrics need to be evaluated simulataneously at unload time so just temporarily buffer them and dont make SMs immediately from the data */
     registerHandler('harvest-metadata', (harvestMetadataObject = {}) => {
       try {

package/src/features/metrics/constants.js

@@ -2,8 +2,6 @@
  * Copyright 2020-2025 New Relic, Inc. All rights reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
-
-import { ADD_EVENT_LISTENER_TAG } from '../../common/wrap/wrap-websocket'
 import { FEATURE_NAMES } from '../../loaders/features/features'
 
 export const FEATURE_NAME = FEATURE_NAMES.metrics
@@ -11,5 +9,3 @@ export const SUPPORTABILITY_METRIC = 'sm'
 export const CUSTOM_METRIC = 'cm'
 export const SUPPORTABILITY_METRIC_CHANNEL = 'storeSupportabilityMetrics'
 export const CUSTOM_METRIC_CHANNEL = 'storeEventMetrics'
-
-export const WATCHABLE_WEB_SOCKET_EVENTS = ['new', 'send', 'close', ADD_EVENT_LISTENER_TAG]

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

@@ -8,23 +8,13 @@ import { handle } from '../../../common/event-emitter/handle'
 import { InstrumentBase } from '../../utils/instrument-base'
 import {
   FEATURE_NAME,
-  // WATCHABLE_WEB_SOCKET_EVENTS,
   SUPPORTABILITY_METRIC_CHANNEL
 } from '../constants'
-// import { handle } from '../../../common/event-emitter/handle'
-// import { WEBSOCKET_TAG, wrapWebSocket } from '../../../common/wrap/wrap-websocket'
 
 export class Instrument extends InstrumentBase {
   static featureName = FEATURE_NAME
   constructor (agentRef) {
     super(agentRef, FEATURE_NAME)
-    // wrapWebSocket(this.ee) - feb'25 : removing wrapping again to avoid integration issues
-
-    // WATCHABLE_WEB_SOCKET_EVENTS.forEach((suffix) => {
-    //   this.ee.on(WEBSOCKET_TAG + suffix, (...args) => {
-    //     handle('buffered-' + WEBSOCKET_TAG + suffix, [...args], undefined, this.featureName, this.ee)
-    //   })
-    // })
 
     if (isBrowserScope) {
       document.addEventListener('securitypolicyviolation', (e) => {

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

@@ -3,8 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { handle } from '../../../common/event-emitter/handle'
-import { subscribeToVisibilityChange } from '../../../common/window/page-visibility'
-import { windowAddEventListener } from '../../../common/event-listener/event-listener-opts'
+import { subscribeToPageUnload, subscribeToVisibilityChange } from '../../../common/window/page-visibility'
 import { InstrumentBase } from '../../utils/instrument-base'
 import { FEATURE_NAME } from '../constants'
 import { isBrowserScope } from '../../../common/constants/runtime'
@@ -20,7 +19,7 @@ export class Instrument extends InstrumentBase {
     subscribeToVisibilityChange(() => handle('docHidden', [now()], undefined, FEATURE_NAME, this.ee), true)
 
     // Window fires its pagehide event (typically on navigation--this occurrence is a *subset* of vis change); don't defer this unless it's guarantee it cannot happen before load(?)
-    windowAddEventListener('pagehide', () => handle('winPagehide', [now()], undefined, FEATURE_NAME, this.ee))
+    subscribeToPageUnload(() => handle('winPagehide', [now()], undefined, FEATURE_NAME, this.ee))
 
     this.importAggregator(agentRef, () => import(/* webpackChunkName: "page_view_timing-aggregate" */ '../aggregate'))
   }

package/src/features/session_replay/shared/recorder.js

@@ -120,7 +120,8 @@ export class Recorder {
         inlineImages: inline_images,
         collectFonts: collect_fonts,
         checkoutEveryNms: CHECKOUT_MS[mode],
-        recordAfter: 'DOMContentLoaded'
+        recordAfter: 'DOMContentLoaded',
+        slimDOMOptions: 'all'
       })
     } catch (err) {
       this.ee.emit('internal-error', [err])

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

@@ -267,7 +267,7 @@ export class Aggregate extends AggregateBase {
 }
 
 function getActionText (elem) {
-  const tagName = elem.tagName.toLowerCase()
+  const tagName = elem.tagName?.toLowerCase()
   const elementsOfInterest = ['a', 'button', 'input']
   if (elementsOfInterest.includes(tagName)) {
     return elem.title || elem.value || elem.innerText

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

@@ -60,6 +60,7 @@ export class Instrument extends InstrumentBase {
     })
 
     const processUserInteraction = debounce((event) => {
+      if (document.readyState === 'loading') return // document.body is not expected to be defined yet during loading, so only "interactive" or "complete" is considered "legit" user interaction
       handle('newUIEvent', [event], undefined, this.featureName, this.ee)
       domObserver.observe(document.body, { attributes: true, childList: true, subtree: true, characterData: true })
     }, UI_WAIT_INTERVAL, { leading: true })

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

@@ -683,7 +683,7 @@ export class Aggregate extends AggregateBase {
     baseEE.on('interaction', saveInteraction)
 
     function getActionText (node) {
-      var nodeType = node.tagName.toLowerCase()
+      var nodeType = node.tagName?.toLowerCase()
       var goodNodeTypes = ['a', 'button', 'input']
       var isGoodNode = goodNodeTypes.indexOf(nodeType) !== -1
       if (isGoodNode) {

package/dist/cjs/features/metrics/aggregate/websocket-detection.js

@@ -1,39 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.handleWebsocketEvents = handleWebsocketEvents;
-var _dataSize = require("../../../common/util/data-size");
-var _text = require("../../../common/util/text");
-var _wrapWebsocket = require("../../../common/wrap/wrap-websocket");
-/**
- * Copyright 2020-2025 New Relic, Inc. All rights reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * A SM handler for web socket events, which converts them to a shape suitable for SMs and reports them.
- * @param {Function} reporter a function that reports data as a supportability metric
- * @param {string} tag the unique tag to assign to the sm
- * @param {number} timestamp ms from page origin
- * @param {number} timeSinceInit ms from class init
- * @param {boolean} isLoaded whether the even was observed before the page load event
- * @param {string} socketId a unique id assigned to the observed socket
- * @param {*} data the data reported alongside the socket event
- */
-function handleWebsocketEvents(reporter, tag, timestamp, timeSinceInit, isLoaded, socketId, data) {
-  // socketId is unused in the SMs
-  const useDataType = tag === _wrapWebsocket.ADD_EVENT_LISTENER_TAG;
-  let metricTag = (0, _text.toTitleCase)(useDataType ? data.eventType : tag);
-  if (metricTag === 'Close') {
-    if (data?.event.code === 1000 || data?.event.wasClean) metricTag += '-Clean';else metricTag += '-Dirty';
-  }
-  const bytes = metricTag === 'Message' && (0, _dataSize.dataSize)(data?.event?.data) || metricTag === 'Send' && (0, _dataSize.dataSize)(data);
-  reporter(buildSMTag(metricTag, 'Ms'), timestamp);
-  reporter(buildSMTag(metricTag, 'MsSinceClassInit'), timeSinceInit);
-  if (bytes) reporter(buildSMTag(metricTag, 'Bytes'), bytes);
-}
-function buildSMTag(tag, category) {
-  return 'WebSocket/' + tag + '/' + category;
-}

package/dist/esm/features/metrics/aggregate/websocket-detection.js

@@ -1,33 +0,0 @@
-/**
- * Copyright 2020-2025 New Relic, Inc. All rights reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-import { dataSize } from '../../../common/util/data-size';
-import { toTitleCase } from '../../../common/util/text';
-import { ADD_EVENT_LISTENER_TAG } from '../../../common/wrap/wrap-websocket';
-
-/**
- * A SM handler for web socket events, which converts them to a shape suitable for SMs and reports them.
- * @param {Function} reporter a function that reports data as a supportability metric
- * @param {string} tag the unique tag to assign to the sm
- * @param {number} timestamp ms from page origin
- * @param {number} timeSinceInit ms from class init
- * @param {boolean} isLoaded whether the even was observed before the page load event
- * @param {string} socketId a unique id assigned to the observed socket
- * @param {*} data the data reported alongside the socket event
- */
-export function handleWebsocketEvents(reporter, tag, timestamp, timeSinceInit, isLoaded, socketId, data) {
-  // socketId is unused in the SMs
-  const useDataType = tag === ADD_EVENT_LISTENER_TAG;
-  let metricTag = toTitleCase(useDataType ? data.eventType : tag);
-  if (metricTag === 'Close') {
-    if (data?.event.code === 1000 || data?.event.wasClean) metricTag += '-Clean';else metricTag += '-Dirty';
-  }
-  const bytes = metricTag === 'Message' && dataSize(data?.event?.data) || metricTag === 'Send' && dataSize(data);
-  reporter(buildSMTag(metricTag, 'Ms'), timestamp);
-  reporter(buildSMTag(metricTag, 'MsSinceClassInit'), timeSinceInit);
-  if (bytes) reporter(buildSMTag(metricTag, 'Bytes'), bytes);
-}
-function buildSMTag(tag, category) {
-  return 'WebSocket/' + tag + '/' + category;
-}

package/dist/types/features/metrics/aggregate/websocket-detection.d.ts

@@ -1,12 +0,0 @@
-/**
- * A SM handler for web socket events, which converts them to a shape suitable for SMs and reports them.
- * @param {Function} reporter a function that reports data as a supportability metric
- * @param {string} tag the unique tag to assign to the sm
- * @param {number} timestamp ms from page origin
- * @param {number} timeSinceInit ms from class init
- * @param {boolean} isLoaded whether the even was observed before the page load event
- * @param {string} socketId a unique id assigned to the observed socket
- * @param {*} data the data reported alongside the socket event
- */
-export function handleWebsocketEvents(reporter: Function, tag: string, timestamp: number, timeSinceInit: number, isLoaded: boolean, socketId: string, data: any): void;
-//# sourceMappingURL=websocket-detection.d.ts.map

package/dist/types/features/metrics/aggregate/websocket-detection.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"websocket-detection.d.ts","sourceRoot":"","sources":["../../../../../src/features/metrics/aggregate/websocket-detection.js"],"names":[],"mappings":"AAQA;;;;;;;;;GASG;AACH,+DAPW,MAAM,aACN,MAAM,iBACN,MAAM,YACN,OAAO,YACP,MAAM,QACN,GAAC,QAcX"}

package/src/features/metrics/aggregate/websocket-detection.js

@@ -1,35 +0,0 @@
-/**
- * Copyright 2020-2025 New Relic, Inc. All rights reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-import { dataSize } from '../../../common/util/data-size'
-import { toTitleCase } from '../../../common/util/text'
-import { ADD_EVENT_LISTENER_TAG } from '../../../common/wrap/wrap-websocket'
-
-/**
- * A SM handler for web socket events, which converts them to a shape suitable for SMs and reports them.
- * @param {Function} reporter a function that reports data as a supportability metric
- * @param {string} tag the unique tag to assign to the sm
- * @param {number} timestamp ms from page origin
- * @param {number} timeSinceInit ms from class init
- * @param {boolean} isLoaded whether the even was observed before the page load event
- * @param {string} socketId a unique id assigned to the observed socket
- * @param {*} data the data reported alongside the socket event
- */
-export function handleWebsocketEvents (reporter, tag, timestamp, timeSinceInit, isLoaded, socketId, data) {
-  // socketId is unused in the SMs
-  const useDataType = tag === ADD_EVENT_LISTENER_TAG
-  let metricTag = toTitleCase(useDataType ? data.eventType : tag)
-  if (metricTag === 'Close') {
-    if (data?.event.code === 1000 || data?.event.wasClean) metricTag += '-Clean'
-    else metricTag += '-Dirty'
-  }
-  const bytes = (metricTag === 'Message' && dataSize(data?.event?.data)) || (metricTag === 'Send' && dataSize(data))
-  reporter(buildSMTag(metricTag, 'Ms'), timestamp)
-  reporter(buildSMTag(metricTag, 'MsSinceClassInit'), timeSinceInit)
-  if (bytes) reporter(buildSMTag(metricTag, 'Bytes'), bytes)
-}
-
-function buildSMTag (tag, category) {
-  return 'WebSocket/' + tag + '/' + category
-}