feat: Detect and report AJAX payloads (#1651)

Author: metal-messiah

.github/actions/build-ab/templates/latest.js

@@ -8,5 +8,6 @@ window.NREUM.init.feature_flags = ['ajax_metrics_deny_list', 'register', 'websoc
 window.NREUM.init.session_replay.enabled = true // feature is enabled, but the app settings will have sampling at 0.  We can proactively enable SR for certain test cases through app settings
 window.NREUM.init.session_trace.enabled = true // feature is enabled, but the app settings will have sampling at 0.  We can proactively enable SR for certain test cases through app settings
 window.NREUM.init.user_actions = {elementAttributes: ['id', 'className', 'tagName', 'type', 'ariaLabel', 'alt', 'title']}
+window.NREUM.init.ajax.capture_payloads = 'failures'
 
 {{{latestScript}}}

.github/workflows/publish-experiment.yml

@@ -65,6 +65,7 @@ jobs:
           window.NREUM.init.session_trace.enabled = true
           window.NREUM.init.feature_flags = ['ajax_metrics_deny_list', 'register']
           window.NREUM.init.user_actions = {elementAttributes: ['id', 'className', 'tagName', 'type', 'ariaLabel', 'alt', 'title']}
+          window.NREUM.init.ajax.capture_payloads = 'failures'
           EOF
       - name: Upload experiment
         id: s3-upload

.gitignore

@@ -29,3 +29,4 @@ packages/browser-agent-core/cjs
 tests/assets/test-builds/**/*
 tests/assets/scripts/**/*
 /.lambdatest
+bam.json

package-lock.json

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { FEATURE_FLAGS } from '../../features/generic_events/constants'
+import { CAPTURE_PAYLOAD_SETTINGS } from '../../features/ajax/constants'
 import { isValidSelector } from '../dom/query-selector'
 import { DEFAULT_EXPIRES_MS, DEFAULT_INACTIVE_MS } from '../session/constants'
 import { warn } from '../util/console'
@@ -47,7 +48,7 @@ const InitModelFn = () => {
     }
   }
   return {
-    ajax: { deny_list: undefined, block_internal: true, enabled: true, autoStart: true },
+    ajax: { deny_list: undefined, block_internal: true, enabled: true, autoStart: true, capture_payloads: CAPTURE_PAYLOAD_SETTINGS.OFF },
     api: {
       register: {
         get enabled () { return hiddenState.feature_flags.includes(FEATURE_FLAGS.REGISTER) || hiddenState.experimental.register },

src/common/config/init.js

@@ -0,0 +1,135 @@
+/**
+ * Copyright 2020-2026 New Relic, Inc. All rights reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { stringify } from '../util/stringify'
+import { CAPTURE_PAYLOAD_SETTINGS } from '../../features/ajax/constants'
+
+/**
+ * Determines whether payload data should be captured based on the capture mode setting,
+ * HTTP status code, and GraphQL error status.
+ * @param {string} captureMode - The capture mode setting ('off', 'all', or 'failures')
+ * @param {number} statusCode - The HTTP status code
+ * @param {boolean} hasGQLErrors - Whether the response contains GraphQL errors
+ * @returns {boolean} True if payload should be captured
+ */
+export function canCapturePayload (captureMode, statusCode, hasGQLErrors) {
+  if (captureMode === CAPTURE_PAYLOAD_SETTINGS.ALL) return true
+  if (!captureMode || captureMode === CAPTURE_PAYLOAD_SETTINGS.OFF) return false
+
+  // Default "failures" mode
+  return statusCode === 0 || statusCode >= 400 || hasGQLErrors === true
+}
+
+/**
+ * Parses a query string into an object of key-value pairs.
+ * @param {string} search a query string starting with "?" or without (ex. new URL(...).search)
+ * @returns {Object|undefined} Parsed query parameters as key-value pairs. Returns undefined if no valid parameters are found.
+ */
+export function parseQueryString (search) {
+  if (!search || search.length === 0) return
+
+  const queryParams = {}
+  try {
+    const searchParams = new URLSearchParams(search)
+    searchParams.forEach(function (value, key) {
+      queryParams[key] = value
+    })
+  } catch (e) {
+    // Fallback for environments without URLSearchParams
+  }
+
+  return queryParams
+}
+
+/**
+ * Determines if the given content type is likely to be human-readable (text-based).
+ * @param {Object} headers - The headers object containing content-type
+ * @param {*} data - The data to check
+ * @returns {boolean} True if the content type is human-readable (text-based)
+ */
+export function isLikelyHumanReadable (headers, data) {
+  if (!headers) return typeof data === 'string'
+  var contentType = headers['content-type']
+  if (!contentType) return typeof data === 'string'
+  // Normalize to lowercase and extract the mime type (ignore charset, etc.)
+  var mimeType = contentType.toLowerCase().split(';')[0].trim()
+
+  // Check for text/* types
+  if (mimeType.indexOf('text/') === 0) return true
+
+  // Check for specific application/* types
+  var readableAppTypes = [
+    '/json',
+    '/xml',
+    '/xhtml+xml',
+    '/ld+json',
+    '/yaml',
+    '/x-www-form-urlencoded'
+  ]
+
+  for (var i = 0; i < readableAppTypes.length; i++) {
+    if (mimeType === 'application' + readableAppTypes[i]) return true
+  }
+
+  return false
+}
+
+/**
+ * Truncates a string to ensure its UTF-8 byte length does not exceed 4092 bytes.  If truncation is necessary,
+ * the string is cut off at a character boundary to avoid breaking multi-byte characters and " ..." is appended to indicate truncation.
+ * If not a string, it is first converted to a string using JSON.stringify.
+ * @param {*} data The data to truncate.
+ * @returns {string}
+ */
+export function truncateAsString (data) {
+  if (!data) return data
+  try {
+    if (typeof data !== 'string') data = stringify(data)
+    let bytes = 0
+    let i = 0
+    let needsEllipsis = false
+
+    while (i < data.length) {
+      const c = data.charCodeAt(i)
+      const charBytes = c < 0x80 ? 1 : c < 0x800 ? 2 : c < 0xD800 || c >= 0xE000 ? 3 : 4
+
+      if (bytes + charBytes > 4092) {
+        needsEllipsis = true
+        break
+      }
+
+      bytes += charBytes
+      i += charBytes === 4 ? 2 : 1
+    }
+
+    return data.slice(0, i) + (needsEllipsis ? ' ...' : '')
+  } catch (e) {
+    return data
+  }
+}
+
+/**
+ * Creates string adder functions for BEL serialization with obfuscation and optional truncation.
+ * This ensures a single string table is used while providing separate handling for regular vs payload attributes.
+ * @param {Function} getAddStringContext - Function that creates a new string table context
+ * @param {Object} obfuscator - Optional obfuscator instance for string obfuscation
+ * @returns {{addString: Function, addStringWithTruncation: Function}} Object containing both string adder functions
+ */
+export function createStringAdders (getAddStringContext, obfuscator) {
+  const addStringRaw = getAddStringContext()
+
+  const processString = (str, shouldTruncate) => {
+    if (typeof str === 'undefined' || str === '') return addStringRaw(str)
+    if (typeof str !== 'string') str = stringify(str)
+    const obfuscated = obfuscator?.obfuscateString(str) ?? str
+    const processed = shouldTruncate ? truncateAsString(obfuscated) : obfuscated
+    return addStringRaw(processed)
+  }
+
+  return {
+    addString: (str) => processString(str, false),
+    addStringWithTruncation: (str) => processString(str, true)
+  }
+}

src/common/payloads/payloads.js

@@ -21,7 +21,7 @@ export function numeric (n, noDefault) {
   return (n === undefined || n === 0) ? '' : Math.floor(n).toString(36)
 }
 
-export function getAddStringContext (obfuscator) {
+export function getAddStringContext (obfuscator, truncator) {
   let stringTableIdx = 0
   const stringTable = Object.prototype.hasOwnProperty.call(Object, 'create') ? Object.create(null) : {}
 
@@ -30,6 +30,7 @@ export function getAddStringContext (obfuscator) {
   function addString (str) {
     if (typeof str === 'undefined' || str === '') return ''
     str = obfuscator?.obfuscateString(String(str)) ?? String(str)
+    str = truncator?.(str) ?? str
     if (hasOwnProp.call(stringTable, str)) {
       return numeric(stringTable[str], true)
     } else {

src/common/serialize/bel-serializer.js

@@ -17,7 +17,7 @@ import { warn } from '../util/console'
 import { findTargetsFromStackTrace } from '../v2/utils'
 
 const wrapped = {}
-const XHR_PROPS = ['open', 'send'] // these are the specific funcs being wrapped on all XMLHttpRequests(.prototype)
+const XHR_PROPS = ['open', 'send', 'setRequestHeader'] // these are the specific funcs being wrapped on all XMLHttpRequests(.prototype)
 
 /**
  * Wraps the native XMLHttpRequest (XHR) object to emit custom events to its readystatechange event and an assortment

src/common/wrap/wrap-xhr.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 { isPureObject } from '../../../common/util/type-check'
@@ -97,3 +97,44 @@ function parseGQLQueryString (gqlQueryString) {
 function validateGQLObject (obj) {
   return !(typeof obj !== 'object' || !obj.query || typeof obj.query !== 'string')
 }
+
+/**
+ * Checks if a response object has valid GraphQL errors.
+ * @param {object} response - A single GraphQL response object
+ * @returns {boolean} True if the response has valid errors
+ */
+function hasValidGQLErrors (response) {
+  return Array.isArray(response?.errors) &&
+    response.errors.some(err =>
+      err && typeof err === 'object' && typeof err.message === 'string'
+    )
+}
+
+/**
+ * Checks if a response body contains GraphQL errors according to the GraphQL spec.
+ * A valid GraphQL error response contains an "errors" array with at least one error object.
+ * Supports both single and batched GraphQL responses.
+ * @param {string|object|array} [responseBody] The response body to check
+ * @returns {boolean} True if the response contains GraphQL errors
+ */
+export function hasGQLErrors (responseBody) {
+  if (!responseBody) return false
+  try {
+    let parsed = responseBody
+
+    // Parse string to object if needed
+    if (typeof responseBody === 'string') {
+      parsed = JSON.parse(responseBody)
+    }
+
+    // Handle batched GraphQL responses (array of response objects)
+    if (Array.isArray(parsed)) {
+      return parsed.some(hasValidGQLErrors)
+    }
+
+    // Handle single GraphQL response
+    return hasValidGQLErrors(parsed)
+  } catch (err) {
+    return false
+  }
+}

src/features/ajax/aggregate/gql.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(',')