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

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

@@ -1,16 +1,121 @@
-import { HttpMethod, NetworkActivityDevToolsClient } from '../../shared/client';
+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;
+  }
 
-const getResponseSize = (request: XMLHttpRequest): number => {
-  if (typeof request.response === 'object') {
-    return request.response.size;
+  if (isBlob(body)) {
+    return getBinaryPostData(body);
   }
 
-  return request.response.length || 0;
+  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 (
@@ -42,6 +147,10 @@ const getResponseBody = async (
     }
   }
 
+  if (responseType === 'json') {
+    return safeStringify(request.response);
+  }
+
   return null;
 };
 
@@ -90,7 +199,10 @@ export const getNetworkInspector = (
     return `req_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
   };
 
-  const handleRequestSend = (data: string, request: XMLHttpRequest): void => {
+  const handleRequestSend = (
+    data: XHRPostData,
+    request: XMLHttpRequest
+  ): void => {
     const sendTime = Date.now();
 
     const requestId = generateRequestId();
@@ -109,12 +221,22 @@ export const getNetworkInspector = (
         url: request._url as string,
         method: request._method as HttpMethod,
         headers: request._headers,
-        postData: data,
+        postData: getRequestBody(data),
       },
       type: 'XHR',
       initiator,
     });
 
+    request.addEventListener('progress', (event) => {
+      pluginClient.send('request-progress', {
+        requestId: 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;
@@ -130,7 +252,9 @@ export const getNetworkInspector = (
           url: request._url as string,
           status: request.status,
           statusText: request.statusText,
-          headers: request.responseHeaders || {},
+          headers: applyReactNativeResponseHeadersLogic(
+            request.responseHeaders || {}
+          ),
           contentType: getContentType(request),
           size: getResponseSize(request),
           responseTime: Date.now(),
@@ -167,11 +291,69 @@ export const getNetworkInspector = (
         canceled: true,
       });
     });
+
+    request.addEventListener('timeout', () => {
+      pluginClient.send('request-failed', {
+        requestId: requestId,
+        timestamp: Date.now(),
+        type: 'XHR',
+        error: 'Timeout',
+        canceled: false,
+      });
+    });
+  };
+
+  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();
   };
 

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/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/sse/sse-inspector.ts

@@ -22,13 +22,14 @@ export type SSEInspector = {
 export const getSSEInspector = (): SSEInspector => {
   const eventEmitter = createNanoEvents<NanoEventsMap>();
 
-  const getRequestId = (eventSource: EventSourceWithInternals): string => {
+  const getRequestId = (
+    eventSource: EventSourceWithInternals
+  ): string | null => {
     const requestId = eventSource._xhr?._rozeniteRequestId;
 
     if (!requestId) {
-      throw new Error(
-        'No request ID found for EventSource. This should never happen!'
-      );
+      // It means that the EventSource was created before the inspector was enabled.
+      return null;
     }
 
     return requestId;
@@ -39,6 +40,11 @@ export const getSSEInspector = (): SSEInspector => {
       SSEInterceptor.setOpenEventCallback((_, eventSource) => {
         const sseEventSource = eventSource as EventSourceWithInternals;
         const requestId = getRequestId(sseEventSource);
+
+        if (!requestId) {
+          return;
+        }
+
         const sseXhr = sseEventSource._xhr as XMLHttpRequest;
 
         const event: SSEEvent = {
@@ -62,11 +68,18 @@ export const getSSEInspector = (): SSEInspector => {
         const sseEventSource = eventSource as EventSourceWithInternals;
         const requestId = getRequestId(sseEventSource);
 
+        if (!requestId) {
+          return;
+        }
+
         const event: SSEEvent = {
           type: 'sse-message',
           requestId,
           timestamp: Date.now(),
-          data: messageEvent.data || '',
+          payload: {
+            type: messageEvent.type,
+            data: messageEvent.data || '',
+          },
         };
         eventEmitter.emit('sse-message', event);
       });
@@ -75,6 +88,10 @@ export const getSSEInspector = (): SSEInspector => {
         const sseEventSource = eventSource as EventSourceWithInternals;
         const requestId = getRequestId(sseEventSource);
 
+        if (!requestId) {
+          return;
+        }
+
         const event: SSEEvent = {
           type: 'sse-error',
           requestId,
@@ -92,6 +109,10 @@ export const getSSEInspector = (): SSEInspector => {
         const sseEventSource = eventSource as EventSourceWithInternals;
         const requestId = getRequestId(sseEventSource);
 
+        if (!requestId) {
+          return;
+        }
+
         const event: SSEEvent = {
           type: 'sse-close',
           requestId,
@@ -107,6 +128,7 @@ export const getSSEInspector = (): SSEInspector => {
     },
     isEnabled: () => SSEInterceptor.isInterceptorEnabled(),
     dispose: () => {
+      SSEInterceptor.disableInterception();
       eventEmitter.events = {};
     },
     on: <TEventType extends keyof SSEEventMap>(

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

@@ -6,6 +6,8 @@ import type {
   CloseEvent,
   TimeoutEvent,
   ExceptionEvent,
+  EventSourceEvent,
+  CustomEvent,
 } from 'react-native-sse';
 import { EventSourceWithInternals } from './types';
 import { getEventSource } from './event-source';
@@ -16,7 +18,7 @@ export type SSEInterceptorConnectCallback = (
 ) => void;
 
 export type SSEInterceptorMessageCallback = (
-  event: MessageEvent,
+  event: MessageEvent | CustomEvent<string>,
   request: EventSource
 ) => void;
 
@@ -45,8 +47,12 @@ let isInterceptorEnabled = false;
 
 const eventSourceClass = getEventSource();
 
-// Store original EventSource open method
+// Store original EventSource methods
 const originalOpen = eventSourceClass.prototype.open;
+const originalDispatch = eventSourceClass.prototype.dispatch;
+
+// Built-in SSE event types that we don't want to capture as messages
+const BUILT_IN_EVENT_TYPES = new Set(['open', 'error', 'close', 'done']);
 
 /**
  * A network interceptor which monkey-patches EventSource open method
@@ -114,12 +120,6 @@ export const SSEInterceptor = {
         }
       });
 
-      this.addEventListener('message', (event: MessageEvent) => {
-        if (messageCallback) {
-          messageCallback(event, this);
-        }
-      });
-
       this.addEventListener(
         'error',
         (event: ErrorEvent | TimeoutEvent | ExceptionEvent) => {
@@ -139,6 +139,21 @@ export const SSEInterceptor = {
       return originalOpen.call(this);
     };
 
+    eventSourceClass.prototype.dispatch = function (
+      this: EventSourceWithInternals,
+      eventType: string,
+      data: EventSourceEvent<string>
+    ) {
+      if (!BUILT_IN_EVENT_TYPES.has(eventType)) {
+        if (messageCallback) {
+          messageCallback(data, this);
+        }
+      }
+
+      // Call original open method
+      return originalDispatch.call(this, eventType, data);
+    };
+
     isInterceptorEnabled = true;
   },
 
@@ -152,6 +167,9 @@ export const SSEInterceptor = {
     // Restore original open method
     eventSourceClass.prototype.open = originalOpen;
 
+    // Restore original dispatch method
+    eventSourceClass.prototype.dispatch = originalDispatch;
+
     // Clear callbacks
     connectCallback = null;
     messageCallback = null;

package/src/react-native/useNetworkActivityDevTools.ts

@@ -1,32 +1,100 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
 import { getNetworkInspector } from './http/network-inspector';
+import { getOverridesRegistry } from './http/overrides-registry';
 import { NetworkActivityEventMap } from '../shared/client';
 import { getWebSocketInspector } from './websocket/websocket-inspector';
 import { WebSocketEventMap } from '../shared/websocket-events';
 import { UnionToTuple } from './utils';
 import { getSSEInspector } from './sse/sse-inspector';
 import { SSEEventMap } from '../shared/sse-events';
-
-export const useNetworkActivityDevTools = () => {
+import {
+  DEFAULT_CONFIG,
+  NetworkActivityDevToolsConfig,
+  validateConfig,
+} from './config';
+
+const overridesRegistry = getOverridesRegistry();
+
+export const useNetworkActivityDevTools = (
+  config: NetworkActivityDevToolsConfig = DEFAULT_CONFIG
+) => {
+  const isRecordingEnabledRef = useRef(false);
   const client = useRozeniteDevToolsClient<NetworkActivityEventMap>({
     pluginId: '@rozenite/network-activity-plugin',
   });
 
+  const isHttpInspectorEnabled = config.inspectors?.http ?? true;
+  const isWebSocketInspectorEnabled = config.inspectors?.websocket ?? true;
+  const isSSEInspectorEnabled = config.inspectors?.sse ?? true; 
+  const showUrlAsName = config.clientUISettings?.showUrlAsName;
+
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    validateConfig(config);
+  }, [config]);
+
+  /** Persist the recording state across hot reloads */
   useEffect(() => {
     if (!client) {
       return;
     }
 
+
+    const sendClientUISettings = () => {
+      client.send('client-ui-settings', {
+        settings: {
+          showUrlAsName: showUrlAsName ?? DEFAULT_CONFIG.clientUISettings?.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();
+      }),
+    ];
+
+    // Send initial or changed values live
+    sendClientUISettings();
+
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+    };
+  }, [client, showUrlAsName]);
+
+  useEffect(() => {
+    if (!client || !isHttpInspectorEnabled) {
+      return;
+    }
+
     const networkInspector = getNetworkInspector(client);
 
+    // If recording was previously enabled, enable the inspector (hot reload)
+    if (isRecordingEnabledRef.current) {
+      networkInspector.enable();
+    }
+
     return () => {
       networkInspector.dispose();
     };
-  }, [client]);
+  }, [client, isHttpInspectorEnabled]);
 
   useEffect(() => {
-    if (!client) {
+    if (!client || !isWebSocketInspectorEnabled) {
       return;
     }
 
@@ -55,14 +123,19 @@ export const useNetworkActivityDevTools = () => {
       websocketInspector.disable();
     });
 
+    // If recording was previously enabled, enable the inspector (hot reload)
+    if (isRecordingEnabledRef.current) {
+      websocketInspector.enable();
+    }
+
     return () => {
       // Subscriptions will be disposed by the inspector
       websocketInspector.dispose();
     };
-  }, [client]);
+  }, [client, isWebSocketInspectorEnabled]);
 
   useEffect(() => {
-    if (!client) {
+    if (!client || !isSSEInspectorEnabled) {
       return;
     }
 
@@ -88,11 +161,16 @@ export const useNetworkActivityDevTools = () => {
       sseInspector.disable();
     });
 
+    // If recording was previously enabled, enable the inspector (hot reload)
+    if (isRecordingEnabledRef.current) {
+      sseInspector.enable();
+    }
+
     return () => {
       // Subscriptions will be disposed by the inspector
       sseInspector.dispose();
     };
-  }, [client]);
+  }, [client, isSSEInspectorEnabled]);
 
   return client;
 };

package/src/react-native/utils/getBlobName.ts

@@ -0,0 +1,45 @@
+/**
+ * Utility function to get the name of a blob. Handles both the direct name property and the data object.
+ *
+ * ```
+ * // node_modules/react-native/Libraries/Blob/Blob.js
+ *
+ * export type BlobData = {
+ *   blobId: string,
+ *   offset: number,
+ *   size: number,
+ *   name?: string,
+ *   type?: string,
+ *   lastModified?: number,
+ *   __collector?: ?BlobCollector,
+ *   ...
+ * };
+ *
+ * get data(): BlobData {
+ *   if (!this._data) {
+ *     throw new Error('Blob has been closed and is no longer available');
+ *   }
+ *
+ *   return this._data;
+ * }
+ *
+ * get size(): number {
+ *   return this.data.size;
+ * }
+ *
+ * get type(): string {
+ *   return this.data.type || '';
+ * }
+ * ```
+ */
+export function getBlobName(blob: any): string | undefined {
+  if (typeof blob?.name === 'string') {
+    return blob.name;
+  }
+
+  if (blob?.data && typeof blob.data.name === 'string') {
+    return blob.data.name;
+  }
+
+  return undefined;
+}