@rozenite/network-activity-plugin 1.0.0-alpha.8 → 1.0.0

package/package.json

@@ -1,37 +1,51 @@
 {
   "name": "@rozenite/network-activity-plugin",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0",
   "description": "Network Activity for Rozenite.",
   "type": "module",
   "main": "./dist/react-native.cjs",
   "module": "./dist/react-native.js",
   "types": "./dist/react-native.d.ts",
   "dependencies": {
-    "@rozenite/plugin-bridge": "1.0.0-alpha.8"
+    "nanoevents": "^9.1.0",
+    "@rozenite/plugin-bridge": "1.0.0"
   },
   "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",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@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": "*",
+    "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",
-    "@floating-ui/react": "^0.26.0",
-    "@tanstack/react-virtual": "^3.0.0",
-    "lucide-react": "^0.263.1",
-    "@rozenite/vite-plugin": "1.0.0-alpha.8",
-    "rozenite": "1.0.0-alpha.8"
+    "zustand": "^5.0.6",
+    "@types/react": "~18.3.23",
+    "@types/react-dom": "~18.3.1",
+    "@rozenite/vite-plugin": "1.0.0",
+    "rozenite": "1.0.0"
+  },
+  "peerDependencies": {
+    "react-native-sse": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-native-sse": {
+      "optional": true
+    }
   },
   "license": "MIT",
   "scripts": {

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.');
+  }
+};

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

@@ -0,0 +1,388 @@
+import { safeStringify } from '../../utils/safeStringify';
+import {
+  HttpMethod,
+  NetworkActivityDevToolsClient,
+  RequestPostData,
+  RequestTextPostData,
+  RequestBinaryPostData,
+  RequestFormDataPostData,
+  XHRPostData,
+} from '../../shared/client';
+import { getContentType } from '../utils';
+import { getNetworkRequestsRegistry } from './network-requests-registry';
+import { getBlobName } from '../utils/getBlobName';
+import { getFormDataEntries } from '../utils/getFormDataEntries';
+import { XHRInterceptor } from './xhr-interceptor';
+import { getStringSizeInBytes } from '../../utils/getStringSizeInBytes';
+import { applyReactNativeResponseHeadersLogic } from '../../utils/applyReactNativeResponseHeadersLogic';
+import {
+  isBlob,
+  isArrayBuffer,
+  isFormData,
+  isNullOrUndefined,
+} from '../../utils/typeChecks';
+import { getOverridesRegistry } from './overrides-registry';
+
+const networkRequestsRegistry = getNetworkRequestsRegistry();
+const overridesRegistry = getOverridesRegistry();
+
+const getBinaryPostData = (body: Blob): RequestBinaryPostData => ({
+  type: 'binary',
+  value: {
+    size: body.size,
+    type: body.type,
+    name: getBlobName(body),
+  },
+});
+
+const getArrayBufferPostData = (
+  body: ArrayBuffer | ArrayBufferView
+): RequestBinaryPostData => ({
+  type: 'binary',
+  value: {
+    size: body.byteLength,
+  },
+});
+
+const getTextPostData = (body: unknown): RequestTextPostData => ({
+  type: 'text',
+  value: safeStringify(body),
+});
+
+const getFormDataPostData = (body: FormData): RequestFormDataPostData => ({
+  type: 'form-data',
+  value: getFormDataEntries(body).reduce<RequestFormDataPostData['value']>(
+    (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: XHRPostData): RequestPostData => {
+  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: XMLHttpRequest): number | null => {
+  try {
+    const { responseType, response } = request;
+
+    // Handle a case of 204 where no-content was sent.
+    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;
+  }
+};
+
+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);
+      });
+    }
+  }
+
+  if (responseType === 'json') {
+    return safeStringify(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: XHRPostData,
+    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: getRequestBody(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: applyReactNativeResponseHeadersLogic(
+            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 handleRequestOverride = (request: XMLHttpRequest): void => {
+    const override = overridesRegistry.getOverrideForUrl(
+      request._url as string
+    );
+
+    if (!override) {
+      return;
+    }
+
+    request.addEventListener('readystatechange', () => {
+      if (override.body !== undefined) {
+        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';
+        }
+
+        // @ts-expect-error - Mocking response
+        request.response = override.body;
+        // @ts-expect-error - Mocking responseText
+        request.responseText = override.body;
+      }
+
+      if (override.status !== undefined) {
+        Object.defineProperty(request, 'status', {
+          writable: true,
+        });
+
+        // @ts-expect-error - Mocking status
+        request.status = override.status;
+      }
+    });
+  };
+
+  const enable = () => {
+    XHRInterceptor.disableInterception();
+    XHRInterceptor.setSendCallback(handleRequestSend);
+    XHRInterceptor.setOverrideCallback(handleRequestOverride);
+    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/overrides-registry.ts

@@ -0,0 +1,32 @@
+import { RequestOverride } from '../../shared/client';
+
+export type OverridesRegistry = {
+  setOverrides: (newOverrides: [string, RequestOverride][]) => void;
+  getOverrideForUrl: (url: string) => RequestOverride | undefined;
+};
+
+const createOverridesRegistry = (): OverridesRegistry => {
+  let overrides = new Map<string, RequestOverride>();
+
+  const setOverrides = (newOverrides: [string, RequestOverride][]) => {
+    overrides = new Map(newOverrides);
+  };
+
+  const getOverrideForUrl = (url: string) => {
+    return overrides.get(url);
+  };
+
+  return {
+    setOverrides,
+    getOverrideForUrl,
+  };
+};
+
+let registryInstance: OverridesRegistry | null = null;
+
+export const getOverridesRegistry = (): OverridesRegistry => {
+  if (!registryInstance) {
+    registryInstance = createOverridesRegistry();
+  }
+  return registryInstance;
+};

package/src/react-native/{xhr-interceptor.ts → http/xhr-interceptor.ts}

@@ -1,5 +1,7 @@
 /* eslint-disable prefer-rest-params */
 
+import { XHRPostData } from '../../shared/client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -9,6 +11,7 @@
  * Source: https://github.com/facebook/react-native/blob/2c683c5787dd03ac15d2aad45dcc53650529ee7f/packages/react-native/src/private/devsupport/devmenu/elementinspector/XHRInterceptor.js
  */
 
+const XMLHttpRequest = global.XMLHttpRequest || window.XMLHttpRequest;
 const originalXHROpen = XMLHttpRequest.prototype.open;
 const originalXHRSend = XMLHttpRequest.prototype.send;
 const originalXHRSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
@@ -20,7 +23,7 @@ type XHRInterceptorOpenCallback = (
 ) => void;
 
 type XHRInterceptorSendCallback = (
-  data: string,
+  data: XHRPostData,
   request: XMLHttpRequest
 ) => void;
 
@@ -46,11 +49,14 @@ type XHRInterceptorResponseCallback = (
   request: XMLHttpRequest
 ) => void;
 
+type XHRInterceptorOverrideCallback = (request: XMLHttpRequest) => void;
+
 let openCallback: XHRInterceptorOpenCallback | null;
 let sendCallback: XHRInterceptorSendCallback | null;
 let requestHeaderCallback: XHRInterceptorRequestHeaderCallback | null;
 let headerReceivedCallback: XHRInterceptorHeaderReceivedCallback | null;
 let responseCallback: XHRInterceptorResponseCallback | null;
+let overrideCallback: XHRInterceptorOverrideCallback | null;
 
 let isInterceptorEnabled = false;
 
@@ -97,6 +103,13 @@ export const XHRInterceptor = {
     requestHeaderCallback = callback;
   },
 
+  /**
+   * Invoked before XMLHttpRequest.send(...) is called.
+   */
+  setOverrideCallback(callback: XHRInterceptorOverrideCallback) {
+    overrideCallback = callback;
+  },
+
   isInterceptorEnabled(): boolean {
     return isInterceptorEnabled;
   },
@@ -136,10 +149,13 @@ export const XHRInterceptor = {
     // register listeners to intercept the response, and invoke the callbacks.
     // $FlowFixMe[cannot-write]
     // $FlowFixMe[missing-this-annot]
-    XMLHttpRequest.prototype.send = function (data: string) {
+    XMLHttpRequest.prototype.send = function (data: XHRPostData) {
       if (sendCallback) {
         sendCallback(data, this);
       }
+      if (overrideCallback) {
+        overrideCallback(this);
+      }
       if (this.addEventListener) {
         this.addEventListener(
           'readystatechange',
@@ -207,5 +223,6 @@ export const XHRInterceptor = {
     sendCallback = null;
     headerReceivedCallback = null;
     requestHeaderCallback = null;
+    overrideCallback = null;
   },
 };

package/src/react-native/{xml-request.d.ts → http/xml-request.d.ts}

@@ -9,6 +9,7 @@ declare type BlobData = {
 
 declare global {
   interface XMLHttpRequest {
+    _rozeniteRequestId: string;
     _requestId?: number;
     _subscriptions: Array<EventSubscription>;
     _aborted: boolean;

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;
+  }
+};