@rozenite/network-activity-plugin 1.0.0-alpha.9 → 1.1.0

package/dist/useNetworkActivityDevTools.js

@@ -1,24 +1,40 @@
-import { useEffect } from "react";
+import { useRef, useEffect } from "react";
 import { useRozeniteDevToolsClient } from "@rozenite/plugin-bridge";
 import { createNanoEvents } from "nanoevents";
 import { Platform } from "react-native";
 import WebSocketInterceptor from "react-native/Libraries/WebSocket/WebSocketInterceptor";
 import { g as getEventSource } from "./event-source.js";
-function getHttpHeaderValue(headers, name) {
+function safeStringify(data) {
+  try {
+    return typeof data === "string" ? data : JSON.stringify(data);
+  } catch {
+    return String(data);
+  }
+}
+function getHttpHeader(headers, name) {
   const lowerName = name.toLowerCase();
   for (const key in headers) {
     if (key.toLowerCase() === lowerName) {
-      return headers[key];
+      return { value: headers[key], originalKey: key };
     }
   }
   return void 0;
 }
+function getContentTypeMime(headers) {
+  const contentType = getHttpHeader(headers, "content-type");
+  if (!contentType) {
+    return void 0;
+  }
+  const { value } = contentType;
+  const actualValue = Array.isArray(value) ? value[0] : value;
+  return actualValue.split(";")[0].trim();
+}
 const getContentType = (request) => {
   const responseHeaders = request.responseHeaders;
   const responseType = request.responseType;
-  const contentType = getHttpHeaderValue(responseHeaders || {}, "content-type");
+  const contentType = getContentTypeMime(responseHeaders || {});
   if (contentType) {
-    return contentType.split(";")[0].trim();
+    return contentType;
   }
   switch (responseType) {
     case "arraybuffer":
@@ -66,6 +82,28 @@ const getNetworkRequestsRegistry = () => {
     clear
   };
 };
+function getBlobName(blob) {
+  if (typeof (blob == null ? void 0 : blob.name) === "string") {
+    return blob.name;
+  }
+  if ((blob == null ? void 0 : blob.data) && typeof blob.data.name === "string") {
+    return blob.data.name;
+  }
+  return void 0;
+}
+function getFormDataEntries(formData) {
+  if (!formData || typeof formData !== "object") {
+    return [];
+  }
+  if (typeof formData.entries === "function") {
+    return formData.entries();
+  }
+  if (Array.isArray(formData._parts)) {
+    return formData._parts;
+  }
+  return [];
+}
+const XMLHttpRequest = global.XMLHttpRequest || window.XMLHttpRequest;
 const originalXHROpen = XMLHttpRequest.prototype.open;
 const originalXHRSend = XMLHttpRequest.prototype.send;
 const originalXHRSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
@@ -74,6 +112,7 @@ let sendCallback;
 let requestHeaderCallback;
 let headerReceivedCallback;
 let responseCallback;
+let overrideCallback;
 let isInterceptorEnabled$1 = false;
 const XHRInterceptor = {
   /**
@@ -106,6 +145,12 @@ const XHRInterceptor = {
   setRequestHeaderCallback(callback) {
     requestHeaderCallback = callback;
   },
+  /**
+   * Invoked before XMLHttpRequest.send(...) is called.
+   */
+  setOverrideCallback(callback) {
+    overrideCallback = callback;
+  },
   isInterceptorEnabled() {
     return isInterceptorEnabled$1;
   },
@@ -129,6 +174,9 @@ const XHRInterceptor = {
       if (sendCallback) {
         sendCallback(data, this);
       }
+      if (overrideCallback) {
+        overrideCallback(this);
+      }
       if (this.addEventListener) {
         this.addEventListener(
           "readystatechange",
@@ -189,14 +237,128 @@ const XHRInterceptor = {
     sendCallback = null;
     headerReceivedCallback = null;
     requestHeaderCallback = null;
+    overrideCallback = null;
+  }
+};
+const getStringSizeInBytes = (value) => {
+  return new TextEncoder().encode(value).length;
+};
+const splitSetCookieHeaderByComma = (header) => {
+  const regex = /(?:^|,\s)([^=;,]+=[^;]+(?:;[^,]*)*)/g;
+  const matches = [];
+  let match;
+  while ((match = regex.exec(header)) !== null) {
+    matches.push(match[1].trim());
+  }
+  return matches;
+};
+const applyReactNativeResponseHeadersLogic = (headers) => {
+  const parsedHeaders = { ...headers };
+  const setCookieHeader = getHttpHeader(headers, "set-cookie");
+  if (setCookieHeader) {
+    const { value, originalKey } = setCookieHeader;
+    const cookies = splitSetCookieHeaderByComma(value);
+    parsedHeaders[originalKey] = cookies.length > 0 ? cookies : value;
+  }
+  return parsedHeaders;
+};
+const isBlob = (value) => value instanceof Blob;
+const isArrayBuffer = (value) => value instanceof ArrayBuffer || ArrayBuffer.isView(value);
+const isFormData = (value) => value instanceof FormData;
+const isNullOrUndefined = (value) => value === null || value === void 0;
+const createOverridesRegistry = () => {
+  let overrides = /* @__PURE__ */ new Map();
+  const setOverrides = (newOverrides) => {
+    overrides = new Map(newOverrides);
+  };
+  const getOverrideForUrl = (url) => {
+    return overrides.get(url);
+  };
+  return {
+    setOverrides,
+    getOverrideForUrl
+  };
+};
+let registryInstance = null;
+const getOverridesRegistry = () => {
+  if (!registryInstance) {
+    registryInstance = createOverridesRegistry();
   }
+  return registryInstance;
 };
 const networkRequestsRegistry = getNetworkRequestsRegistry();
+const overridesRegistry$1 = getOverridesRegistry();
+const getBinaryPostData = (body) => ({
+  type: "binary",
+  value: {
+    size: body.size,
+    type: body.type,
+    name: getBlobName(body)
+  }
+});
+const getArrayBufferPostData = (body) => ({
+  type: "binary",
+  value: {
+    size: body.byteLength
+  }
+});
+const getTextPostData = (body) => ({
+  type: "text",
+  value: safeStringify(body)
+});
+const getFormDataPostData = (body) => ({
+  type: "form-data",
+  value: getFormDataEntries(body).reduce(
+    (acc, [key, value]) => {
+      if (isBlob(value)) {
+        acc[key] = getBinaryPostData(value);
+      } else if (isArrayBuffer(value)) {
+        acc[key] = getArrayBufferPostData(value);
+      } else {
+        acc[key] = getTextPostData(value);
+      }
+      return acc;
+    },
+    {}
+  )
+});
+const getRequestBody = (body) => {
+  if (isNullOrUndefined(body)) {
+    return body;
+  }
+  if (isBlob(body)) {
+    return getBinaryPostData(body);
+  }
+  if (isArrayBuffer(body)) {
+    return getArrayBufferPostData(body);
+  }
+  if (isFormData(body)) {
+    return getFormDataPostData(body);
+  }
+  return getTextPostData(body);
+};
 const getResponseSize = (request) => {
-  if (typeof request.response === "object") {
-    return request.response.size;
+  try {
+    const { responseType, response } = request;
+    if (response === null) {
+      return 0;
+    }
+    if (responseType === "" || responseType === "text") {
+      return getStringSizeInBytes(request.responseText);
+    }
+    if (responseType === "json") {
+      return getStringSizeInBytes(safeStringify(response));
+    }
+    if (responseType === "blob") {
+      return response.size;
+    }
+    if (responseType === "arraybuffer") {
+      return response.byteLength;
+    }
+    return 0;
+  } catch {
+    return null;
   }
-  return request.response.length || 0;
 };
 const getResponseBody = async (request) => {
   const responseType = request.responseType;
@@ -215,6 +377,9 @@ const getResponseBody = async (request) => {
       });
     }
   }
+  if (responseType === "json") {
+    return safeStringify(request.response);
+  }
   return null;
 };
 const getInitiatorFromStack = () => {
@@ -256,11 +421,20 @@ const getNetworkInspector = (pluginClient) => {
         url: request._url,
         method: request._method,
         headers: request._headers,
-        postData: data
+        postData: getRequestBody(data)
       },
       type: "XHR",
       initiator
     });
+    request.addEventListener("progress", (event) => {
+      pluginClient.send("request-progress", {
+        requestId,
+        timestamp: Date.now(),
+        loaded: event.loaded,
+        total: event.total,
+        lengthComputable: event.lengthComputable
+      });
+    });
     request.addEventListener("readystatechange", () => {
       if (request.readyState === READY_STATE_HEADERS_RECEIVED) {
         ttfb = Date.now() - sendTime;
@@ -275,7 +449,9 @@ const getNetworkInspector = (pluginClient) => {
           url: request._url,
           status: request.status,
           statusText: request.statusText,
-          headers: request.responseHeaders || {},
+          headers: applyReactNativeResponseHeadersLogic(
+            request.responseHeaders || {}
+          ),
           contentType: getContentType(request),
           size: getResponseSize(request),
           responseTime: Date.now()
@@ -309,10 +485,55 @@ const getNetworkInspector = (pluginClient) => {
         canceled: true
       });
     });
+    request.addEventListener("timeout", () => {
+      pluginClient.send("request-failed", {
+        requestId,
+        timestamp: Date.now(),
+        type: "XHR",
+        error: "Timeout",
+        canceled: false
+      });
+    });
+  };
+  const handleRequestOverride = (request) => {
+    const override = overridesRegistry$1.getOverrideForUrl(
+      request._url
+    );
+    if (!override) {
+      return;
+    }
+    request.addEventListener("readystatechange", () => {
+      if (override.body !== void 0) {
+        Object.defineProperty(request, "responseType", {
+          writable: true
+        });
+        Object.defineProperty(request, "response", {
+          writable: true
+        });
+        Object.defineProperty(request, "responseText", {
+          writable: true
+        });
+        const contentType = getContentType(request);
+        if (contentType === "application/json") {
+          request.responseType = "json";
+        } else if (contentType === "text/plain") {
+          request.responseType = "text";
+        }
+        request.response = override.body;
+        request.responseText = override.body;
+      }
+      if (override.status !== void 0) {
+        Object.defineProperty(request, "status", {
+          writable: true
+        });
+        request.status = override.status;
+      }
+    });
   };
   const enable = () => {
     XHRInterceptor.disableInterception();
     XHRInterceptor.setSendCallback(handleRequestSend);
+    XHRInterceptor.setOverrideCallback(handleRequestOverride);
     XHRInterceptor.enableInterception();
   };
   const disable = () => {
@@ -518,6 +739,8 @@ let closeCallback;
 let isInterceptorEnabled = false;
 const eventSourceClass = getEventSource();
 const originalOpen = eventSourceClass.prototype.open;
+const originalDispatch = eventSourceClass.prototype.dispatch;
+const BUILT_IN_EVENT_TYPES = /* @__PURE__ */ new Set(["open", "error", "close", "done"]);
 const SSEInterceptor = {
   /**
    * Invoked when EventSource.open() is called (connection attempt starting).
@@ -565,11 +788,6 @@ const SSEInterceptor = {
           openEventCallback(event, this);
         }
       });
-      this.addEventListener("message", (event) => {
-        if (messageCallback) {
-          messageCallback(event, this);
-        }
-      });
       this.addEventListener(
         "error",
         (event) => {
@@ -585,6 +803,14 @@ const SSEInterceptor = {
       });
       return originalOpen.call(this);
     };
+    eventSourceClass.prototype.dispatch = function(eventType, data) {
+      if (!BUILT_IN_EVENT_TYPES.has(eventType)) {
+        if (messageCallback) {
+          messageCallback(data, this);
+        }
+      }
+      return originalDispatch.call(this, eventType, data);
+    };
     isInterceptorEnabled = true;
   },
   // Unpatch EventSource open method and remove the callbacks.
@@ -594,6 +820,7 @@ const SSEInterceptor = {
     }
     isInterceptorEnabled = false;
     eventSourceClass.prototype.open = originalOpen;
+    eventSourceClass.prototype.dispatch = originalDispatch;
     connectCallback = null;
     messageCallback = null;
     errorCallback = null;
@@ -607,9 +834,7 @@ const getSSEInspector = () => {
     var _a;
     const requestId = (_a = eventSource._xhr) == null ? void 0 : _a._rozeniteRequestId;
     if (!requestId) {
-      throw new Error(
-        "No request ID found for EventSource. This should never happen!"
-      );
+      return null;
     }
     return requestId;
   };
@@ -618,6 +843,9 @@ const getSSEInspector = () => {
       SSEInterceptor.setOpenEventCallback((_, eventSource) => {
         const sseEventSource = eventSource;
         const requestId = getRequestId(sseEventSource);
+        if (!requestId) {
+          return;
+        }
         const sseXhr = sseEventSource._xhr;
         const event = {
           type: "sse-open",
@@ -638,17 +866,26 @@ const getSSEInspector = () => {
       SSEInterceptor.setMessageCallback((messageEvent, eventSource) => {
         const sseEventSource = eventSource;
         const requestId = getRequestId(sseEventSource);
+        if (!requestId) {
+          return;
+        }
         const event = {
           type: "sse-message",
           requestId,
           timestamp: Date.now(),
-          data: messageEvent.data || ""
+          payload: {
+            type: messageEvent.type,
+            data: messageEvent.data || ""
+          }
         };
         eventEmitter.emit("sse-message", event);
       });
       SSEInterceptor.setErrorCallback((errorEvent, eventSource) => {
         const sseEventSource = eventSource;
         const requestId = getRequestId(sseEventSource);
+        if (!requestId) {
+          return;
+        }
         const event = {
           type: "sse-error",
           requestId,
@@ -663,6 +900,9 @@ const getSSEInspector = () => {
       SSEInterceptor.setCloseCallback((_, eventSource) => {
         const sseEventSource = eventSource;
         const requestId = getRequestId(sseEventSource);
+        if (!requestId) {
+          return;
+        }
         const event = {
           type: "sse-close",
           requestId,
@@ -677,26 +917,93 @@ const getSSEInspector = () => {
     },
     isEnabled: () => SSEInterceptor.isInterceptorEnabled(),
     dispose: () => {
+      SSEInterceptor.disableInterception();
       eventEmitter.events = {};
     },
     on: (event, callback) => eventEmitter.on(event, callback)
   };
 };
-const useNetworkActivityDevTools = () => {
+const DEFAULT_CONFIG = {
+  inspectors: {
+    http: true,
+    websocket: true,
+    sse: true
+  },
+  clientUISettings: {
+    showUrlAsName: false
+  }
+};
+const validateConfig = (config) => {
+  const inspectors = config.inspectors;
+  if (!inspectors) {
+    return;
+  }
+  if (inspectors.sse && !inspectors.http) {
+    throw new Error("SSE inspector requires HTTP inspector to be enabled.");
+  }
+};
+const overridesRegistry = getOverridesRegistry();
+const useNetworkActivityDevTools = (config = DEFAULT_CONFIG) => {
+  var _a, _b, _c, _d;
+  const isRecordingEnabledRef = useRef(false);
   const client = useRozeniteDevToolsClient({
     pluginId: "@rozenite/network-activity-plugin"
   });
+  const isHttpInspectorEnabled = ((_a = config.inspectors) == null ? void 0 : _a.http) ?? true;
+  const isWebSocketInspectorEnabled = ((_b = config.inspectors) == null ? void 0 : _b.websocket) ?? true;
+  const isSSEInspectorEnabled = ((_c = config.inspectors) == null ? void 0 : _c.sse) ?? true;
+  const showUrlAsName = (_d = config.clientUISettings) == null ? void 0 : _d.showUrlAsName;
   useEffect(() => {
     if (!client) {
       return;
     }
+    validateConfig(config);
+  }, [config]);
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+    const sendClientUISettings = () => {
+      var _a2;
+      client.send("client-ui-settings", {
+        settings: {
+          showUrlAsName: showUrlAsName ?? ((_a2 = DEFAULT_CONFIG.clientUISettings) == null ? void 0 : _a2.showUrlAsName)
+        }
+      });
+    };
+    const subscriptions = [
+      client.onMessage("network-enable", () => {
+        isRecordingEnabledRef.current = true;
+      }),
+      client.onMessage("network-disable", () => {
+        isRecordingEnabledRef.current = false;
+      }),
+      client.onMessage("set-overrides", (data) => {
+        overridesRegistry.setOverrides(data.overrides);
+      }),
+      client.onMessage("get-client-ui-settings", () => {
+        sendClientUISettings();
+      })
+    ];
+    sendClientUISettings();
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+    };
+  }, [client, showUrlAsName]);
+  useEffect(() => {
+    if (!client || !isHttpInspectorEnabled) {
+      return;
+    }
     const networkInspector = getNetworkInspector(client);
+    if (isRecordingEnabledRef.current) {
+      networkInspector.enable();
+    }
     return () => {
       networkInspector.dispose();
     };
-  }, [client]);
+  }, [client, isHttpInspectorEnabled]);
   useEffect(() => {
-    if (!client) {
+    if (!client || !isWebSocketInspectorEnabled) {
       return;
     }
     const eventsToForward = [
@@ -720,12 +1027,15 @@ const useNetworkActivityDevTools = () => {
     client.onMessage("network-disable", () => {
       websocketInspector.disable();
     });
+    if (isRecordingEnabledRef.current) {
+      websocketInspector.enable();
+    }
     return () => {
       websocketInspector.dispose();
     };
-  }, [client]);
+  }, [client, isWebSocketInspectorEnabled]);
   useEffect(() => {
-    if (!client) {
+    if (!client || !isSSEInspectorEnabled) {
       return;
     }
     const eventsToForward = [
@@ -746,10 +1056,13 @@ const useNetworkActivityDevTools = () => {
     client.onMessage("network-disable", () => {
       sseInspector.disable();
     });
+    if (isRecordingEnabledRef.current) {
+      sseInspector.enable();
+    }
     return () => {
       sseInspector.dispose();
     };
-  }, [client]);
+  }, [client, isSSEInspectorEnabled]);
   return client;
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozenite/network-activity-plugin",
-  "version": "1.0.0-alpha.9",
+  "version": "1.1.0",
   "description": "Network Activity for Rozenite.",
   "type": "module",
   "main": "./dist/react-native.cjs",
@@ -8,7 +8,7 @@
   "types": "./dist/react-native.d.ts",
   "dependencies": {
     "nanoevents": "^9.1.0",
-    "@rozenite/plugin-bridge": "1.0.0-alpha.9"
+    "@rozenite/plugin-bridge": "1.1.0"
   },
   "devDependencies": {
     "@floating-ui/react": "^0.26.0",
@@ -16,6 +16,7 @@
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.0.0",
     "autoprefixer": "^10.4.21",
@@ -33,8 +34,10 @@
     "typescript": "^5.7.3",
     "vite": "^6.0.0",
     "zustand": "^5.0.6",
-    "@rozenite/vite-plugin": "1.0.0-alpha.9",
-    "rozenite": "1.0.0-alpha.9"
+    "@types/react": "~18.3.23",
+    "@types/react-dom": "~18.3.1",
+    "@rozenite/vite-plugin": "1.1.0",
+    "rozenite": "1.1.0"
   },
   "peerDependencies": {
     "react-native-sse": "*"

package/react-native.ts

@@ -1,6 +1,11 @@
 export let useNetworkActivityDevTools: typeof import('./src/react-native/useNetworkActivityDevTools').useNetworkActivityDevTools;
 
-if (process.env.NODE_ENV !== 'production') {
+const isWeb =
+  typeof window !== 'undefined' && window.navigator.product !== 'ReactNative';
+const isDev = process.env.NODE_ENV !== 'production';
+const isServer = typeof window === 'undefined';
+
+if (isDev && !isWeb && !isServer) {
   useNetworkActivityDevTools =
     require('./src/react-native/useNetworkActivityDevTools').useNetworkActivityDevTools;
 } else {

package/src/react-native/config.ts

@@ -0,0 +1,43 @@
+export type InspectorType = 'http' | 'websocket' | 'sse';
+
+export type NetworkActivityDevToolsConfig = {
+  /**
+   * Specifies which network inspectors are enabled.
+   * Set to `false` to disable monitoring for a specific type of network traffic.
+   * @default { http: true, websocket: true, sse: true }
+   */
+  inspectors?: {
+    [key in InspectorType]?: boolean;
+  };
+  clientUISettings?: {
+    /**
+     * If true, display the entire relative URL as the request name in the UI instead of only the last path segment.
+     * @default false
+     */
+    showUrlAsName?: boolean;
+  };
+};
+
+export const DEFAULT_CONFIG: NetworkActivityDevToolsConfig = {
+  inspectors: {
+    http: true,
+    websocket: true,
+    sse: true,
+  },
+  clientUISettings: {
+    showUrlAsName: false,
+  }
+};
+
+export const validateConfig = (config: NetworkActivityDevToolsConfig): void => {
+  const inspectors = config.inspectors;
+
+  if (!inspectors) {
+    return;
+  }
+
+  // For SSE, HTTP must be enabled
+  if (inspectors.sse && !inspectors.http) {
+    throw new Error('SSE inspector requires HTTP inspector to be enabled.');
+  }
+};