@rozenite/network-activity-plugin 1.0.0-alpha.5 → 1.0.0-alpha.7

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

@@ -1,14 +1,20 @@
-import { NetworkActivityDevToolsClient } from '../types/client';
+import { NetworkActivityDevToolsClient } from '../shared/client';
 import { getNetworkRequestsRegistry } from './network-requests-registry';
 import { XHRInterceptor } from './xhr-interceptor';
 
 const networkRequestsRegistry = getNetworkRequestsRegistry();
 
-const mimeTypeFromResponseType = (responseType: string): string | undefined => {
+const getContentType = (request: XMLHttpRequest): string => {
+  const responseHeaders = request.responseHeaders;
+  const responseType = request.responseType;
+
+  if (responseHeaders?.['content-type']) {
+    return responseHeaders['content-type'].split(';')[0].trim();
+  }
+
   switch (responseType) {
     case 'arraybuffer':
     case 'blob':
-    case 'base64':
       return 'application/octet-stream';
     case 'text':
     case '':
@@ -18,81 +24,45 @@ const mimeTypeFromResponseType = (responseType: string): string | undefined => {
     case 'document':
       return 'text/html';
   }
-
-  return undefined;
 };
 
-const parseHeaders = (headersString: string): Record<string, string> => {
-  const headers: Record<string, string> = {};
-  if (!headersString) return headers;
-
-  const lines = headersString.split('\r\n');
-  for (const line of lines) {
-    const colonIndex = line.indexOf(':');
-    if (colonIndex > 0) {
-      const key = line.substring(0, colonIndex).trim();
-      const value = line.substring(colonIndex + 1).trim();
-      headers[key] = value;
-    }
+const getResponseSize = (request: XMLHttpRequest): number => {
+  if (typeof request.response === 'object') {
+    return request.response.size;
   }
-  return headers;
+
+  return request.response.length || 0;
 };
 
 const getResponseBody = async (
   request: XMLHttpRequest
-): Promise<{ body: string; base64Encoded: boolean }> => {
-  try {
-    if (request.responseType === 'arraybuffer') {
-      const arrayBuffer = request.response as ArrayBuffer;
-      return {
-        body: btoa(String.fromCharCode(...new Uint8Array(arrayBuffer))),
-        base64Encoded: true,
-      };
-    }
+): Promise<string | null> => {
+  const responseType = request.responseType;
 
-    if (request.responseType === 'blob') {
-      const contentType = request.getResponseHeader('Content-Type') || '';
-
-      if (
-        contentType.startsWith('text/') ||
-        contentType.startsWith('application/json')
-      ) {
-        return new Promise((resolve) => {
-          const reader = new FileReader();
-          reader.onload = () => {
-            resolve({
-              body: reader.result as string,
-              base64Encoded: false,
-            });
-          };
-          reader.readAsText(request.response);
-        });
-      }
-    }
+  if (responseType === 'text') {
+    return request.responseText as string;
+  }
 
-    if (request.responseType === 'text') {
-      return {
-        body: request.responseText || request.response || '',
-        base64Encoded: false,
-      };
+  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);
+      });
     }
-
-    return {
-      body: request.responseText || request.response || '',
-      base64Encoded: false,
-    };
-  } catch (error) {
-    return {
-      body: `[Error reading response: ${error}]`,
-      base64Encoded: false,
-    };
   }
-};
 
-const findRequestId = (request: XMLHttpRequest): string | null => {
-  const allRequests = networkRequestsRegistry.getAllEntries();
-  const entry = allRequests.find(({ request: req }) => req === request);
-  return entry?.id ?? null;
+  return null;
 };
 
 const getInitiatorFromStack = (): {
@@ -131,6 +101,8 @@ export type NetworkInspector = {
   dispose: () => void;
 };
 
+const READY_STATE_HEADERS_RECEIVED = 2;
+
 export const getNetworkInspector = (
   pluginClient: NetworkActivityDevToolsClient
 ): NetworkInspector => {
@@ -138,202 +110,86 @@ export const getNetworkInspector = (
     return `req_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
   };
 
-  const generateLoaderId = (): string => {
-    return `loader_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-  };
+  const handleRequestSend = (data: string, request: XMLHttpRequest): void => {
+    const sendTime = Date.now();
 
-  const enable = () => {
-    XHRInterceptor.disableInterception();
+    const requestId = generateRequestId();
+    const initiator = getInitiatorFromStack();
 
-    XHRInterceptor.setOpenCallback(
-      (method: string, url: string, request: XMLHttpRequest) => {
-        const requestId = generateRequestId();
-        const loaderId = generateLoaderId();
-        const startTime = Date.now();
-        const initiator = getInitiatorFromStack();
-
-        // Store request in registry with metadata
-        networkRequestsRegistry.addEntry(requestId, request, {
-          id: requestId,
-          loaderId,
-          documentURL:
-            typeof document !== 'undefined' ? document.URL : undefined,
-          method,
-          url,
-          headers: request?._headers || {},
-          startTime,
-          status: 'pending',
-          type: 'XHR',
-          initiator,
-        });
-      }
-    );
+    networkRequestsRegistry.addEntry(requestId, request);
 
-    XHRInterceptor.setSendCallback((data: string, request: XMLHttpRequest) => {
-      const requestId = findRequestId(request);
-      if (!requestId) return;
+    let ttfb = 0;
 
-      const entry = networkRequestsRegistry.getEntry(requestId);
-      if (!entry) return;
+    pluginClient.send('request-sent', {
+      requestId: requestId,
+      timestamp: sendTime / 1000,
+      request: {
+        url: request._url as string,
+        method: request._method as string,
+        headers: request._headers,
+        postData: data,
+      },
+      type: 'XHR',
+      initiator,
+    });
 
-      const metadata = entry.metadata;
+    request.addEventListener('readystatechange', () => {
+      if (request.readyState === READY_STATE_HEADERS_RECEIVED) {
+        ttfb = Date.now() - sendTime;
+      }
+    });
 
-      // Update metadata with post data
-      networkRequestsRegistry.updateEntry(requestId, {
-        postData: data,
-        hasPostData: !!data,
-        headers: request?._headers || {},
+    request.addEventListener('load', () => {
+      pluginClient.send('response-received', {
+        requestId: requestId,
+        timestamp: Date.now() / 1000,
+        type: 'XHR',
+        response: {
+          url: request._url as string,
+          status: request.status,
+          statusText: request.statusText,
+          headers: request.responseHeaders as Record<string, string>,
+          contentType: getContentType(request),
+          size: getResponseSize(request),
+          responseTime: Date.now() / 1000,
+        },
       });
+    });
 
-      // Send Network.requestWillBeSent event
-      pluginClient.send('Network.requestWillBeSent', {
-        requestId,
-        loaderId: metadata.loaderId || '',
-        documentURL: metadata.documentURL || '',
-        request: {
-          url: metadata.url,
-          method: metadata.method,
-          headers: metadata.headers,
-          postData: data,
-          hasPostData: !!data,
-        },
-        timestamp: metadata.startTime,
-        wallTime: metadata.startTime,
-        initiator: metadata.initiator || { type: 'other' },
-        type: metadata.type,
+    request.addEventListener('loadend', () => {
+      pluginClient.send('request-completed', {
+        requestId: requestId,
+        timestamp: Date.now() / 1000,
+        duration: Date.now() - sendTime,
+        size: getResponseSize(request),
+        ttfb,
       });
     });
 
-    XHRInterceptor.setHeaderReceivedCallback(
-      (
-        responseContentType: string | void,
-        responseSize: number | void,
-        allHeaders: string,
-        request: XMLHttpRequest
-      ) => {
-        const requestId = findRequestId(request);
-        if (!requestId) return;
-
-        const entry = networkRequestsRegistry.getEntry(requestId);
-        if (!entry) return;
-
-        const metadata = entry.metadata;
-        const headers = parseHeaders(allHeaders);
-        const mimeType =
-          responseContentType ||
-          mimeTypeFromResponseType(request.responseType) ||
-          'text/plain';
-
-        // Update metadata with response info
-        networkRequestsRegistry.updateEntry(requestId, {
-          status: 'loading',
-          response: {
-            url: metadata.url,
-            status: request.status,
-            statusText: request.statusText,
-            headers,
-            mimeType,
-            encodedDataLength: responseSize || 0,
-            responseTime: Date.now(),
-          },
-        });
-
-        // Send Network.responseReceived event
-        pluginClient.send('Network.responseReceived', {
-          requestId,
-          loaderId: metadata.loaderId || '',
-          timestamp: Date.now(),
-          type: metadata.type || 'Other',
-          response: {
-            url: metadata.url,
-            status: request.status,
-            statusText: request.statusText,
-            headers,
-            mimeType,
-            encodedDataLength: responseSize || 0,
-            responseTime: Date.now(),
-          },
-        });
-      }
-    );
-
-    XHRInterceptor.setResponseCallback(
-      (
-        status: number,
-        timeout: number,
-        response: string,
-        responseURL: string,
-        responseType: string,
-        request: XMLHttpRequest
-      ) => {
-        const requestId = findRequestId(request);
-        if (!requestId) return;
-
-        const entry = networkRequestsRegistry.getEntry(requestId);
-        if (!entry) return;
-
-        const metadata = entry.metadata;
-        if (!metadata) return;
-
-        const endTime = Date.now();
-        const duration = endTime - metadata.startTime;
-        const dataLength = response ? response.length : 0;
-
-        // Update metadata with final data
-        networkRequestsRegistry.updateEntry(requestId, {
-          endTime,
-          duration,
-          dataLength,
-          encodedDataLength: dataLength,
-        });
-
-        // Check if request failed
-        if (status >= 400 || request.readyState === 0) {
-          const errorText = request.statusText || 'Request failed';
-          const canceled = request.readyState === 0;
-
-          // Update metadata
-          networkRequestsRegistry.updateEntry(requestId, {
-            status: 'failed',
-            errorText,
-            canceled,
-          });
-
-          // Send Network.loadingFailed event
-          pluginClient.send('Network.loadingFailed', {
-            requestId,
-            timestamp: endTime,
-            type: metadata.type || 'Other',
-            errorText,
-            canceled,
-          });
-        } else {
-          // Update metadata
-          networkRequestsRegistry.updateEntry(requestId, {
-            status: 'finished',
-            encodedDataLength: dataLength,
-          });
-
-          // Send Network.dataReceived event if there's data
-          if (dataLength > 0) {
-            pluginClient.send('Network.dataReceived', {
-              requestId,
-              timestamp: endTime,
-              dataLength,
-              encodedDataLength: dataLength,
-            });
-          }
-
-          // Send Network.loadingFinished event
-          pluginClient.send('Network.loadingFinished', {
-            requestId,
-            timestamp: endTime,
-            encodedDataLength: dataLength,
-          });
-        }
-      }
-    );
+    request.addEventListener('error', () => {
+      pluginClient.send('request-failed', {
+        requestId: requestId,
+        timestamp: Date.now() / 1000,
+        type: 'XHR',
+        error: 'Failed',
+        canceled: false,
+      });
+    });
+
+    request.addEventListener('abort', () => {
+      pluginClient.send('request-failed', {
+        requestId: requestId,
+        timestamp: Date.now() / 1000,
+        type: 'XHR',
+        error: 'Aborted',
+        canceled: true,
+      });
+    });
+  };
 
+  const enable = () => {
+    XHRInterceptor.disableInterception();
+    XHRInterceptor.setSendCallback(handleRequestSend);
     XHRInterceptor.enableInterception();
   };
 
@@ -355,22 +211,19 @@ export const getNetworkInspector = (
   });
 
   const handleBodySubscription = pluginClient.onMessage(
-    'Network.getResponseBody',
-    async (payload) => {
-      const requestId = payload.requestId;
-      const entry = networkRequestsRegistry.getEntry(requestId);
-      if (!entry) {
+    'get-response-body',
+    async ({ requestId }) => {
+      const request = networkRequestsRegistry.getEntry(requestId);
+
+      if (!request) {
         return;
       }
 
-      const { request } = entry;
-      const { body, base64Encoded } = await getResponseBody(request);
+      const body = await getResponseBody(request);
 
-      // Send Network.responseBodyReceived event
-      pluginClient.send('Network.responseBodyReceived', {
+      pluginClient.send('response-body', {
         requestId,
         body,
-        base64Encoded,
       });
     }
   );

package/src/react-native/network-requests-registry.ts

@@ -1,50 +1,12 @@
-import {
-  NetworkRequestId,
-  NetworkLoaderId,
-  NetworkResourceType,
-  NetworkRequest,
-  NetworkResponse,
-  NetworkInitiator,
-} from '../types/client';
-
-export type NetworkRequestMetadata = {
-  id: NetworkRequestId;
-  loaderId?: NetworkLoaderId;
-  documentURL?: string;
-  method: string;
-  url: string;
-  headers: Record<string, string>;
-  postData?: string;
-  hasPostData?: boolean;
-  type?: NetworkResourceType;
-  initiator?: NetworkInitiator;
-  startTime: number;
-  endTime?: number;
-  duration?: number;
-  status: 'pending' | 'loading' | 'finished' | 'failed';
-  response?: NetworkResponse;
-  errorText?: string;
-  canceled?: boolean;
-  encodedDataLength?: number;
-  dataLength?: number;
-};
-
-export type NetworkRegistryEntry = {
+type NetworkRegistryEntry = {
   id: string;
-  request: XMLHttpRequest;
-  metadata: NetworkRequestMetadata;
   sentAt: number;
+  request: XMLHttpRequest;
 };
 
 export type NetworkRequestRegistry = {
-  addEntry: (
-    id: string,
-    request: XMLHttpRequest,
-    metadata: Partial<NetworkRequestMetadata>
-  ) => void;
-  getEntry: (id: string) => NetworkRegistryEntry | null;
-  updateEntry: (id: string, updates: Partial<NetworkRequestMetadata>) => void;
-  getAllEntries: () => Array<NetworkRegistryEntry>;
+  addEntry: (id: string, request: XMLHttpRequest) => void;
+  getEntry: (id: string) => XMLHttpRequest | null;
   clear: () => void;
 };
 
@@ -65,47 +27,17 @@ export const getNetworkRequestsRegistry = (): NetworkRequestRegistry => {
     });
   };
 
-  const addEntry = (
-    id: string,
-    request: XMLHttpRequest,
-    metadata: Partial<NetworkRequestMetadata>
-  ) => {
+  const addEntry = (id: string, request: XMLHttpRequest): void => {
     trimRegistry();
-
-    const fullMetadata: NetworkRequestMetadata = {
-      id,
-      method: metadata.method || 'GET',
-      url: metadata.url || '',
-      headers: metadata.headers || {},
-      startTime: metadata.startTime || Date.now(),
-      status: metadata.status || 'pending',
-      ...metadata,
-    };
-
     registry.set(id, {
       id,
       request,
-      metadata: fullMetadata,
       sentAt: Date.now(),
     });
   };
 
-  const getEntry = (id: string) => {
-    return registry.get(id) ?? null;
-  };
-
-  const updateEntry = (
-    id: string,
-    updates: Partial<NetworkRequestMetadata>
-  ) => {
-    const entry = registry.get(id);
-    if (entry) {
-      entry.metadata = { ...entry.metadata, ...updates };
-    }
-  };
-
-  const getAllEntries = () => {
-    return Array.from(registry.values());
+  const getEntry = (id: string): XMLHttpRequest | null => {
+    return registry.get(id)?.request ?? null;
   };
 
   const clear = () => {
@@ -115,8 +47,6 @@ export const getNetworkRequestsRegistry = (): NetworkRequestRegistry => {
   return {
     addEntry,
     getEntry,
-    updateEntry,
-    getAllEntries,
     clear,
   };
 };

package/src/react-native/useNetworkActivityDevTools.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
 import { getNetworkInspector } from './network-inspector';
-import { NetworkActivityEventMap } from '../types/client';
+import { NetworkActivityEventMap } from '../shared/client';
 
 export const useNetworkActivityDevTools = () => {
   const client = useRozeniteDevToolsClient<NetworkActivityEventMap>({

package/src/react-native/xhr-interceptor.ts

@@ -31,8 +31,8 @@ type XHRInterceptorRequestHeaderCallback = (
 ) => void;
 
 type XHRInterceptorHeaderReceivedCallback = (
-  responseContentType: string | void,
-  responseSize: number | void,
+  responseContentType: string | undefined,
+  responseSize: number | undefined,
   allHeaders: string,
   request: XMLHttpRequest
 ) => void;

package/src/react-native/xml-request.d.ts

@@ -1,3 +1,12 @@
+declare type BlobData = {
+  blobId: string;
+  lastModified?: number;
+  name?: string;
+  offset: number;
+  size: number;
+  type?: string;
+};
+
 declare global {
   interface XMLHttpRequest {
     _requestId?: number;
@@ -10,13 +19,14 @@ declare global {
     _method?: string | null;
     _perfKey?: string | null;
     _responseType: ResponseType;
-    _response: string;
+    _response: string | BlobData;
     _sent: boolean;
     _url?: string | null;
     _timedOut: boolean;
     _trackingName?: string;
     _incrementalEvents: boolean;
     _startTime?: number | null;
+    responseHeaders?: { [key: string]: string };
   }
 }
 

package/src/shared/client.ts

@@ -0,0 +1,80 @@
+import { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+
+export type RequestId = string;
+export type Timestamp = number;
+
+export type Request = {
+  url: string;
+  method: string;
+  headers: Record<string, string>;
+  postData?: string;
+};
+
+export type Response = {
+  url: string;
+  status: number;
+  statusText: string;
+  headers: Record<string, string>;
+  contentType: string;
+  size: number;
+  responseTime: Timestamp;
+};
+
+export type Initiator = {
+  type: string;
+  url?: string;
+  lineNumber?: number;
+  columnNumber?: number;
+};
+
+export type ResourceType = 'XHR' | 'Fetch' | 'Other';
+
+export type NetworkActivityEventMap = {
+  // Control events
+  'network-enable': unknown;
+  'network-disable': unknown;
+
+  // Network request events
+  '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;
+    ttfb: number;
+  };
+
+  'request-failed': {
+    requestId: RequestId;
+    timestamp: Timestamp;
+    type: ResourceType;
+    error: string;
+    canceled: boolean;
+  };
+
+  'get-response-body': {
+    requestId: RequestId;
+  };
+
+  'response-body': {
+    requestId: RequestId;
+    body: string | null;
+  };
+};
+
+export type NetworkActivityDevToolsClient =
+  RozeniteDevToolsClient<NetworkActivityEventMap>;