@rozenite/network-activity-plugin 1.1.0 → 1.3.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/hooks/useCopyToClipboard.ts

@@ -5,10 +5,14 @@ import { copyToClipboard } from '../utils/copyToClipboard';
 export function useCopyToClipboard() {
   const [isCopied, setIsCopied] = useState(false);
 
-  const timeoutRef = useRef<NodeJS.Timeout>();
+  const timeoutRef = useRef<NodeJS.Timeout>(null);
 
   useEffect(() => {
-    return () => clearTimeout(timeoutRef.current);
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    }
   }, []);
 
   const copy = useCallback(async (value: string) => {
@@ -17,7 +21,9 @@ export function useCopyToClipboard() {
 
       setIsCopied(true);
 
-      clearTimeout(timeoutRef.current);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
       timeoutRef.current = setTimeout(() => setIsCopied(false), 1000);
     } catch (error) {
       console.error('Failed to copy:', error);

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/project.json

@@ -1,12 +0,0 @@
-{
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "name": "@rozenite/network-activity-plugin",
-  "targets": {
-    "build": {
-      "cache": true,
-      "dependsOn": ["^build"],
-      "inputs": ["{projectRoot}/src/**/*"],
-      "outputs": ["{projectRoot}/dist"]
-    }
-  }
-}