@rozenite/network-activity-plugin 1.0.0-alpha.1 → 1.0.0-alpha.4

package/src/react-native/useNetworkActivityDevTools.ts

@@ -1,61 +1,10 @@
 import { useEffect } from 'react';
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
-import { NetworkEventMap } from '../types/network';
-
-let requestCounter = 0;
-
-function generateRequestId() {
-  return (++requestCounter).toString();
-}
-
-// Helper function to convert Headers object to plain object
-function headersToObject(headers: HeadersInit | Record<string, string>): Record<string, string> {
-  if (headers instanceof Headers) {
-    const obj: Record<string, string> = {};
-    headers.forEach((value: string, key: string) => {
-      obj[key] = value;
-    });
-    return obj;
-  } else if (Array.isArray(headers)) {
-    const obj: Record<string, string> = {};
-    headers.forEach(([key, value]) => {
-      obj[key] = value;
-    });
-    return obj;
-  }
-  return headers as Record<string, string>;
-}
-
-// Helper function to get request info from fetch input
-function getRequestInfo(input: RequestInfo | URL, init?: RequestInit) {
-  let url: string;
-  let method: string;
-  let headers: Record<string, string>;
-  let body: unknown;
-
-  if (typeof input === 'string') {
-    url = input;
-    method = init?.method || 'GET';
-    headers = headersToObject(init?.headers || {});
-    body = init?.body || undefined;
-  } else if (input instanceof Request) {
-    url = input.url;
-    method = input.method;
-    headers = headersToObject(input.headers);
-    body = input.body || undefined;
-  } else {
-    // URL object
-    url = input.toString();
-    method = init?.method || 'GET';
-    headers = headersToObject(init?.headers || {});
-    body = init?.body || undefined;
-  }
-
-  return { url, method, headers, body };
-}
+import { getNetworkInspector } from './network-inspector';
+import { NetworkActivityEventMap } from '../types/client';
 
 export const useNetworkActivityDevTools = () => {
-  const client = useRozeniteDevToolsClient<NetworkEventMap>({
+  const client = useRozeniteDevToolsClient<NetworkActivityEventMap>({
     pluginId: '@rozenite/network-activity-plugin',
   });
 
@@ -64,172 +13,12 @@ export const useNetworkActivityDevTools = () => {
       return;
     }
 
-    const originalFetch = window.fetch.bind(window);
-
-    const sendCdpEvent = (method: keyof NetworkEventMap, params: NetworkEventMap[keyof NetworkEventMap]) => {
-      client.send(method, params);
-    };
-
-    window.fetch = async function(input: RequestInfo | URL, init?: RequestInit) {
-      const requestId = generateRequestId();
-      const requestInfo = getRequestInfo(input, init);
-      const timestamp = Date.now() / 1000;
-      const wallTime = timestamp;
-
-      sendCdpEvent('Network.requestWillBeSent', {
-        requestId,
-        loaderId: requestId,
-        documentURL: '',
-        request: {
-          url: requestInfo.url,
-          method: requestInfo.method,
-          headers: requestInfo.headers,
-          postData: requestInfo.body,
-          hasPostData: !!requestInfo.body
-        },
-        timestamp,
-        wallTime,
-        initiator: { 
-          type: 'script',
-          stack: {
-            callFrames: [
-              {
-                functionName: 'fetch',
-                scriptId: '1',
-                url: '',
-                lineNumber: 1,
-                columnNumber: 1
-              }
-            ]
-          }
-        },
-        redirectHasExtraInfo: false,
-        redirectResponse: null,
-        referrerPolicy: 'no-referrer',
-        type: 'Fetch',
-        frameId: '1',
-        hasUserGesture: false
-      });
-
-      sendCdpEvent('Network.requestWillBeSentExtraInfo', {
-        requestId,
-        blockedCookies: [],
-        headers: requestInfo.headers,
-        connectTiming: { 
-          requestTime: timestamp 
-        },
-        clientSecurityState: {
-          initiatorIsSecureContext: false,
-          initiatorIPAddressSpace: 'Public',
-          privateNetworkRequestPolicy: 'Allow'
-        },
-        siteHasCookieInOtherPartition: false
-      });
-
-      let response;
-      try {
-        response = await originalFetch(input, init);
-
-        // Get response headers
-        const responseHeaders: Record<string, string> = {};
-        response.headers.forEach((value: string, key: string) => {
-          responseHeaders[key] = value;
-        });
-
-        const contentType = response.headers.get('content-type') || '';
-        const contentLength = response.headers.get('content-length');
-        const encodedDataLength = contentLength ? parseInt(contentLength, 10) : 0;
-        
-        // Get decoded body size (actual response size)
-        let decodedBodySize = encodedDataLength;
-        try {
-          const responseClone = response.clone();
-          const arrayBuffer = await responseClone.arrayBuffer();
-          decodedBodySize = arrayBuffer.byteLength;
-        } catch {
-          // Fallback to content-length if we can't read the response
-          decodedBodySize = encodedDataLength;
-        }
-
-        sendCdpEvent('Network.responseReceived', {
-          requestId,
-          loaderId: requestId,
-          timestamp: Date.now() / 1000,
-          type: 'Fetch',
-          response: {
-            url: requestInfo.url,
-            status: response.status,
-            statusText: response.statusText,
-            headers: responseHeaders,
-            mimeType: contentType,
-            requestHeaders: requestInfo.headers,
-            requestHeadersText: undefined,
-            connectionReused: false,
-            connectionId: 0,
-            remoteIPAddress: undefined,
-            remotePort: undefined,
-            protocol: undefined,
-            securityState: 'unknown',
-            encodedDataLength,
-            timing: {
-              requestTime: timestamp,
-              proxyStart: -1,
-              proxyEnd: -1,
-              dnsStart: -1,
-              dnsEnd: -1,
-              connectStart: -1,
-              connectEnd: -1,
-              sslStart: -1,
-              sslEnd: -1,
-              workerStart: -1,
-              workerReadyStart: -1,
-              workerReadyEnd: -1,
-              sendStart: timestamp,
-              sendEnd: timestamp,
-              pushStart: -1,
-              pushEnd: -1,
-              receiveHeadersEnd: Date.now() / 1000
-            },
-            responseTime: Date.now() / 1000,
-            fromDiskCache: false,
-            fromServiceWorker: false,
-            fromPrefetchCache: false,
-            encodedBodySize: encodedDataLength,
-            decodedBodySize: decodedBodySize,
-            headersText: undefined,
-            serviceWorkerResponseSource: undefined,
-            responseSource: 'network',
-            statusCode: response.status
-          },
-          hasExtraInfo: false
-        });
-
-        sendCdpEvent('Network.loadingFinished', {
-          requestId,
-          timestamp: Date.now() / 1000,
-          encodedDataLength,
-          shouldReportCorbBlocking: false
-        });
-
-        return response;
-      } catch (err) {
-        sendCdpEvent('Network.loadingFailed', {
-          requestId,
-          timestamp: Date.now() / 1000,
-          type: 'Fetch',
-          errorText: err instanceof Error ? err.message : 'Unknown error',
-          canceled: false,
-          blockedReason: undefined
-        });
-        
-        throw err;
-      }
-    };
+    const networkInspector = getNetworkInspector(client);
 
     return () => {
-      window.fetch = originalFetch;
+      networkInspector.dispose();
     };
   }, [client]);
 
   return client;
-};
+};

package/src/react-native/xhr-interceptor.ts

@@ -0,0 +1,211 @@
+/* eslint-disable prefer-rest-params */
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Source: https://github.com/facebook/react-native/blob/2c683c5787dd03ac15d2aad45dcc53650529ee7f/packages/react-native/src/private/devsupport/devmenu/elementinspector/XHRInterceptor.js
+ */
+
+const originalXHROpen = XMLHttpRequest.prototype.open;
+const originalXHRSend = XMLHttpRequest.prototype.send;
+const originalXHRSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
+
+type XHRInterceptorOpenCallback = (
+  method: string,
+  url: string,
+  request: XMLHttpRequest
+) => void;
+
+type XHRInterceptorSendCallback = (
+  data: string,
+  request: XMLHttpRequest
+) => void;
+
+type XHRInterceptorRequestHeaderCallback = (
+  header: string,
+  value: string,
+  request: XMLHttpRequest
+) => void;
+
+type XHRInterceptorHeaderReceivedCallback = (
+  responseContentType: string | void,
+  responseSize: number | void,
+  allHeaders: string,
+  request: XMLHttpRequest
+) => void;
+
+type XHRInterceptorResponseCallback = (
+  status: number,
+  timeout: number,
+  response: string,
+  responseURL: string,
+  responseType: string,
+  request: XMLHttpRequest
+) => void;
+
+let openCallback: XHRInterceptorOpenCallback | null;
+let sendCallback: XHRInterceptorSendCallback | null;
+let requestHeaderCallback: XHRInterceptorRequestHeaderCallback | null;
+let headerReceivedCallback: XHRInterceptorHeaderReceivedCallback | null;
+let responseCallback: XHRInterceptorResponseCallback | null;
+
+let isInterceptorEnabled = false;
+
+/**
+ * A network interceptor which monkey-patches XMLHttpRequest methods
+ * to gather all network requests/responses, in order to show their
+ * information in the React Native inspector development tool.
+ * This supports interception with XMLHttpRequest API, including Fetch API
+ * and any other third party libraries that depend on XMLHttpRequest.
+ */
+export const XHRInterceptor = {
+  /**
+   * Invoked before XMLHttpRequest.open(...) is called.
+   */
+  setOpenCallback(callback: XHRInterceptorOpenCallback) {
+    openCallback = callback;
+  },
+
+  /**
+   * Invoked before XMLHttpRequest.send(...) is called.
+   */
+  setSendCallback(callback: XHRInterceptorSendCallback) {
+    sendCallback = callback;
+  },
+
+  /**
+   * Invoked after xhr's readyState becomes xhr.HEADERS_RECEIVED.
+   */
+  setHeaderReceivedCallback(callback: XHRInterceptorHeaderReceivedCallback) {
+    headerReceivedCallback = callback;
+  },
+
+  /**
+   * Invoked after xhr's readyState becomes xhr.DONE.
+   */
+  setResponseCallback(callback: XHRInterceptorResponseCallback) {
+    responseCallback = callback;
+  },
+
+  /**
+   * Invoked before XMLHttpRequest.setRequestHeader(...) is called.
+   */
+  setRequestHeaderCallback(callback: XHRInterceptorRequestHeaderCallback) {
+    requestHeaderCallback = callback;
+  },
+
+  isInterceptorEnabled(): boolean {
+    return isInterceptorEnabled;
+  },
+
+  enableInterception() {
+    if (isInterceptorEnabled) {
+      return;
+    }
+    // Override `open` method for all XHR requests to intercept the request
+    // method and url, then pass them through the `openCallback`.
+    // $FlowFixMe[cannot-write]
+    // $FlowFixMe[missing-this-annot]
+    XMLHttpRequest.prototype.open = function (method: string, url: string) {
+      if (openCallback) {
+        openCallback(method, url, this);
+      }
+      // @ts-expect-error - Needed for the originalXHROpen to work
+      originalXHROpen.apply(this, arguments);
+    };
+
+    // Override `setRequestHeader` method for all XHR requests to intercept
+    // the request headers, then pass them through the `requestHeaderCallback`.
+    // $FlowFixMe[cannot-write]
+    // $FlowFixMe[missing-this-annot]
+    XMLHttpRequest.prototype.setRequestHeader = function (
+      header: string,
+      value: string
+    ) {
+      if (requestHeaderCallback) {
+        requestHeaderCallback(header, value, this);
+      }
+      // @ts-expect-error - Needed for the originalXHRSetRequestHeader to work
+      originalXHRSetRequestHeader.apply(this, arguments);
+    };
+
+    // Override `send` method of all XHR requests to intercept the data sent,
+    // register listeners to intercept the response, and invoke the callbacks.
+    // $FlowFixMe[cannot-write]
+    // $FlowFixMe[missing-this-annot]
+    XMLHttpRequest.prototype.send = function (data: string) {
+      if (sendCallback) {
+        sendCallback(data, this);
+      }
+      if (this.addEventListener) {
+        this.addEventListener(
+          'readystatechange',
+          () => {
+            if (!isInterceptorEnabled) {
+              return;
+            }
+            if (this.readyState === this.HEADERS_RECEIVED) {
+              const contentTypeString = this.getResponseHeader('Content-Type');
+              const contentLengthString =
+                this.getResponseHeader('Content-Length');
+              let responseContentType, responseSize;
+              if (contentTypeString) {
+                responseContentType = contentTypeString.split(';')[0];
+              }
+              if (contentLengthString) {
+                responseSize = parseInt(contentLengthString, 10);
+              }
+              if (headerReceivedCallback) {
+                headerReceivedCallback(
+                  responseContentType,
+                  responseSize,
+                  this.getAllResponseHeaders(),
+                  this
+                );
+              }
+            }
+            if (this.readyState === this.DONE) {
+              if (responseCallback) {
+                responseCallback(
+                  this.status,
+                  this.timeout,
+                  this.response,
+                  this.responseURL,
+                  this.responseType,
+                  this
+                );
+              }
+            }
+          },
+          false
+        );
+      }
+
+      // @ts-expect-error - Needed for the originalXHRSend to work
+      originalXHRSend.apply(this, arguments);
+    };
+    isInterceptorEnabled = true;
+  },
+
+  // Unpatch XMLHttpRequest methods and remove the callbacks.
+  disableInterception() {
+    if (!isInterceptorEnabled) {
+      return;
+    }
+    isInterceptorEnabled = false;
+    // $FlowFixMe[cannot-write]
+    XMLHttpRequest.prototype.send = originalXHRSend;
+    // $FlowFixMe[cannot-write]
+    XMLHttpRequest.prototype.open = originalXHROpen;
+    // $FlowFixMe[cannot-write]
+    XMLHttpRequest.prototype.setRequestHeader = originalXHRSetRequestHeader;
+    responseCallback = null;
+    openCallback = null;
+    sendCallback = null;
+    headerReceivedCallback = null;
+    requestHeaderCallback = null;
+  },
+};

package/src/react-native/xml-request.d.ts

@@ -0,0 +1,23 @@
+declare global {
+  interface XMLHttpRequest {
+    _requestId?: number;
+    _subscriptions: Array<EventSubscription>;
+    _aborted: boolean;
+    _cachedResponse: Response;
+    _hasError: boolean;
+    _headers: { [key: string]: string };
+    _lowerCaseResponseHeaders: { [key: string]: string };
+    _method?: string | null;
+    _perfKey?: string | null;
+    _responseType: ResponseType;
+    _response: string;
+    _sent: boolean;
+    _url?: string | null;
+    _timedOut: boolean;
+    _trackingName?: string;
+    _incrementalEvents: boolean;
+    _startTime?: number | null;
+  }
+}
+
+export {};

package/src/types/client.ts

@@ -0,0 +1,111 @@
+import { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import { NetworkEntry } from './network';
+
+// CDP Network types based on Chrome DevTools Protocol - limited to XMLHttpRequest capturable properties
+export type NetworkRequestId = string;
+export type NetworkLoaderId = string;
+export type NetworkTimeSinceEpoch = number;
+export type NetworkMonotonicTime = number;
+
+export type NetworkRequest = {
+  url: string;
+  method: string;
+  headers: Record<string, string>;
+  postData?: string;
+  hasPostData?: boolean;
+};
+
+export type NetworkResponse = {
+  url: string;
+  status: number;
+  statusText: string;
+  headers: Record<string, string>;
+  mimeType: string;
+  encodedDataLength: number;
+  responseTime: NetworkTimeSinceEpoch;
+};
+
+export type NetworkInitiator = {
+  type: string;
+  url?: string;
+  lineNumber?: number;
+  columnNumber?: number;
+};
+
+export type NetworkResourceType =
+  | 'Document'
+  | 'Stylesheet'
+  | 'Image'
+  | 'Media'
+  | 'Font'
+  | 'Script'
+  | 'XHR'
+  | 'Fetch'
+  | 'EventSource'
+  | 'WebSocket'
+  | 'Manifest'
+  | 'Other'
+  | 'Ping'
+  | 'CSPViolationReport'
+  | 'Preflight'
+  | 'Subresource';
+
+export type NetworkActivityEventMap = {
+  // Control events
+  'network-enable': unknown;
+  'network-disable': unknown;
+
+  // CDP Network events - limited to XMLHttpRequest capturable properties
+  'Network.requestWillBeSent': {
+    requestId: NetworkRequestId;
+    loaderId: NetworkLoaderId;
+    documentURL: string;
+    request: NetworkRequest;
+    timestamp: NetworkMonotonicTime;
+    wallTime: NetworkTimeSinceEpoch;
+    initiator: NetworkInitiator;
+    type?: NetworkResourceType;
+  };
+
+  'Network.responseReceived': {
+    requestId: NetworkRequestId;
+    loaderId: NetworkLoaderId;
+    timestamp: NetworkMonotonicTime;
+    type: NetworkResourceType;
+    response: NetworkResponse;
+  };
+
+  'Network.dataReceived': {
+    requestId: NetworkRequestId;
+    timestamp: NetworkMonotonicTime;
+    dataLength: number;
+    encodedDataLength: number;
+  };
+
+  'Network.loadingFinished': {
+    requestId: NetworkRequestId;
+    timestamp: NetworkMonotonicTime;
+    encodedDataLength: number;
+  };
+
+  'Network.loadingFailed': {
+    requestId: NetworkRequestId;
+    timestamp: NetworkMonotonicTime;
+    type: NetworkResourceType;
+    errorText: string;
+    canceled?: boolean;
+  };
+
+  'Network.getResponseBody': {
+    requestId: NetworkRequestId;
+  };
+
+  'Network.responseBodyReceived': {
+    requestId: NetworkRequestId;
+    body: string;
+    base64Encoded: boolean;
+  };
+};
+
+export type NetworkActivityDevToolsClient =
+  RozeniteDevToolsClient<NetworkActivityEventMap>;