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

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

@@ -0,0 +1,139 @@
+import { createNanoEvents } from 'nanoevents';
+import { SSEInterceptor } from './sse-interceptor';
+import { EventSourceWithInternals } from './types';
+import { SSEEvent, SSEEventMap } from '../../shared/sse-events';
+import { getContentType } from '../utils';
+
+type NanoEventsMap = {
+  [K in keyof SSEEventMap]: (data: SSEEventMap[K]) => void;
+};
+
+export type SSEInspector = {
+  enable: () => void;
+  disable: () => void;
+  isEnabled: () => boolean;
+  dispose: () => void;
+  on: <TEventType extends keyof SSEEventMap>(
+    event: TEventType,
+    callback: (data: SSEEventMap[TEventType]) => void
+  ) => () => void;
+};
+
+export const getSSEInspector = (): SSEInspector => {
+  const eventEmitter = createNanoEvents<NanoEventsMap>();
+
+  const getRequestId = (
+    eventSource: EventSourceWithInternals
+  ): string | null => {
+    const requestId = eventSource._xhr?._rozeniteRequestId;
+
+    if (!requestId) {
+      // It means that the EventSource was created before the inspector was enabled.
+      return null;
+    }
+
+    return requestId;
+  };
+
+  return {
+    enable: () => {
+      SSEInterceptor.setOpenEventCallback((_, eventSource) => {
+        const sseEventSource = eventSource as EventSourceWithInternals;
+        const requestId = getRequestId(sseEventSource);
+
+        if (!requestId) {
+          return;
+        }
+
+        const sseXhr = sseEventSource._xhr as XMLHttpRequest;
+
+        const event: SSEEvent = {
+          type: 'sse-open',
+          requestId,
+          timestamp: Date.now(),
+          response: {
+            url: sseXhr._url as string,
+            status: sseXhr.status,
+            statusText: sseXhr.statusText,
+            headers: sseXhr.responseHeaders || {},
+            contentType: getContentType(sseXhr),
+            size: 0,
+            responseTime: Date.now(),
+          },
+        };
+        eventEmitter.emit('sse-open', event);
+      });
+
+      SSEInterceptor.setMessageCallback((messageEvent, eventSource) => {
+        const sseEventSource = eventSource as EventSourceWithInternals;
+        const requestId = getRequestId(sseEventSource);
+
+        if (!requestId) {
+          return;
+        }
+
+        const event: SSEEvent = {
+          type: 'sse-message',
+          requestId,
+          timestamp: Date.now(),
+          payload: {
+            type: messageEvent.type,
+            data: messageEvent.data || '',
+          },
+        };
+        eventEmitter.emit('sse-message', event);
+      });
+
+      SSEInterceptor.setErrorCallback((errorEvent, eventSource) => {
+        const sseEventSource = eventSource as EventSourceWithInternals;
+        const requestId = getRequestId(sseEventSource);
+
+        if (!requestId) {
+          return;
+        }
+
+        const event: SSEEvent = {
+          type: 'sse-error',
+          requestId,
+          timestamp: Date.now(),
+          error: {
+            type: errorEvent.type,
+            message:
+              errorEvent.type === 'timeout' ? 'Timeout' : errorEvent.message,
+          },
+        };
+        eventEmitter.emit('sse-error', event);
+      });
+
+      SSEInterceptor.setCloseCallback((_, eventSource) => {
+        const sseEventSource = eventSource as EventSourceWithInternals;
+        const requestId = getRequestId(sseEventSource);
+
+        if (!requestId) {
+          return;
+        }
+
+        const event: SSEEvent = {
+          type: 'sse-close',
+          requestId,
+          timestamp: Date.now(),
+        };
+        eventEmitter.emit('sse-close', event);
+      });
+
+      SSEInterceptor.enableInterception();
+    },
+    disable: () => {
+      SSEInterceptor.disableInterception();
+    },
+    isEnabled: () => SSEInterceptor.isInterceptorEnabled(),
+    dispose: () => {
+      SSEInterceptor.disableInterception();
+      eventEmitter.events = {};
+    },
+    on: <TEventType extends keyof SSEEventMap>(
+      event: TEventType,
+      callback: (data: SSEEventMap[TEventType]) => void
+    ) => eventEmitter.on(event, callback as NanoEventsMap[TEventType]),
+  };
+};

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

@@ -0,0 +1,180 @@
+import type EventSource from 'react-native-sse';
+import type {
+  MessageEvent,
+  ErrorEvent,
+  OpenEvent,
+  CloseEvent,
+  TimeoutEvent,
+  ExceptionEvent,
+  EventSourceEvent,
+  CustomEvent,
+} from 'react-native-sse';
+import { EventSourceWithInternals } from './types';
+import { getEventSource } from './event-source';
+
+export type SSEInterceptorConnectCallback = (
+  url: string,
+  request: EventSource
+) => void;
+
+export type SSEInterceptorMessageCallback = (
+  event: MessageEvent | CustomEvent<string>,
+  request: EventSource
+) => void;
+
+export type SSEInterceptorErrorCallback = (
+  error: ErrorEvent | TimeoutEvent | ExceptionEvent,
+  request: EventSource
+) => void;
+
+export type SSEInterceptorOpenEventCallback = (
+  event: OpenEvent,
+  request: EventSource
+) => void;
+
+export type SSEInterceptorCloseCallback = (
+  event: CloseEvent,
+  request: EventSource
+) => void;
+
+let connectCallback: SSEInterceptorConnectCallback | null;
+let messageCallback: SSEInterceptorMessageCallback | null;
+let errorCallback: SSEInterceptorErrorCallback | null;
+let openEventCallback: SSEInterceptorOpenEventCallback | null;
+let closeCallback: SSEInterceptorCloseCallback | null;
+
+let isInterceptorEnabled = false;
+
+const eventSourceClass = getEventSource();
+
+// 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
+ * to gather all SSE connections and events, in order to show their
+ * information in the Network Activity panel.
+ */
+export const SSEInterceptor = {
+  /**
+   * Invoked when EventSource.open() is called (connection attempt starting).
+   */
+  setConnectCallback(callback: SSEInterceptorConnectCallback) {
+    connectCallback = callback;
+  },
+
+  /**
+   * Invoked when a message event is received.
+   */
+  setMessageCallback(callback: SSEInterceptorMessageCallback) {
+    messageCallback = callback;
+  },
+
+  /**
+   * Invoked when an error event occurs.
+   */
+  setErrorCallback(callback: SSEInterceptorErrorCallback) {
+    errorCallback = callback;
+  },
+
+  /**
+   * Invoked when the connection is successfully opened (open event fired).
+   */
+  setOpenEventCallback(callback: SSEInterceptorOpenEventCallback) {
+    openEventCallback = callback;
+  },
+
+  /**
+   * Invoked when the connection is closed.
+   */
+  setCloseCallback(callback: SSEInterceptorCloseCallback) {
+    closeCallback = callback;
+  },
+
+  isInterceptorEnabled(): boolean {
+    return isInterceptorEnabled;
+  },
+
+  enableInterception() {
+    if (isInterceptorEnabled) {
+      return;
+    }
+
+    // Override EventSource open method to intercept SSE connections
+    eventSourceClass.prototype.open = function (
+      this: EventSourceWithInternals
+    ) {
+      // Invoke connect callback
+      if (connectCallback) {
+        connectCallback(this.url, this);
+      }
+
+      // Add event listeners to intercept all events
+      this.addEventListener('open', (event: OpenEvent) => {
+        if (openEventCallback) {
+          openEventCallback(event, this);
+        }
+      });
+
+      this.addEventListener(
+        'error',
+        (event: ErrorEvent | TimeoutEvent | ExceptionEvent) => {
+          if (errorCallback) {
+            errorCallback(event, this);
+          }
+        }
+      );
+
+      this.addEventListener('close', (event: CloseEvent) => {
+        if (closeCallback) {
+          closeCallback(event, this);
+        }
+      });
+
+      // Call original open method
+      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;
+  },
+
+  // Unpatch EventSource open method and remove the callbacks.
+  disableInterception() {
+    if (!isInterceptorEnabled) {
+      return;
+    }
+    isInterceptorEnabled = false;
+
+    // Restore original open method
+    eventSourceClass.prototype.open = originalOpen;
+
+    // Restore original dispatch method
+    eventSourceClass.prototype.dispatch = originalDispatch;
+
+    // Clear callbacks
+    connectCallback = null;
+    messageCallback = null;
+    errorCallback = null;
+    openEventCallback = null;
+    closeCallback = null;
+  },
+};

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

@@ -0,0 +1,9 @@
+import type EventSource from 'react-native-sse';
+
+export interface EventSourceWithInternals<E extends string = never>
+  extends EventSource<E> {
+  url: string;
+
+  /** Used internally to mark the underlying XHR to skip it in XHR interceptor. */
+  _xhr?: XMLHttpRequest;
+}

package/src/react-native/useNetworkActivityDevTools.ts

@@ -1,24 +1,176 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
-import { getNetworkInspector } from './network-inspector';
+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';
+import {
+  DEFAULT_CONFIG,
+  NetworkActivityDevToolsConfig,
+  validateConfig,
+} from './config';
 
-export const useNetworkActivityDevTools = () => {
+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 || !isWebSocketInspectorEnabled) {
+      return;
+    }
+
+    const eventsToForward: UnionToTuple<keyof WebSocketEventMap> = [
+      'websocket-connect',
+      'websocket-open',
+      'websocket-close',
+      'websocket-message-sent',
+      'websocket-message-received',
+      'websocket-error',
+      'websocket-connection-status-changed',
+    ];
+    const websocketInspector = getWebSocketInspector();
+
+    eventsToForward.forEach((event) => {
+      websocketInspector.on(event, (event) => {
+        client.send(event.type, event);
+      });
+    });
+
+    client.onMessage('network-enable', () => {
+      websocketInspector.enable();
+    });
+
+    client.onMessage('network-disable', () => {
+      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, isWebSocketInspectorEnabled]);
+
+  useEffect(() => {
+    if (!client || !isSSEInspectorEnabled) {
+      return;
+    }
+
+    const eventsToForward: UnionToTuple<keyof SSEEventMap> = [
+      'sse-open',
+      'sse-message',
+      'sse-error',
+      'sse-close',
+    ];
+    const sseInspector = getSSEInspector();
+
+    eventsToForward.forEach((event) => {
+      sseInspector.on(event, (event) => {
+        client.send(event.type, event);
+      });
+    });
+
+    client.onMessage('network-enable', () => {
+      sseInspector.enable();
+    });
+
+    client.onMessage('network-disable', () => {
+      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, 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;
+}

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

@@ -0,0 +1,32 @@
+/**
+ * Extracts form data parts from a FormData object.
+ * Handles both the standard FormData API and the React Native FormData format.
+ *
+ * ```
+ * // node_modules/react-native/Libraries/Network/FormData.js
+ *
+ * class FormData {
+ *   _parts: Array<FormDataNameValuePair>;
+ *
+ *   constructor() {
+ *     this._parts = [];
+ *   }
+ *
+ * ...
+ * ```
+ */
+export function getFormDataEntries(formData: any): [string, unknown][] {
+  if (!formData || typeof formData !== 'object') {
+    return [];
+  }
+
+  if (typeof formData.entries === 'function') {
+    return formData.entries();
+  }
+
+  if (Array.isArray(formData._parts)) {
+    return formData._parts;
+  }
+
+  return [];
+}

package/src/react-native/utils.ts

@@ -0,0 +1,43 @@
+import { getContentTypeMime } from '../utils/getContentTypeMimeType';
+
+type UnionToIntersection<U> = (
+  U extends unknown ? (k: U) => void : never
+) extends (k: infer I) => void
+  ? I
+  : never;
+
+type LastOf<T> = UnionToIntersection<
+  T extends unknown ? () => T : never
+> extends () => infer R
+  ? R
+  : never;
+
+type Push<T extends unknown[], V> = [...T, V];
+
+export type UnionToTuple<T, L = LastOf<T>> = [T] extends [never]
+  ? []
+  : Push<UnionToTuple<Exclude<T, L>>, L>;
+
+export const getContentType = (request: XMLHttpRequest): string => {
+  const responseHeaders = request.responseHeaders;
+  const responseType = request.responseType;
+
+  const contentType = getContentTypeMime(responseHeaders || {});
+
+  if (contentType) {
+    return contentType;
+  }
+
+  switch (responseType) {
+    case 'arraybuffer':
+    case 'blob':
+      return 'application/octet-stream';
+    case 'text':
+    case '':
+      return 'text/plain';
+    case 'json':
+      return 'application/json';
+    case 'document':
+      return 'text/html';
+  }
+};