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

package/package.json

@@ -1,27 +1,48 @@
 {
   "name": "@rozenite/network-activity-plugin",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.10",
   "description": "Network Activity for Rozenite.",
   "type": "module",
   "main": "./dist/react-native.cjs",
   "module": "./dist/react-native.js",
   "types": "./dist/react-native.d.ts",
   "dependencies": {
-    "@tanstack/react-virtual": "^3.0.0",
-    "@floating-ui/react": "^0.26.0",
-    "@rozenite/plugin-bridge": "1.0.0-alpha.0"
+    "nanoevents": "^9.1.0",
+    "@rozenite/plugin-bridge": "1.0.0-alpha.10"
   },
   "devDependencies": {
+    "@floating-ui/react": "^0.26.0",
+    "@radix-ui/react-scroll-area": "^1.2.9",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.0.0",
+    "autoprefixer": "^10.4.21",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.263.1",
+    "postcss": "^8.5.6",
+    "proxy-memoize": "^3.0.1",
+    "react": "*",
+    "react-json-tree": "^0.20.0",
+    "react-native-sse": "^1.2.1",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^3.4.17",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.7.3",
     "vite": "^6.0.0",
-    "react": "*",
-    "react-native": "*",
-    "rozenite": "1.0.0-alpha.2",
-    "@rozenite/vite-plugin": "1.0.0-alpha.1"
+    "zustand": "^5.0.6",
+    "@rozenite/vite-plugin": "1.0.0-alpha.10",
+    "rozenite": "1.0.0-alpha.10"
   },
   "peerDependencies": {
-    "react": ">= 17.0.0",
-    "react-native": ">= 0.74.0"
+    "react-native-sse": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-native-sse": {
+      "optional": true
+    }
   },
   "license": "MIT",
   "scripts": {

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/project.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "name": "@rozenite/network-activity-plugin",
+  "targets": {
+    "build": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "inputs": ["{projectRoot}/src/**/*"],
+      "outputs": ["{projectRoot}/dist"]
+    }
+  }
+}

package/react-native.ts

@@ -1,7 +1,8 @@
 export let useNetworkActivityDevTools: typeof import('./src/react-native/useNetworkActivityDevTools').useNetworkActivityDevTools;
 
 if (process.env.NODE_ENV !== 'production') {
-  useNetworkActivityDevTools = require('./src/react-native/useNetworkActivityDevTools').useNetworkActivityDevTools;
+  useNetworkActivityDevTools =
+    require('./src/react-native/useNetworkActivityDevTools').useNetworkActivityDevTools;
 } else {
   useNetworkActivityDevTools = () => null;
 }

package/rozenite.config.ts

@@ -2,7 +2,7 @@ export default {
   panels: [
     {
       name: 'Network Activity',
-      source: './src/ui/panel.tsx',
-    }
+      source: './src/ui/App.tsx',
+    },
   ],
 };

package/src/css-modules.d.ts

@@ -1,4 +1,4 @@
 declare module '*.module.css' {
   const classes: { [key: string]: string };
   export default classes;
-} 
+}

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

@@ -0,0 +1,226 @@
+import { HttpMethod, NetworkActivityDevToolsClient } from '../../shared/client';
+import { getContentType } from '../utils';
+import { getNetworkRequestsRegistry } from './network-requests-registry';
+import { XHRInterceptor } from './xhr-interceptor';
+
+const networkRequestsRegistry = getNetworkRequestsRegistry();
+
+const getResponseSize = (request: XMLHttpRequest): number => {
+  if (typeof request.response === 'object') {
+    return request.response.size;
+  }
+
+  return request.response.length || 0;
+};
+
+const getResponseBody = async (
+  request: XMLHttpRequest
+): Promise<string | null> => {
+  const responseType = request.responseType;
+
+  // Response type is empty in certain cases, like when using axios.
+  if (responseType === '' || responseType === 'text') {
+    return request.responseText as string;
+  }
+
+  if (responseType === 'blob') {
+    // This may be a text blob.
+    const contentType = request.getResponseHeader('Content-Type') || '';
+
+    if (
+      contentType.startsWith('text/') ||
+      contentType.startsWith('application/json')
+    ) {
+      // 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 null;
+};
+
+const getInitiatorFromStack = (): {
+  type: string;
+  url?: string;
+  lineNumber?: number;
+  columnNumber?: number;
+} => {
+  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) {
+      return {
+        type: 'script',
+        url: match[2],
+        lineNumber: parseInt(match[3]),
+        columnNumber: parseInt(match[4]),
+      };
+    }
+  } catch {
+    // Ignore stack parsing errors
+  }
+
+  return { type: 'other' };
+};
+
+export type NetworkInspector = {
+  enable: () => void;
+  disable: () => void;
+  isEnabled: () => boolean;
+  dispose: () => void;
+};
+
+const READY_STATE_HEADERS_RECEIVED = 2;
+
+export const getNetworkInspector = (
+  pluginClient: NetworkActivityDevToolsClient
+): NetworkInspector => {
+  const generateRequestId = (): string => {
+    return `req_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+  };
+
+  const handleRequestSend = (data: string, request: XMLHttpRequest): void => {
+    const sendTime = Date.now();
+
+    const requestId = generateRequestId();
+    request._rozeniteRequestId = requestId;
+
+    const initiator = getInitiatorFromStack();
+
+    networkRequestsRegistry.addEntry(requestId, request);
+
+    let ttfb = 0;
+
+    pluginClient.send('request-sent', {
+      requestId: requestId,
+      timestamp: sendTime,
+      request: {
+        url: request._url as string,
+        method: request._method as HttpMethod,
+        headers: request._headers,
+        postData: data,
+      },
+      type: 'XHR',
+      initiator,
+    });
+
+    request.addEventListener('readystatechange', () => {
+      if (request.readyState === READY_STATE_HEADERS_RECEIVED) {
+        ttfb = Date.now() - sendTime;
+      }
+    });
+
+    request.addEventListener('load', () => {
+      pluginClient.send('response-received', {
+        requestId: requestId,
+        timestamp: Date.now(),
+        type: 'XHR',
+        response: {
+          url: request._url as string,
+          status: request.status,
+          statusText: request.statusText,
+          headers: request.responseHeaders || {},
+          contentType: getContentType(request),
+          size: getResponseSize(request),
+          responseTime: Date.now(),
+        },
+      });
+    });
+
+    request.addEventListener('loadend', () => {
+      pluginClient.send('request-completed', {
+        requestId: requestId,
+        timestamp: Date.now(),
+        duration: Date.now() - sendTime,
+        size: getResponseSize(request),
+        ttfb,
+      });
+    });
+
+    request.addEventListener('error', () => {
+      pluginClient.send('request-failed', {
+        requestId: requestId,
+        timestamp: Date.now(),
+        type: 'XHR',
+        error: 'Failed',
+        canceled: false,
+      });
+    });
+
+    request.addEventListener('abort', () => {
+      pluginClient.send('request-failed', {
+        requestId: requestId,
+        timestamp: Date.now(),
+        type: 'XHR',
+        error: 'Aborted',
+        canceled: true,
+      });
+    });
+  };
+
+  const enable = () => {
+    XHRInterceptor.disableInterception();
+    XHRInterceptor.setSendCallback(handleRequestSend);
+    XHRInterceptor.enableInterception();
+  };
+
+  const disable = () => {
+    XHRInterceptor.disableInterception();
+    networkRequestsRegistry.clear();
+  };
+
+  const isEnabled = () => {
+    return XHRInterceptor.isInterceptorEnabled();
+  };
+
+  const enableSubscription = pluginClient.onMessage('network-enable', () => {
+    enable();
+  });
+
+  const disableSubscription = pluginClient.onMessage('network-disable', () => {
+    disable();
+  });
+
+  const handleBodySubscription = pluginClient.onMessage(
+    'get-response-body',
+    async ({ requestId }) => {
+      const request = networkRequestsRegistry.getEntry(requestId);
+
+      if (!request) {
+        return;
+      }
+
+      const body = await getResponseBody(request);
+
+      pluginClient.send('response-body', {
+        requestId,
+        body,
+      });
+    }
+  );
+
+  const dispose = () => {
+    disable();
+    enableSubscription.remove();
+    disableSubscription.remove();
+    handleBodySubscription.remove();
+  };
+
+  return {
+    enable,
+    disable,
+    isEnabled,
+    dispose,
+  };
+};

package/src/react-native/http/network-requests-registry.ts

@@ -0,0 +1,52 @@
+type NetworkRegistryEntry = {
+  id: string;
+  sentAt: number;
+  request: XMLHttpRequest;
+};
+
+export type NetworkRequestRegistry = {
+  addEntry: (id: string, request: XMLHttpRequest) => void;
+  getEntry: (id: string) => XMLHttpRequest | null;
+  clear: () => void;
+};
+
+const REQUEST_TTL = 1000 * 60 * 5; // 5 minutes
+
+export const getNetworkRequestsRegistry = (): NetworkRequestRegistry => {
+  const registry: Map<string, NetworkRegistryEntry> = new Map();
+
+  const trimRegistry = (): void => {
+    const now = Date.now();
+
+    registry.forEach((entry) => {
+      if (now - entry.sentAt < REQUEST_TTL) {
+        return;
+      }
+
+      registry.delete(entry.id);
+    });
+  };
+
+  const addEntry = (id: string, request: XMLHttpRequest): void => {
+    trimRegistry();
+    registry.set(id, {
+      id,
+      request,
+      sentAt: Date.now(),
+    });
+  };
+
+  const getEntry = (id: string): XMLHttpRequest | null => {
+    return registry.get(id)?.request ?? null;
+  };
+
+  const clear = () => {
+    registry.clear();
+  };
+
+  return {
+    addEntry,
+    getEntry,
+    clear,
+  };
+};

package/src/react-native/http/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 | undefined,
+  responseSize: number | undefined,
+  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/http/xml-request.d.ts

@@ -0,0 +1,34 @@
+declare type BlobData = {
+  blobId: string;
+  lastModified?: number;
+  name?: string;
+  offset: number;
+  size: number;
+  type?: string;
+};
+
+declare global {
+  interface XMLHttpRequest {
+    _rozeniteRequestId: string;
+    _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 | BlobData;
+    _sent: boolean;
+    _url?: string | null;
+    _timedOut: boolean;
+    _trackingName?: string;
+    _incrementalEvents: boolean;
+    _startTime?: number | null;
+    responseHeaders?: { [key: string]: string };
+  }
+}
+
+export {};

package/src/react-native/sse/event-source.ts

@@ -0,0 +1,25 @@
+import type EventSource from 'react-native-sse';
+
+const NOOP = () => {
+  // noop
+};
+
+const MOCK_EVENT_SOURCE = class {
+  open = NOOP;
+  close = NOOP;
+  addEventListener = NOOP;
+  removeEventListener = NOOP;
+  dispatch = NOOP;
+  removeAllEventListeners = NOOP;
+};
+
+export const getEventSource = (): typeof EventSource => {
+  try {
+    const { default: EventSource } = require('react-native-sse');
+    return EventSource;
+  } catch {
+    // This is a workaround for the fact that Vite doesn't support require() calls for in-project dependencies.
+    // We are going to return a mock object, so the code will work fine, but it will not be able to intercept SSE requests.
+    return MOCK_EVENT_SOURCE;
+  }
+};