@rozenite/network-activity-plugin 1.8.1 → 1.10.0

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

@@ -1,12 +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,
+  isXmlContentType,
+} from '../../utils/getContentTypeMimeType';
 import {
   isBlob,
   isArrayBuffer,
@@ -113,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.
@@ -124,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/') ||
-      contentType.startsWith('application/json')
+      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') {
@@ -149,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 {
@@ -195,7 +379,7 @@ export const setupRequestOverride = (
       Object.defineProperty(request, 'responseText', { writable: true });
 
       const contentType = getContentType(request);
-      if (contentType === 'application/json') {
+      if (isJsonContentType(contentType)) {
         request.responseType = 'json';
       } else if (contentType === 'text/plain') {
         request.responseType = 'text';

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

@@ -0,0 +1,13 @@
+import type { NitroModule } from './nitro-network-inspector';
+
+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,9 +4,11 @@ import type {
   HttpHeaders,
   HttpMethod,
   RequestPostData,
+  ResponseBody,
 } from '../../shared/client';
 import type { WebSocketEventMap } from '../../shared/websocket-events';
 import type { Inspector } from '../inspector';
+import { getNitroModule as loadNitroModule } from './get-nitro-module';
 
 type NitroHttpHeader = {
   key: string;
@@ -62,7 +64,7 @@ type NitroWebSocketEntry = {
 
 type NitroInspectorEntry = NitroHttpEntry | NitroWebSocketEntry;
 
-type NitroModule = {
+export type NitroModule = {
   NetworkInspector: {
     enable: () => void;
     disable: () => void;
@@ -91,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)[] = [
@@ -107,14 +114,6 @@ export const NITRO_NETWORK_EVENTS: (keyof NitroNetworkEventMap)[] = [
   'websocket-error',
 ];
 
-const loadNitroModule = (): NitroModule | null => {
-  try {
-    return require('react-native-nitro-fetch') as NitroModule;
-  } catch {
-    return null;
-  }
-};
-
 const timestampOrigin =
   typeof performance !== 'undefined' &&
   typeof performance.timeOrigin === 'number'
@@ -170,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': {

package/src/ui/components/CodeBlock.tsx

@@ -1,8 +1,15 @@
-import { HTMLProps } from 'react';
+import { HTMLProps, useMemo } from 'react';
+import { Virtuoso } from 'react-virtuoso';
 import { cn } from '../utils/cn';
 
 export type CodeBlockProps = HTMLProps<HTMLPreElement>;
 
+// Above this character count, string content renders through Virtuoso
+// instead of a flat <pre>. Tuned so typical responses (<20KB) stay on
+// the simple path, while pathological payloads (large pretty-printed
+// JSON / minified bundles served as text / huge logs) virtualize.
+const VIRTUALIZATION_THRESHOLD = 50_000;
+
 const codeBlockClassNames =
   'text-sm font-mono text-gray-300 whitespace-pre-wrap bg-gray-800 p-3 rounded-md border border-gray-700 overflow-x-auto wrap-anywhere';
 
@@ -11,9 +18,46 @@ export const CodeBlock = ({
   className,
   ...props
 }: CodeBlockProps) => {
+  // Only string children are eligible for virtualization. Component
+  // children (JsonTree / XmlTree / etc.) manage their own rendering;
+  // CodeBlock here just provides the monospace-on-dark frame.
+  if (
+    typeof children === 'string' &&
+    children.length > VIRTUALIZATION_THRESHOLD
+  ) {
+    return <VirtualizedCodeBlock text={children} className={className} />;
+  }
+
   return (
     <pre className={cn(codeBlockClassNames, className)} {...props}>
       {children}
     </pre>
   );
 };
+
+type VirtualizedCodeBlockProps = {
+  text: string;
+  className?: string;
+};
+
+const VirtualizedCodeBlock = ({
+  text,
+  className,
+}: VirtualizedCodeBlockProps) => {
+  const lines = useMemo(() => text.split('\n'), [text]);
+
+  // Content with no newlines collapses to a single row containing the
+  // entire payload. Browser wrapping (whitespace-pre-wrap, wrap-anywhere)
+  // still keeps layout sane, but there's no real virtualization benefit
+  // for that shape — the size win shows up once the body has many lines.
+  return (
+    <Virtuoso
+      style={{ height: 500 }}
+      totalCount={lines.length}
+      itemContent={(idx) => (
+        <div className="whitespace-pre-wrap wrap-anywhere">{lines[idx]}</div>
+      )}
+      className={cn(codeBlockClassNames, className)}
+    />
+  );
+};