@rozenite/network-activity-plugin 1.9.0 → 1.10.0

package/dist/react-native/chunks/boot-recording.cjs

@@ -213,6 +213,13 @@ function isJsonContentType(contentType) {
   const mimeType = normalizeContentType(contentType);
   return mimeType === "application/json" || mimeType.endsWith("+json");
 }
+function isXmlContentType(contentType) {
+  if (!contentType) {
+    return false;
+  }
+  const mimeType = normalizeContentType(contentType);
+  return mimeType === "application/xml" || mimeType === "text/xml" || mimeType.endsWith("+xml");
+}
 const isBlob = (value) => value instanceof Blob;
 const isArrayBuffer = (value) => value instanceof ArrayBuffer || ArrayBuffer.isView(value);
 const isFormData = (value) => value instanceof FormData;
@@ -327,6 +334,30 @@ const getResponseSize = (request) => {
     return null;
   }
 };
+const BINARY_CAPTURE_SIZE_CAP = 5 * 1024 * 1024;
+const readBlobAsText = (blob) => new Promise((resolve) => {
+  const reader = new FileReader();
+  reader.onload = () => resolve(reader.result);
+  reader.readAsText(blob);
+});
+const readBlobAsBase64 = (blob) => new Promise((resolve) => {
+  const reader = new FileReader();
+  reader.onload = () => {
+    const dataUrl = reader.result;
+    resolve(dataUrl.substring(dataUrl.indexOf(",") + 1));
+  };
+  reader.readAsDataURL(blob);
+});
+const ARRAY_BUFFER_BASE64_CHUNK = 32768;
+const arrayBufferToBase64 = (buffer) => {
+  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);
+  }
+  return btoa(binary);
+};
 const getResponseBody = async (request) => {
   const responseType = request.responseType;
   if (responseType === "" || responseType === "text") {
@@ -334,35 +365,128 @@ const getResponseBody = async (request) => {
   }
   if (responseType === "blob") {
     const contentType = request.getResponseHeader("Content-Type") || "";
-    if (contentType.startsWith("text/") || isJsonContentType(contentType)) {
-      return new Promise((resolve) => {
-        const reader = new FileReader();
-        reader.onload = () => {
-          resolve(reader.result);
-        };
-        reader.readAsText(request.response);
-      });
+    if (contentType.startsWith("text/") || isJsonContentType(contentType) || isXmlContentType(contentType)) {
+      return readBlobAsText(request.response);
+    }
+    const blob = request.response;
+    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;
+    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") {
     return safeStringify(request.response);
   }
   return null;
 };
+const STACK_PREVIEW_FRAME_LIMIT = 8;
+const INITIATOR_STACK_FRAME_OFFSET = 3;
+const parseStackLocation = (location) => {
+  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) => {
+  const trimmedFunctionName = functionName?.trim();
+  return trimmedFunctionName && trimmedFunctionName !== "<anonymous>" && trimmedFunctionName !== "anonymous" && trimmedFunctionName !== "<unknown>" ? trimmedFunctionName : void 0;
+};
+const parseStackFrame = (line) => {
+  const trimmedLine = line.trim();
+  if (!trimmedLine) {
+    return null;
+  }
+  let functionName;
+  let location;
+  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) => ({
+  functionName: frame.functionName,
+  generatedUrl: frame.url,
+  generatedLineNumber: frame.lineNumber,
+  generatedColumnNumber: frame.columnNumber
+});
+const getGeneratedFrameLocation = (frame) => ({
+  url: frame.generatedUrl ?? frame.url,
+  lineNumber: frame.generatedLineNumber ?? frame.lineNumber,
+  columnNumber: frame.generatedColumnNumber ?? frame.columnNumber
+});
+const canSymbolicateStack = (stack) => stack?.some(
+  (frame) => getGeneratedFrameLocation(frame).url?.startsWith("http")
+) ?? false;
+const getStackPreview = (frames) => {
+  const callerFrames = frames.slice(INITIATOR_STACK_FRAME_OFFSET);
+  return (callerFrames.length > 0 ? callerFrames : frames).slice(
+    0,
+    STACK_PREVIEW_FRAME_LIMIT
+  );
+};
 const getInitiatorFromStack = () => {
   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 !== 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/dist/react-native/chunks/boot-recording.js

@@ -210,6 +210,13 @@ function isJsonContentType(contentType) {
   const mimeType = normalizeContentType(contentType);
   return mimeType === "application/json" || mimeType.endsWith("+json");
 }
+function isXmlContentType(contentType) {
+  if (!contentType) {
+    return false;
+  }
+  const mimeType = normalizeContentType(contentType);
+  return mimeType === "application/xml" || mimeType === "text/xml" || mimeType.endsWith("+xml");
+}
 const isBlob = (value) => value instanceof Blob;
 const isArrayBuffer = (value) => value instanceof ArrayBuffer || ArrayBuffer.isView(value);
 const isFormData = (value) => value instanceof FormData;
@@ -324,6 +331,30 @@ const getResponseSize = (request) => {
     return null;
   }
 };
+const BINARY_CAPTURE_SIZE_CAP = 5 * 1024 * 1024;
+const readBlobAsText = (blob) => new Promise((resolve) => {
+  const reader = new FileReader();
+  reader.onload = () => resolve(reader.result);
+  reader.readAsText(blob);
+});
+const readBlobAsBase64 = (blob) => new Promise((resolve) => {
+  const reader = new FileReader();
+  reader.onload = () => {
+    const dataUrl = reader.result;
+    resolve(dataUrl.substring(dataUrl.indexOf(",") + 1));
+  };
+  reader.readAsDataURL(blob);
+});
+const ARRAY_BUFFER_BASE64_CHUNK = 32768;
+const arrayBufferToBase64 = (buffer) => {
+  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);
+  }
+  return btoa(binary);
+};
 const getResponseBody = async (request) => {
   const responseType = request.responseType;
   if (responseType === "" || responseType === "text") {
@@ -331,35 +362,128 @@ const getResponseBody = async (request) => {
   }
   if (responseType === "blob") {
     const contentType = request.getResponseHeader("Content-Type") || "";
-    if (contentType.startsWith("text/") || isJsonContentType(contentType)) {
-      return new Promise((resolve) => {
-        const reader = new FileReader();
-        reader.onload = () => {
-          resolve(reader.result);
-        };
-        reader.readAsText(request.response);
-      });
+    if (contentType.startsWith("text/") || isJsonContentType(contentType) || isXmlContentType(contentType)) {
+      return readBlobAsText(request.response);
+    }
+    const blob = request.response;
+    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;
+    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") {
     return safeStringify(request.response);
   }
   return null;
 };
+const STACK_PREVIEW_FRAME_LIMIT = 8;
+const INITIATOR_STACK_FRAME_OFFSET = 3;
+const parseStackLocation = (location) => {
+  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) => {
+  const trimmedFunctionName = functionName?.trim();
+  return trimmedFunctionName && trimmedFunctionName !== "<anonymous>" && trimmedFunctionName !== "anonymous" && trimmedFunctionName !== "<unknown>" ? trimmedFunctionName : void 0;
+};
+const parseStackFrame = (line) => {
+  const trimmedLine = line.trim();
+  if (!trimmedLine) {
+    return null;
+  }
+  let functionName;
+  let location;
+  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) => ({
+  functionName: frame.functionName,
+  generatedUrl: frame.url,
+  generatedLineNumber: frame.lineNumber,
+  generatedColumnNumber: frame.columnNumber
+});
+const getGeneratedFrameLocation = (frame) => ({
+  url: frame.generatedUrl ?? frame.url,
+  lineNumber: frame.generatedLineNumber ?? frame.lineNumber,
+  columnNumber: frame.generatedColumnNumber ?? frame.columnNumber
+});
+const canSymbolicateStack = (stack) => stack?.some(
+  (frame) => getGeneratedFrameLocation(frame).url?.startsWith("http")
+) ?? false;
+const getStackPreview = (frames) => {
+  const callerFrames = frames.slice(INITIATOR_STACK_FRAME_OFFSET);
+  return (callerFrames.length > 0 ? callerFrames : frames).slice(
+    0,
+    STACK_PREVIEW_FRAME_LIMIT
+  );
+};
 const getInitiatorFromStack = () => {
   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 !== 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/dist/react-native/chunks/get-nitro-module.cjs

@@ -1,9 +1,12 @@
 "use strict";
-const getNitroModule = () => {
+const nitroModule = (() => {
   try {
     return require("react-native-nitro-fetch");
   } catch {
     return null;
   }
+})();
+const getNitroModule = () => {
+  return nitroModule;
 };
 exports.getNitroModule = getNitroModule;

package/dist/react-native/chunks/get-nitro-module.js

@@ -1,9 +1,12 @@
-const getNitroModule = () => {
+const nitroModule = (() => {
   try {
     return require("react-native-nitro-fetch");
   } catch {
     return null;
   }
+})();
+const getNitroModule = () => {
+  return nitroModule;
 };
 export {
   getNitroModule as g

package/dist/react-native/chunks/useNetworkActivityDevTools.require.cjs

@@ -924,7 +924,9 @@ const useNetworkActivityAgentTools = ({
   agentBridge.useRozenitePluginAgentTool({
     pluginId: NETWORK_ACTIVITY_AGENT_PLUGIN_ID,
     tool: getResponseBodyTool,
-    handler: async ({ requestId }) => {
+    handler: async ({
+      requestId
+    }) => {
       const record = state.getHttpRecord(requestId);
       if (!record) {
         throw new Error(`Unknown request "${requestId}"`);
@@ -951,6 +953,23 @@ const useNetworkActivityAgentTools = ({
           reason: "The plugin could not extract a text response body for this request."
         };
       }
+      if (typeof body !== "string") {
+        if (body.kind === "binary-too-large") {
+          return {
+            requestId,
+            available: false,
+            reason: `Response body exceeded the in-capture size cap (${body.size} bytes).`
+          };
+        }
+        return {
+          requestId,
+          available: true,
+          body: body.base64,
+          base64Encoded: true,
+          decoded: false,
+          mimeType: record.response?.contentType
+        };
+      }
       return {
         requestId,
         available: true,

package/dist/react-native/chunks/useNetworkActivityDevTools.require.js

@@ -922,7 +922,9 @@ const useNetworkActivityAgentTools = ({
   useRozenitePluginAgentTool({
     pluginId: NETWORK_ACTIVITY_AGENT_PLUGIN_ID,
     tool: getResponseBodyTool,
-    handler: async ({ requestId }) => {
+    handler: async ({
+      requestId
+    }) => {
       const record = state.getHttpRecord(requestId);
       if (!record) {
         throw new Error(`Unknown request "${requestId}"`);
@@ -949,6 +951,23 @@ const useNetworkActivityAgentTools = ({
           reason: "The plugin could not extract a text response body for this request."
         };
       }
+      if (typeof body !== "string") {
+        if (body.kind === "binary-too-large") {
+          return {
+            requestId,
+            available: false,
+            reason: `Response body exceeded the in-capture size cap (${body.size} bytes).`
+          };
+        }
+        return {
+          requestId,
+          available: true,
+          body: body.base64,
+          base64Encoded: true,
+          decoded: false,
+          mimeType: record.response?.contentType
+        };
+      }
       return {
         requestId,
         available: true,

package/dist/react-native/index.d.ts

@@ -63,7 +63,7 @@ declare type HttpEventMap = {
     };
     'response-body': {
         requestId: RequestId;
-        body: string | null;
+        body: ResponseBody;
     };
     'set-overrides': {
         overrides: [string, RequestOverride][];
@@ -76,9 +76,37 @@ declare type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD';
 
 declare 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[];
+};
+
+declare type InitiatorCodeFrame = {
+    content: string;
+    fileName: string;
+    location?: {
+        row: number;
+        column: number;
+    } | null;
+};
+
+declare type InitiatorStackFrame = {
+    functionName?: string;
+    url?: string;
+    lineNumber?: number;
+    columnNumber?: number;
+    generatedUrl?: string;
+    generatedLineNumber?: number;
+    generatedColumnNumber?: number;
+    isCollapsed?: boolean;
 };
 
 declare type InspectorsConfig = {
@@ -171,6 +199,14 @@ declare type Response_2 = {
     responseTime: Timestamp;
 };
 
+declare type ResponseBody = string | {
+    kind: 'binary';
+    base64: string;
+} | {
+    kind: 'binary-too-large';
+    size: number;
+} | null;
+
 declare type SSECloseEvent = {
     type: 'sse-close';
     requestId: SSERequestId;

package/dist/rozenite.json

@@ -1 +1 @@
-{"name":"@rozenite/network-activity-plugin","version":"1.9.0","description":"Network Activity for Rozenite.","panels":[{"name":"Network Activity","source":"/devtools/App.html"}]}
+{"name":"@rozenite/network-activity-plugin","version":"1.10.0","description":"Network Activity for Rozenite.","panels":[{"name":"Network Activity","source":"/devtools/App.html"}]}

package/dist/sdk/index.d.ts

@@ -402,7 +402,7 @@ declare type HttpEventMap = {
     };
     'response-body': {
         requestId: RequestId;
-        body: string | null;
+        body: ResponseBody;
     };
     'set-overrides': {
         overrides: [string, RequestOverride][];
@@ -415,9 +415,37 @@ export declare type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | '
 
 export declare 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[];
+};
+
+declare type InitiatorCodeFrame = {
+    content: string;
+    fileName: string;
+    location?: {
+        row: number;
+        column: number;
+    } | null;
+};
+
+declare type InitiatorStackFrame = {
+    functionName?: string;
+    url?: string;
+    lineNumber?: number;
+    columnNumber?: number;
+    generatedUrl?: string;
+    generatedLineNumber?: number;
+    generatedColumnNumber?: number;
+    isCollapsed?: boolean;
 };
 
 export declare const NETWORK_ACTIVITY_AGENT_PLUGIN_ID = "@rozenite/network-activity-plugin";
@@ -1070,6 +1098,14 @@ declare type Response_2 = {
 };
 export { Response_2 as Response }
 
+declare type ResponseBody = string | {
+    kind: 'binary';
+    base64: string;
+} | {
+    kind: 'binary-too-large';
+    size: number;
+} | null;
+
 declare type SSEAgentMessage = {
     id: string;
     type: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozenite/network-activity-plugin",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "Network Activity for Rozenite.",
   "type": "module",
   "main": "./dist/react-native/index.cjs",
@@ -16,9 +16,9 @@
   },
   "dependencies": {
     "nanoevents": "^9.1.0",
-    "@rozenite/agent-shared": "1.9.0",
-    "@rozenite/agent-bridge": "1.9.0",
-    "@rozenite/plugin-bridge": "1.9.0"
+    "@rozenite/agent-shared": "1.10.0",
+    "@rozenite/agent-bridge": "1.10.0",
+    "@rozenite/plugin-bridge": "1.10.0"
   },
   "devDependencies": {
     "@floating-ui/react": "^0.26.0",
@@ -29,6 +29,9 @@
     "@radix-ui/react-tabs": "^1.1.12",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.0.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@types/react": "~19.2.2",
     "@types/react-dom": "~19.1.7",
     "autoprefixer": "^10.4.21",
@@ -43,14 +46,15 @@
     "react-native": "0.83.1",
     "react-native-sse": "^1.2.1",
     "react-native-web": "^0.21.2",
+    "react-virtuoso": "^4.6.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "~5.9.3",
     "vite": "^7.3.1",
     "zustand": "^5.0.6",
-    "@rozenite/vite-plugin": "1.9.0",
-    "rozenite": "1.9.0"
+    "@rozenite/vite-plugin": "1.10.0",
+    "rozenite": "1.10.0"
   },
   "peerDependencies": {
     "react-native-nitro-fetch": "*",
@@ -86,6 +90,7 @@
     "build": "rozenite build",
     "dev": "rozenite dev",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "test": "vitest --run --passWithNoTests"
   }
 }