@rozenite/network-activity-plugin 1.7.0-rc.2 → 1.8.0

package/src/react-native/nitro-fetch/__tests__/nitro-network-inspector.test.ts

@@ -0,0 +1,198 @@
+import { describe, expect, it } from 'vitest';
+import { createNitroNetworkInspector } from '../nitro-network-inspector';
+
+describe('nitro network inspector', () => {
+  it('translates nitro websocket updates with direct string ids and no duplicate messages', () => {
+    const listeners = new Set<(entry: any) => void>();
+    const inspector = createNitroNetworkInspector(() => ({
+      NetworkInspector: {
+        enable() {},
+        disable() {},
+        isEnabled() {
+          return true;
+        },
+        onEntry(callback) {
+          listeners.add(callback);
+          return () => listeners.delete(callback);
+        },
+        getEntries() {
+          return [];
+        },
+      },
+    }));
+
+    const events: Array<{ type: string; socketId?: string; data?: string }> =
+      [];
+    inspector.on('websocket-connect', (event) => {
+      events.push({ type: event.type, socketId: event.socketId });
+    });
+    inspector.on('websocket-open', (event) => {
+      events.push({ type: event.type, socketId: event.socketId });
+    });
+    inspector.on('websocket-message-sent', (event) => {
+      events.push({
+        type: event.type,
+        socketId: event.socketId,
+        data: event.data,
+      });
+    });
+    inspector.on('websocket-message-received', (event) => {
+      events.push({
+        type: event.type,
+        socketId: event.socketId,
+        data: event.data,
+      });
+    });
+    inspector.on('websocket-close', (event) => {
+      events.push({ type: event.type, socketId: event.socketId });
+    });
+
+    inspector.enable();
+
+    const emit = (entry: any) => {
+      for (const listener of listeners) {
+        listener(entry);
+      }
+    };
+
+    emit({
+      id: 'nitro-ws-1',
+      type: 'websocket',
+      url: 'wss://example.com/socket',
+      protocols: ['chat'],
+      requestHeaders: [],
+      startTime: 10,
+      endTime: 0,
+      duration: 0,
+      readyState: 'OPEN',
+      messages: [
+        {
+          direction: 'sent',
+          data: 'ping',
+          size: 4,
+          isBinary: false,
+          timestamp: 11,
+        },
+      ],
+      messagesSent: 1,
+      messagesReceived: 0,
+      bytesSent: 4,
+      bytesReceived: 0,
+    });
+
+    emit({
+      id: 'nitro-ws-1',
+      type: 'websocket',
+      url: 'wss://example.com/socket',
+      protocols: ['chat'],
+      requestHeaders: [],
+      startTime: 10,
+      endTime: 0,
+      duration: 0,
+      readyState: 'OPEN',
+      messages: [
+        {
+          direction: 'sent',
+          data: 'ping',
+          size: 4,
+          isBinary: false,
+          timestamp: 11,
+        },
+      ],
+      messagesSent: 1,
+      messagesReceived: 0,
+      bytesSent: 4,
+      bytesReceived: 0,
+    });
+
+    emit({
+      id: 'nitro-ws-1',
+      type: 'websocket',
+      url: 'wss://example.com/socket',
+      protocols: ['chat'],
+      requestHeaders: [],
+      startTime: 10,
+      endTime: 15,
+      duration: 5,
+      readyState: 'CLOSED',
+      messages: [
+        {
+          direction: 'sent',
+          data: 'ping',
+          size: 4,
+          isBinary: false,
+          timestamp: 11,
+        },
+        {
+          direction: 'received',
+          data: 'pong',
+          size: 4,
+          isBinary: false,
+          timestamp: 12,
+        },
+      ],
+      messagesSent: 1,
+      messagesReceived: 1,
+      bytesSent: 4,
+      bytesReceived: 4,
+      closeCode: 1000,
+      closeReason: 'done',
+    });
+
+    expect(events).toEqual([
+      { type: 'websocket-connect', socketId: 'nitro-ws-1' },
+      { type: 'websocket-open', socketId: 'nitro-ws-1' },
+      { type: 'websocket-message-sent', socketId: 'nitro-ws-1', data: 'ping' },
+      {
+        type: 'websocket-message-received',
+        socketId: 'nitro-ws-1',
+        data: 'pong',
+      },
+      { type: 'websocket-close', socketId: 'nitro-ws-1' },
+    ]);
+  });
+
+  it('caches nitro http response bodies for later lookup', () => {
+    const listeners = new Set<(entry: any) => void>();
+    const inspector = createNitroNetworkInspector(() => ({
+      NetworkInspector: {
+        enable() {},
+        disable() {},
+        isEnabled() {
+          return true;
+        },
+        onEntry(callback) {
+          listeners.add(callback);
+          return () => listeners.delete(callback);
+        },
+        getEntries() {
+          return [];
+        },
+      },
+    }));
+
+    inspector.enable();
+
+    for (const listener of listeners) {
+      listener({
+        id: 'nitro-http-1',
+        type: 'http',
+        url: 'https://example.com/api',
+        method: 'GET',
+        requestHeaders: [],
+        requestBody: undefined,
+        requestBodySize: 0,
+        status: 200,
+        statusText: 'OK',
+        responseHeaders: [{ key: 'content-type', value: 'application/json' }],
+        responseBody: '{"ok":true}',
+        responseBodySize: 11,
+        startTime: 10,
+        endTime: 20,
+        duration: 10,
+      });
+    }
+
+    expect(inspector.getResponseBody('nitro-http-1')).toBe('{"ok":true}');
+  });
+});

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

@@ -0,0 +1,403 @@
+import { createNanoEvents } from 'nanoevents';
+import type {
+  HttpEventMap,
+  HttpHeaders,
+  HttpMethod,
+  RequestPostData,
+} from '../../shared/client';
+import type { WebSocketEventMap } from '../../shared/websocket-events';
+import type { Inspector } from '../inspector';
+
+type NitroHttpHeader = {
+  key: string;
+  value: string;
+};
+
+type NitroHttpEntry = {
+  id: string;
+  type: 'http';
+  url: string;
+  method: string;
+  requestHeaders: NitroHttpHeader[];
+  requestBody?: string;
+  requestBodySize: number;
+  status: number;
+  statusText: string;
+  responseHeaders: NitroHttpHeader[];
+  responseBody?: string;
+  responseBodySize: number;
+  startTime: number;
+  endTime: number;
+  duration: number;
+  error?: string;
+};
+
+type NitroWebSocketMessage = {
+  direction: 'sent' | 'received';
+  data: string;
+  size: number;
+  isBinary: boolean;
+  timestamp: number;
+};
+
+type NitroWebSocketEntry = {
+  id: string;
+  type: 'websocket';
+  url: string;
+  protocols: string[];
+  requestHeaders: NitroHttpHeader[];
+  startTime: number;
+  endTime: number;
+  duration: number;
+  readyState: string;
+  messages: NitroWebSocketMessage[];
+  messagesSent: number;
+  messagesReceived: number;
+  bytesSent: number;
+  bytesReceived: number;
+  closeCode?: number;
+  closeReason?: string;
+  error?: string;
+};
+
+type NitroInspectorEntry = NitroHttpEntry | NitroWebSocketEntry;
+
+type NitroModule = {
+  NetworkInspector: {
+    enable: () => void;
+    disable: () => void;
+    isEnabled: () => boolean;
+    onEntry: (callback: (entry: NitroInspectorEntry) => void) => () => void;
+    getEntries: () => ReadonlyArray<NitroInspectorEntry>;
+  };
+};
+
+type NitroNetworkEventMap = Pick<
+  HttpEventMap & WebSocketEventMap,
+  | 'request-sent'
+  | 'response-received'
+  | 'request-completed'
+  | 'request-failed'
+  | 'websocket-connect'
+  | 'websocket-open'
+  | 'websocket-close'
+  | 'websocket-message-sent'
+  | 'websocket-message-received'
+  | 'websocket-error'
+>;
+
+type NanoEventsMap = {
+  [K in keyof NitroNetworkEventMap]: (data: NitroNetworkEventMap[K]) => void;
+};
+
+export type NitroNetworkInspector = Inspector<NitroNetworkEventMap> & {
+  getResponseBody: (requestId: string) => string | null;
+};
+
+export const NITRO_NETWORK_EVENTS: (keyof NitroNetworkEventMap)[] = [
+  'request-sent',
+  'response-received',
+  'request-completed',
+  'request-failed',
+  'websocket-connect',
+  'websocket-open',
+  'websocket-close',
+  'websocket-message-sent',
+  'websocket-message-received',
+  'websocket-error',
+];
+
+const loadNitroModule = (): NitroModule | null => {
+  try {
+    return require('react-native-nitro-fetch') as NitroModule;
+  } catch {
+    return null;
+  }
+};
+
+const timestampOrigin =
+  typeof performance !== 'undefined' &&
+  typeof performance.timeOrigin === 'number'
+    ? performance.timeOrigin
+    : Date.now() - performance.now();
+
+const toEpochTime = (timestamp: number) =>
+  Math.round(timestampOrigin + timestamp);
+
+const toHeaders = (headers: NitroHttpHeader[]): HttpHeaders => {
+  return headers.reduce<HttpHeaders>((acc, { key, value }) => {
+    const existing = acc[key];
+    if (existing === undefined) {
+      acc[key] = value;
+      return acc;
+    }
+
+    acc[key] = Array.isArray(existing)
+      ? [...existing, value]
+      : [existing, value];
+    return acc;
+  }, {});
+};
+
+const toPostData = (body?: string): RequestPostData => {
+  if (body == null) {
+    return undefined;
+  }
+
+  return {
+    type: 'text',
+    value: body,
+  };
+};
+
+const cloneEntry = <TEntry extends NitroInspectorEntry>(
+  entry: TEntry,
+): TEntry => {
+  return JSON.parse(JSON.stringify(entry)) as TEntry;
+};
+
+const getContentType = (headers: NitroHttpHeader[]) => {
+  return (
+    headers.find((header) => header.key.toLowerCase() === 'content-type')
+      ?.value ?? 'text/plain'
+  );
+};
+
+const normalizeReadyState = (readyState: string) => readyState.toUpperCase();
+
+export const createNitroNetworkInspector = (
+  getNitroModule: () => NitroModule | null = loadNitroModule,
+): NitroNetworkInspector => {
+  const eventEmitter = createNanoEvents<NanoEventsMap>();
+  const previousEntries = new Map<string, NitroInspectorEntry>();
+  const responseBodies = new Map<string, string | null>();
+  let nitroModule: NitroModule | null = null;
+  let unsubscribe: (() => void) | null = null;
+
+  const emitHttpEvents = (entry: NitroHttpEntry, previous?: NitroHttpEntry) => {
+    if (!previous) {
+      eventEmitter.emit('request-sent', {
+        requestId: entry.id,
+        timestamp: toEpochTime(entry.startTime),
+        request: {
+          url: entry.url,
+          method: entry.method as HttpMethod,
+          headers: toHeaders(entry.requestHeaders),
+          postData: toPostData(entry.requestBody),
+        },
+        initiator: { type: 'other' },
+        type: 'Fetch',
+        source: 'nitro',
+      });
+    }
+
+    if (entry.error) {
+      if (!previous || previous.error !== entry.error) {
+        eventEmitter.emit('request-failed', {
+          requestId: entry.id,
+          timestamp: toEpochTime(entry.endTime || entry.startTime),
+          type: 'Fetch',
+          error: entry.error,
+          canceled: entry.error === 'Request canceled',
+          source: 'nitro',
+        });
+      }
+      return;
+    }
+
+    const didResponseChange =
+      !previous ||
+      previous.status !== entry.status ||
+      previous.statusText !== entry.statusText ||
+      previous.responseBodySize !== entry.responseBodySize ||
+      previous.endTime !== entry.endTime;
+
+    if (!didResponseChange) {
+      return;
+    }
+
+    const responseTimestamp = toEpochTime(entry.endTime || entry.startTime);
+
+    eventEmitter.emit('response-received', {
+      requestId: entry.id,
+      timestamp: responseTimestamp,
+      type: 'Fetch',
+      response: {
+        url: entry.url,
+        status: entry.status,
+        statusText: entry.statusText,
+        headers: toHeaders(entry.responseHeaders),
+        contentType: getContentType(entry.responseHeaders),
+        size: entry.responseBodySize,
+        responseTime: responseTimestamp,
+      },
+      source: 'nitro',
+    });
+
+    eventEmitter.emit('request-completed', {
+      requestId: entry.id,
+      timestamp: responseTimestamp,
+      duration: entry.duration,
+      size: entry.responseBodySize,
+      ttfb: entry.duration,
+      source: 'nitro',
+    });
+  };
+
+  const emitWebSocketEvents = (
+    entry: NitroWebSocketEntry,
+    previous?: NitroWebSocketEntry,
+  ) => {
+    const socketId = entry.id;
+    const readyState = normalizeReadyState(entry.readyState);
+    const previousReadyState = previous
+      ? normalizeReadyState(previous.readyState)
+      : null;
+
+    if (!previous) {
+      eventEmitter.emit('websocket-connect', {
+        type: 'websocket-connect',
+        url: entry.url,
+        socketId,
+        timestamp: toEpochTime(entry.startTime),
+        protocols: entry.protocols,
+        options: [],
+        source: 'nitro',
+      });
+    }
+
+    if (readyState === 'OPEN' && previousReadyState !== 'OPEN') {
+      eventEmitter.emit('websocket-open', {
+        type: 'websocket-open',
+        url: entry.url,
+        socketId,
+        timestamp: toEpochTime(entry.startTime),
+        source: 'nitro',
+      });
+    }
+
+    const previousMessageCount = previous?.messages.length ?? 0;
+    for (const message of entry.messages.slice(previousMessageCount)) {
+      const event = {
+        url: entry.url,
+        socketId,
+        timestamp: toEpochTime(message.timestamp),
+        data: message.data,
+        messageType: message.isBinary ? ('binary' as const) : ('text' as const),
+        source: 'nitro' as const,
+      };
+
+      if (message.direction === 'sent') {
+        eventEmitter.emit('websocket-message-sent', {
+          type: 'websocket-message-sent',
+          ...event,
+        });
+      } else {
+        eventEmitter.emit('websocket-message-received', {
+          type: 'websocket-message-received',
+          ...event,
+        });
+      }
+    }
+
+    if (entry.error && (!previous || previous.error !== entry.error)) {
+      eventEmitter.emit('websocket-error', {
+        type: 'websocket-error',
+        url: entry.url,
+        socketId,
+        timestamp: toEpochTime(entry.endTime || entry.startTime),
+        error: entry.error,
+        source: 'nitro',
+      });
+    }
+
+    if (readyState === 'CLOSED' && previousReadyState !== 'CLOSED') {
+      eventEmitter.emit('websocket-close', {
+        type: 'websocket-close',
+        url: entry.url,
+        socketId,
+        timestamp: toEpochTime(entry.endTime || entry.startTime),
+        code: entry.closeCode ?? 0,
+        reason: entry.closeReason,
+        source: 'nitro',
+      });
+    }
+  };
+
+  const handleEntry = (entry: NitroInspectorEntry) => {
+    const previous = previousEntries.get(entry.id);
+
+    if (entry.type === 'http') {
+      responseBodies.set(entry.id, entry.responseBody ?? null);
+      emitHttpEvents(entry, previous as NitroHttpEntry | undefined);
+    } else {
+      emitWebSocketEvents(entry, previous as NitroWebSocketEntry | undefined);
+    }
+
+    previousEntries.set(entry.id, cloneEntry(entry));
+  };
+
+  return {
+    enable() {
+      if (unsubscribe) {
+        return;
+      }
+
+      nitroModule = getNitroModule();
+      if (!nitroModule) {
+        return;
+      }
+
+      nitroModule.NetworkInspector.enable();
+      for (const entry of nitroModule.NetworkInspector.getEntries()) {
+        previousEntries.set(entry.id, cloneEntry(entry));
+        if (entry.type === 'http') {
+          responseBodies.set(entry.id, entry.responseBody ?? null);
+        }
+      }
+      unsubscribe = nitroModule.NetworkInspector.onEntry(handleEntry);
+    },
+
+    disable() {
+      unsubscribe?.();
+      unsubscribe = null;
+      nitroModule?.NetworkInspector.disable();
+    },
+
+    isEnabled() {
+      return nitroModule?.NetworkInspector.isEnabled() ?? false;
+    },
+
+    dispose() {
+      unsubscribe?.();
+      unsubscribe = null;
+      previousEntries.clear();
+      responseBodies.clear();
+      nitroModule?.NetworkInspector.disable();
+      nitroModule = null;
+    },
+
+    getResponseBody(requestId: string) {
+      return responseBodies.get(requestId) ?? null;
+    },
+
+    on<TEventType extends keyof NitroNetworkEventMap>(
+      event: TEventType,
+      callback: (data: NitroNetworkEventMap[TEventType]) => void,
+    ) {
+      return eventEmitter.on(event, callback as NanoEventsMap[TEventType]);
+    },
+  };
+};
+
+export const getNitroNetworkInspector = (() => {
+  let instance: NitroNetworkInspector | null = null;
+
+  return (): NitroNetworkInspector => {
+    if (!instance) {
+      instance = createNitroNetworkInspector();
+    }
+
+    return instance;
+  };
+})();

package/src/react-native/useHttpInspector.ts

@@ -1,43 +1,33 @@
 import { useEffect } from 'react';
-import type { HTTPInspector } from './http/http-inspector';
+import type { NetworkInspector } from './network-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,
+  networkInspector: NetworkInspector,
   isEnabled: boolean,
-  isRecordingEnabled: boolean
+  isRecordingEnabled: boolean,
 ) => {
   useEffect(() => {
     if (!client || !isEnabled) {
       return;
     }
 
-    const networkRequestsRegistry =
-      httpInspector.getNetworkRequestsRegistry();
-
     const subscriptions = [
       client.onMessage('network-enable', () => {
-        httpInspector.enable();
+        networkInspector.http.enable();
       }),
       client.onMessage('network-disable', () => {
-        httpInspector.disable();
+        networkInspector.http.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);
+        const body = await networkInspector.getResponseBody(requestId);
 
         client.send('response-body', {
           requestId,
@@ -48,12 +38,12 @@ export const useHttpInspector = (
 
     // If recording was previously enabled, enable the inspector (hot reload)
     if (isRecordingEnabled) {
-      httpInspector.enable();
+      networkInspector.http.enable();
     }
 
     return () => {
       subscriptions.forEach((subscription) => subscription.remove());
-      httpInspector.dispose();
+      networkInspector.http.dispose();
     };
-  }, [client, httpInspector, isEnabled, isRecordingEnabled]);
+  }, [client, networkInspector, isEnabled, isRecordingEnabled]);
 };

package/src/react-native/useNetworkActivityDevTools.ts

@@ -67,6 +67,11 @@ export const useNetworkActivityDevTools = (
     const subscriptions = [
       client.onMessage('network-enable', () => {
         isRecordingEnabledRef.current = true;
+        networkInspector.enable({
+          http: isHttpInspectorEnabled,
+          websocket: isWebSocketInspectorEnabled,
+          sse: isSSEInspectorEnabled,
+        });
 
         // Connect the events listener to send events through the DevTools client
         // This also automatically flushes any queued messages
@@ -87,12 +92,19 @@ export const useNetworkActivityDevTools = (
       }),
       client.onMessage('network-disable', () => {
         isRecordingEnabledRef.current = false;
+        networkInspector.disable();
       }),
       client.onMessage('get-client-ui-settings', () => {
         sendClientUISettings();
       }),
     ];
 
+    // Inform the DevTools UI of the current recording state so it can detect
+    // and resolve desynchronization (e.g. after an app reload)
+    client.send('recording-state', {
+      isRecording: isRecordingEnabledRef.current,
+    });
+
     // Send initial or changed values live
     sendClientUISettings();
 
@@ -109,7 +121,7 @@ export const useNetworkActivityDevTools = (
 
   useHttpInspector(
     client,
-    networkInspector.http,
+    networkInspector,
     isHttpInspectorEnabled,
     isRecordingEnabledRef.current,
   );