@rozenite/network-activity-plugin 1.9.0 → 1.11.0

package/src/react-native/http/__tests__/http-utils.test.ts

@@ -0,0 +1,228 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from 'vitest';
+import { BINARY_CAPTURE_SIZE_CAP, getResponseBody } from '../http-utils';
+
+type XHRStubOptions = {
+  responseType?: XMLHttpRequestResponseType;
+  responseText?: string;
+  response?: unknown;
+  contentType?: string;
+};
+
+const makeXHRStub = ({
+  responseType = '',
+  responseText = '',
+  response = null,
+  contentType = '',
+}: XHRStubOptions): XMLHttpRequest =>
+  ({
+    responseType,
+    responseText,
+    response,
+    getResponseHeader: (name: string) =>
+      name.toLowerCase() === 'content-type' ? contentType : null,
+  }) as unknown as XMLHttpRequest;
+
+describe('getResponseBody', () => {
+  it('returns plain text when responseType is empty', async () => {
+    const xhr = makeXHRStub({
+      responseType: '',
+      responseText: 'hello world',
+    });
+    expect(await getResponseBody(xhr)).toBe('hello world');
+  });
+
+  it('returns plain text when responseType is "text"', async () => {
+    const xhr = makeXHRStub({
+      responseType: 'text',
+      responseText: 'hello world',
+    });
+    expect(await getResponseBody(xhr)).toBe('hello world');
+  });
+
+  it('stringifies the JSON response when responseType is "json"', async () => {
+    const xhr = makeXHRStub({
+      responseType: 'json',
+      response: { ok: true, n: 1 },
+    });
+    expect(await getResponseBody(xhr)).toBe('{"ok":true,"n":1}');
+  });
+
+  it('reads a text blob as text', async () => {
+    const blob = new Blob(['<p>hello</p>'], { type: 'text/html' });
+    const xhr = makeXHRStub({
+      responseType: 'blob',
+      response: blob,
+      contentType: 'text/html; charset=utf-8',
+    });
+    expect(await getResponseBody(xhr)).toBe('<p>hello</p>');
+  });
+
+  it('reads a JSON blob as text', async () => {
+    const blob = new Blob(['{"ok":true}'], { type: 'application/json' });
+    const xhr = makeXHRStub({
+      responseType: 'blob',
+      response: blob,
+      contentType: 'application/json',
+    });
+    expect(await getResponseBody(xhr)).toBe('{"ok":true}');
+  });
+
+  it('routes image/svg+xml through the text path so the source is preserved', async () => {
+    const svg = '<svg xmlns="http://www.w3.org/2000/svg"><circle r="5"/></svg>';
+    const blob = new Blob([svg], { type: 'image/svg+xml' });
+    const xhr = makeXHRStub({
+      responseType: 'blob',
+      response: blob,
+      contentType: 'image/svg+xml',
+    });
+    expect(await getResponseBody(xhr)).toBe(svg);
+  });
+
+  it('reads application/xml as text', async () => {
+    const xml = '<feed><title>Demo</title></feed>';
+    const blob = new Blob([xml], { type: 'application/xml' });
+    const xhr = makeXHRStub({
+      responseType: 'blob',
+      response: blob,
+      contentType: 'application/xml',
+    });
+    expect(await getResponseBody(xhr)).toBe(xml);
+  });
+
+  it('reads text/xml as text', async () => {
+    const xml = '<root/>';
+    const blob = new Blob([xml], { type: 'text/xml' });
+    const xhr = makeXHRStub({
+      responseType: 'blob',
+      response: blob,
+      contentType: 'text/xml; charset=utf-8',
+    });
+    expect(await getResponseBody(xhr)).toBe(xml);
+  });
+
+  it('reads RFC 7303 +xml composite types (Atom, RSS, SOAP) as text', async () => {
+    const atom =
+      '<feed xmlns="http://www.w3.org/2005/Atom"><entry><title>x</title></entry></feed>';
+    const xhr = makeXHRStub({
+      responseType: 'blob',
+      response: new Blob([atom], { type: 'application/atom+xml' }),
+      contentType: 'application/atom+xml; charset=utf-8',
+    });
+    expect(await getResponseBody(xhr)).toBe(atom);
+  });
+
+  it('returns a binary union variant with base64 for an image blob under the cap', async () => {
+    // Three bytes (0x01 0x02 0x03) base64-encodes to "AQID".
+    const blob = new Blob([new Uint8Array([1, 2, 3])], { type: 'image/png' });
+    const xhr = makeXHRStub({
+      responseType: 'blob',
+      response: blob,
+      contentType: 'image/png',
+    });
+    const result = await getResponseBody(xhr);
+    expect(result).toEqual({ kind: 'binary', base64: 'AQID' });
+  });
+
+  it('returns a binary-too-large variant without shipping bytes when the blob exceeds the cap', async () => {
+    // Stub a blob whose .size lies — we only care about the size-check
+    // path here, no FileReader.readAsDataURL should be invoked.
+    const oversizedBlob = {
+      size: BINARY_CAPTURE_SIZE_CAP + 1,
+      type: 'image/jpeg',
+    } as unknown as Blob;
+    const xhr = makeXHRStub({
+      responseType: 'blob',
+      response: oversizedBlob,
+      contentType: 'image/jpeg',
+    });
+    expect(await getResponseBody(xhr)).toEqual({
+      kind: 'binary-too-large',
+      size: BINARY_CAPTURE_SIZE_CAP + 1,
+    });
+  });
+
+  it('returns a binary union variant for non-image, non-text blob content-types', async () => {
+    const blob = new Blob([new Uint8Array([1, 2, 3])], {
+      type: 'application/pdf',
+    });
+    const xhr = makeXHRStub({
+      responseType: 'blob',
+      response: blob,
+      contentType: 'application/pdf',
+    });
+    expect(await getResponseBody(xhr)).toEqual({
+      kind: 'binary',
+      base64: 'AQID',
+    });
+  });
+
+  it('captures arraybuffer responses as binary', async () => {
+    const buffer = new Uint8Array([1, 2, 3]).buffer;
+    const xhr = makeXHRStub({
+      responseType: 'arraybuffer',
+      response: buffer,
+    });
+    expect(await getResponseBody(xhr)).toEqual({
+      kind: 'binary',
+      base64: 'AQID',
+    });
+  });
+
+  it('chunks large arraybuffer responses without exhausting fromCharCode', async () => {
+    // 100 KB of bytes — past the 32 KB chunk boundary used by the
+    // base64 encoder, well under the 5 MB cap. Confirms the chunked
+    // path produces correct base64 output.
+    const size = 100 * 1024;
+    const bytes = new Uint8Array(size);
+    for (let i = 0; i < size; i++) {
+      bytes[i] = i & 0xff;
+    }
+    const xhr = makeXHRStub({
+      responseType: 'arraybuffer',
+      response: bytes.buffer,
+    });
+    const result = await getResponseBody(xhr);
+    expect(typeof result === 'object' && result?.kind === 'binary').toBe(true);
+    if (typeof result === 'object' && result?.kind === 'binary') {
+      // Round-trip: decode the base64 back and compare with the input.
+      const binary = atob(result.base64);
+      const decoded = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i++) {
+        decoded[i] = binary.charCodeAt(i);
+      }
+      expect(decoded.length).toBe(size);
+      expect(decoded[0]).toBe(0);
+      expect(decoded[size - 1]).toBe((size - 1) & 0xff);
+    }
+  });
+
+  it('short-circuits arraybuffer responses above the size cap', async () => {
+    // Stub a buffer whose byteLength lies — the cap check should fire
+    // before any encoding work happens.
+    const oversized = {
+      byteLength: BINARY_CAPTURE_SIZE_CAP + 1,
+    } as unknown as ArrayBuffer;
+    const xhr = makeXHRStub({
+      responseType: 'arraybuffer',
+      response: oversized,
+    });
+    expect(await getResponseBody(xhr)).toEqual({
+      kind: 'binary-too-large',
+      size: BINARY_CAPTURE_SIZE_CAP + 1,
+    });
+  });
+
+  it('returns null for an arraybuffer responseType with no payload', async () => {
+    const xhr = makeXHRStub({ responseType: 'arraybuffer' });
+    expect(await getResponseBody(xhr)).toBeNull();
+  });
+
+  it('returns null for an arraybuffer responseType with an empty buffer', async () => {
+    const xhr = makeXHRStub({
+      responseType: 'arraybuffer',
+      response: new ArrayBuffer(0),
+    });
+    expect(await getResponseBody(xhr)).toBeNull();
+  });
+});

package/src/react-native/http/http-utils.ts

@@ -1,13 +1,19 @@
-import {
+import type {
   XHRPostData,
   RequestPostData,
   RequestTextPostData,
   RequestBinaryPostData,
   RequestFormDataPostData,
+  ResponseBody,
+  Initiator,
+  InitiatorStackFrame,
 } from '../../shared/client';
 import { safeStringify } from '../../utils/safeStringify';
 import { getStringSizeInBytes } from '../../utils/getStringSizeInBytes';
-import { isJsonContentType } from '../../utils/getContentTypeMimeType';
+import {
+  isJsonContentType,
+  isXmlContentType,
+} from '../../utils/getContentTypeMimeType';
 import {
   isBlob,
   isArrayBuffer,
@@ -114,9 +120,48 @@ export const getResponseSize = (request: XMLHttpRequest): number | null => {
   }
 };
 
+// Cap on binary capture. Above this, we ship a 'binary-too-large' variant
+// with just the size — no bytes cross the bridge. 5MB comfortably covers
+// debug-relevant images while keeping the bridge from choking on outliers.
+export const BINARY_CAPTURE_SIZE_CAP = 5 * 1024 * 1024;
+
+const readBlobAsText = (blob: Blob): Promise<string> =>
+  new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.readAsText(blob);
+  });
+
+const readBlobAsBase64 = (blob: Blob): Promise<string> =>
+  new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      // FileReader.readAsDataURL returns "data:<mime>;base64,<payload>".
+      // We only want the base64 payload.
+      const dataUrl = reader.result as string;
+      resolve(dataUrl.substring(dataUrl.indexOf(',') + 1));
+    };
+    reader.readAsDataURL(blob);
+  });
+
+// String.fromCharCode.apply(null, hugeArray) blows up around 64K elements
+// in some engines; chunk through 32K windows so we work uniformly across
+// large arraybuffer responses.
+const ARRAY_BUFFER_BASE64_CHUNK = 0x8000;
+
+const arrayBufferToBase64 = (buffer: ArrayBuffer): string => {
+  const bytes = new Uint8Array(buffer);
+  let binary = '';
+  for (let i = 0; i < bytes.length; i += ARRAY_BUFFER_BASE64_CHUNK) {
+    const chunk = bytes.subarray(i, i + ARRAY_BUFFER_BASE64_CHUNK);
+    binary += String.fromCharCode.apply(null, chunk as unknown as number[]);
+  }
+  return btoa(binary);
+};
+
 export const getResponseBody = async (
   request: XMLHttpRequest,
-): Promise<string | null> => {
+): Promise<ResponseBody> => {
   const responseType = request.responseType;
 
   // Response type is empty in certain cases, like when using axios.
@@ -125,22 +170,39 @@ export const getResponseBody = async (
   }
 
   if (responseType === 'blob') {
-    // This may be a text blob.
     const contentType = request.getResponseHeader('Content-Type') || '';
 
+    // Text-shaped content stays on the text path so the panel can
+    // show source in the Raw view without base64 round-tripping. XML
+    // composite types (application/xml, atom+xml, soap+xml, ...) and
+    // image/svg+xml are all covered by isXmlContentType per RFC 7303.
     if (
       contentType.startsWith('text/') ||
-      isJsonContentType(contentType)
+      isJsonContentType(contentType) ||
+      isXmlContentType(contentType)
     ) {
-      // It looks like a text blob, let's read it and forward it to the client.
-      return new Promise((resolve) => {
-        const reader = new FileReader();
-        reader.onload = () => {
-          resolve(reader.result as string);
-        };
-        reader.readAsText(request.response);
-      });
+      return readBlobAsText(request.response);
+    }
+
+    // Everything else is binary — image/*, application/pdf, audio/*,
+    // video/*, font/*, application/octet-stream, anything novel a
+    // server might serve.
+    const blob = request.response as Blob;
+    if (blob.size > BINARY_CAPTURE_SIZE_CAP) {
+      return { kind: 'binary-too-large', size: blob.size };
+    }
+    return { kind: 'binary', base64: await readBlobAsBase64(blob) };
+  }
+
+  if (responseType === 'arraybuffer') {
+    const buffer = request.response as ArrayBuffer | null;
+    if (!buffer || buffer.byteLength === 0) {
+      return null;
+    }
+    if (buffer.byteLength > BINARY_CAPTURE_SIZE_CAP) {
+      return { kind: 'binary-too-large', size: buffer.byteLength };
     }
+    return { kind: 'binary', base64: arrayBufferToBase64(buffer) };
   }
 
   if (responseType === 'json') {
@@ -150,26 +212,147 @@ export const getResponseBody = async (
   return null;
 };
 
-export const getInitiatorFromStack = (): {
-  type: string;
-  url?: string;
-  lineNumber?: number;
-  columnNumber?: number;
-} => {
+const STACK_PREVIEW_FRAME_LIMIT = 8;
+const INITIATOR_STACK_FRAME_OFFSET = 3;
+
+const parseStackLocation = (
+  location: string,
+): Pick<InitiatorStackFrame, 'url' | 'lineNumber' | 'columnNumber'> | null => {
+  const match = location.match(/^(.*):(\d+):(\d+)$/);
+
+  if (!match) {
+    return null;
+  }
+
+  return {
+    url: match[1],
+    lineNumber: Number.parseInt(match[2], 10),
+    columnNumber: Number.parseInt(match[3], 10),
+  };
+};
+
+const normalizeFunctionName = (functionName?: string) => {
+  const trimmedFunctionName = functionName?.trim();
+
+  return trimmedFunctionName &&
+    trimmedFunctionName !== '<anonymous>' &&
+    trimmedFunctionName !== 'anonymous' &&
+    trimmedFunctionName !== '<unknown>'
+    ? trimmedFunctionName
+    : undefined;
+};
+
+const parseStackFrame = (line: string): InitiatorStackFrame | null => {
+  const trimmedLine = line.trim();
+
+  if (!trimmedLine) {
+    return null;
+  }
+
+  let functionName: string | undefined;
+  let location: string | undefined;
+
+  const v8FunctionFrame = trimmedLine.match(/^at\s+(.*?)\s+\((.*)\)$/);
+  if (v8FunctionFrame) {
+    functionName = v8FunctionFrame[1];
+    location = v8FunctionFrame[2];
+  } else {
+    const v8LocationFrame = trimmedLine.match(/^at\s+(.*)$/);
+    const jscFrame = trimmedLine.match(/^(.*?)@(.*)$/);
+
+    if (v8LocationFrame) {
+      location = v8LocationFrame[1];
+    } else if (jscFrame) {
+      functionName = jscFrame[1];
+      location = jscFrame[2];
+    }
+  }
+
+  if (!location) {
+    return null;
+  }
+
+  const parsedLocation = parseStackLocation(location);
+  if (!parsedLocation) {
+    return null;
+  }
+
+  return {
+    functionName: normalizeFunctionName(functionName),
+    ...parsedLocation,
+  };
+};
+
+const toGeneratedStackFrame = (
+  frame: InitiatorStackFrame,
+): InitiatorStackFrame => ({
+  functionName: frame.functionName,
+  generatedUrl: frame.url,
+  generatedLineNumber: frame.lineNumber,
+  generatedColumnNumber: frame.columnNumber,
+});
+
+const getGeneratedFrameLocation = (frame: InitiatorStackFrame) => ({
+  url: frame.generatedUrl ?? frame.url,
+  lineNumber: frame.generatedLineNumber ?? frame.lineNumber,
+  columnNumber: frame.generatedColumnNumber ?? frame.columnNumber,
+});
+
+const canSymbolicateStack = (stack?: InitiatorStackFrame[]) =>
+  stack?.some((frame) =>
+    getGeneratedFrameLocation(frame).url?.startsWith('http'),
+  ) ?? false;
+
+const getStackPreview = (frames: InitiatorStackFrame[]) => {
+  // The first frames are this helper, the HTTP inspector callback and the XHR
+  // wrapper. The caller starts after that fixed interception boundary.
+  const callerFrames = frames.slice(INITIATOR_STACK_FRAME_OFFSET);
+
+  return (callerFrames.length > 0 ? callerFrames : frames).slice(
+    0,
+    STACK_PREVIEW_FRAME_LIMIT,
+  );
+};
+
+export const getInitiatorFromStack = (): Initiator => {
   try {
     const stack = new Error().stack;
     if (!stack) {
       return { type: 'other' };
     }
 
-    const line = stack.split('\n')[9];
-    const match = line.match(/at\s+(.+?)\s+\((.+?):(\d+):(\d+)\)/);
-    if (match) {
+    const parsedFrames = stack
+      .split('\n')
+      .map(parseStackFrame)
+      .filter((frame): frame is InitiatorStackFrame => frame !== null);
+
+    const stackPreview = getStackPreview(parsedFrames);
+    const initiatorFrame = stackPreview[0];
+    const generatedStackPreview = stackPreview.map(toGeneratedStackFrame);
+
+    if (initiatorFrame?.url) {
       return {
         type: 'script',
-        url: match[2],
-        lineNumber: parseInt(match[3]),
-        columnNumber: parseInt(match[4]),
+        functionName: initiatorFrame.functionName,
+        generatedUrl: initiatorFrame.url,
+        generatedLineNumber: initiatorFrame.lineNumber,
+        generatedColumnNumber: initiatorFrame.columnNumber,
+        stack: generatedStackPreview,
+        symbolicationStatus: canSymbolicateStack(generatedStackPreview)
+          ? 'pending'
+          : 'unavailable',
+      };
+    }
+
+    if (parsedFrames.length > 0) {
+      const fallbackStack = stackPreview.map(toGeneratedStackFrame);
+
+      return {
+        type: 'other',
+        stack: fallbackStack,
+        symbolicationStatus: canSymbolicateStack(fallbackStack)
+          ? 'pending'
+          : 'unavailable',
       };
     }
   } catch {

package/src/react-native/network-inspector.ts

@@ -15,7 +15,7 @@ import {
   NITRO_NETWORK_EVENTS,
 } from './nitro-fetch/nitro-network-inspector';
 import { EventsListener } from './events-listener';
-import { NetworkActivityEventMap } from '../shared/client';
+import { NetworkActivityEventMap, ResponseBody } from '../shared/client';
 import type { InspectorsConfig } from './config';
 import { getResponseBody as getHTTPResponseBody } from './http/http-utils';
 
@@ -28,7 +28,7 @@ export type NetworkInspector = {
   enable: (config?: InspectorsConfig) => void;
   disable: () => void;
   dispose: () => void;
-  getResponseBody: (requestId: string) => Promise<string | null>;
+  getResponseBody: (requestId: string) => Promise<ResponseBody>;
 };
 
 const createNetworkInspectorInstance = (): NetworkInspector => {

package/src/react-native/nitro-fetch/get-nitro-module.ts

@@ -1,9 +1,13 @@
 import type { NitroModule } from './nitro-network-inspector';
 
-export const getNitroModule = (): NitroModule | null => {
+const nitroModule = (() => {
   try {
     return require('react-native-nitro-fetch') as NitroModule;
   } catch {
     return null;
   }
+})();
+
+export const getNitroModule = (): NitroModule | null => {
+  return nitroModule;
 };

package/src/react-native/nitro-fetch/nitro-network-inspector.ts

@@ -4,6 +4,7 @@ import type {
   HttpHeaders,
   HttpMethod,
   RequestPostData,
+  ResponseBody,
 } from '../../shared/client';
 import type { WebSocketEventMap } from '../../shared/websocket-events';
 import type { Inspector } from '../inspector';
@@ -92,7 +93,12 @@ type NanoEventsMap = {
 };
 
 export type NitroNetworkInspector = Inspector<NitroNetworkEventMap> & {
-  getResponseBody: (requestId: string) => string | null;
+  // Returns ResponseBody so the wire shape is consistent across capture
+  // paths. The nitro native module today only surfaces text response
+  // bodies, so at runtime this resolves to string | null — but typing it
+  // as ResponseBody lets future native support for binary slot in without
+  // a wire-format change.
+  getResponseBody: (requestId: string) => ResponseBody;
 };
 
 export const NITRO_NETWORK_EVENTS: (keyof NitroNetworkEventMap)[] = [
@@ -163,7 +169,7 @@ export const createNitroNetworkInspector = (
 ): NitroNetworkInspector => {
   const eventEmitter = createNanoEvents<NanoEventsMap>();
   const previousEntries = new Map<string, NitroInspectorEntry>();
-  const responseBodies = new Map<string, string | null>();
+  const responseBodies = new Map<string, ResponseBody>();
   let nitroModule: NitroModule | null = null;
   let unsubscribe: (() => void) | null = null;
 

package/src/shared/http-events.ts

@@ -1,6 +1,17 @@
 export type HttpHeaders = Record<string, string | string[]>;
 export type XHRHeaders = NonNullable<XMLHttpRequest['responseHeaders']>;
 
+// Discriminated union for response bodies on the bridge.
+//   string → text body (today's path)
+//   { kind: 'binary' } → base64-encoded binary payload (e.g. images)
+//   { kind: 'binary-too-large' } → response exceeded the in-capture size cap; bytes not shipped
+//   null → body could not be read at all
+export type ResponseBody =
+  | string
+  | { kind: 'binary'; base64: string }
+  | { kind: 'binary-too-large'; size: number }
+  | null;
+
 export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD';
 
 export type RequestId = string;
@@ -72,11 +83,39 @@ export type Response = {
   responseTime: Timestamp;
 };
 
+export type InitiatorStackFrame = {
+  functionName?: string;
+  url?: string;
+  lineNumber?: number;
+  columnNumber?: number;
+  generatedUrl?: string;
+  generatedLineNumber?: number;
+  generatedColumnNumber?: number;
+  isCollapsed?: boolean;
+};
+
+export type InitiatorCodeFrame = {
+  content: string;
+  fileName: string;
+  location?: {
+    row: number;
+    column: number;
+  } | null;
+};
+
 export type Initiator = {
   type: string;
+  symbolicationStatus?: 'pending' | 'complete' | 'failed' | 'unavailable';
+  symbolicationError?: string;
+  functionName?: string;
   url?: string;
   lineNumber?: number;
   columnNumber?: number;
+  generatedUrl?: string;
+  generatedLineNumber?: number;
+  generatedColumnNumber?: number;
+  codeFrame?: InitiatorCodeFrame | null;
+  stack?: InitiatorStackFrame[];
 };
 
 export type ResourceType = 'XHR' | 'Fetch' | 'Other';
@@ -137,7 +176,7 @@ export type HttpEventMap = {
 
   'response-body': {
     requestId: RequestId;
-    body: string | null;
+    body: ResponseBody;
   };
 
   'set-overrides': {