@rozenite/network-activity-plugin 1.0.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozenite/network-activity-plugin",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Network Activity for Rozenite.",
   "type": "module",
   "main": "./dist/react-native.cjs",
@@ -8,7 +8,7 @@
   "types": "./dist/react-native.d.ts",
   "dependencies": {
     "nanoevents": "^9.1.0",
-    "@rozenite/plugin-bridge": "1.0.0"
+    "@rozenite/plugin-bridge": "1.2.0"
   },
   "devDependencies": {
     "@floating-ui/react": "^0.26.0",
@@ -36,8 +36,8 @@
     "zustand": "^5.0.6",
     "@types/react": "~18.3.23",
     "@types/react-dom": "~18.3.1",
-    "@rozenite/vite-plugin": "1.0.0",
-    "rozenite": "1.0.0"
+    "rozenite": "1.2.0",
+    "@rozenite/vite-plugin": "1.2.0"
   },
   "peerDependencies": {
     "react-native-sse": "*"

package/react-native.ts

@@ -1,4 +1,9 @@
 export let useNetworkActivityDevTools: typeof import('./src/react-native/useNetworkActivityDevTools').useNetworkActivityDevTools;
+export let withOnBootNetworkActivityRecording: typeof import('./src/react-native/boot-recording').withOnBootNetworkActivityRecording;
+
+// Export types for user-facing configuration
+export type { NetworkActivityDevToolsConfig } from './src/react-native/config';
+export type { BootRecordingOptions } from './src/react-native/boot-recording';
 
 const isWeb =
   typeof window !== 'undefined' && window.navigator.product !== 'ReactNative';
@@ -8,6 +13,9 @@ const isServer = typeof window === 'undefined';
 if (isDev && !isWeb && !isServer) {
   useNetworkActivityDevTools =
     require('./src/react-native/useNetworkActivityDevTools').useNetworkActivityDevTools;
+  withOnBootNetworkActivityRecording =
+    require('./src/react-native/boot-recording').withOnBootNetworkActivityRecording;
 } else {
   useNetworkActivityDevTools = () => null;
+  withOnBootNetworkActivityRecording = (options: any) => null;
 }

package/src/react-native/boot-recording.ts

@@ -0,0 +1,90 @@
+import { NetworkActivityEventMap } from '../shared/client';
+import { createEventsListener, EventsListenerOptions } from './events-listener';
+import { getNetworkInspector, NetworkInspector } from './network-inspector';
+import { validateConfig, type NetworkInspectorConfig } from './config';
+
+type InspectorsConfiguration = {
+  eventsListener: ReturnType<
+    typeof createEventsListener<NetworkActivityEventMap>
+  >;
+  networkInspector: NetworkInspector;
+};
+
+let inspectorsConfig: InspectorsConfiguration;
+
+let bootRecordingEnabled = false;
+
+export type BootRecordingOptions = NetworkInspectorConfig &
+  EventsListenerOptions & {
+    /**
+     * Enable queuing of events during boot before DevTools connects.
+     * When true, network activity is captured and queued until DevTools is ready.
+     * When false, nothing is queued and inspectors are not even set up.
+     * @default true
+     */
+    enableBootRecording?: boolean;
+  };
+
+/**
+ *
+ * @internal
+ */
+export const createNetworkInspectorsConfiguration = (
+  options?: BootRecordingOptions,
+) => {
+  if (inspectorsConfig) {
+    return inspectorsConfig;
+  }
+
+  bootRecordingEnabled = options?.enableBootRecording ?? true;
+  const maxQueueSize = options?.maxQueueSize ?? 200;
+  const inspectors = {
+    http: true,
+    websocket: true,
+    sse: true,
+    ...options?.inspectors,
+  };
+
+  validateConfig({ inspectors });
+
+  const eventsListener = createEventsListener<NetworkActivityEventMap>();
+  eventsListener.setMaxQueueSize(maxQueueSize);
+
+  const networkInspector = getNetworkInspector();
+  networkInspector.setup(eventsListener);
+
+  if (bootRecordingEnabled) {
+    eventsListener.enableQueuing();
+    networkInspector.enable(inspectors);
+  }
+
+  inspectorsConfig = {
+    eventsListener,
+    networkInspector,
+  };
+
+  return inspectorsConfig;
+};
+
+/**
+ * Enable network activity recording during app boot, before DevTools connects.
+ * Call this at the root of your app to capture early network requests.
+ *
+ * @example
+ * ```tsx
+ * import { withOnBootNetworkActivityRecording } from '@rozenite/network-activity-plugin';
+ *
+ * // At app entry point, before any network requests
+ * withOnBootNetworkActivityRecording();
+ *
+ * function App() {
+ *   useNetworkActivityDevTools();
+ *   // ...
+ * }
+ * ```
+ */
+export const withOnBootNetworkActivityRecording = (
+  options?: BootRecordingOptions,
+) => {
+  createNetworkInspectorsConfiguration(options);
+};

package/src/react-native/config.ts

@@ -1,14 +1,19 @@
 export type InspectorType = 'http' | 'websocket' | 'sse';
 
-export type NetworkActivityDevToolsConfig = {
+export type InspectorsConfig = {
+  [key in InspectorType]?: boolean;
+};
+
+export type NetworkInspectorConfig = {
   /**
    * Specifies which network inspectors are enabled.
    * Set to `false` to disable monitoring for a specific type of network traffic.
    * @default { http: true, websocket: true, sse: true }
    */
-  inspectors?: {
-    [key in InspectorType]?: boolean;
-  };
+  inspectors?: InspectorsConfig;
+};
+
+export type NetworkActivityDevToolsConfig = NetworkInspectorConfig & {
   clientUISettings?: {
     /**
      * If true, display the entire relative URL as the request name in the UI instead of only the last path segment.

package/src/react-native/events-listener.ts

@@ -0,0 +1,102 @@
+type QueuedMessage<TEventMap extends Record<string, unknown>> = {
+  type: keyof TEventMap;
+  data: TEventMap[keyof TEventMap];
+};
+
+type SendFunction<TEventMap extends Record<string, unknown>> = <
+  K extends keyof TEventMap,
+>(
+  type: K,
+  data: TEventMap[K],
+) => void;
+
+/**
+ * Generic events listener that queues messages until a send function is registered.
+ * This allows capturing events before the DevTools client connects and so be boot compliant.
+ */
+export class EventsListener<TEventMap extends Record<string, unknown>> {
+  private messageQueue: QueuedMessage<TEventMap>[] = [];
+  private sendFunction: SendFunction<TEventMap> | null = null;
+  private maxQueueSize = 200;
+  private isQueuing = false;
+
+  public setMaxQueueSize(size: number): void {
+    this.maxQueueSize = size;
+  }
+
+  /**
+   * Enable queuing mode to capture events before client is connected
+   */
+  public enableQueuing(): void {
+    this.isQueuing = true;
+  }
+
+  /**
+   * Connect the actual send function and automatically flush queued messages
+   */
+  public connect(
+    sendFn: SendFunction<TEventMap>,
+    filterFn?: (message: QueuedMessage<TEventMap>) => boolean
+  ): void {
+    this.sendFunction = sendFn;
+    this.isQueuing = false;
+    this.flushQueue(filterFn);
+  }
+
+  public isInQueueMode(): boolean {
+    return this.isQueuing;
+  }
+
+  /**
+   * Send a message (queued if not connected, sent directly if connected)
+   */
+  public send<K extends keyof TEventMap>(type: K, data: TEventMap[K]): void {
+    if (this.isQueuing) {
+      this.enqueueMessage({ type, data });
+    } else if (this.sendFunction) {
+      this.sendFunction(type, data);
+    }
+  }
+
+  private enqueueMessage(message: QueuedMessage<TEventMap>): void {
+    if (this.messageQueue.length >= this.maxQueueSize) {
+      this.messageQueue.shift();
+    }
+
+    this.messageQueue.push(message);
+  }
+
+  private flushQueue(
+    filterFn?: (message: QueuedMessage<TEventMap>) => boolean
+  ): void {
+    if (!this.sendFunction) {
+      return;
+    }
+
+    while (this.messageQueue.length > 0) {
+      const message = this.messageQueue.shift();
+      if (message) {
+        if (filterFn && !filterFn(message)) {
+          continue;
+        }
+        this.sendFunction(message.type, message.data);
+      }
+    }
+  }
+}
+
+export type EventsListenerOptions = {
+  /**
+   * Maximum number of messages to queue before DevTools connects.
+   * @default 200
+   */
+  maxQueueSize?: number;
+};
+
+/**
+ * Create a new events listener instance for a specific event map.
+ * This factory can be used to create listeners for different protocols or plugins.
+ */
+export const createEventsListener = <TEventMap extends Record<string, unknown>>(): EventsListener<TEventMap> => {
+  return new EventsListener<TEventMap>();
+};

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

@@ -0,0 +1,174 @@
+import { createNanoEvents } from 'nanoevents';
+import { getNetworkRequestsRegistry } from './network-requests-registry';
+import { XHRInterceptor } from './xhr-interceptor';
+import { getRequestBody, getResponseSize, getInitiatorFromStack, setupRequestOverride } from './http-utils';
+import { applyReactNativeResponseHeadersLogic } from '../../utils/applyReactNativeResponseHeadersLogic';
+import { getContentType } from '../utils';
+import { getOverridesRegistry } from './overrides-registry';
+import type { HttpEventMap, HttpMethod } from '../../shared/http-events';
+import type { Inspector } from '../inspector';
+
+// HTTP-specific event map for the inspector
+export type { HttpEventMap };
+
+export const HTTP_EVENTS: (keyof HttpEventMap)[] = [
+  'request-sent',
+  'response-received',
+  'request-completed',
+  'request-failed',
+  'request-progress',
+];
+
+export const isHttpEvent = (type: string): type is keyof HttpEventMap => {
+  return (HTTP_EVENTS as readonly string[]).includes(type);
+};
+
+type NanoEventsMap = {
+  [K in keyof HttpEventMap]: (data: HttpEventMap[K]) => void;
+};
+
+export type HTTPInspector = Inspector<HttpEventMap> & {
+  getNetworkRequestsRegistry: () => ReturnType<typeof getNetworkRequestsRegistry>;
+};
+
+const READY_STATE_HEADERS_RECEIVED = 2;
+
+export const getHTTPInspector = (): HTTPInspector => {
+  const eventEmitter = createNanoEvents<NanoEventsMap>();
+  const networkRequestsRegistry = getNetworkRequestsRegistry();
+
+  const overridesRegistry = getOverridesRegistry();
+  XHRInterceptor.setOverrideCallback((request) =>
+    setupRequestOverride(overridesRegistry, request)
+  );
+  
+  return {
+    enable: () => {
+      if (XHRInterceptor.isInterceptorEnabled()) return;
+
+      XHRInterceptor.disableInterception();
+
+      XHRInterceptor.setSendCallback((data, request) => {
+        const initiator = getInitiatorFromStack();
+        const sendTime = Date.now();
+        const requestId = `req_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`;
+
+        request._rozeniteRequestId = requestId;
+        networkRequestsRegistry.addEntry(requestId, request);
+
+        let ttfb = 0;
+
+        eventEmitter.emit('request-sent', {
+          requestId: requestId,
+          timestamp: sendTime,
+          request: {
+            url: request._url as string,
+            method: request._method as HttpMethod,
+            headers: request._headers,
+            postData: getRequestBody(data),
+          },
+          type: 'XHR',
+          initiator,
+        });
+
+        request.addEventListener('readystatechange', () => {
+          if (request.readyState === READY_STATE_HEADERS_RECEIVED) {
+            ttfb = Date.now() - sendTime;
+          }
+        });
+
+        request.addEventListener('progress', (event) => {
+          eventEmitter.emit('request-progress', {
+            requestId: requestId,
+            timestamp: Date.now(),
+            loaded: event.loaded,
+            total: event.total,
+            lengthComputable: event.lengthComputable,
+          });
+        });
+
+        request.addEventListener('load', () => {
+          eventEmitter.emit('response-received', {
+            requestId: requestId,
+            timestamp: Date.now(),
+            type: 'XHR',
+            response: {
+              url: request._url as string,
+              status: request.status,
+              statusText: request.statusText,
+              headers: applyReactNativeResponseHeadersLogic(
+                request.responseHeaders || {},
+              ),
+              contentType: getContentType(request),
+              size: getResponseSize(request),
+              responseTime: Date.now(),
+            },
+          });
+        });
+
+        request.addEventListener('loadend', () => {
+          eventEmitter.emit('request-completed', {
+            requestId: requestId,
+            timestamp: Date.now(),
+            duration: Date.now() - sendTime,
+            size: getResponseSize(request),
+            ttfb,
+          });
+        });
+
+        request.addEventListener('error', () => {
+          eventEmitter.emit('request-failed', {
+            requestId: requestId,
+            timestamp: Date.now(),
+            type: 'XHR',
+            error: 'Failed',
+            canceled: false,
+          });
+        });
+
+        request.addEventListener('abort', () => {
+          eventEmitter.emit('request-failed', {
+            requestId: requestId,
+            timestamp: Date.now(),
+            type: 'XHR',
+            error: 'Aborted',
+            canceled: true,
+          });
+        });
+
+        request.addEventListener('timeout', () => {
+          eventEmitter.emit('request-failed', {
+            requestId: requestId,
+            timestamp: Date.now(),
+            type: 'XHR',
+            error: 'Timeout',
+            canceled: false,
+          });
+        });
+      });
+
+      XHRInterceptor.enableInterception();
+    },
+
+    disable: () => {
+      XHRInterceptor.disableInterception();
+      networkRequestsRegistry.clear();
+    },
+
+    isEnabled: () => {
+      return XHRInterceptor.isInterceptorEnabled();
+    },
+
+    dispose: () => {
+      XHRInterceptor.disableInterception();
+      networkRequestsRegistry.clear();
+    },
+
+    getNetworkRequestsRegistry: () => networkRequestsRegistry,
+
+    on: <TEventType extends keyof HttpEventMap>(
+      event: TEventType,
+      callback: (data: HttpEventMap[TEventType]) => void
+    ) => eventEmitter.on(event, callback as NanoEventsMap[TEventType]),
+  };
+};

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

@@ -0,0 +1,217 @@
+import {
+  XHRPostData,
+  RequestPostData,
+  RequestTextPostData,
+  RequestBinaryPostData,
+  RequestFormDataPostData,
+} from '../../shared/client';
+import { safeStringify } from '../../utils/safeStringify';
+import { getStringSizeInBytes } from '../../utils/getStringSizeInBytes';
+import {
+  isBlob,
+  isArrayBuffer,
+  isFormData,
+  isNullOrUndefined,
+} from '../../utils/typeChecks';
+import { getContentType } from '../utils';
+import { getBlobName } from '../utils/getBlobName';
+import { getFormDataEntries } from '../utils/getFormDataEntries';
+import type { OverridesRegistry } from './overrides-registry';
+
+/**
+ * Utility functions for tracking HTTP requests
+ */
+
+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;
+    },
+    {},
+  ),
+});
+
+export const getRequestBody = (body: XHRPostData): RequestPostData => {
+  if (isNullOrUndefined(body)) {
+    return body;
+  }
+
+  if (isBlob(body)) {
+    return getBinaryPostData(body);
+  }
+
+  if (isArrayBuffer(body)) {
+    return getArrayBufferPostData(body);
+  }
+
+  if (isFormData(body)) {
+    return getFormDataPostData(body);
+  }
+
+  return getTextPostData(body);
+};
+
+export 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;
+  }
+};
+
+export const getResponseBody = async (
+  request: XMLHttpRequest,
+): Promise<string | null> => {
+  const responseType = request.responseType;
+
+  // Response type is empty in certain cases, like when using axios.
+  if (responseType === '' || responseType === 'text') {
+    return request.responseText as string;
+  }
+
+  if (responseType === 'blob') {
+    // This may be a text blob.
+    const contentType = request.getResponseHeader('Content-Type') || '';
+
+    if (
+      contentType.startsWith('text/') ||
+      contentType.startsWith('application/json')
+    ) {
+      // It looks like a text blob, let's read it and forward it to the client.
+      return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+          resolve(reader.result as string);
+        };
+        reader.readAsText(request.response);
+      });
+    }
+  }
+
+  if (responseType === 'json') {
+    return safeStringify(request.response);
+  }
+
+  return null;
+};
+
+export const getInitiatorFromStack = (): {
+  type: string;
+  url?: string;
+  lineNumber?: number;
+  columnNumber?: number;
+} => {
+  try {
+    const stack = new Error().stack;
+    if (!stack) {
+      return { type: 'other' };
+    }
+
+    const line = stack.split('\n')[9];
+    const match = line.match(/at\s+(.+?)\s+\((.+?):(\d+):(\d+)\)/);
+    if (match) {
+      return {
+        type: 'script',
+        url: match[2],
+        lineNumber: parseInt(match[3]),
+        columnNumber: parseInt(match[4]),
+      };
+    }
+  } catch {
+    // Ignore stack parsing errors
+  }
+
+  return { type: 'other' };
+};
+
+/**
+ * Applies override body and status to XMLHttpRequest objects.
+ */
+export const setupRequestOverride = (
+  overridesRegistry: OverridesRegistry,
+  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;
+    }
+  });
+};

package/src/react-native/inspector.ts

@@ -0,0 +1,10 @@
+export interface Inspector<TEventMap> {
+  enable: () => void;
+  disable: () => void;
+  isEnabled: () => boolean;
+  dispose: () => void;
+  on<TEventType extends keyof TEventMap>(
+    type: TEventType,
+    callback: (event: TEventMap[TEventType]) => void
+  ): () => void;
+}