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

package/src/react-native/{network-inspector.ts → http/network-inspector.ts}

@@ -1,34 +1,10 @@
-import { NetworkActivityDevToolsClient } from '../shared/client';
-import { getHttpHeaderValue } from '../ui/utils/getHttpHeaderValue';
+import { HttpMethod, NetworkActivityDevToolsClient } from '../../shared/client';
+import { getContentType } from '../utils';
 import { getNetworkRequestsRegistry } from './network-requests-registry';
 import { XHRInterceptor } from './xhr-interceptor';
 
 const networkRequestsRegistry = getNetworkRequestsRegistry();
 
-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';
-  }
-};
-
 const getResponseSize = (request: XMLHttpRequest): number => {
   if (typeof request.response === 'object') {
     return request.response.size;
@@ -42,7 +18,8 @@ const getResponseBody = async (
 ): Promise<string | null> => {
   const responseType = request.responseType;
 
-  if (responseType === 'text') {
+  // Response type is empty in certain cases, like when using axios.
+  if (responseType === '' || responseType === 'text') {
     return request.responseText as string;
   }
 
@@ -117,6 +94,8 @@ export const getNetworkInspector = (
     const sendTime = Date.now();
 
     const requestId = generateRequestId();
+    request._rozeniteRequestId = requestId;
+
     const initiator = getInitiatorFromStack();
 
     networkRequestsRegistry.addEntry(requestId, request);
@@ -125,10 +104,10 @@ export const getNetworkInspector = (
 
     pluginClient.send('request-sent', {
       requestId: requestId,
-      timestamp: sendTime / 1000,
+      timestamp: sendTime,
       request: {
         url: request._url as string,
-        method: request._method as string,
+        method: request._method as HttpMethod,
         headers: request._headers,
         postData: data,
       },
@@ -145,7 +124,7 @@ export const getNetworkInspector = (
     request.addEventListener('load', () => {
       pluginClient.send('response-received', {
         requestId: requestId,
-        timestamp: Date.now() / 1000,
+        timestamp: Date.now(),
         type: 'XHR',
         response: {
           url: request._url as string,
@@ -154,7 +133,7 @@ export const getNetworkInspector = (
           headers: request.responseHeaders || {},
           contentType: getContentType(request),
           size: getResponseSize(request),
-          responseTime: Date.now() / 1000,
+          responseTime: Date.now(),
         },
       });
     });
@@ -162,7 +141,7 @@ export const getNetworkInspector = (
     request.addEventListener('loadend', () => {
       pluginClient.send('request-completed', {
         requestId: requestId,
-        timestamp: Date.now() / 1000,
+        timestamp: Date.now(),
         duration: Date.now() - sendTime,
         size: getResponseSize(request),
         ttfb,
@@ -172,7 +151,7 @@ export const getNetworkInspector = (
     request.addEventListener('error', () => {
       pluginClient.send('request-failed', {
         requestId: requestId,
-        timestamp: Date.now() / 1000,
+        timestamp: Date.now(),
         type: 'XHR',
         error: 'Failed',
         canceled: false,
@@ -182,7 +161,7 @@ export const getNetworkInspector = (
     request.addEventListener('abort', () => {
       pluginClient.send('request-failed', {
         requestId: requestId,
-        timestamp: Date.now() / 1000,
+        timestamp: Date.now(),
         type: 'XHR',
         error: 'Aborted',
         canceled: true,

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

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,7 +1,12 @@
 import { useEffect } from 'react';
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
-import { getNetworkInspector } from './network-inspector';
+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<NetworkActivityEventMap>({
@@ -20,5 +25,74 @@ export const useNetworkActivityDevTools = () => {
     };
   }, [client]);
 
+  useEffect(() => {
+    if (!client) {
+      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();
+    });
+
+    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 () => {
+      // 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';
+  }
+};