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

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

@@ -0,0 +1,117 @@
+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 => {
+    const requestId = eventSource._xhr?._rozeniteRequestId;
+
+    if (!requestId) {
+      throw new Error(
+        'No request ID found for EventSource. This should never happen!'
+      );
+    }
+
+    return requestId;
+  };
+
+  return {
+    enable: () => {
+      SSEInterceptor.setOpenEventCallback((_, eventSource) => {
+        const sseEventSource = eventSource as EventSourceWithInternals;
+        const requestId = getRequestId(sseEventSource);
+        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);
+
+        const event: SSEEvent = {
+          type: 'sse-message',
+          requestId,
+          timestamp: Date.now(),
+          data: messageEvent.data || '',
+        };
+        eventEmitter.emit('sse-message', event);
+      });
+
+      SSEInterceptor.setErrorCallback((errorEvent, eventSource) => {
+        const sseEventSource = eventSource as EventSourceWithInternals;
+        const requestId = getRequestId(sseEventSource);
+
+        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);
+
+        const event: SSEEvent = {
+          type: 'sse-close',
+          requestId,
+          timestamp: Date.now(),
+        };
+        eventEmitter.emit('sse-close', event);
+      });
+
+      SSEInterceptor.enableInterception();
+    },
+    disable: () => {
+      SSEInterceptor.disableInterception();
+    },
+    isEnabled: () => SSEInterceptor.isInterceptorEnabled(),
+    dispose: () => {
+      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,162 @@
+import type EventSource from 'react-native-sse';
+import type {
+  MessageEvent,
+  ErrorEvent,
+  OpenEvent,
+  CloseEvent,
+  TimeoutEvent,
+  ExceptionEvent,
+} 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,
+  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 open method
+const originalOpen = eventSourceClass.prototype.open;
+
+/**
+ * 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('message', (event: MessageEvent) => {
+        if (messageCallback) {
+          messageCallback(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);
+    };
+
+    isInterceptorEnabled = true;
+  },
+
+  // Unpatch EventSource open method and remove the callbacks.
+  disableInterception() {
+    if (!isInterceptorEnabled) {
+      return;
+    }
+    isInterceptorEnabled = false;
+
+    // Restore original open method
+    eventSourceClass.prototype.open = originalOpen;
+
+    // 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,61 +1,15 @@
 import { useEffect } from 'react';
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
-import { NetworkEventMap } from '../types/network';
-
-let requestCounter = 0;
-
-function generateRequestId() {
-  return (++requestCounter).toString();
-}
-
-// Helper function to convert Headers object to plain object
-function headersToObject(headers: HeadersInit | Record<string, string>): Record<string, string> {
-  if (headers instanceof Headers) {
-    const obj: Record<string, string> = {};
-    headers.forEach((value: string, key: string) => {
-      obj[key] = value;
-    });
-    return obj;
-  } else if (Array.isArray(headers)) {
-    const obj: Record<string, string> = {};
-    headers.forEach(([key, value]) => {
-      obj[key] = value;
-    });
-    return obj;
-  }
-  return headers as Record<string, string>;
-}
-
-// Helper function to get request info from fetch input
-function getRequestInfo(input: RequestInfo | URL, init?: RequestInit) {
-  let url: string;
-  let method: string;
-  let headers: Record<string, string>;
-  let body: unknown;
-
-  if (typeof input === 'string') {
-    url = input;
-    method = init?.method || 'GET';
-    headers = headersToObject(init?.headers || {});
-    body = init?.body || undefined;
-  } else if (input instanceof Request) {
-    url = input.url;
-    method = input.method;
-    headers = headersToObject(input.headers);
-    body = input.body || undefined;
-  } else {
-    // URL object
-    url = input.toString();
-    method = init?.method || 'GET';
-    headers = headersToObject(init?.headers || {});
-    body = init?.body || undefined;
-  }
-
-  return { url, method, headers, body };
-}
+import { getNetworkInspector } from './http/network-inspector';
+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 = () => {
-  const client = useRozeniteDevToolsClient<NetworkEventMap>({
+  const client = useRozeniteDevToolsClient<NetworkActivityEventMap>({
     pluginId: '@rozenite/network-activity-plugin',
   });
 
@@ -64,172 +18,81 @@ export const useNetworkActivityDevTools = () => {
       return;
     }
 
-    const originalFetch = window.fetch.bind(window);
+    const networkInspector = getNetworkInspector(client);
 
-    const sendCdpEvent = (method: keyof NetworkEventMap, params: NetworkEventMap[keyof NetworkEventMap]) => {
-      client.send(method, params);
+    return () => {
+      networkInspector.dispose();
     };
+  }, [client]);
 
-    window.fetch = async function(input: RequestInfo | URL, init?: RequestInit) {
-      const requestId = generateRequestId();
-      const requestInfo = getRequestInfo(input, init);
-      const timestamp = Date.now() / 1000;
-      const wallTime = timestamp;
-
-      sendCdpEvent('Network.requestWillBeSent', {
-        requestId,
-        loaderId: requestId,
-        documentURL: '',
-        request: {
-          url: requestInfo.url,
-          method: requestInfo.method,
-          headers: requestInfo.headers,
-          postData: requestInfo.body,
-          hasPostData: !!requestInfo.body
-        },
-        timestamp,
-        wallTime,
-        initiator: { 
-          type: 'script',
-          stack: {
-            callFrames: [
-              {
-                functionName: 'fetch',
-                scriptId: '1',
-                url: '',
-                lineNumber: 1,
-                columnNumber: 1
-              }
-            ]
-          }
-        },
-        redirectHasExtraInfo: false,
-        redirectResponse: null,
-        referrerPolicy: 'no-referrer',
-        type: 'Fetch',
-        frameId: '1',
-        hasUserGesture: false
-      });
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
 
-      sendCdpEvent('Network.requestWillBeSentExtraInfo', {
-        requestId,
-        blockedCookies: [],
-        headers: requestInfo.headers,
-        connectTiming: { 
-          requestTime: timestamp 
-        },
-        clientSecurityState: {
-          initiatorIsSecureContext: false,
-          initiatorIPAddressSpace: 'Public',
-          privateNetworkRequestPolicy: 'Allow'
-        },
-        siteHasCookieInOtherPartition: false
+    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();
+    });
 
-      let response;
-      try {
-        response = await originalFetch(input, init);
-
-        // Get response headers
-        const responseHeaders: Record<string, string> = {};
-        response.headers.forEach((value: string, key: string) => {
-          responseHeaders[key] = value;
-        });
-
-        const contentType = response.headers.get('content-type') || '';
-        const contentLength = response.headers.get('content-length');
-        const encodedDataLength = contentLength ? parseInt(contentLength, 10) : 0;
-        
-        // Get decoded body size (actual response size)
-        let decodedBodySize = encodedDataLength;
-        try {
-          const responseClone = response.clone();
-          const arrayBuffer = await responseClone.arrayBuffer();
-          decodedBodySize = arrayBuffer.byteLength;
-        } catch {
-          // Fallback to content-length if we can't read the response
-          decodedBodySize = encodedDataLength;
-        }
-
-        sendCdpEvent('Network.responseReceived', {
-          requestId,
-          loaderId: requestId,
-          timestamp: Date.now() / 1000,
-          type: 'Fetch',
-          response: {
-            url: requestInfo.url,
-            status: response.status,
-            statusText: response.statusText,
-            headers: responseHeaders,
-            mimeType: contentType,
-            requestHeaders: requestInfo.headers,
-            requestHeadersText: undefined,
-            connectionReused: false,
-            connectionId: 0,
-            remoteIPAddress: undefined,
-            remotePort: undefined,
-            protocol: undefined,
-            securityState: 'unknown',
-            encodedDataLength,
-            timing: {
-              requestTime: timestamp,
-              proxyStart: -1,
-              proxyEnd: -1,
-              dnsStart: -1,
-              dnsEnd: -1,
-              connectStart: -1,
-              connectEnd: -1,
-              sslStart: -1,
-              sslEnd: -1,
-              workerStart: -1,
-              workerReadyStart: -1,
-              workerReadyEnd: -1,
-              sendStart: timestamp,
-              sendEnd: timestamp,
-              pushStart: -1,
-              pushEnd: -1,
-              receiveHeadersEnd: Date.now() / 1000
-            },
-            responseTime: Date.now() / 1000,
-            fromDiskCache: false,
-            fromServiceWorker: false,
-            fromPrefetchCache: false,
-            encodedBodySize: encodedDataLength,
-            decodedBodySize: decodedBodySize,
-            headersText: undefined,
-            serviceWorkerResponseSource: undefined,
-            responseSource: 'network',
-            statusCode: response.status
-          },
-          hasExtraInfo: false
-        });
-
-        sendCdpEvent('Network.loadingFinished', {
-          requestId,
-          timestamp: Date.now() / 1000,
-          encodedDataLength,
-          shouldReportCorbBlocking: false
-        });
-
-        return response;
-      } catch (err) {
-        sendCdpEvent('Network.loadingFailed', {
-          requestId,
-          timestamp: Date.now() / 1000,
-          type: 'Fetch',
-          errorText: err instanceof Error ? err.message : 'Unknown error',
-          canceled: false,
-          blockedReason: undefined
-        });
-        
-        throw err;
-      }
+    client.onMessage('network-disable', () => {
+      websocketInspector.disable();
+    });
+
+    return () => {
+      // Subscriptions will be disposed by the inspector
+      websocketInspector.dispose();
     };
+  }, [client]);
+
+  useEffect(() => {
+    if (!client) {
+      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();
+    });
 
     return () => {
-      window.fetch = originalFetch;
+      // Subscriptions will be disposed by the inspector
+      sseInspector.dispose();
     };
   }, [client]);
 
   return client;
-};
+};

package/src/react-native/utils.ts

@@ -0,0 +1,43 @@
+import { getHttpHeaderValue } from '../ui/utils/getHttpHeaderValue';
+
+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 = getHttpHeaderValue(responseHeaders || {}, 'content-type');
+
+  if (contentType) {
+    return contentType.split(';')[0].trim();
+  }
+
+  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';
+  }
+};