@rozenite/network-activity-plugin 1.1.0 → 1.2.0

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

@@ -0,0 +1,78 @@
+import { getHTTPInspector, HTTPInspector, HTTP_EVENTS } from './http/http-inspector';
+import { getSSEInspector, SSEInspector, SSE_EVENTS } from './sse/sse-inspector';
+import { getWebSocketInspector, WebSocketInspector, WEBSOCKET_EVENTS } from './websocket/websocket-inspector';
+import { EventsListener } from './events-listener';
+import { NetworkActivityEventMap } from '../shared/client';
+import type { InspectorsConfig } from './config';
+
+export type NetworkInspector = {
+  readonly http: HTTPInspector;
+  readonly sse: SSEInspector;
+  readonly websocket: WebSocketInspector;
+  setup: (eventsListener: EventsListener<NetworkActivityEventMap>) => void;
+  enable: (config?: InspectorsConfig) => void;
+  disable: () => void;
+  dispose: () => void;
+};
+
+const createNetworkInspectorInstance = (): NetworkInspector => {
+  const http = getHTTPInspector();
+  const sse = getSSEInspector();
+  const websocket = getWebSocketInspector();
+
+  return {
+    http,
+    sse,
+    websocket,
+
+    setup(eventsListener: EventsListener<NetworkActivityEventMap>) {
+      HTTP_EVENTS.forEach(event => {
+        http.on(event, (data) => {
+          eventsListener.send(event, data);
+        });
+      });
+
+      SSE_EVENTS.forEach(event => {
+        sse.on(event, (data) => {
+          eventsListener.send(data.type, data);
+        });
+      });
+
+      WEBSOCKET_EVENTS.forEach(event => {
+        websocket.on(event, (data) => {
+          eventsListener.send(data.type, data);
+        });
+      });
+    },
+
+    enable(config: InspectorsConfig = { http: true, sse: true, websocket: true }) {
+      if (config.http) http.enable();
+      if (config.sse) sse.enable();
+      if (config.websocket) websocket.enable();
+    },
+
+    disable() {
+      http.disable();
+      sse.disable();
+      websocket.disable();
+    },
+
+    dispose() {
+      http.dispose();
+      sse.dispose();
+      websocket.dispose();
+    },
+  };
+};
+
+export const getNetworkInspector = (() => {
+  let instance: NetworkInspector | null = null;
+  
+  return (): NetworkInspector => {
+    if (!instance) {
+      instance = createNetworkInspectorInstance();
+    }
+    
+    return instance;
+  };
+})();

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

@@ -3,20 +3,23 @@ import { SSEInterceptor } from './sse-interceptor';
 import { EventSourceWithInternals } from './types';
 import { SSEEvent, SSEEventMap } from '../../shared/sse-events';
 import { getContentType } from '../utils';
+import type { Inspector } from '../inspector';
 
 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 type SSEInspector = Inspector<SSEEventMap>;
+
+export const SSE_EVENTS: (keyof SSEEventMap)[] = [
+  'sse-open',
+  'sse-message',
+  'sse-error',
+  'sse-close',
+];
+
+export const isSSEEvent = (type: string): type is keyof SSEEventMap => {
+  return (SSE_EVENTS as readonly string[]).includes(type);
 };
 
 export const getSSEInspector = (): SSEInspector => {
@@ -129,7 +132,6 @@ export const getSSEInspector = (): SSEInspector => {
     isEnabled: () => SSEInterceptor.isInterceptorEnabled(),
     dispose: () => {
       SSEInterceptor.disableInterception();
-      eventEmitter.events = {};
     },
     on: <TEventType extends keyof SSEEventMap>(
       event: TEventType,

package/src/react-native/useHttpInspector.ts

@@ -0,0 +1,59 @@
+import { useEffect } from 'react';
+import type { HTTPInspector } from './http/http-inspector';
+import type { NetworkActivityDevToolsClient } from '../shared/client';
+import { getResponseBody } from './http/http-utils';
+import { getOverridesRegistry } from './http/overrides-registry';
+
+const overridesRegistry = getOverridesRegistry();
+
+export const useHttpInspector = (
+  client: NetworkActivityDevToolsClient | null,
+  httpInspector: HTTPInspector,
+  isEnabled: boolean,
+  isRecordingEnabled: boolean
+) => {
+  useEffect(() => {
+    if (!client || !isEnabled) {
+      return;
+    }
+
+    const networkRequestsRegistry =
+      httpInspector.getNetworkRequestsRegistry();
+
+    const subscriptions = [
+      client.onMessage('network-enable', () => {
+        httpInspector.enable();
+      }),
+      client.onMessage('network-disable', () => {
+        httpInspector.disable();
+      }),
+      client.onMessage('set-overrides', (data) => {
+        overridesRegistry.setOverrides(data.overrides);
+      }),
+      client.onMessage('get-response-body', async ({ requestId }) => {
+        const request = networkRequestsRegistry.getEntry(requestId);
+
+        if (!request) {
+          return;
+        }
+
+        const body = await getResponseBody(request);
+
+        client.send('response-body', {
+          requestId,
+          body,
+        });
+      }),
+    ];
+
+    // If recording was previously enabled, enable the inspector (hot reload)
+    if (isRecordingEnabled) {
+      httpInspector.enable();
+    }
+
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+      httpInspector.dispose();
+    };
+  }, [client, httpInspector, isEnabled, isRecordingEnabled]);
+};

package/src/react-native/useNetworkActivityDevTools.ts

@@ -1,23 +1,23 @@
 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';
+import { isHttpEvent } from './http/http-inspector';
+import { isWebSocketEvent } from './websocket/websocket-inspector';
+import { isSSEEvent } from './sse/sse-inspector';
 import {
   DEFAULT_CONFIG,
   NetworkActivityDevToolsConfig,
   validateConfig,
 } from './config';
+import { createNetworkInspectorsConfiguration } from './boot-recording';
+import { useHttpInspector } from './useHttpInspector';
+import { useWebSocketInspector } from './useWebSocketInspector';
+import { useSSEInspector } from './useSSEInspector';
 
-const overridesRegistry = getOverridesRegistry();
+const inspectorsConfig = createNetworkInspectorsConfiguration();
 
 export const useNetworkActivityDevTools = (
-  config: NetworkActivityDevToolsConfig = DEFAULT_CONFIG
+  config: NetworkActivityDevToolsConfig = DEFAULT_CONFIG,
 ) => {
   const isRecordingEnabledRef = useRef(false);
   const client = useRozeniteDevToolsClient<NetworkActivityEventMap>({
@@ -26,9 +26,11 @@ export const useNetworkActivityDevTools = (
 
   const isHttpInspectorEnabled = config.inspectors?.http ?? true;
   const isWebSocketInspectorEnabled = config.inspectors?.websocket ?? true;
-  const isSSEInspectorEnabled = config.inspectors?.sse ?? true; 
+  const isSSEInspectorEnabled = config.inspectors?.sse ?? true;
   const showUrlAsName = config.clientUISettings?.showUrlAsName;
 
+  const { eventsListener, networkInspector } = inspectorsConfig;
+
   useEffect(() => {
     if (!client) {
       return;
@@ -37,32 +39,44 @@ export const useNetworkActivityDevTools = (
     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,
+          showUrlAsName:
+            showUrlAsName ?? DEFAULT_CONFIG.clientUISettings?.showUrlAsName,
         },
       });
-    }
+    };
 
     const subscriptions = [
       client.onMessage('network-enable', () => {
         isRecordingEnabledRef.current = true;
+
+        // Connect the events listener to send events through the DevTools client
+        // This also automatically flushes any queued messages
+        eventsListener.connect(client.send, (message) => {
+          // The below allow filtering out events based on the configuration passed to the hook
+          const type = message.type;
+          if (isHttpEvent(type)) {
+            return isHttpInspectorEnabled;
+          }
+          if (isWebSocketEvent(type)) {
+            return isWebSocketInspectorEnabled;
+          }
+          if (isSSEEvent(type)) {
+            return isSSEInspectorEnabled;
+          }
+          return true;
+        });
       }),
       client.onMessage('network-disable', () => {
         isRecordingEnabledRef.current = false;
       }),
-      client.onMessage('set-overrides', (data) => {
-        overridesRegistry.setOverrides(data.overrides);
-      }),
-      
       client.onMessage('get-client-ui-settings', () => {
         sendClientUISettings();
       }),
@@ -74,103 +88,34 @@ export const useNetworkActivityDevTools = (
     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, 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]);
+  }, [
+    client,
+    showUrlAsName,
+    isHttpInspectorEnabled,
+    isWebSocketInspectorEnabled,
+    isSSEInspectorEnabled,
+  ]);
+
+  useHttpInspector(
+    client,
+    networkInspector.http,
+    isHttpInspectorEnabled,
+    isRecordingEnabledRef.current,
+  );
+
+  useWebSocketInspector(
+    client,
+    networkInspector.websocket,
+    isWebSocketInspectorEnabled,
+    isRecordingEnabledRef.current,
+  );
+
+  useSSEInspector(
+    client,
+    networkInspector.sse,
+    isSSEInspectorEnabled,
+    isRecordingEnabledRef.current,
+  );
 
   return client;
 };

package/src/react-native/useSSEInspector.ts

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import type { SSEInspector } from './sse/sse-inspector';
+import type { NetworkActivityDevToolsClient } from '../shared/client';
+
+export const useSSEInspector = (
+  client: NetworkActivityDevToolsClient | null,
+  sseInspector: SSEInspector,
+  isEnabled: boolean,
+  isRecordingEnabled: boolean
+) => {
+  useEffect(() => {
+    if (!client || !isEnabled) {
+      return;
+    }
+
+    const subscriptions = [
+      client.onMessage('network-enable', () => {
+        sseInspector.enable();
+      }),
+      client.onMessage('network-disable', () => {
+        sseInspector.disable();
+      }),
+    ];
+
+    // If recording was previously enabled, enable the inspector (hot reload)
+    if (isRecordingEnabled) {
+      sseInspector.enable();
+    }
+
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+      sseInspector.dispose();
+    };
+  }, [client, sseInspector, isEnabled, isRecordingEnabled]);
+};

package/src/react-native/useWebSocketInspector.ts

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import type { WebSocketInspector } from './websocket/websocket-inspector';
+import type { NetworkActivityDevToolsClient } from '../shared/client';
+
+export const useWebSocketInspector = (
+  client: NetworkActivityDevToolsClient | null,
+  websocketInspector: WebSocketInspector,
+  isEnabled: boolean,
+  isRecordingEnabled: boolean
+) => {
+  useEffect(() => {
+    if (!client || !isEnabled) {
+      return;
+    }
+
+    const subscriptions = [
+      client.onMessage('network-enable', () => {
+        websocketInspector.enable();
+      }),
+      client.onMessage('network-disable', () => {
+        websocketInspector.disable();
+      }),
+    ];
+
+    // If recording was previously enabled, enable the inspector (hot reload)
+    if (isRecordingEnabled) {
+      websocketInspector.enable();
+    }
+
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+      websocketInspector.dispose();
+    };
+  }, [client, websocketInspector, isEnabled, isRecordingEnabled]);
+};

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

@@ -4,20 +4,28 @@ import {
   WebSocketEvent,
   WebSocketEventMap,
 } from '../../shared/websocket-events';
+import type { Inspector } from '../inspector';
 
 type NanoEventsMap = {
   [K in keyof WebSocketEventMap]: (data: WebSocketEventMap[K]) => void;
 };
 
-export type WebSocketInspector = {
-  enable: () => void;
-  disable: () => void;
-  isEnabled: () => boolean;
-  dispose: () => void;
-  on: <TEventType extends keyof WebSocketEventMap>(
-    event: TEventType,
-    callback: (data: WebSocketEventMap[TEventType]) => void
-  ) => () => void;
+export type WebSocketInspector = Inspector<WebSocketEventMap>;
+
+export const WEBSOCKET_EVENTS: (keyof WebSocketEventMap)[] = [
+  'websocket-connect',
+  'websocket-open',
+  'websocket-close',
+  'websocket-message-sent',
+  'websocket-message-received',
+  'websocket-error',
+  'websocket-connection-status-changed',
+];
+
+export const isWebSocketEvent = (
+  type: string
+): type is keyof WebSocketEventMap => {
+  return (WEBSOCKET_EVENTS as readonly string[]).includes(type);
 };
 
 export const getWebSocketInspector = (): WebSocketInspector => {
@@ -169,7 +177,7 @@ export const getWebSocketInspector = (): WebSocketInspector => {
     },
     isEnabled: () => webSocketInterceptor.isInterceptorEnabled(),
     dispose: () => {
-      eventEmitter.events = {};
+      webSocketInterceptor.disableInterception();
       socketUrlMap.clear();
     },
     on: <TEventType extends keyof WebSocketEventMap>(

package/src/shared/client.ts

@@ -1,93 +1,9 @@
 import { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
 import { WebSocketEventMap } from './websocket-events';
 import { SSEEventMap } from './sse-events';
+import { HttpEventMap } from './http-events';
 
-export type HttpHeaders = Record<string, string | string[]>;
-export type XHRHeaders = NonNullable<XMLHttpRequest['responseHeaders']>;
-
-export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD';
-
-export type RequestId = string;
-export type Timestamp = number;
-
-export type XHRPostData =
-  | string
-  | Blob
-  | FormData
-  | ArrayBuffer
-  | ArrayBufferView
-  | unknown
-  | null
-  | undefined;
-
-export type RequestTextPostData = {
-  type: 'text';
-  value: string;
-};
-
-export type RequestBinaryPostData = {
-  type: 'binary';
-  value: {
-    size: number;
-    type?: string;
-    name?: string;
-  };
-};
-
-export type RequestFormDataPostData = {
-  type: 'form-data';
-  value: Record<string, RequestTextPostData | RequestBinaryPostData>;
-};
-
-export type RequestPostData =
-  | RequestTextPostData
-  | RequestFormDataPostData
-  | RequestBinaryPostData
-  | null
-  | undefined;
-
-export type Cookie = {
-  name: string;
-  value: string;
-  domain?: string;
-  path?: string;
-  expires?: string;
-  maxAge?: string;
-  secure?: boolean;
-  httpOnly?: boolean;
-  sameSite?: string;
-};
-
-export type Request = {
-  url: string;
-  method: HttpMethod;
-  headers: HttpHeaders;
-  postData?: RequestPostData;
-};
-
-export type Response = {
-  url: string;
-  status: number;
-  statusText: string;
-  headers: HttpHeaders;
-  contentType: string;
-  size: number | null;
-  responseTime: Timestamp;
-};
-
-export type Initiator = {
-  type: string;
-  url?: string;
-  lineNumber?: number;
-  columnNumber?: number;
-};
-
-export type ResourceType = 'XHR' | 'Fetch' | 'Other';
-
-export type RequestOverride = {
-  status?: number;
-  body?: string;
-};
+export * from './http-events';
 
 export type NetworkActivityClientUISettings = {
   showUrlAsName?: boolean;
@@ -103,60 +19,8 @@ export type NetworkActivityEventMap = {
   'client-ui-settings': {
     settings?: NetworkActivityClientUISettings;
   };
-
-  // Network request events
-  'request-sent': {
-    requestId: RequestId;
-    request: Request;
-    timestamp: Timestamp;
-    initiator: Initiator;
-    type: ResourceType;
-  };
-
-  'response-received': {
-    requestId: RequestId;
-    timestamp: Timestamp;
-    type: ResourceType;
-    response: Response;
-  };
-
-  'request-completed': {
-    requestId: RequestId;
-    timestamp: Timestamp;
-    duration: number;
-    size: number | null;
-    ttfb: number;
-  };
-
-  'request-failed': {
-    requestId: RequestId;
-    timestamp: Timestamp;
-    type: ResourceType;
-    error: string;
-    canceled: boolean;
-  };
-
-  'request-progress': {
-    requestId: RequestId;
-    timestamp: Timestamp;
-    loaded: number;
-    total: number;
-    lengthComputable: boolean;
-  };
-
-  'get-response-body': {
-    requestId: RequestId;
-  };
-
-  'response-body': {
-    requestId: RequestId;
-    body: string | null;
-  };
-
-  'set-overrides': {
-    overrides: [string, RequestOverride][];
-  };
-} & WebSocketEventMap &
+} & HttpEventMap &
+  WebSocketEventMap &
   SSEEventMap;
 
 export type NetworkActivityDevToolsClient =