@rozenite/network-activity-plugin 1.0.0 → 1.2.0

package/src/shared/http-events.ts

@@ -0,0 +1,140 @@
+export type HttpHeaders = Record<string, string | string[]>;
+export type XHRHeaders = NonNullable<XMLHttpRequest['responseHeaders']>;
+
+export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD';
+
+export type RequestId = string;
+export type Timestamp = number;
+
+export type XHRPostData =
+  | string
+  | Blob
+  | FormData
+  | ArrayBuffer
+  | ArrayBufferView
+  | unknown
+  | null
+  | undefined;
+
+export type RequestTextPostData = {
+  type: 'text';
+  value: string;
+};
+
+export type RequestBinaryPostData = {
+  type: 'binary';
+  value: {
+    size: number;
+    type?: string;
+    name?: string;
+  };
+};
+
+export type RequestFormDataPostData = {
+  type: 'form-data';
+  value: Record<string, RequestTextPostData | RequestBinaryPostData>;
+};
+
+export type RequestPostData =
+  | RequestTextPostData
+  | RequestFormDataPostData
+  | RequestBinaryPostData
+  | null
+  | undefined;
+
+export type Cookie = {
+  name: string;
+  value: string;
+  domain?: string;
+  path?: string;
+  expires?: string;
+  maxAge?: string;
+  secure?: boolean;
+  httpOnly?: boolean;
+  sameSite?: string;
+};
+
+export type Request = {
+  url: string;
+  method: HttpMethod;
+  headers: HttpHeaders;
+  postData?: RequestPostData;
+};
+
+export type Response = {
+  url: string;
+  status: number;
+  statusText: string;
+  headers: HttpHeaders;
+  contentType: string;
+  size: number | null;
+  responseTime: Timestamp;
+};
+
+export type Initiator = {
+  type: string;
+  url?: string;
+  lineNumber?: number;
+  columnNumber?: number;
+};
+
+export type ResourceType = 'XHR' | 'Fetch' | 'Other';
+
+export type RequestOverride = {
+  status?: number;
+  body?: string;
+};
+
+export type HttpEventMap = {
+  'request-sent': {
+    requestId: RequestId;
+    request: Request;
+    timestamp: Timestamp;
+    initiator: Initiator;
+    type: ResourceType;
+  };
+
+  'response-received': {
+    requestId: RequestId;
+    timestamp: Timestamp;
+    type: ResourceType;
+    response: Response;
+  };
+
+  '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][];
+  };
+};

package/src/shared/sse-events.ts

@@ -1,4 +1,4 @@
-import type { Response } from './client';
+import type { Response } from './http-events';
 
 export type SSEConnectionStatus = 'connecting' | 'open' | 'closed';
 export type SSERequestId = string;

package/src/ui/components/RequestList.tsx

@@ -61,7 +61,7 @@ const formatStartTime = (startTime: number): string => {
 };
 
 const extractDomainAndPath = (
-  url: string
+  url: string,
 ): { domain: string; path: string } => {
   try {
     const { hostname, pathname, search, hash, port } = new URL(url);
@@ -80,7 +80,7 @@ const generateName = (url: string, showEntirePathName = false): string => {
     const urlObj = new URL(url);
     const pathname = urlObj.pathname;
     const filename = showEntirePathName ? undefined : pathname.split('/').pop();
-    
+
     return filename || pathname || urlObj.hostname;
   } catch {
     return url;
@@ -128,17 +128,25 @@ const sortTime: SortingFn<NetworkRequest> = (rowA, rowB, columnId) => {
 const processNetworkRequests = (
   processedRequests: ProcessedRequest[],
   overrides: Map<string, RequestOverride>,
-  showEntirePathAsName = false
+  showEntirePathAsName = false,
 ): NetworkRequest[] => {
   return processedRequests.map((request): NetworkRequest => {
     const { domain, path } = extractDomainAndPath(request.name);
     const duration = request.duration || 0;
     const hasOverride = overrides.has(request.name);
 
+    let statusDisplay: string | number = request.httpStatus || request.status;
+    if (request.status === 'loading' && request.progress?.lengthComputable) {
+      const percentage = Math.round(
+        (request.progress.loaded / request.progress.total) * 100,
+      );
+      statusDisplay = `${percentage}%`;
+    }
+
     return {
       id: request.id,
       name: generateName(request.name, showEntirePathAsName),
-      status: request.httpStatus || request.status,
+      status: statusDisplay,
       method: request.method,
       domain,
       path,
@@ -254,7 +262,11 @@ export const RequestList = ({ filter }: RequestListProps) => {
   }, [processedRequests, filter]);
 
   const requests = useMemo(() => {
-    return processNetworkRequests(filteredRequests, overrides, clientUISettings?.showUrlAsName);
+    return processNetworkRequests(
+      filteredRequests,
+      overrides,
+      clientUISettings?.showUrlAsName,
+    );
   }, [filteredRequests, overrides, clientUISettings?.showUrlAsName]);
 
   const table = useReactTable({
@@ -294,7 +306,7 @@ export const RequestList = ({ filter }: RequestListProps) => {
                       ? null
                       : flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                     {header.column.getCanSort() && (
                       <span className="text-gray-500">

package/src/ui/components/Toolbar.tsx

@@ -25,11 +25,12 @@ export const Toolbar = () => {
             ? 'text-red-400 hover:text-red-300'
             : 'text-gray-400 hover:text-blue-400'
         }`}
+        title={isRecording ? 'Stop recording' : 'Start recording'}
       >
         {isRecording ? (
-          <Circle className="h-4 w-4 fill-current" />
+          <Square className="h-4 w-4 fill-current" />
         ) : (
-          <Square className="h-4 w-4" />
+          <Circle className="h-4 w-4 fill-current" />
         )}
       </Button>
       <Button

package/src/ui/state/derived.ts

@@ -21,9 +21,10 @@ export const getProcessedRequests = memoize((state: NetworkActivityState) => {
         status: httpEntry.status,
         timestamp: httpEntry.timestamp,
         duration: httpEntry.duration,
-        size: httpEntry.size,
+        size: httpEntry.size ?? null,
         method: httpEntry.request.method,
         httpStatus: httpEntry.response?.status,
+        progress: httpEntry.progress,
       });
     } else if (entry.type === 'websocket') {
       const wsEntry = entry as WebSocketNetworkEntry;
@@ -34,6 +35,7 @@ export const getProcessedRequests = memoize((state: NetworkActivityState) => {
         status: wsEntry.status,
         timestamp: wsEntry.timestamp,
         duration: wsEntry.duration,
+        size: null,
         method: 'WS',
         httpStatus: 0,
       });
@@ -46,6 +48,7 @@ export const getProcessedRequests = memoize((state: NetworkActivityState) => {
         status: sseEntry.status,
         timestamp: sseEntry.timestamp,
         duration: sseEntry.duration,
+        size: null,
         method: 'SSE',
         httpStatus: 0,
       });
@@ -62,7 +65,7 @@ export const getSelectedRequest = memoize((state: NetworkActivityState) => {
 });
 
 export const getRequestSummary = (
-  requestId: string
+  requestId: string,
 ): ((state: NetworkActivityState) => ProcessedRequest | null) =>
   memoize((state: NetworkActivityState) => {
     const { networkEntries } = state;
@@ -78,9 +81,10 @@ export const getRequestSummary = (
         status: httpEntry.status,
         timestamp: httpEntry.timestamp,
         duration: httpEntry.duration,
-        size: httpEntry.size,
+        size: httpEntry.size ?? null,
         method: httpEntry.request.method,
         httpStatus: httpEntry.response?.status || 0,
+        progress: httpEntry.progress,
       };
     } else if (entry.type === 'websocket') {
       const wsEntry = entry as WebSocketNetworkEntry;
@@ -91,6 +95,7 @@ export const getRequestSummary = (
         status: wsEntry.status,
         timestamp: wsEntry.timestamp,
         duration: wsEntry.duration,
+        size: null,
         method: 'WS',
         httpStatus: 0,
       };
@@ -103,6 +108,7 @@ export const getRequestSummary = (
         status: sseEntry.status,
         timestamp: sseEntry.timestamp,
         duration: sseEntry.duration,
+        size: null,
         method: 'SSE',
         httpStatus: 0,
       };

package/src/ui/state/model.ts

@@ -58,6 +58,11 @@ export type HttpNetworkEntry = {
   size?: number;
   initiator?: Initiator;
   resourceType?: ResourceType;
+  progress?: {
+    loaded: number;
+    total: number;
+    lengthComputable: boolean;
+  };
 };
 
 /* SSE */
@@ -137,4 +142,9 @@ export type ProcessedRequest = {
   size: number | null;
   method: HttpMethod | 'WS' | 'SSE';
   httpStatus?: number;
+  progress?: {
+    loaded: number;
+    total: number;
+    lengthComputable: boolean;
+  };
 };

package/src/ui/state/store.ts

@@ -65,7 +65,7 @@ export const createNetworkActivityStore = () =>
     persist(
       (set, get) => ({
         // Initial state
-        isRecording: false,
+        isRecording: true,
         selectedRequestId: null,
         networkEntries: new Map(),
         websocketMessages: new Map(),
@@ -168,6 +168,33 @@ export const createNetworkActivityStore = () =>
               break;
             }
 
+            case 'request-progress': {
+              const eventData =
+                data as NetworkActivityEventMap['request-progress'];
+              set((state) => {
+                const entry = state.networkEntries.get(eventData.requestId);
+                if (!entry || entry.type !== 'http') {
+                  return state;
+                }
+
+                const httpEntry = entry as HttpNetworkEntry;
+                const updatedEntry: HttpNetworkEntry = {
+                  ...httpEntry,
+                  status: 'loading',
+                  progress: {
+                    loaded: eventData.loaded,
+                    total: eventData.total,
+                    lengthComputable: eventData.lengthComputable,
+                  },
+                };
+
+                const newEntries = new Map(state.networkEntries);
+                newEntries.set(eventData.requestId, updatedEntry);
+                return { networkEntries: newEntries };
+              });
+              break;
+            }
+
             case 'response-received': {
               const eventData =
                 data as NetworkActivityEventMap['response-received'];
@@ -559,6 +586,9 @@ export const createNetworkActivityStore = () =>
               client.onMessage('request-sent', (data) =>
                 handleEvent('request-sent', data)
               ),
+              client.onMessage('request-progress', (data) =>
+                handleEvent('request-progress', data)
+              ),
               client.onMessage('response-received', (data) =>
                 handleEvent('response-received', data)
               ),
@@ -654,9 +684,10 @@ export const createNetworkActivityStore = () =>
               typeof value === 'object' &&
               value !== null &&
               '_type' in value &&
-              value._type === 'map'
+              value._type === 'map' &&
+              'value' in value
             ) {
-              return new Map(value.value);
+              return new Map(value.value as [string, RequestOverride][]);
             }
             return value;
           },

package/dist/src/react-native/http/network-inspector.d.ts

@@ -1,8 +0,0 @@
-import { NetworkActivityDevToolsClient } from '../../shared/client';
-export type NetworkInspector = {
-    enable: () => void;
-    disable: () => void;
-    isEnabled: () => boolean;
-    dispose: () => void;
-};
-export declare const getNetworkInspector: (pluginClient: NetworkActivityDevToolsClient) => NetworkInspector;