feat(replay): capture fetch (Blob/ArrayBuffer) response bodies in Session Replay network details

React Native's fetch polyfill is built on XMLHttpRequest with
responseType 'blob', so every fetch response body previously surfaced as
[UNPARSEABLE_BODY_TYPE] in the Replay network tab even when the payload
was plain JSON or text.

Binary bodies can only be read asynchronously, while xhr breadcrumbs are
forwarded to the native SDKs synchronously. When an allow-listed xhr
breadcrumb carries a text-like (JSON/XML/text/form) Blob or ArrayBuffer
response and body capture is enabled, the breadcrumb is now held in
beforeBreadcrumb, the body is read (FileReader for Blob with a 500ms
timeout, capped at NETWORK_BODY_MAX_SIZE by slicing before the read;
manual UTF-8 decode for ArrayBuffer since Hermes has no TextDecoder),
and the same breadcrumb is re-added with the resolved body on the hint.
Its original timestamp is preserved. Genuinely binary payloads (images,
octet-stream) keep the UNPARSEABLE_BODY_TYPE marker without being read,
and read failures or timeouts fall back to the same marker.

Closes #6376

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: Cryptoteep

packages/core/src/js/replay/mobilereplay.ts

@@ -1,6 +1,16 @@
-import type { Client, DynamicSamplingContext, ErrorEvent, Event, EventHint, Integration, Metric } from '@sentry/core';
-
-import { debug } from '@sentry/core';
+import type {
+  Breadcrumb,
+  BreadcrumbHint,
+  Client,
+  DynamicSamplingContext,
+  ErrorEvent,
+  Event,
+  EventHint,
+  Integration,
+  Metric,
+} from '@sentry/core';
+
+import { addBreadcrumb, debug } from '@sentry/core';
 
 import type { ResolvedNetworkOptions } from './networkUtils';
 
@@ -9,7 +19,12 @@ import { hasHooks } from '../utils/clientutils';
 import { isExpoGo, notMobileOs } from '../utils/environment';
 import { registerFeatureMarker } from '../utils/featureMarkers';
 import { NATIVE } from '../wrapper';
-import { makeEnrichXhrBreadcrumbsForMobileReplay } from './xhrUtils';
+import {
+  makeEnrichXhrBreadcrumbsForMobileReplay,
+  REPLAY_RESOLVED_RESPONSE_BODY_HINT_KEY,
+  resolveXhrResponseBody,
+  shouldCaptureResponseBodyAsync,
+} from './xhrUtils';
 
 const MOBILE_REPLAY_NETWORK_DETAILS_INTEGRATION_NAME = 'MobileReplayNetworkDetails';
 const MOBILE_REPLAY_NETWORK_BODIES_INTEGRATION_NAME = 'MobileReplayNetworkBodies';
@@ -433,6 +448,35 @@ export const mobileReplayIntegration = (initOptions: MobileReplayOptions = defau
 
     // Wrap beforeSend to run processEvent after user's beforeSend
     const clientOptions = client.getOptions();
+
+    // Binary (Blob/ArrayBuffer) response bodies — which is every `fetch`
+    // response, since RN's fetch polyfill uses XHR with responseType 'blob' —
+    // can only be read asynchronously, but the breadcrumb is forwarded to the
+    // native SDKs synchronously. Hold such breadcrumbs here (return null),
+    // read the body, then re-add the same breadcrumb (timestamp is already
+    // set, so it keeps its original time) with the body resolved on the hint.
+    if (networkOptions.captureBodies && networkOptions.allowUrls.length > 0) {
+      const originalBeforeBreadcrumb = clientOptions.beforeBreadcrumb;
+      clientOptions.beforeBreadcrumb = (breadcrumb: Breadcrumb, hint?: BreadcrumbHint): Breadcrumb | null => {
+        if (hint && REPLAY_RESOLVED_RESPONSE_BODY_HINT_KEY in hint) {
+          // second pass with the resolved body — the user's beforeBreadcrumb already ran
+          return breadcrumb;
+        }
+        const result = originalBeforeBreadcrumb ? originalBeforeBreadcrumb(breadcrumb, hint) : breadcrumb;
+        if (result === null || !shouldCaptureResponseBodyAsync(result, hint, networkOptions)) {
+          return result;
+        }
+        const xhr = hint.xhr;
+        resolveXhrResponseBody(xhr)
+          .then(resolvedBody => {
+            addBreadcrumb(result, { ...hint, [REPLAY_RESOLVED_RESPONSE_BODY_HINT_KEY]: resolvedBody });
+          })
+          .then(undefined, (error: unknown) => {
+            debug.error(`[Sentry] ${MOBILE_REPLAY_INTEGRATION_NAME} Failed to re-add network breadcrumb`, error);
+          });
+        return null;
+      };
+    }
     const originalBeforeSend = clientOptions.beforeSend;
     clientOptions.beforeSend = async (event: ErrorEvent, hint: EventHint): Promise<ErrorEvent | null> => {
       let result: ErrorEvent | null = event;

packages/core/src/js/replay/networkUtils.ts

@@ -57,6 +57,9 @@ function _serializeFormData(formData: FormData): string {
 
 export const NETWORK_BODY_MAX_SIZE = 150_000;
 
+/** How long to wait for an async body read (FileReader) before giving up. */
+export const NETWORK_BODY_READ_TIMEOUT_MS = 500;
+
 export const DEFAULT_NETWORK_HEADERS = ['content-type', 'content-length', 'accept'];
 
 const DENY_HEADERS = new Set([
@@ -174,6 +177,132 @@ export function getBodyString(body: unknown): NetworkBody | undefined {
   }
 }
 
+/**
+ * Whether a Content-Type describes a payload that is safe to decode into text
+ * (JSON, XML, form data, `text/*`). Genuinely binary payloads (images, media,
+ * octet-stream) are excluded so they stay marked as unparseable.
+ */
+export function isTextLikeContentType(contentType: string | null | undefined): boolean {
+  if (!contentType) {
+    return false;
+  }
+  const normalized = contentType.toLowerCase();
+  return (
+    normalized.startsWith('text/') ||
+    normalized.includes('json') ||
+    normalized.includes('xml') ||
+    normalized.includes('x-www-form-urlencoded')
+  );
+}
+
+/**
+ * Read a Blob as UTF-8 text via FileReader (React Native's Blob has no `text()`).
+ * Rejects on read error, abort or after `timeoutMs`.
+ */
+export function readBlobAsText(blob: Blob, timeoutMs: number): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    const timeout = setTimeout(() => {
+      // reject first — abort() may fire onabort synchronously
+      reject(new Error(`Timed out reading response body after ${timeoutMs}ms`));
+      try {
+        reader.abort();
+      } catch {
+        // ignore — already rejected
+      }
+    }, timeoutMs);
+    reader.onload = () => {
+      clearTimeout(timeout);
+      const result = reader.result;
+      if (typeof result === 'string') {
+        resolve(result);
+      } else {
+        reject(new Error('FileReader did not produce a string result'));
+      }
+    };
+    reader.onerror = () => {
+      clearTimeout(timeout);
+      reject(reader.error ?? new Error('FileReader failed'));
+    };
+    reader.onabort = () => {
+      clearTimeout(timeout);
+      reject(new Error('FileReader aborted'));
+    };
+    reader.readAsText(blob);
+  });
+}
+
+type TextDecoderLike = { decode(input: Uint8Array): string };
+
+/* oxlint-disable eslint(no-bitwise) -- decoding UTF-8 is inherently bit manipulation */
+/**
+ * Decode UTF-8 bytes into a string. Uses the global TextDecoder when the JS
+ * engine provides one and falls back to a manual decoder otherwise (Hermes
+ * has no TextDecoder). Invalid sequences decode to U+FFFD.
+ */
+export function decodeUtf8(bytes: Uint8Array): string {
+  const TextDecoderConstructor = (globalThis as { TextDecoder?: new () => TextDecoderLike }).TextDecoder;
+  if (TextDecoderConstructor) {
+    try {
+      return new TextDecoderConstructor().decode(bytes);
+    } catch {
+      // fall through to the manual decoder
+    }
+  }
+
+  let out = '';
+  let i = 0;
+  while (i < bytes.length) {
+    const byte = bytes[i]!;
+    let codePoint: number;
+    let extraBytes: number;
+    if (byte < 0x80) {
+      codePoint = byte;
+      extraBytes = 0;
+    } else if ((byte & 0xe0) === 0xc0) {
+      codePoint = byte & 0x1f;
+      extraBytes = 1;
+    } else if ((byte & 0xf0) === 0xe0) {
+      codePoint = byte & 0x0f;
+      extraBytes = 2;
+    } else if ((byte & 0xf8) === 0xf0) {
+      codePoint = byte & 0x07;
+      extraBytes = 3;
+    } else {
+      out += '�';
+      i += 1;
+      continue;
+    }
+
+    if (i + extraBytes >= bytes.length) {
+      // truncated sequence at the end of the buffer
+      out += '�';
+      break;
+    }
+
+    let valid = true;
+    for (let j = 1; j <= extraBytes; j++) {
+      const continuation = bytes[i + j]!;
+      if ((continuation & 0xc0) !== 0x80) {
+        valid = false;
+        break;
+      }
+      codePoint = (codePoint << 6) | (continuation & 0x3f);
+    }
+
+    if (!valid || codePoint > 0x10ffff || (codePoint >= 0xd800 && codePoint <= 0xdfff)) {
+      out += '�';
+      i += 1;
+      continue;
+    }
+
+    out += String.fromCodePoint(codePoint);
+    i += extraBytes + 1;
+  }
+  return out;
+}
+/* oxlint-enable eslint(no-bitwise) */
+
 /**
  * Filter a headers map down to the set explicitly captured (defaults + user-supplied)
  * and strip authorization-like headers. Header name comparison is case-insensitive;

packages/core/src/js/replay/xhrUtils.ts

@@ -5,11 +5,16 @@ import { dropUndefinedKeys } from '@sentry/core';
 import type { NetworkBody, RequestBody, ResolvedNetworkOptions } from './networkUtils';
 
 import {
+  decodeUtf8,
   filterHeaders,
   getBodySize,
   getBodyString,
+  isTextLikeContentType,
+  NETWORK_BODY_MAX_SIZE,
+  NETWORK_BODY_READ_TIMEOUT_MS,
   parseAllResponseHeaders,
   parseContentLengthHeader,
+  readBlobAsText,
   shouldCaptureNetworkDetails,
 } from './networkUtils';
 
@@ -19,6 +24,15 @@ interface NetworkBreadcrumbSide {
   _meta?: { warnings: string[] };
 }
 
+/**
+ * Hint key carrying a response body that was read asynchronously (Blob /
+ * ArrayBuffer responses) before the breadcrumb was re-added. When present,
+ * enrichment uses it instead of reading `xhr.response` synchronously.
+ */
+export const REPLAY_RESOLVED_RESPONSE_BODY_HINT_KEY = '__mobile_replay_resolved_response_body__';
+
+type ResolvedBodyCarrier = { [REPLAY_RESOLVED_RESPONSE_BODY_HINT_KEY]?: NetworkBody };
+
 const DEFAULT_NETWORK_OPTIONS: ResolvedNetworkOptions = {
   allowUrls: [],
   denyUrls: [],
@@ -75,7 +89,11 @@ function enrichXhrBreadcrumb(
 
   if (shouldCaptureNetworkDetails(url, networkOptions)) {
     request = _buildRequestDetails(input, xhr, networkOptions);
-    response = _buildResponseDetails(xhr, networkOptions);
+    response = _buildResponseDetails(
+      xhr,
+      networkOptions,
+      (hint as ResolvedBodyCarrier)[REPLAY_RESOLVED_RESPONSE_BODY_HINT_KEY],
+    );
   }
 
   breadcrumb.data = dropUndefinedKeys({
@@ -108,6 +126,7 @@ function _buildRequestDetails(
 function _buildResponseDetails(
   xhr: XMLHttpRequest & SentryWrappedXMLHttpRequest,
   networkOptions: ResolvedNetworkOptions,
+  resolvedBody: NetworkBody | undefined,
 ): NetworkBreadcrumbSide | undefined {
   let rawHeaders: string | null = null;
   try {
@@ -119,7 +138,7 @@ function _buildResponseDetails(
 
   let body: NetworkBody | undefined;
   if (networkOptions.captureBodies) {
-    body = _getResponseBodyString(xhr);
+    body = resolvedBody ?? _getResponseBodyString(xhr);
   }
 
   return _toBreadcrumbSide(headers, body);
@@ -174,6 +193,81 @@ type XhrHint = XhrBreadcrumbHint & {
   input?: RequestBody;
 };
 
+/**
+ * Whether this xhr breadcrumb's response body can only be captured asynchronously:
+ * a binary responseType (`blob` / `arraybuffer`) holding a text-like payload, for
+ * an allow-listed URL with body capture enabled. React Native's `fetch` polyfill
+ * always uses responseType `blob`, so every `fetch` response takes this path.
+ */
+export function shouldCaptureResponseBodyAsync(
+  breadcrumb: Breadcrumb,
+  hint: BreadcrumbHint | undefined,
+  networkOptions: ResolvedNetworkOptions,
+): hint is XhrHint {
+  if (breadcrumb.category !== 'xhr' || !hint) {
+    return false;
+  }
+  if ((hint as ResolvedBodyCarrier)[REPLAY_RESOLVED_RESPONSE_BODY_HINT_KEY] !== undefined) {
+    // already resolved — this is the re-added breadcrumb
+    return false;
+  }
+  const xhr = (hint as Partial<XhrHint>).xhr;
+  if (!xhr || (xhr.responseType !== 'blob' && xhr.responseType !== 'arraybuffer') || xhr.response == null) {
+    return false;
+  }
+  if (!networkOptions.captureBodies) {
+    return false;
+  }
+  const url = typeof breadcrumb.data?.url === 'string' ? breadcrumb.data.url : undefined;
+  if (!shouldCaptureNetworkDetails(url, networkOptions)) {
+    return false;
+  }
+  let contentType: string | null = null;
+  try {
+    contentType = xhr.getResponseHeader('content-type');
+  } catch {
+    // ignore — treated as non-text below
+  }
+  return isTextLikeContentType(contentType);
+}
+
+/**
+ * Read the body of a binary (`blob` / `arraybuffer`) XHR response and serialize
+ * it like a text body (size cap + truncation warning). Resolves to an
+ * UNPARSEABLE_BODY_TYPE warning on read failure or timeout — never rejects.
+ */
+export async function resolveXhrResponseBody(xhr: XMLHttpRequest): Promise<NetworkBody> {
+  try {
+    if (xhr.responseType === 'blob') {
+      const blob = xhr.response as Blob;
+      const truncated = blob.size > NETWORK_BODY_MAX_SIZE;
+      // Slice before reading so a huge payload is never fully read into memory.
+      const capped = truncated ? blob.slice(0, NETWORK_BODY_MAX_SIZE) : blob;
+      const text = await readBlobAsText(capped, NETWORK_BODY_READ_TIMEOUT_MS);
+      return _toCappedBody(text, truncated);
+    }
+    if (xhr.responseType === 'arraybuffer') {
+      const buffer = xhr.response as ArrayBuffer;
+      const truncated = buffer.byteLength > NETWORK_BODY_MAX_SIZE;
+      const bytes = new Uint8Array(buffer, 0, truncated ? NETWORK_BODY_MAX_SIZE : buffer.byteLength);
+      return _toCappedBody(decodeUtf8(bytes), truncated);
+    }
+  } catch {
+    // fall through to the unparseable marker
+  }
+  return { _meta: { warnings: ['UNPARSEABLE_BODY_TYPE'] } };
+}
+
+function _toCappedBody(text: string, truncated: boolean): NetworkBody {
+  // The byte cap above already keeps `text` at or below the char cap
+  // (UTF-8 is at least one byte per char), so only the warning is left to add.
+  const body = getBodyString(text) ?? { body: text };
+  if (truncated) {
+    return { ...body, _meta: { warnings: [...(body._meta?.warnings ?? []), 'MAX_BODY_SIZE_EXCEEDED'] } };
+  }
+  return body;
+}
+
 function _getBodySize(
   body: XMLHttpRequest['response'],
   responseType: XMLHttpRequest['responseType'],