@rozenite/network-activity-plugin 1.5.1 → 1.7.0-rc.0

package/dist/{react-native.cjs → react-native/index.cjs}

@@ -6,8 +6,8 @@ const isWeb = typeof window !== "undefined" && window.navigator.product !== "Rea
 const isDev = process.env.NODE_ENV !== "production";
 const isServer = typeof window === "undefined";
 if (isDev && !isWeb && !isServer) {
-  exports.useNetworkActivityDevTools = require("./useNetworkActivityDevTools.cjs").useNetworkActivityDevTools;
-  exports.withOnBootNetworkActivityRecording = require("./boot-recording.cjs").withOnBootNetworkActivityRecording;
+  exports.useNetworkActivityDevTools = require("./chunks/useNetworkActivityDevTools.require.cjs").useNetworkActivityDevTools;
+  exports.withOnBootNetworkActivityRecording = require("./chunks/boot-recording.require.cjs").withOnBootNetworkActivityRecording;
 } else {
   exports.useNetworkActivityDevTools = () => null;
   exports.withOnBootNetworkActivityRecording = (options) => null;

package/dist/react-native/index.d.ts

@@ -0,0 +1,305 @@
+import { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+
+export declare 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;
+};
+
+declare type EventsListenerOptions = {
+    /**
+     * Maximum number of messages to queue before DevTools connects.
+     * @default 200
+     */
+    maxQueueSize?: number;
+};
+
+declare type HttpEventMap = {
+    'request-sent': {
+        requestId: RequestId;
+        request: Request_2;
+        timestamp: Timestamp;
+        initiator: Initiator;
+        type: ResourceType;
+    };
+    'response-received': {
+        requestId: RequestId;
+        timestamp: Timestamp;
+        type: ResourceType;
+        response: Response_2;
+    };
+    'request-completed': {
+        requestId: RequestId;
+        timestamp: Timestamp;
+        duration: number;
+        size: number | null;
+        ttfb: number;
+    };
+    'request-failed': {
+        requestId: RequestId;
+        timestamp: Timestamp;
+        type: ResourceType;
+        error: string;
+        canceled: boolean;
+    };
+    'request-progress': {
+        requestId: RequestId;
+        timestamp: Timestamp;
+        loaded: number;
+        total: number;
+        lengthComputable: boolean;
+    };
+    'get-response-body': {
+        requestId: RequestId;
+    };
+    'response-body': {
+        requestId: RequestId;
+        body: string | null;
+    };
+    'set-overrides': {
+        overrides: [string, RequestOverride][];
+    };
+};
+
+declare type HttpHeaders = Record<string, string | string[]>;
+
+declare type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD';
+
+declare type Initiator = {
+    type: string;
+    url?: string;
+    lineNumber?: number;
+    columnNumber?: number;
+};
+
+declare type InspectorsConfig = {
+    [key in InspectorType]?: boolean;
+};
+
+declare type InspectorType = 'http' | 'websocket' | 'sse';
+
+declare type NetworkActivityClientUISettings = {
+    showUrlAsName?: boolean;
+};
+
+export declare 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.
+         * @default false
+         */
+        showUrlAsName?: boolean;
+    };
+};
+
+declare type NetworkActivityEventMap = {
+    'network-enable': unknown;
+    'network-disable': unknown;
+    'get-client-ui-settings': unknown;
+    'client-ui-settings': {
+        settings?: NetworkActivityClientUISettings;
+    };
+} & HttpEventMap & WebSocketEventMap_2 & SSEEventMap;
+
+declare 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?: InspectorsConfig;
+};
+
+declare type Request_2 = {
+    url: string;
+    method: HttpMethod;
+    headers: HttpHeaders;
+    postData?: RequestPostData;
+};
+
+declare type RequestBinaryPostData = {
+    type: 'binary';
+    value: {
+        size: number;
+        type?: string;
+        name?: string;
+    };
+};
+
+declare type RequestFormDataPostData = {
+    type: 'form-data';
+    value: Record<string, RequestTextPostData | RequestBinaryPostData>;
+};
+
+declare type RequestId = string;
+
+declare type RequestOverride = {
+    status?: number;
+    body?: string;
+};
+
+declare type RequestPostData = RequestTextPostData | RequestFormDataPostData | RequestBinaryPostData | null | undefined;
+
+declare type RequestTextPostData = {
+    type: 'text';
+    value: string;
+};
+
+declare type ResourceType = 'XHR' | 'Fetch' | 'Other';
+
+declare type Response_2 = {
+    url: string;
+    status: number;
+    statusText: string;
+    headers: HttpHeaders;
+    contentType: string;
+    size: number | null;
+    responseTime: Timestamp;
+};
+
+declare type SSECloseEvent = {
+    type: 'sse-close';
+    requestId: SSERequestId;
+    timestamp: number;
+};
+
+declare type SSEErrorEvent = {
+    type: 'sse-error';
+    requestId: SSERequestId;
+    timestamp: number;
+    error: {
+        type: 'error' | 'timeout' | 'exception';
+        message: string;
+    };
+};
+
+declare type SSEEvent = SSEOpenEvent | SSEMessageEvent | SSEErrorEvent | SSECloseEvent;
+
+declare type SSEEventMap = {
+    [K in SSEEvent['type']]: Extract<SSEEvent, {
+        type: K;
+    }>;
+};
+
+declare type SSEMessageEvent = {
+    type: 'sse-message';
+    requestId: SSERequestId;
+    timestamp: number;
+    payload: {
+        type: string;
+        data: string;
+    };
+};
+
+declare type SSEOpenEvent = {
+    type: 'sse-open';
+    requestId: SSERequestId;
+    timestamp: number;
+    response: Response_2;
+};
+
+declare type SSERequestId = string;
+
+declare type Timestamp = number;
+
+export declare let useNetworkActivityDevTools: useNetworkActivityDevTools_2;
+
+declare const useNetworkActivityDevTools_2: (config?: NetworkActivityDevToolsConfig) => RozeniteDevToolsClient<NetworkActivityEventMap> | null;
+
+declare type WebSocketCloseEvent = {
+    type: 'websocket-close';
+    url: string;
+    socketId: number;
+    timestamp: number;
+    code: number;
+    reason?: string;
+};
+
+declare type WebSocketConnectEvent = {
+    type: 'websocket-connect';
+    url: string;
+    socketId: number;
+    timestamp: number;
+    protocols: string[] | null;
+    options: string[];
+};
+
+declare type WebSocketConnectionStatus = 'connecting' | 'open' | 'closing' | 'closed';
+
+declare type WebSocketConnectionStatusChangedEvent = {
+    type: 'websocket-connection-status-changed';
+    url: string;
+    socketId: number;
+    timestamp: number;
+    status: WebSocketConnectionStatus;
+};
+
+declare type WebSocketErrorEvent = {
+    type: 'websocket-error';
+    url: string;
+    socketId: number;
+    timestamp: number;
+    error: string;
+};
+
+declare type WebSocketEvent = WebSocketConnectEvent | WebSocketOpenEvent | WebSocketCloseEvent | WebSocketMessageSentEvent | WebSocketMessageReceivedEvent | WebSocketErrorEvent | WebSocketConnectionStatusChangedEvent;
+
+declare type WebSocketEventMap_2 = {
+    [K in WebSocketEvent['type']]: Extract<WebSocketEvent, {
+        type: K;
+    }>;
+};
+
+declare type WebSocketMessageReceivedEvent = {
+    type: 'websocket-message-received';
+    url: string;
+    socketId: number;
+    timestamp: number;
+    data: string;
+    messageType: WebSocketMessageType;
+};
+
+declare type WebSocketMessageSentEvent = {
+    type: 'websocket-message-sent';
+    url: string;
+    socketId: number;
+    timestamp: number;
+    data: string;
+    messageType: WebSocketMessageType;
+};
+
+declare type WebSocketMessageType = 'text' | 'binary';
+
+declare type WebSocketOpenEvent = {
+    type: 'websocket-open';
+    url: string;
+    socketId: number;
+    timestamp: number;
+};
+
+export declare let withOnBootNetworkActivityRecording: withOnBootNetworkActivityRecording_2;
+
+/**
+ * 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();
+ *   // ...
+ * }
+ * ```
+ */
+declare const withOnBootNetworkActivityRecording_2: (options?: BootRecordingOptions) => void;
+
+export { }

package/dist/{react-native.js → react-native/index.js}

@@ -4,8 +4,8 @@ const isWeb = typeof window !== "undefined" && window.navigator.product !== "Rea
 const isDev = process.env.NODE_ENV !== "production";
 const isServer = typeof window === "undefined";
 if (isDev && !isWeb && !isServer) {
-  useNetworkActivityDevTools = require("./useNetworkActivityDevTools.js").useNetworkActivityDevTools;
-  withOnBootNetworkActivityRecording = require("./boot-recording.js").withOnBootNetworkActivityRecording;
+  useNetworkActivityDevTools = require("./chunks/useNetworkActivityDevTools.require.js").useNetworkActivityDevTools;
+  withOnBootNetworkActivityRecording = require("./chunks/boot-recording.require.js").withOnBootNetworkActivityRecording;
 } else {
   useNetworkActivityDevTools = () => null;
   withOnBootNetworkActivityRecording = (options) => null;

package/dist/rozenite.json

@@ -1 +1 @@
-{"name":"@rozenite/network-activity-plugin","version":"1.5.0","description":"Network Activity for Rozenite.","panels":[{"name":"Network Activity","source":"/App.html"}]}
+{"name":"@rozenite/network-activity-plugin","version":"1.7.0-rc.0","description":"Network Activity for Rozenite.","panels":[{"name":"Network Activity","source":"/devtools/App.html"}]}

package/package.json

@@ -1,14 +1,23 @@
 {
   "name": "@rozenite/network-activity-plugin",
-  "version": "1.5.1",
+  "version": "1.7.0-rc.0",
   "description": "Network Activity for Rozenite.",
   "type": "module",
-  "main": "./dist/react-native.cjs",
-  "module": "./dist/react-native.js",
-  "types": "./dist/react-native.d.ts",
+  "main": "./dist/react-native/index.cjs",
+  "module": "./dist/react-native/index.js",
+  "types": "./dist/react-native/index.d.ts",
+  "homepage": "https://github.com/callstackincubator/rozenite#readme",
+  "bugs": {
+    "url": "https://github.com/callstackincubator/rozenite/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/callstackincubator/rozenite.git"
+  },
   "dependencies": {
     "nanoevents": "^9.1.0",
-    "@rozenite/plugin-bridge": "1.5.1"
+    "@rozenite/agent-bridge": "1.7.0-rc.0",
+    "@rozenite/plugin-bridge": "1.7.0-rc.0"
   },
   "devDependencies": {
     "@floating-ui/react": "^0.26.0",
@@ -39,8 +48,8 @@
     "typescript": "~5.9.3",
     "vite": "^7.3.1",
     "zustand": "^5.0.6",
-    "@rozenite/vite-plugin": "1.5.1",
-    "rozenite": "1.5.1"
+    "@rozenite/vite-plugin": "1.7.0-rc.0",
+    "rozenite": "1.7.0-rc.0"
   },
   "peerDependencies": {
     "react-native-sse": "*"
@@ -51,6 +60,17 @@
     }
   },
   "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/react-native/index.d.ts",
+      "import": "./dist/react-native/index.js",
+      "require": "./dist/react-native/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "build": "rozenite build",
     "dev": "rozenite dev",

package/src/react-native/agent/__tests__/network-activity-agent-state.test.ts

@@ -0,0 +1,250 @@
+import { describe, expect, it } from 'vitest';
+import { createNetworkActivityAgentState } from '../state';
+import { NETWORK_ACTIVITY_AGENT_TOOLS } from '../tools';
+import type { Request } from '../../../shared/client';
+
+const createRequest = (overrides?: Partial<Request>): Request => ({
+  url: 'https://example.com/api',
+  method: 'POST',
+  headers: {
+    'content-type': 'application/json',
+  },
+  postData: {
+    type: 'text',
+    value: '{"hello":"world"}',
+  },
+  ...overrides,
+});
+
+describe('network activity agent state', () => {
+  it('exposes the expected fallback and realtime tool names', () => {
+    expect(NETWORK_ACTIVITY_AGENT_TOOLS.map((tool) => tool.name)).toEqual([
+      'startRecording',
+      'stopRecording',
+      'getRecordingStatus',
+      'listRequests',
+      'getRequestDetails',
+      'getRequestBody',
+      'getResponseBody',
+      'listRealtimeConnections',
+      'getRealtimeConnectionDetails',
+    ]);
+  });
+
+  it('tracks HTTP requests with parity-oriented list/detail/body results', () => {
+    const state = createNetworkActivityAgentState();
+    state.startRecording();
+
+    state.onRequestSent({
+      requestId: 'req-1',
+      timestamp: 100,
+      request: createRequest(),
+      type: 'XHR',
+      initiator: { type: 'script', url: 'App.tsx', lineNumber: 12, columnNumber: 4 },
+    });
+    state.onResponseReceived({
+      requestId: 'req-1',
+      timestamp: 120,
+      type: 'XHR',
+      response: {
+        url: 'https://example.com/api',
+        status: 200,
+        statusText: 'OK',
+        headers: { 'content-type': 'application/json' },
+        contentType: 'application/json',
+        size: 17,
+        responseTime: 120,
+      },
+    });
+    state.onRequestCompleted({
+      requestId: 'req-1',
+      timestamp: 130,
+      duration: 30,
+      size: 17,
+      ttfb: 20,
+    });
+
+    const list = state.listRequests({});
+    expect(list.items).toEqual([
+      {
+        requestId: 'req-1',
+        method: 'POST',
+        url: 'https://example.com/api',
+        status: 200,
+        type: 'XHR',
+        startTimeMs: 100,
+        endTimeMs: 130,
+        durationMs: 30,
+        transferSize: 17,
+        encodedDataLength: 17,
+        outcome: 'success',
+      },
+    ]);
+
+    const details = state.getRequestDetails('req-1');
+    expect(details.request).toMatchObject({
+      requestId: 'req-1',
+      method: 'POST',
+      url: 'https://example.com/api',
+      type: 'XHR',
+      loadingFinished: true,
+      loadingFailed: false,
+      ttfb: 20,
+      size: 17,
+    });
+
+    expect(state.getRequestBody('req-1')).toEqual({
+      requestId: 'req-1',
+      available: true,
+      body: '{"hello":"world"}',
+      base64Encoded: false,
+    });
+  });
+
+  it('returns unavailable request bodies when none were captured', () => {
+    const state = createNetworkActivityAgentState();
+    state.startRecording();
+    state.onRequestSent({
+      requestId: 'req-2',
+      timestamp: 10,
+      request: createRequest({ postData: undefined, method: 'GET' }),
+      type: 'Fetch',
+      initiator: { type: 'other' },
+    });
+
+    expect(state.getRequestBody('req-2')).toEqual({
+      requestId: 'req-2',
+      available: false,
+      reason: 'No request body is available for this request.',
+    });
+  });
+
+  it('supports realtime listing and details for websocket and sse traffic', () => {
+    const state = createNetworkActivityAgentState();
+    state.startRecording();
+
+    state.onWebSocketConnect({
+      type: 'websocket-connect',
+      url: 'wss://example.com/socket',
+      socketId: 7,
+      timestamp: 100,
+      protocols: ['chat'],
+      options: [],
+    });
+    state.onWebSocketOpen({
+      type: 'websocket-open',
+      url: 'wss://example.com/socket',
+      socketId: 7,
+      timestamp: 110,
+    });
+    state.onWebSocketMessageSent({
+      type: 'websocket-message-sent',
+      url: 'wss://example.com/socket',
+      socketId: 7,
+      timestamp: 120,
+      data: 'ping',
+      messageType: 'text',
+    });
+    state.onWebSocketMessageReceived({
+      type: 'websocket-message-received',
+      url: 'wss://example.com/socket',
+      socketId: 7,
+      timestamp: 121,
+      data: 'pong',
+      messageType: 'text',
+    });
+
+    state.onRequestSent({
+      requestId: 'req-sse',
+      timestamp: 200,
+      request: createRequest({
+        method: 'GET',
+        url: 'https://example.com/stream',
+        postData: undefined,
+      }),
+      type: 'Fetch',
+      initiator: { type: 'script' },
+    });
+    state.onSSEOpen({
+      type: 'sse-open',
+      requestId: 'req-sse',
+      timestamp: 210,
+      response: {
+        url: 'https://example.com/stream',
+        status: 200,
+        statusText: 'OK',
+        headers: { 'content-type': 'text/event-stream' },
+        contentType: 'text/event-stream',
+        size: 0,
+        responseTime: 210,
+      },
+    });
+    state.onSSEMessage({
+      type: 'sse-message',
+      requestId: 'req-sse',
+      timestamp: 220,
+      payload: {
+        type: 'message',
+        data: 'hello',
+      },
+    });
+
+    const list = state.listRealtimeConnections({});
+    expect(list.items).toHaveLength(2);
+    expect(list.items[0]).toMatchObject({
+      requestId: 'req-sse',
+      kind: 'sse',
+      status: 'open',
+      messageCount: 1,
+    });
+    expect(list.items[1]).toMatchObject({
+      requestId: 'ws-7',
+      kind: 'websocket',
+      status: 'open',
+      messageCount: 2,
+    });
+
+    const websocketDetails = state.getRealtimeConnectionDetails('ws-7');
+    expect(websocketDetails.connection).toMatchObject({
+      requestId: 'ws-7',
+      kind: 'websocket',
+      url: 'wss://example.com/socket',
+      status: 'open',
+    });
+    expect(websocketDetails.connection.messages).toHaveLength(2);
+
+    const sseDetails = state.getRealtimeConnectionDetails('req-sse');
+    expect(sseDetails.connection).toMatchObject({
+      requestId: 'req-sse',
+      kind: 'sse',
+      status: 'open',
+    });
+    expect(sseDetails.connection.messages).toHaveLength(1);
+  });
+
+  it('invalidates old cursors after a new recording starts', () => {
+    const state = createNetworkActivityAgentState();
+    state.startRecording();
+    state.onRequestSent({
+      requestId: 'req-1',
+      timestamp: 100,
+      request: createRequest(),
+      type: 'XHR',
+      initiator: { type: 'other' },
+    });
+    state.onRequestSent({
+      requestId: 'req-2',
+      timestamp: 101,
+      request: createRequest({ url: 'https://example.com/api/2' }),
+      type: 'XHR',
+      initiator: { type: 'other' },
+    });
+
+    const firstPage = state.listRequests({ limit: 1 });
+    state.startRecording();
+
+    expect(() =>
+      state.listRequests({ limit: 1, cursor: firstPage.page.nextCursor })
+    ).toThrow('Cursor does not match the requested listing. Run the command again.');
+  });
+});