@rozenite/network-activity-plugin 1.1.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,7 +128,7 @@ 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);
@@ -262,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({
@@ -302,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/state/derived.ts

@@ -21,7 +21,7 @@ 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,
@@ -35,6 +35,7 @@ export const getProcessedRequests = memoize((state: NetworkActivityState) => {
         status: wsEntry.status,
         timestamp: wsEntry.timestamp,
         duration: wsEntry.duration,
+        size: null,
         method: 'WS',
         httpStatus: 0,
       });
@@ -47,6 +48,7 @@ export const getProcessedRequests = memoize((state: NetworkActivityState) => {
         status: sseEntry.status,
         timestamp: sseEntry.timestamp,
         duration: sseEntry.duration,
+        size: null,
         method: 'SSE',
         httpStatus: 0,
       });
@@ -63,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;
@@ -79,7 +81,7 @@ 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,
@@ -93,6 +95,7 @@ export const getRequestSummary = (
         status: wsEntry.status,
         timestamp: wsEntry.timestamp,
         duration: wsEntry.duration,
+        size: null,
         method: 'WS',
         httpStatus: 0,
       };
@@ -105,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/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(),
@@ -684,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;

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

@@ -1,408 +0,0 @@
-import { safeStringify } from '../../utils/safeStringify';
-import {
-  HttpMethod,
-  NetworkActivityDevToolsClient,
-  RequestPostData,
-  RequestTextPostData,
-  RequestBinaryPostData,
-  RequestFormDataPostData,
-  XHRPostData,
-} from '../../shared/client';
-import { getContentType } from '../utils';
-import { getNetworkRequestsRegistry } from './network-requests-registry';
-import { getBlobName } from '../utils/getBlobName';
-import { getFormDataEntries } from '../utils/getFormDataEntries';
-import { XHRInterceptor } from './xhr-interceptor';
-import { getStringSizeInBytes } from '../../utils/getStringSizeInBytes';
-import { applyReactNativeResponseHeadersLogic } from '../../utils/applyReactNativeResponseHeadersLogic';
-import {
-  isBlob,
-  isArrayBuffer,
-  isFormData,
-  isNullOrUndefined,
-} from '../../utils/typeChecks';
-import { getOverridesRegistry } from './overrides-registry';
-
-const networkRequestsRegistry = getNetworkRequestsRegistry();
-const overridesRegistry = getOverridesRegistry();
-
-const getBinaryPostData = (body: Blob): RequestBinaryPostData => ({
-  type: 'binary',
-  value: {
-    size: body.size,
-    type: body.type,
-    name: getBlobName(body),
-  },
-});
-
-const getArrayBufferPostData = (
-  body: ArrayBuffer | ArrayBufferView
-): RequestBinaryPostData => ({
-  type: 'binary',
-  value: {
-    size: body.byteLength,
-  },
-});
-
-const getTextPostData = (body: unknown): RequestTextPostData => ({
-  type: 'text',
-  value: safeStringify(body),
-});
-
-const getFormDataPostData = (body: FormData): RequestFormDataPostData => ({
-  type: 'form-data',
-  value: getFormDataEntries(body).reduce<RequestFormDataPostData['value']>(
-    (acc, [key, value]) => {
-      if (isBlob(value)) {
-        acc[key] = getBinaryPostData(value);
-      } else if (isArrayBuffer(value)) {
-        acc[key] = getArrayBufferPostData(value);
-      } else {
-        acc[key] = getTextPostData(value);
-      }
-
-      return acc;
-    },
-    {}
-  ),
-});
-
-const getRequestBody = (body: XHRPostData): RequestPostData => {
-  if (isNullOrUndefined(body)) {
-    return body;
-  }
-
-  if (isBlob(body)) {
-    return getBinaryPostData(body);
-  }
-
-  if (isArrayBuffer(body)) {
-    return getArrayBufferPostData(body);
-  }
-
-  if (isFormData(body)) {
-    return getFormDataPostData(body);
-  }
-
-  return getTextPostData(body);
-};
-
-const getResponseSize = (request: XMLHttpRequest): number | null => {
-  try {
-    const { responseType, response } = request;
-
-    // Handle a case of 204 where no-content was sent.
-    if (response === null) {
-      return 0;
-    }
-
-    if (responseType === '' || responseType === 'text') {
-      return getStringSizeInBytes(request.responseText);
-    }
-
-    if (responseType === 'json') {
-      return getStringSizeInBytes(safeStringify(response));
-    }
-
-    if (responseType === 'blob') {
-      return response.size;
-    }
-
-    if (responseType === 'arraybuffer') {
-      return response.byteLength;
-    }
-
-    return 0;
-  } catch {
-    return null;
-  }
-};
-
-const getResponseBody = async (
-  request: XMLHttpRequest
-): Promise<string | null> => {
-  const responseType = request.responseType;
-
-  // Response type is empty in certain cases, like when using axios.
-  if (responseType === '' || responseType === 'text') {
-    return request.responseText as string;
-  }
-
-  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);
-      });
-    }
-  }
-
-  if (responseType === 'json') {
-    return safeStringify(request.response);
-  }
-
-  return null;
-};
-
-const getInitiatorFromStack = (): {
-  type: string;
-  url?: string;
-  lineNumber?: number;
-  columnNumber?: number;
-} => {
-  try {
-    const stack = new Error().stack;
-    if (!stack) {
-      return { type: 'other' };
-    }
-
-    const line = stack.split('\n')[9];
-    const match = line.match(/at\s+(.+?)\s+\((.+?):(\d+):(\d+)\)/);
-    if (match) {
-      return {
-        type: 'script',
-        url: match[2],
-        lineNumber: parseInt(match[3]),
-        columnNumber: parseInt(match[4]),
-      };
-    }
-  } catch {
-    // Ignore stack parsing errors
-  }
-
-  return { type: 'other' };
-};
-
-export type NetworkInspector = {
-  enable: () => void;
-  disable: () => void;
-  isEnabled: () => boolean;
-  dispose: () => void;
-};
-
-const READY_STATE_HEADERS_RECEIVED = 2;
-
-export const getNetworkInspector = (
-  pluginClient: NetworkActivityDevToolsClient
-): NetworkInspector => {
-  const generateRequestId = (): string => {
-    return `req_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-  };
-
-  const handleRequestSend = (
-    data: XHRPostData,
-    request: XMLHttpRequest
-  ): void => {
-    const sendTime = Date.now();
-
-    const requestId = generateRequestId();
-    request._rozeniteRequestId = requestId;
-
-    const initiator = getInitiatorFromStack();
-
-    networkRequestsRegistry.addEntry(requestId, request);
-
-    let ttfb = 0;
-
-    pluginClient.send('request-sent', {
-      requestId: requestId,
-      timestamp: sendTime,
-      request: {
-        url: request._url as string,
-        method: request._method as HttpMethod,
-        headers: request._headers,
-        postData: getRequestBody(data),
-      },
-      type: 'XHR',
-      initiator,
-    });
-
-    request.addEventListener('progress', (event) => {
-      pluginClient.send('request-progress', {
-        requestId: requestId,
-        timestamp: Date.now(),
-        loaded: event.loaded,
-        total: event.total,
-        lengthComputable: event.lengthComputable,
-      });
-    });
-
-    request.addEventListener('readystatechange', () => {
-      if (request.readyState === READY_STATE_HEADERS_RECEIVED) {
-        ttfb = Date.now() - sendTime;
-      }
-    });
-
-    request.addEventListener('load', () => {
-      pluginClient.send('response-received', {
-        requestId: requestId,
-        timestamp: Date.now(),
-        type: 'XHR',
-        response: {
-          url: request._url as string,
-          status: request.status,
-          statusText: request.statusText,
-          headers: applyReactNativeResponseHeadersLogic(
-            request.responseHeaders || {}
-          ),
-          contentType: getContentType(request),
-          size: getResponseSize(request),
-          responseTime: Date.now(),
-        },
-      });
-    });
-
-    request.addEventListener('loadend', () => {
-      pluginClient.send('request-completed', {
-        requestId: requestId,
-        timestamp: Date.now(),
-        duration: Date.now() - sendTime,
-        size: getResponseSize(request),
-        ttfb,
-      });
-    });
-
-    request.addEventListener('error', () => {
-      pluginClient.send('request-failed', {
-        requestId: requestId,
-        timestamp: Date.now(),
-        type: 'XHR',
-        error: 'Failed',
-        canceled: false,
-      });
-    });
-
-    request.addEventListener('abort', () => {
-      pluginClient.send('request-failed', {
-        requestId: requestId,
-        timestamp: Date.now(),
-        type: 'XHR',
-        error: 'Aborted',
-        canceled: true,
-      });
-    });
-
-    request.addEventListener('timeout', () => {
-      pluginClient.send('request-failed', {
-        requestId: requestId,
-        timestamp: Date.now(),
-        type: 'XHR',
-        error: 'Timeout',
-        canceled: false,
-      });
-    });
-  };
-
-  const handleRequestOverride = (request: XMLHttpRequest): void => {
-    const override = overridesRegistry.getOverrideForUrl(
-      request._url as string
-    );
-
-    if (!override) {
-      return;
-    }
-
-    request.addEventListener('readystatechange', () => {
-      if (override.body !== undefined) {
-        Object.defineProperty(request, 'responseType', {
-          writable: true,
-        });
-
-        Object.defineProperty(request, 'response', {
-          writable: true,
-        });
-        Object.defineProperty(request, 'responseText', {
-          writable: true,
-        });
-
-        const contentType = getContentType(request);
-
-        if (contentType === 'application/json') {
-          request.responseType = 'json';
-        } else if (contentType === 'text/plain') {
-          request.responseType = 'text';
-        }
-
-        // @ts-expect-error - Mocking response
-        request.response = override.body;
-        // @ts-expect-error - Mocking responseText
-        request.responseText = override.body;
-      }
-
-      if (override.status !== undefined) {
-        Object.defineProperty(request, 'status', {
-          writable: true,
-        });
-
-        // @ts-expect-error - Mocking status
-        request.status = override.status;
-      }
-    });
-  };
-
-  const enable = () => {
-    XHRInterceptor.disableInterception();
-    XHRInterceptor.setSendCallback(handleRequestSend);
-    XHRInterceptor.setOverrideCallback(handleRequestOverride);
-    XHRInterceptor.enableInterception();
-  };
-
-  const disable = () => {
-    XHRInterceptor.disableInterception();
-    networkRequestsRegistry.clear();
-  };
-
-  const isEnabled = () => {
-    return XHRInterceptor.isInterceptorEnabled();
-  };
-
-  const enableSubscription = pluginClient.onMessage('network-enable', () => {
-    enable();
-  });
-
-  const disableSubscription = pluginClient.onMessage('network-disable', () => {
-    disable();
-  });
-
-  const handleBodySubscription = pluginClient.onMessage(
-    'get-response-body',
-    async ({ requestId }) => {
-      const request = networkRequestsRegistry.getEntry(requestId);
-
-      if (!request) {
-        return;
-      }
-
-      const body = await getResponseBody(request);
-
-      pluginClient.send('response-body', {
-        requestId,
-        body,
-      });
-    }
-  );
-
-  const dispose = () => {
-    disable();
-    enableSubscription.remove();
-    disableSubscription.remove();
-    handleBodySubscription.remove();
-  };
-
-  return {
-    enable,
-    disable,
-    isEnabled,
-    dispose,
-  };
-};