@newrelic/browser-agent 1.316.0-rc.6 → 1.317.0

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

@@ -6,12 +6,13 @@ import { registerHandler } from '../../../common/event-emitter/register-handler'
 import { stringify } from '../../../common/util/stringify'
 import { handle } from '../../../common/event-emitter/handle'
 import { setDenyList, shouldCollectEvent } from '../../../common/deny-list/deny-list'
-import { AJAX_ID, FEATURE_NAME } from '../constants'
+import { FEATURE_NAME, AJAX_ID } from '../constants'
 import { FEATURE_NAMES } from '../../../loaders/features/features'
 import { AggregateBase } from '../../utils/aggregate-base'
-import { parseGQL } from './gql'
 import { nullable, numeric, getAddStringContext, addCustomAttributes } from '../../../common/serialize/bel-serializer'
 import { gosNREUMOriginals } from '../../../common/window/nreum'
+import { hasGQLErrors, parseGQL } from './gql'
+import { canCapturePayload, isLikelyHumanReadable, parseQueryString, createStringAdders } from '../../../common/payloads/payloads'
 import { Obfuscator } from '../../../common/util/obfuscate'
 import { getVersion2Attributes, getVersion2DuplicationAttributes, shouldDuplicate } from '../../../common/v2/utils'
 import { EVENT_TYPES } from '../../../common/constants/events'
@@ -101,6 +102,24 @@ export class Aggregate extends AggregateBase {
       [AJAX_ID]: generateUuid() // all AjaxRequest events should have a unique identifier to allow for easier grouping and analysis in the UI
     }
 
+    event.gql = params.gql = parseGQL({
+      body: ctx.requestBody,
+      query: ctx.parsedOrigin?.search
+    })
+    if (event.gql) event.gql.operationHasErrors = params.gql.operationHasErrors = hasGQLErrors(ctx.responseBody)
+
+    const capturePayloadSetting = this.agentRef.init.ajax.capture_payloads
+    const shouldCapturePayload = canCapturePayload(capturePayloadSetting, params.status, event.gql?.operationHasErrors)
+
+    if (shouldCapturePayload) {
+      // Store raw data; obfuscation and truncation will happen in the serializer
+      params.requestQuery = event.requestQuery = parseQueryString(ctx.parsedOrigin?.search)
+      params.requestHeaders = event.requestHeaders = ctx.requestHeaders
+      params.responseHeaders = event.responseHeaders = ctx.responseHeaders
+      if (isLikelyHumanReadable(ctx.requestHeaders, ctx.requestBody)) params.requestBody = event.requestBody = ctx.requestBody
+      if (isLikelyHumanReadable(ctx.responseHeaders, ctx.responseBody)) params.responseBody = event.responseBody = ctx.responseBody
+    }
+
     if (ctx.dt) {
       event.spanId = ctx.dt.spanId
       event.traceId = ctx.dt.traceId
@@ -109,11 +128,6 @@ export class Aggregate extends AggregateBase {
       )
     }
 
-    // parsed from the AJAX body, looking for operationName param & parsing query for operationType
-    event.gql = params.gql = parseGQL({
-      body: ctx.body,
-      query: ctx.parsedOrigin?.search
-    })
     if (event.gql) this.reportSupportabilityMetric('Ajax/Events/GraphQL/Bytes-Added', stringify(event.gql).length)
 
     /** make a copy of the event for the MFE target if it exists */
@@ -136,7 +150,9 @@ export class Aggregate extends AggregateBase {
 
   serializer (eventBuffer) {
     if (!eventBuffer.length) return
-    const addString = getAddStringContext(this.obfuscator)
+
+    const { addString, addStringWithTruncation } = createStringAdders(getAddStringContext, this.obfuscator)
+
     let payload = 'bel.7;'
 
     let firstTimestamp = 0
@@ -170,15 +186,24 @@ export class Aggregate extends AggregateBase {
       // Since configuration objects (like info) are created new each time they are set, we have to grab the current pointer to the attr object here.
       const jsAttributes = this.agentRef.info.jsAttributes
 
-      // add custom attributes
-      // gql decorators are added as custom attributes to alleviate need for new BEL schema
-      const attrParts = addCustomAttributes({
+      // Regular attributes: obfuscate only
+      const regularAttrs = addCustomAttributes({
         ...(jsAttributes || {}),
-        ...(event.gql || {}),
+        [AJAX_ID]: event[AJAX_ID], // all AjaxRequest events should have a unique identifier to allow for easier grouping and analysis in the UI
         ...(event.targetAttributes || {}), // used to supply the version 2 attributes, either MFE target or duplication attributes for the main agent app
-        [AJAX_ID]: event[AJAX_ID] // all AjaxRequest events should have a unique identifier to allow for easier grouping and analysis in the UI
+        ...(event.gql || {})
       }, addString)
 
+      // Payload attributes: obfuscate then truncate
+      const payloadAttrs = addCustomAttributes({
+        ...(event.requestBody ? { requestBody: event.requestBody } : {}),
+        ...(event.requestHeaders ? { requestHeaders: event.requestHeaders } : {}),
+        ...(event.requestQuery ? { requestQuery: event.requestQuery } : {}),
+        ...(event.responseBody ? { responseBody: event.responseBody } : {}),
+        ...(event.responseHeaders ? { responseHeaders: event.responseHeaders } : {})
+      }, addStringWithTruncation)
+
+      const attrParts = [...regularAttrs, ...payloadAttrs]
       fields.unshift(numeric(attrParts.length))
 
       insert += fields.join(',')

package/src/features/ajax/constants.js

@@ -5,5 +5,9 @@
 import { FEATURE_NAMES } from '../../loaders/features/features'
 
 export const FEATURE_NAME = FEATURE_NAMES.ajax
-
+export const CAPTURE_PAYLOAD_SETTINGS = {
+  NONE: 'none',
+  FAILURES: 'failures',
+  ALL: 'all'
+}
 export const AJAX_ID = 'ajaxRequest.id'

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

@@ -14,7 +14,7 @@ import { parseUrl } from '../../../common/url/parse-url'
 import { DT } from './distributed-tracing'
 import { responseSizeFromXhr } from './response-size'
 import { InstrumentBase } from '../../utils/instrument-base'
-import { FEATURE_NAME } from '../constants'
+import { CAPTURE_PAYLOAD_SETTINGS, FEATURE_NAME } from '../constants'
 import { FEATURE_NAMES } from '../../../loaders/features/features'
 import { SUPPORTABILITY_METRIC } from '../../metrics/constants'
 import { now } from '../../../common/timing/now'
@@ -27,6 +27,7 @@ var handlersLen = handlers.length
 var origRequest = gosNREUMOriginals().o.REQ
 var origXHR = gosNREUMOriginals().o.XHR
 const NR_CAT_HEADER = 'X-NewRelic-App-Data'
+const INTERNAL_ERROR = 'internal-error'
 
 export class Instrument extends InstrumentBase {
   static featureName = FEATURE_NAME
@@ -62,16 +63,18 @@ export class Instrument extends InstrumentBase {
     wrapFetch(this.ee, agentRef)
     wrapXhr(this.ee, agentRef)
     subscribeToEvents(agentRef, this.ee, this.handler, this.dt)
-
     this.importAggregator(agentRef, () => import(/* webpackChunkName: "ajax-aggregate" */ '../aggregate/index.js'))
   }
 }
 
 function subscribeToEvents (agentRef, ee, handler, dt) {
+  const shouldInterceptPayloads = [CAPTURE_PAYLOAD_SETTINGS.ALL, CAPTURE_PAYLOAD_SETTINGS.FAILURES].includes(agentRef.init.ajax?.capture_payloads)
+
   ee.on('new-xhr', onNewXhr)
   ee.on('open-xhr-start', onOpenXhrStart)
   ee.on('open-xhr-end', onOpenXhrEnd)
   ee.on('send-xhr-start', onSendXhrStart)
+  ee.on('setRequestHeader-xhr-start', onSetRequestHeader)
   ee.on('xhr-cb-time', onXhrCbTime)
   ee.on('xhr-load-added', onXhrLoadAdded)
   ee.on('xhr-load-removed', onXhrLoadRemoved)
@@ -147,6 +150,14 @@ function subscribeToEvents (agentRef, ee, handler, dt) {
     }
   }
 
+  function onSetRequestHeader (args, xhr) {
+    // args[0] = header name, args[1] = header value
+    if (shouldInterceptPayloads && args.length >= 2) {
+      this.requestHeaders ??= {}
+      this.requestHeaders[args[0].toLowerCase()] = args[1]
+    }
+  }
+
   function onSendXhrStart (args, xhr) {
     var metrics = this.metrics
     var data = args[0]
@@ -159,7 +170,7 @@ function subscribeToEvents (agentRef, ee, handler, dt) {
 
     this.startTime = now()
 
-    this.body = data
+    this.requestBody = data
 
     this.listener = function (evt) {
       try {
@@ -169,7 +180,7 @@ function subscribeToEvents (agentRef, ee, handler, dt) {
         if (evt.type !== 'load' || ((context.called === context.totalCbs) && (context.onloadCalled || typeof (xhr.onload) !== 'function') && typeof context.end === 'function')) context.end(xhr)
       } catch (e) {
         try {
-          ee.emit('internal-error', [e])
+          ee.emit(INTERNAL_ERROR, [e])
         } catch (err) {
           // do nothing
         }
@@ -321,9 +332,29 @@ function subscribeToEvents (agentRef, ee, handler, dt) {
     const method = ('' + ((target && target instanceof origRequest && target.method) ||
       opts.method || 'GET')).toUpperCase()
     this.params.method = method
-    this.body = opts.body
 
-    this.txSize = dataSize(opts.body) || 0
+    this.txSize = dataSize(opts.body || (target?.body)) || 0
+
+    // Capture request headers
+    try {
+      var headers = opts.headers || (target?.headers)
+      if (shouldInterceptPayloads && headers) {
+        this.requestHeaders ??= {}
+        if (headers instanceof Headers) {
+          headers.forEach(function (value, key) {
+            this.requestHeaders[key.toLowerCase()] = value
+          }.bind(this))
+        } else if (typeof headers === 'object') {
+          for (var key in headers) {
+            this.requestHeaders[key.toLowerCase()] = headers[key]
+          }
+        }
+      }
+    } catch (e) {
+      // Silently fail if we can't access headers
+    }
+
+    this.requestBody = opts.body || (target?.body)
   }
 
   // we capture failed call as status 0, the actual error is ignored
@@ -335,20 +366,47 @@ function subscribeToEvents (agentRef, ee, handler, dt) {
 
     this.params.status = res ? res.status : 0
 
-    // convert rxSize to a number
-    let responseSize
-    if (typeof this.rxSize === 'string' && this.rxSize.length > 0) {
-      responseSize = +this.rxSize
+    const finishAndReport = () => {
+      // convert rxSize to a number - handle both string (from content-length header) and number (from fallback)
+      const num = +this.rxSize
+      const responseSize = this.rxSize != null && !isNaN(num) ? num : undefined
+
+      const metrics = {
+        txSize: this.txSize,
+        rxSize: responseSize,
+        duration: this.endTime - this.startTime
+      }
+
+      const payload = [this.params, metrics, this.startTime, this.endTime, 'fetch']
+      this.targets.forEach(target => reportToAgg(payload, this, target))
     }
 
-    const metrics = {
-      txSize: this.txSize,
-      rxSize: responseSize,
-      duration: now() - this.startTime
+    /** Since accessing fetch bodies is an async process, these are
+     * reasonable conditions to check to not do needless extra work */
+    if (!res || !shouldInterceptPayloads) {
+      finishAndReport()
+      return
     }
 
-    const payload = [this.params, metrics, this.startTime, this.endTime, 'fetch']
-    this.targets.forEach(target => reportToAgg(payload, this, target))
+    // Clone the response to read the body without consuming the original
+    res.clone().text().then((text) => {
+      this.responseBody = text
+      // Use captured payload size as fallback if content-length header was missing or is 0 with a body
+      // Only apply fallback for non-network-error responses (status !== 0)
+      if ((!this.rxSize || this.rxSize === '0' || this.rxSize === 0) && text !== undefined && this.params.status !== 0) {
+        this.rxSize = dataSize(text)
+      }
+      if (res?.headers) {
+        this.responseHeaders = {}
+        res.headers.forEach(function (value, key) {
+          this.responseHeaders[key.toLowerCase()] = value
+        }.bind(this))
+      }
+    }).catch((err) => {
+      ee.emit(INTERNAL_ERROR, [err])
+    }).finally(() => {
+      finishAndReport()
+    })
   }
 
   // Create report for XHR request that has finished
@@ -365,7 +423,7 @@ function subscribeToEvents (agentRef, ee, handler, dt) {
     if (params.aborted) return
     if (hasUndefinedHostname(params)) return // don't bother with XHR of url with no hostname
 
-    metrics.duration = now() - this.startTime
+    metrics.duration = this.endTime - this.startTime
     if (!this.loadCaptureCalled && xhr.readyState === 4) {
       captureXhrData(this, xhr)
     } else if (params.status == null) {
@@ -375,6 +433,27 @@ function subscribeToEvents (agentRef, ee, handler, dt) {
     // Always send cbTime, even if no noticeable time was taken.
     metrics.cbTime = this.cbTime
 
+    if (shouldInterceptPayloads) {
+      try {
+        this.responseBody = xhr.responseText
+      } catch (e) {
+        this.responseBody = xhr.response
+      }
+
+      // Use captured payload size as fallback if not already determined or is 0 with a body
+      // Only apply fallback for non-network-error responses (status !== 0)
+      if ((!metrics.rxSize || metrics.rxSize === 0) && this.responseBody !== undefined && params.status !== 0) {
+        const size = dataSize(this.responseBody)
+        if (size !== undefined) metrics.rxSize = size
+      }
+
+      try {
+        this.responseHeaders = parseResponseHeaders(xhr.getAllResponseHeaders())
+      } catch (err) {
+        ee.emit(INTERNAL_ERROR, [err])
+      }
+    }
+
     const payload = [params, metrics, this.startTime, this.endTime, 'xhr']
     this.targets.forEach(target => reportToAgg(payload, this, target))
   }
@@ -387,7 +466,8 @@ function subscribeToEvents (agentRef, ee, handler, dt) {
     ctx.params.status = xhr.status
 
     var size = responseSizeFromXhr(xhr, ctx.lastSize)
-    if (size) ctx.metrics.rxSize = size
+    // Don't set rxSize for network errors (status 0)
+    if (size !== undefined && xhr.status !== 0) ctx.metrics.rxSize = size
 
     if (ctx.sameOrigin && xhr.getAllResponseHeaders().indexOf(NR_CAT_HEADER) >= 0) {
       var header = xhr.getResponseHeader(NR_CAT_HEADER)
@@ -414,4 +494,20 @@ function addUrl (ctx, url) {
   ctx.sameOrigin = parsed.sameOrigin
 }
 
+function parseResponseHeaders (headerStr) {
+  const headers = {}
+  if (!headerStr) return headers
+
+  headerStr.split('\r\n').forEach(function (line) {
+    const separatorIndex = line.indexOf(': ')
+    if (separatorIndex > 0) {
+      const name = line.substring(0, separatorIndex)
+      const value = line.substring(separatorIndex + 2)
+      headers[name.toLowerCase()] = value
+    }
+  })
+
+  return headers
+}
+
 export const Ajax = Instrument

package/src/features/jserrors/aggregate/format-stack-trace.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2020-2025 New Relic, Inc. All rights reserved.
+ * Copyright 2020-2026 New Relic, Inc. All rights reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
 
@@ -10,7 +10,7 @@ export function formatStackTrace (stackLines) {
   return truncateStackLines(stackLines).replace(stripNewlinesRegex, '')
 }
 
-// takes array of stack lines and returns string with top 50 and buttom 50 lines
+// takes array of stack lines and returns string with top 50 and bottom 50 lines
 function truncateStackLines (stackLines) {
   var stackString
   if (stackLines.length > 100) {
@@ -26,5 +26,5 @@ function truncateStackLines (stackLines) {
 
 // truncates stack string to limit what is sent to backend
 export function truncateSize (stackString) {
-  return (stackString.length > MAX_STACK_TRACE_LENGTH) ? stackString.substr(0, MAX_STACK_TRACE_LENGTH) : stackString
+  return stackString.length > MAX_STACK_TRACE_LENGTH ? stackString.substr(0, MAX_STACK_TRACE_LENGTH) : stackString
 }

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

@@ -267,7 +267,7 @@ export class Aggregate extends AggregateBase {
       params.stack_trace = truncateSize(stackInfo.stackString)
       this.observedAt[bucketHash] = Math.floor(this.agentRef.runtime.timeKeeper.correctRelativeTimestamp(time))
     } else {
-      params.browser_stack_hash = stringHashCode(stackInfo.stackString)
+      params.browser_stack_hash = stringHashCode(truncateSize(stackInfo.stackString))
     }
     params.releaseIds = stringify(this.agentRef.runtime.releaseIds)
 

package/src/features/soft_navigations/aggregate/ajax-node.js

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { addCustomAttributes, getAddStringContext, nullable, numeric } from '../../../common/serialize/bel-serializer'
+import { createStringAdders } from '../../../common/payloads/payloads'
 import { AJAX_ID } from '../../ajax/constants'
 import { NODE_TYPE } from '../constants'
 import { BelNode } from './bel-node'
@@ -25,6 +26,13 @@ export class AjaxNode extends BelNode {
     this.targetAttributes = ajaxEvent.targetAttributes
     this[AJAX_ID] = ajaxEvent[AJAX_ID] // all AjaxRequest events should have a unique identifier to allow for easier grouping and analysis in the UI
 
+    // optional payload metadata attributes
+    this.requestBody = ajaxEvent.requestBody
+    this.requestHeaders = ajaxEvent.requestHeaders
+    this.requestQuery = ajaxEvent.requestQuery
+    this.responseBody = ajaxEvent.responseBody
+    this.responseHeaders = ajaxEvent.responseHeaders
+
     this.start = ajaxEvent.startTime
     this.end = ajaxEvent.endTime
     if (ajaxContext?.latestLongtaskEnd) {
@@ -34,7 +42,8 @@ export class AjaxNode extends BelNode {
   }
 
   serialize (parentStartTimestamp, agentRef, ajaxObfuscator) {
-    const addString = getAddStringContext(ajaxObfuscator)
+    const { addString, addStringWithTruncation } = createStringAdders(getAddStringContext, ajaxObfuscator)
+
     const nodeList = []
 
     // IMPORTANT: The order in which addString is called matters and correlates to the order in which string shows up in the harvest payload. Do not re-order the following code.
@@ -55,11 +64,23 @@ export class AjaxNode extends BelNode {
       addString(this.nodeId),
       nullable(this.spanId, addString, true) + nullable(this.traceId, addString, true) + nullable(this.spanTimestamp, numeric)
     ]
-    let allAttachedNodes = addCustomAttributes({
-      ...(this.gql || {}),
+    // Regular attributes: obfuscate only
+    const regularAttrs = addCustomAttributes({
+      [AJAX_ID]: this[AJAX_ID],
       ...(this.targetAttributes || {}),
-      [AJAX_ID]: this[AJAX_ID]
+      ...(this.gql || {})
     }, addString)
+
+    // Payload attributes: obfuscate then truncate
+    const payloadAttrs = addCustomAttributes({
+      ...(this.requestBody ? { requestBody: this.requestBody } : {}),
+      ...(this.requestHeaders ? { requestHeaders: this.requestHeaders } : {}),
+      ...(this.requestQuery ? { requestQuery: this.requestQuery } : {}),
+      ...(this.responseBody ? { responseBody: this.responseBody } : {}),
+      ...(this.responseHeaders ? { responseHeaders: this.responseHeaders } : {})
+    }, addStringWithTruncation)
+
+    let allAttachedNodes = [...regularAttrs, ...payloadAttrs]
     this.children.forEach(node => allAttachedNodes.push(node.serialize())) // no children is expected under ajax nodes at this time
 
     fields[1] = numeric(allAttachedNodes.length)

package/src/features/soft_navigations/aggregate/initial-page-load-interaction.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2020-2025 New Relic, Inc. All rights reserved.
+ * Copyright 2020-2026 New Relic, Inc. All rights reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
 import { navTimingValues } from '../../../common/timing/nav-timing'