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

package/src/common/v2/mfe-vitals.js

@@ -0,0 +1,260 @@
+/**
+ * Copyright 2020-2026 New Relic, Inc. All rights reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { globalScope, isBrowserScope } from '../constants/runtime'
+import { now } from '../timing/now'
+import { cleanURL } from '../url/clean-url'
+
+/**
+ * @typedef {import('./register-api-types').RegisterAPITimings} RegisterAPITimings
+ */
+
+/**
+ * Generate a simple CSS selector for an element
+ * @param {Element} elem - The element to generate selector for
+ * @returns {string|null} CSS selector or null if element is invalid
+ */
+const getElementSelector = (elem) => {
+  try {
+    if (!elem || !elem.tagName) return null
+
+    let selector = elem.tagName.toLowerCase()
+    if (elem.id) selector += `#${elem.id}`
+    else if (elem.className && typeof elem.className === 'string') {
+      const classes = elem.className.trim().split(/\s+/).slice(0, 2).join('.')
+      if (classes) selector += `.${classes}`
+    }
+    return selector
+  } catch (e) {
+    return null
+  }
+}
+
+/**
+ * Extract URL from an element (for images, videos, etc.)
+ * @param {Element} elem - The element to extract URL from
+ * @returns {string|null} Cleaned URL or null
+ */
+const getElementURL = (elem) => {
+  try {
+    if (!elem) return null
+
+    // For images and videos
+    if (elem.src) return cleanURL(elem.src)
+
+    // For elements with background images
+    const bgImage = globalScope.getComputedStyle?.(elem)?.backgroundImage
+    if (bgImage && bgImage !== 'none') {
+      const match = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/)
+      if (match?.[1]) return cleanURL(match[1])
+    }
+
+    return null
+  } catch (e) {
+    return null
+  }
+}
+
+const isObservable = (node) => {
+  try {
+    return node?.textContent?.trim() || ['img', 'video', 'canvas', 'svg'].includes(node?.nodeName?.toLowerCase())
+  } catch (e) {
+    return false
+  }
+}
+
+/**
+ * Check if node is within a specific MFE
+ * @param {Node} node - DOM node to check
+ * @param {string} id - MFE ID to match
+ * @returns {boolean}
+ */
+const isInMFE = (node, id) => {
+  try {
+    let curr = node.nodeType === 1 ? node : node.parentElement
+    while (curr?.tagName) {
+      if (curr.dataset?.nrMfeId === id) return true
+      curr = curr.parentNode
+    }
+  } catch (e) {}
+  return false
+}
+
+/**
+ * Create mutation observer for MFE nodes
+ * @param {string} id - MFE ID to track
+ * @param {Function} onMatch - Callback when matching node is added
+ * @returns {MutationObserver}
+ */
+const observeMutations = (id, onMatch) => {
+  const obs = new globalScope.MutationObserver(mutations => {
+    mutations.forEach(m => m.addedNodes.forEach(node => {
+      if (isObservable(node) && isInMFE(node, id)) {
+        onMatch(node, obs)
+      }
+    }))
+  })
+  obs.observe(globalScope.document, { childList: true, subtree: true })
+  return obs
+}
+
+/**
+ * Create performance observer for MFE entries
+ * @param {Array} observers - Array to track observers
+ * @param {Object} config - Observer configuration
+ * @param {Function} onEntry - Callback for each entry
+ * @returns {PerformanceObserver|null} Observer if successful, null if unsupported
+ */
+const observePerformance = (observers, config, onEntry) => {
+  try {
+    const obs = new globalScope.PerformanceObserver(list => {
+      list.getEntries().forEach(onEntry)
+    })
+    obs.observe(config)
+    observers.push(obs)
+    return obs
+  } catch (e) {
+    return null
+  }
+}
+
+/**
+ * Tracks all Core Web Vitals for a specific MFE.
+ * @param {string} id - The MFE ID to track
+ * @returns {{fcp: object|null, lcp: object|null, cls: object|null, inp: object|null, disconnect: Function}}
+ */
+export function trackMFEVitals (id) {
+  const vitals = {
+    fcp: null,
+    lcp: null,
+    cls: null,
+    inp: null,
+    disconnect: () => {}
+  }
+
+  if (!id || !isBrowserScope || !globalScope.MutationObserver || !globalScope.PerformanceObserver) return vitals
+
+  const observers = []
+
+  // Track FCP - first contentful paint
+  observeMutations(id, (node, obs) => {
+    if (vitals.fcp === null) {
+      vitals.fcp = {
+        value: now(),
+        loadState: globalScope.document?.readyState || null
+      }
+      obs.disconnect()
+    }
+  })
+
+  // Track LCP - largest contentful paint
+  let largestSize = 0
+  const lcpObs = observeMutations(id, (node) => {
+    try {
+      const elem = node.nodeType === 1 ? node : node.parentElement
+      if (!elem) return
+      const rect = elem.getBoundingClientRect()
+      const size = rect.width * rect.height
+      if (size > largestSize) {
+        largestSize = size
+        vitals.lcp = {
+          value: now(),
+          size,
+          elTag: elem.tagName || null,
+          eid: elem.id || null,
+          elUrl: getElementURL(elem)
+        }
+      }
+    } catch (e) {
+      // Element may be detached from DOM
+    }
+  })
+  observers.push(lcpObs)
+
+  // Track CLS - cumulative layout shift
+  // Initialize CLS to 0 if browser supports it AND the MFE container exists in the DOM
+  let clsValue = 0
+  const clsObs = observePerformance(observers, { type: 'layout-shift', buffered: true }, (entry) => {
+    if (entry.hadRecentInput || !vitals.cls) return
+    (entry.sources || []).some(source => {
+      if (isInMFE(source.node, id)) {
+        clsValue += entry.value
+        vitals.cls ??= { value: 0, largestShiftValue: null, largestShiftTime: null, largestShiftTarget: null, loadState: null }
+        vitals.cls.value = clsValue
+
+        // Track largest shift
+        if (entry.value > (vitals.cls.largestShiftValue || 0)) {
+          vitals.cls.largestShiftValue = entry.value
+          vitals.cls.largestShiftTime = entry.startTime
+          vitals.cls.largestShiftTarget = getElementSelector(source.node)
+          vitals.cls.loadState = globalScope.document?.readyState || null
+        }
+        return true
+      }
+      return false
+    })
+  })
+
+  if (clsObs) {
+    try {
+      const mfeContainer = globalScope.document?.querySelector(`[data-nr-mfe-id="${id}"]`)
+      if (mfeContainer) {
+        vitals.cls ??= { value: 0, largestShiftValue: null, largestShiftTime: null, largestShiftTarget: null, loadState: null }
+      }
+    } catch (e) {
+      // querySelector may fail, leave CLS as null
+    }
+  }
+
+  // Track INP - interaction to next paint
+  observePerformance(observers, { type: 'event', buffered: true, durationThreshold: 16 }, (entry) => {
+    if (!entry.interactionId || !entry.target || !isInMFE(entry.target, id)) return
+    if (vitals.inp === null || entry.duration > vitals.inp.value) {
+      vitals.inp = {
+        value: entry.duration,
+        interactionTarget: getElementSelector(entry.target),
+        interactionTime: entry.startTime,
+        interactionType: entry.name,
+        inputDelay: entry.processingStart ? entry.processingStart - entry.startTime : null,
+        processingDuration: (entry.processingStart && entry.processingEnd) ? entry.processingEnd - entry.processingStart : null,
+        presentationDelay: (entry.processingEnd && entry.duration) ? entry.duration - (entry.processingEnd - entry.startTime) : null,
+        nextPaintTime: entry.startTime + entry.duration,
+        loadState: globalScope.document?.readyState || null
+      }
+    }
+  })
+
+  // Disconnect all observers
+  vitals.disconnect = () => {
+    // Disconnect all observers
+    observers.forEach(obs => {
+      try {
+        obs?.disconnect()
+      } catch (e) {
+        // Observer may already be disconnected
+      }
+    })
+  }
+
+  // Auto-disconnect LCP observer on user interaction (per Web Vitals spec)
+  // CLS and INP continue tracking until visibility change or deregister
+  const disconnectLCP = () => {
+    try {
+      lcpObs?.disconnect()
+    } catch (e) {
+      // Observer may already be disconnected
+    }
+  }
+  ;['click', 'keydown', 'scroll'].forEach(type => {
+    globalScope.addEventListener(type, disconnectLCP, { once: true, passive: true })
+  })
+
+  // Disconnect all observers on visibility change or page unload
+  ;['visibilitychange', 'pagehide'].forEach(type => {
+    globalScope.addEventListener(type, vitals.disconnect, { once: true, passive: true })
+  })
+
+  return vitals
+}

package/src/common/wrap/wrap-websocket.js

@@ -8,6 +8,7 @@ import { now } from '../timing/now'
 import { cleanURL } from '../url/clean-url'
 import { gosNREUMOriginals } from '../window/nreum'
 import { subscribeToPageUnload } from '../window/page-visibility'
+import { EVENT_TYPES } from '../constants/events'
 
 const wrapped = {}
 const openWebSockets = new Set() // track all instances to close out metrics on page unload
@@ -37,7 +38,7 @@ export function wrapWebSocket (sharedEE) {
   })
 
   class WrappedWebSocket extends WebSocket {
-    static name = 'WebSocket'
+    static name = EVENT_TYPES.WS
     static toString () { // fake native WebSocket when static class is stringified
       return 'function WebSocket() { [native code] }'
     }

package/src/common/wrap/wrap-xhr.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

package/src/features/ajax/aggregate/gql.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
+  }
+}

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

@@ -6,13 +6,16 @@ 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'
 import { generateUuid } from '../../../common/ids/unique-id'
 
 export class Aggregate extends AggregateBase {
@@ -23,6 +26,9 @@ export class Aggregate extends AggregateBase {
     setDenyList(agentRef.runtime.denyList)
     const classThis = this
 
+    // Create obfuscator for AJAX requests
+    this.obfuscator = new Obfuscator(agentRef, EVENT_TYPES.AJAX)
+
     if (!agentRef.init.ajax.block_internal) {
       // if the agent is tracking ITSELF, it can spawn endless ajax requests early if they are large from custom attributes, so we just disable early harvest for ajax in this case.
       super.canHarvestEarly = false
@@ -96,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
@@ -104,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 */
@@ -131,7 +150,9 @@ export class Aggregate extends AggregateBase {
 
   serializer (eventBuffer) {
     if (!eventBuffer.length) return
-    const addString = getAddStringContext(this.agentRef.runtime.obfuscator)
+
+    const { addString, addStringWithTruncation } = createStringAdders(getAddStringContext, this.obfuscator)
+
     let payload = 'bel.7;'
 
     let firstTimestamp = 0
@@ -165,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