@rozenite/network-activity-plugin 1.7.0 → 1.8.0

package/src/react-native/agent/use-network-activity-agent-tools.ts

@@ -2,11 +2,13 @@ import { useEffect } from 'react';
 import { useRozenitePluginAgentTool } from '@rozenite/agent-bridge';
 import type { NetworkActivityDevToolsClient } from '../../shared/client';
 import type { NetworkInspector } from '../network-inspector';
-import { getResponseBody } from '../http/http-utils';
 import {
   getNetworkActivityAgentState,
-  type NetworkActivityAgentBodyResult,
 } from './state';
+import {
+  NETWORK_ACTIVITY_AGENT_PLUGIN_ID,
+  type NetworkActivityGetResponseBodyResult,
+} from '../../shared/agent-tools';
 import {
   getRecordingStatusTool,
   getRealtimeConnectionDetailsTool,
@@ -19,17 +21,6 @@ import {
   stopRecordingTool,
 } from './tools';
 
-const pluginId = '@rozenite/network-activity-plugin';
-
-type PaginationInput = {
-  limit?: number;
-  cursor?: string;
-};
-
-type RequestIdInput = {
-  requestId: string;
-};
-
 type AgentToolsConfig = {
   client: NetworkActivityDevToolsClient | null;
   networkInspector: NetworkInspector;
@@ -50,43 +41,76 @@ export const useNetworkActivityAgentTools = ({
   useEffect(() => {
     const unsubscribe = [
       networkInspector.http.on('request-sent', (event) =>
-        state.onRequestSent(event)
+        state.onRequestSent(event),
       ),
       networkInspector.http.on('request-progress', (event) =>
-        state.onRequestProgress(event)
+        state.onRequestProgress(event),
       ),
       networkInspector.http.on('response-received', (event) =>
-        state.onResponseReceived(event)
+        state.onResponseReceived(event),
       ),
       networkInspector.http.on('request-completed', (event) =>
-        state.onRequestCompleted(event)
+        state.onRequestCompleted(event),
       ),
       networkInspector.http.on('request-failed', (event) =>
-        state.onRequestFailed(event)
+        state.onRequestFailed(event),
+      ),
+      networkInspector.nitro.on('request-sent', (event) =>
+        state.onRequestSent(event),
+      ),
+      networkInspector.nitro.on('response-received', (event) =>
+        state.onResponseReceived(event),
+      ),
+      networkInspector.nitro.on('request-completed', (event) =>
+        state.onRequestCompleted(event),
+      ),
+      networkInspector.nitro.on('request-failed', (event) =>
+        state.onRequestFailed(event),
       ),
       networkInspector.websocket.on('websocket-connect', (event) =>
-        state.onWebSocketConnect(event)
+        state.onWebSocketConnect(event),
       ),
       networkInspector.websocket.on('websocket-open', (event) =>
-        state.onWebSocketOpen(event)
+        state.onWebSocketOpen(event),
       ),
       networkInspector.websocket.on('websocket-close', (event) =>
-        state.onWebSocketClose(event)
+        state.onWebSocketClose(event),
       ),
       networkInspector.websocket.on('websocket-message-sent', (event) =>
-        state.onWebSocketMessageSent(event)
+        state.onWebSocketMessageSent(event),
       ),
       networkInspector.websocket.on('websocket-message-received', (event) =>
-        state.onWebSocketMessageReceived(event)
+        state.onWebSocketMessageReceived(event),
       ),
       networkInspector.websocket.on('websocket-error', (event) =>
-        state.onWebSocketError(event)
+        state.onWebSocketError(event),
+      ),
+      networkInspector.websocket.on(
+        'websocket-connection-status-changed',
+        (event) => state.onWebSocketConnectionStatusChanged(event),
+      ),
+      networkInspector.nitro.on('websocket-connect', (event) =>
+        state.onWebSocketConnect(event),
+      ),
+      networkInspector.nitro.on('websocket-open', (event) =>
+        state.onWebSocketOpen(event),
+      ),
+      networkInspector.nitro.on('websocket-close', (event) =>
+        state.onWebSocketClose(event),
+      ),
+      networkInspector.nitro.on('websocket-message-sent', (event) =>
+        state.onWebSocketMessageSent(event),
       ),
-      networkInspector.websocket.on('websocket-connection-status-changed', (event) =>
-        state.onWebSocketConnectionStatusChanged(event)
+      networkInspector.nitro.on('websocket-message-received', (event) =>
+        state.onWebSocketMessageReceived(event),
+      ),
+      networkInspector.nitro.on('websocket-error', (event) =>
+        state.onWebSocketError(event),
       ),
       networkInspector.sse.on('sse-open', (event) => state.onSSEOpen(event)),
-      networkInspector.sse.on('sse-message', (event) => state.onSSEMessage(event)),
+      networkInspector.sse.on('sse-message', (event) =>
+        state.onSSEMessage(event),
+      ),
       networkInspector.sse.on('sse-error', (event) => state.onSSEError(event)),
       networkInspector.sse.on('sse-close', (event) => state.onSSEClose(event)),
     ];
@@ -118,63 +142,60 @@ export const useNetworkActivityAgentTools = ({
   }, [client, enabledInspectors, state]);
 
   useRozenitePluginAgentTool({
-    pluginId,
+    pluginId: NETWORK_ACTIVITY_AGENT_PLUGIN_ID,
     tool: startRecordingTool,
     handler: () => {
       networkInspector.http.getNetworkRequestsRegistry().clear();
       const result = state.startRecording({ enabledInspectors });
       networkInspector.enable(enabledInspectors);
       return {
-        started: true,
+        started: true as const,
         ...result,
       };
     },
   });
 
   useRozenitePluginAgentTool({
-    pluginId,
+    pluginId: NETWORK_ACTIVITY_AGENT_PLUGIN_ID,
     tool: stopRecordingTool,
     handler: () => {
       const result = state.stopRecording();
       networkInspector.disable();
       return {
-        stopped: true,
+        stopped: true as const,
         ...result,
       };
     },
   });
 
   useRozenitePluginAgentTool({
-    pluginId,
+    pluginId: NETWORK_ACTIVITY_AGENT_PLUGIN_ID,
     tool: getRecordingStatusTool,
     handler: () => state.getStatus(),
   });
 
-  useRozenitePluginAgentTool<PaginationInput>({
-    pluginId,
+  useRozenitePluginAgentTool({
+    pluginId: NETWORK_ACTIVITY_AGENT_PLUGIN_ID,
     tool: listRequestsTool,
     handler: (input = {}) => state.listRequests(input),
   });
 
-  useRozenitePluginAgentTool<RequestIdInput>({
-    pluginId,
+  useRozenitePluginAgentTool({
+    pluginId: NETWORK_ACTIVITY_AGENT_PLUGIN_ID,
     tool: getRequestDetailsTool,
-    handler: ({ requestId }: RequestIdInput) => state.getRequestDetails(requestId),
+    handler: ({ requestId }) => state.getRequestDetails(requestId),
   });
 
-  useRozenitePluginAgentTool<RequestIdInput>({
-    pluginId,
+  useRozenitePluginAgentTool({
+    pluginId: NETWORK_ACTIVITY_AGENT_PLUGIN_ID,
     tool: getRequestBodyTool,
-    handler: ({ requestId }: RequestIdInput) => state.getRequestBody(requestId),
+    handler: ({ requestId }) => state.getRequestBody(requestId),
   });
 
-  useRozenitePluginAgentTool<
-    RequestIdInput,
-    Promise<NetworkActivityAgentBodyResult>
-  >({
-    pluginId,
+  useRozenitePluginAgentTool({
+    pluginId: NETWORK_ACTIVITY_AGENT_PLUGIN_ID,
     tool: getResponseBodyTool,
-    handler: async ({ requestId }: RequestIdInput) => {
+    handler: async ({ requestId }): Promise<NetworkActivityGetResponseBodyResult> => {
       const record = state.getHttpRecord(requestId);
       if (!record) {
         throw new Error(`Unknown request "${requestId}"`);
@@ -197,18 +218,7 @@ export const useNetworkActivityAgentTools = ({
         };
       }
 
-      const request =
-        networkInspector.http.getNetworkRequestsRegistry().getEntry(requestId);
-      if (!request) {
-        return {
-          requestId,
-          available: false,
-          reason:
-            'Response body is unavailable because the request object is no longer in the plugin registry.',
-        };
-      }
-
-      const body = await getResponseBody(request);
+      const body = await networkInspector.getResponseBody(requestId);
       if (body === null) {
         return {
           requestId,
@@ -229,16 +239,15 @@ export const useNetworkActivityAgentTools = ({
     },
   });
 
-  useRozenitePluginAgentTool<PaginationInput>({
-    pluginId,
+  useRozenitePluginAgentTool({
+    pluginId: NETWORK_ACTIVITY_AGENT_PLUGIN_ID,
     tool: listRealtimeConnectionsTool,
     handler: (input = {}) => state.listRealtimeConnections(input),
   });
 
-  useRozenitePluginAgentTool<RequestIdInput>({
-    pluginId,
+  useRozenitePluginAgentTool({
+    pluginId: NETWORK_ACTIVITY_AGENT_PLUGIN_ID,
     tool: getRealtimeConnectionDetailsTool,
-    handler: ({ requestId }: RequestIdInput) =>
-      state.getRealtimeConnectionDetails(requestId),
+    handler: ({ requestId }) => state.getRealtimeConnectionDetails(requestId),
   });
 };

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

@@ -17,6 +17,9 @@ type SendFunction<TEventMap extends Record<string, unknown>> = <
 export class EventsListener<TEventMap extends Record<string, unknown>> {
   private messageQueue: QueuedMessage<TEventMap>[] = [];
   private sendFunction: SendFunction<TEventMap> | null = null;
+  private filterFunction:
+    | ((message: QueuedMessage<TEventMap>) => boolean)
+    | null = null;
   private maxQueueSize = 200;
   private isQueuing = false;
 
@@ -36,9 +39,10 @@ export class EventsListener<TEventMap extends Record<string, unknown>> {
    */
   public connect(
     sendFn: SendFunction<TEventMap>,
-    filterFn?: (message: QueuedMessage<TEventMap>) => boolean
+    filterFn?: (message: QueuedMessage<TEventMap>) => boolean,
   ): void {
     this.sendFunction = sendFn;
+    this.filterFunction = filterFn ?? null;
     this.isQueuing = false;
     this.flushQueue(filterFn);
   }
@@ -54,6 +58,9 @@ export class EventsListener<TEventMap extends Record<string, unknown>> {
     if (this.isQueuing) {
       this.enqueueMessage({ type, data });
     } else if (this.sendFunction) {
+      if (this.filterFunction && !this.filterFunction({ type, data })) {
+        return;
+      }
       this.sendFunction(type, data);
     }
   }
@@ -67,7 +74,7 @@ export class EventsListener<TEventMap extends Record<string, unknown>> {
   }
 
   private flushQueue(
-    filterFn?: (message: QueuedMessage<TEventMap>) => boolean
+    filterFn?: (message: QueuedMessage<TEventMap>) => boolean,
   ): void {
     if (!this.sendFunction) {
       return;
@@ -97,6 +104,8 @@ export type EventsListenerOptions = {
  * 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> => {
+export const createEventsListener = <
+  TEventMap extends Record<string, unknown>,
+>(): EventsListener<TEventMap> => {
   return new EventsListener<TEventMap>();
 };

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

@@ -1,7 +1,12 @@
 import { createNanoEvents } from 'nanoevents';
 import { getNetworkRequestsRegistry } from './network-requests-registry';
 import { XHRInterceptor } from './xhr-interceptor';
-import { getRequestBody, getResponseSize, getInitiatorFromStack, setupRequestOverride } from './http-utils';
+import {
+  getRequestBody,
+  getResponseSize,
+  getInitiatorFromStack,
+  setupRequestOverride,
+} from './http-utils';
 import { applyReactNativeResponseHeadersLogic } from '../../utils/applyReactNativeResponseHeadersLogic';
 import { getContentType } from '../utils';
 import { getOverridesRegistry } from './overrides-registry';
@@ -28,7 +33,9 @@ type NanoEventsMap = {
 };
 
 export type HTTPInspector = Inspector<HttpEventMap> & {
-  getNetworkRequestsRegistry: () => ReturnType<typeof getNetworkRequestsRegistry>;
+  getNetworkRequestsRegistry: () => ReturnType<
+    typeof getNetworkRequestsRegistry
+  >;
 };
 
 const READY_STATE_HEADERS_RECEIVED = 2;
@@ -39,9 +46,9 @@ export const getHTTPInspector = (): HTTPInspector => {
 
   const overridesRegistry = getOverridesRegistry();
   XHRInterceptor.setOverrideCallback((request) =>
-    setupRequestOverride(overridesRegistry, request)
+    setupRequestOverride(overridesRegistry, request),
   );
-  
+
   return {
     enable: () => {
       if (XHRInterceptor.isInterceptorEnabled()) return;
@@ -69,6 +76,7 @@ export const getHTTPInspector = (): HTTPInspector => {
           },
           type: 'XHR',
           initiator,
+          source: 'builtin',
         });
 
         request.addEventListener('readystatechange', () => {
@@ -84,6 +92,7 @@ export const getHTTPInspector = (): HTTPInspector => {
             loaded: event.loaded,
             total: event.total,
             lengthComputable: event.lengthComputable,
+            source: 'builtin',
           });
         });
 
@@ -103,6 +112,7 @@ export const getHTTPInspector = (): HTTPInspector => {
               size: getResponseSize(request),
               responseTime: Date.now(),
             },
+            source: 'builtin',
           });
         });
 
@@ -113,6 +123,7 @@ export const getHTTPInspector = (): HTTPInspector => {
             duration: Date.now() - sendTime,
             size: getResponseSize(request),
             ttfb,
+            source: 'builtin',
           });
         });
 
@@ -123,6 +134,7 @@ export const getHTTPInspector = (): HTTPInspector => {
             type: 'XHR',
             error: 'Failed',
             canceled: false,
+            source: 'builtin',
           });
         });
 
@@ -133,6 +145,7 @@ export const getHTTPInspector = (): HTTPInspector => {
             type: 'XHR',
             error: 'Aborted',
             canceled: true,
+            source: 'builtin',
           });
         });
 
@@ -143,6 +156,7 @@ export const getHTTPInspector = (): HTTPInspector => {
             type: 'XHR',
             error: 'Timeout',
             canceled: false,
+            source: 'builtin',
           });
         });
       });
@@ -167,7 +181,7 @@ export const getHTTPInspector = (): HTTPInspector => {
 
     on: <TEventType extends keyof HttpEventMap>(
       event: TEventType,
-      callback: (data: HttpEventMap[TEventType]) => void
+      callback: (data: HttpEventMap[TEventType]) => void,
     ) => eventEmitter.on(event, callback as NanoEventsMap[TEventType]),
   };
 };

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

@@ -1,78 +1,116 @@
-import { getHTTPInspector, HTTPInspector, HTTP_EVENTS } from './http/http-inspector';
+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 {
+  getWebSocketInspector,
+  WebSocketInspector,
+  WEBSOCKET_EVENTS,
+} from './websocket/websocket-inspector';
+import {
+  getNitroNetworkInspector,
+  NitroNetworkInspector,
+  NITRO_NETWORK_EVENTS,
+} from './nitro-fetch/nitro-network-inspector';
 import { EventsListener } from './events-listener';
 import { NetworkActivityEventMap } from '../shared/client';
 import type { InspectorsConfig } from './config';
+import { getResponseBody as getHTTPResponseBody } from './http/http-utils';
 
 export type NetworkInspector = {
   readonly http: HTTPInspector;
   readonly sse: SSEInspector;
   readonly websocket: WebSocketInspector;
+  readonly nitro: NitroNetworkInspector;
   setup: (eventsListener: EventsListener<NetworkActivityEventMap>) => void;
   enable: (config?: InspectorsConfig) => void;
   disable: () => void;
   dispose: () => void;
+  getResponseBody: (requestId: string) => Promise<string | null>;
 };
 
 const createNetworkInspectorInstance = (): NetworkInspector => {
   const http = getHTTPInspector();
   const sse = getSSEInspector();
   const websocket = getWebSocketInspector();
+  const nitro = getNitroNetworkInspector();
 
   return {
     http,
     sse,
     websocket,
+    nitro,
 
     setup(eventsListener: EventsListener<NetworkActivityEventMap>) {
-      HTTP_EVENTS.forEach(event => {
+      HTTP_EVENTS.forEach((event) => {
         http.on(event, (data) => {
           eventsListener.send(event, data);
         });
       });
 
-      SSE_EVENTS.forEach(event => {
+      SSE_EVENTS.forEach((event) => {
         sse.on(event, (data) => {
           eventsListener.send(data.type, data);
         });
       });
 
-      WEBSOCKET_EVENTS.forEach(event => {
+      WEBSOCKET_EVENTS.forEach((event) => {
         websocket.on(event, (data) => {
           eventsListener.send(data.type, data);
         });
       });
+
+      NITRO_NETWORK_EVENTS.forEach((event) => {
+        nitro.on(event, (data) => {
+          eventsListener.send(event, data);
+        });
+      });
     },
 
-    enable(config: InspectorsConfig = { http: true, sse: true, websocket: true }) {
+    enable(
+      config: InspectorsConfig = { http: true, sse: true, websocket: true },
+    ) {
       if (config.http) http.enable();
       if (config.sse) sse.enable();
       if (config.websocket) websocket.enable();
+      if (config.http || config.websocket) nitro.enable();
     },
 
     disable() {
       http.disable();
       sse.disable();
       websocket.disable();
+      nitro.disable();
     },
 
     dispose() {
       http.dispose();
       sse.dispose();
       websocket.dispose();
+      nitro.dispose();
+    },
+
+    async getResponseBody(requestId: string) {
+      const request = http.getNetworkRequestsRegistry().getEntry(requestId);
+      if (request) {
+        return getHTTPResponseBody(request);
+      }
+
+      return nitro.getResponseBody(requestId);
     },
   };
 };
 
 export const getNetworkInspector = (() => {
   let instance: NetworkInspector | null = null;
-  
+
   return (): NetworkInspector => {
     if (!instance) {
       instance = createNetworkInspectorInstance();
     }
-    
+
     return instance;
   };
 })();