@rozenite/network-activity-plugin 1.0.0-alpha.11 → 1.0.0-alpha.12

package/src/react-native/config.ts

@@ -0,0 +1,33 @@
+export type InspectorType = 'http' | 'websocket' | 'sse';
+
+export type NetworkActivityDevToolsConfig = {
+  /**
+   * 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?: {
+    [key in InspectorType]?: boolean;
+  };
+};
+
+export const DEFAULT_CONFIG: NetworkActivityDevToolsConfig = {
+  inspectors: {
+    http: true,
+    websocket: true,
+    sse: true,
+  },
+};
+
+export const validateConfig = (config: NetworkActivityDevToolsConfig): void => {
+  const inspectors = config.inspectors;
+
+  if (!inspectors) {
+    return;
+  }
+
+  // For SSE, HTTP must be enabled
+  if (inspectors.sse && !inspectors.http) {
+    throw new Error('SSE inspector requires HTTP inspector to be enabled.');
+  }
+};

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

@@ -10,6 +10,8 @@ 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';
 
 const networkRequestsRegistry = getNetworkRequestsRegistry();
 
@@ -51,17 +53,35 @@ function getRequestBody(body: XHRPostData): RequestPostData {
   };
 }
 
-const getResponseSize = (request: XMLHttpRequest): number => {
-  // Handle a case of 204 where no-content was sent.
-  if (request.response === null) {
-    return 0;
-  }
+const getResponseSize = (request: XMLHttpRequest): number | null => {
+  try {
+    const { responseType, response } = request;
 
-  if (typeof request.response === 'object') {
-    return request.response.size;
-  }
+    // 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));
+    }
 
-  return request.response.length || 0;
+    if (responseType === 'blob') {
+      return response.size;
+    }
+
+    if (responseType === 'arraybuffer') {
+      return response.byteLength;
+    }
+
+    return 0;
+  } catch {
+    return null;
+  }
 };
 
 const getResponseBody = async (
@@ -93,6 +113,10 @@ const getResponseBody = async (
     }
   }
 
+  if (responseType === 'json') {
+    return safeStringify(request.response);
+  }
+
   return null;
 };
 
@@ -184,7 +208,9 @@ export const getNetworkInspector = (
           url: request._url as string,
           status: request.status,
           statusText: request.statusText,
-          headers: request.responseHeaders || {},
+          headers: applyReactNativeResponseHeadersLogic(
+            request.responseHeaders || {}
+          ),
           contentType: getContentType(request),
           size: getResponseSize(request),
           responseTime: Date.now(),

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

@@ -110,6 +110,7 @@ export const getSSEInspector = (): SSEInspector => {
     },
     isEnabled: () => SSEInterceptor.isInterceptorEnabled(),
     dispose: () => {
+      SSEInterceptor.disableInterception();
       eventEmitter.events = {};
     },
     on: <TEventType extends keyof SSEEventMap>(

package/src/react-native/useNetworkActivityDevTools.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
 import { getNetworkInspector } from './http/network-inspector';
 import { NetworkActivityEventMap } from '../shared/client';
@@ -7,26 +7,71 @@ import { WebSocketEventMap } from '../shared/websocket-events';
 import { UnionToTuple } from './utils';
 import { getSSEInspector } from './sse/sse-inspector';
 import { SSEEventMap } from '../shared/sse-events';
-
-export const useNetworkActivityDevTools = () => {
+import {
+  DEFAULT_CONFIG,
+  NetworkActivityDevToolsConfig,
+  validateConfig,
+} from './config';
+
+export const useNetworkActivityDevTools = (
+  config: NetworkActivityDevToolsConfig = DEFAULT_CONFIG
+) => {
+  const isRecordingEnabledRef = useRef(false);
   const client = useRozeniteDevToolsClient<NetworkActivityEventMap>({
     pluginId: '@rozenite/network-activity-plugin',
   });
 
+  const isHttpInspectorEnabled = config.inspectors?.http ?? true;
+  const isWebSocketInspectorEnabled = config.inspectors?.websocket ?? true;
+  const isSSEInspectorEnabled = config.inspectors?.sse ?? true;
+
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    validateConfig(config);
+  }, [config]);
+
+  /** Persist the recording state across hot reloads */
   useEffect(() => {
     if (!client) {
       return;
     }
 
+    const subscriptions = [
+      client.onMessage('network-enable', () => {
+        isRecordingEnabledRef.current = true;
+      }),
+      client.onMessage('network-disable', () => {
+        isRecordingEnabledRef.current = false;
+      }),
+    ];
+
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+    };
+  }, [client]);
+
+  useEffect(() => {
+    if (!client || !isHttpInspectorEnabled) {
+      return;
+    }
+
     const networkInspector = getNetworkInspector(client);
 
+    // If recording was previously enabled, enable the inspector (hot reload)
+    if (isRecordingEnabledRef.current) {
+      networkInspector.enable();
+    }
+
     return () => {
       networkInspector.dispose();
     };
-  }, [client]);
+  }, [client, isHttpInspectorEnabled]);
 
   useEffect(() => {
-    if (!client) {
+    if (!client || !isWebSocketInspectorEnabled) {
       return;
     }
 
@@ -55,14 +100,19 @@ export const useNetworkActivityDevTools = () => {
       websocketInspector.disable();
     });
 
+    // If recording was previously enabled, enable the inspector (hot reload)
+    if (isRecordingEnabledRef.current) {
+      websocketInspector.enable();
+    }
+
     return () => {
       // Subscriptions will be disposed by the inspector
       websocketInspector.dispose();
     };
-  }, [client]);
+  }, [client, isWebSocketInspectorEnabled]);
 
   useEffect(() => {
-    if (!client) {
+    if (!client || !isSSEInspectorEnabled) {
       return;
     }
 
@@ -88,11 +138,16 @@ export const useNetworkActivityDevTools = () => {
       sseInspector.disable();
     });
 
+    // If recording was previously enabled, enable the inspector (hot reload)
+    if (isRecordingEnabledRef.current) {
+      sseInspector.enable();
+    }
+
     return () => {
       // Subscriptions will be disposed by the inspector
       sseInspector.dispose();
     };
-  }, [client]);
+  }, [client, isSSEInspectorEnabled]);
 
   return client;
 };

package/src/shared/client.ts

@@ -2,7 +2,9 @@ import { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
 import { WebSocketEventMap } from './websocket-events';
 import { SSEEventMap } from './sse-events';
 
-export type HttpHeaders = Record<string, string>;
+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;
@@ -28,6 +30,18 @@ export type RequestPostData =
   | 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;
@@ -41,7 +55,7 @@ export type Response = {
   statusText: string;
   headers: HttpHeaders;
   contentType: string;
-  size: number;
+  size: number | null;
   responseTime: Timestamp;
 };
 
@@ -79,7 +93,7 @@ export type NetworkActivityEventMap = {
     requestId: RequestId;
     timestamp: Timestamp;
     duration: number;
-    size: number;
+    size: number | null;
     ttfb: number;
   };
 

package/src/ui/components/CodeBlock.tsx

@@ -0,0 +1,19 @@
+import { HTMLProps } from 'react';
+import { cn } from '../utils/cn';
+
+export type CodeBlockProps = HTMLProps<HTMLPreElement>;
+
+const codeBlockClassNames =
+  'text-sm font-mono text-gray-300 whitespace-pre-wrap bg-gray-800 p-3 rounded border border-gray-700 overflow-x-auto wrap-anywhere';
+
+export const CodeBlock = ({
+  children,
+  className,
+  ...props
+}: CodeBlockProps) => {
+  return (
+    <pre className={cn(codeBlockClassNames, className)} {...props}>
+      {children}
+    </pre>
+  );
+};

package/src/ui/components/CookieCard.tsx

@@ -0,0 +1,64 @@
+import { Badge } from './Badge';
+import { Cookie } from '../../shared/client';
+import { cn } from '../utils/cn';
+
+type CookieCardProps = {
+  cookie: Cookie;
+  keyClassName?: string;
+};
+
+export const CookieCard = ({ cookie, keyClassName }: CookieCardProps) => (
+  <div className="bg-gray-800 border border-gray-700 rounded p-3">
+    <div className="flex items-center justify-between mb-2">
+      <span className={cn('text-sm font-medium', keyClassName)}>
+        {cookie.name}
+      </span>
+      <div className="flex items-center gap-2">
+        {cookie.secure && (
+          <Badge
+            variant="outline"
+            className="text-xs text-yellow-400 border-yellow-400"
+          >
+            Secure
+          </Badge>
+        )}
+        {cookie.httpOnly && (
+          <Badge
+            variant="outline"
+            className="text-xs text-purple-400 border-purple-400"
+          >
+            HttpOnly
+          </Badge>
+        )}
+      </div>
+    </div>
+    <div className="text-sm text-gray-300 mb-2 break-all">{cookie.value}</div>
+    <div className="grid grid-cols-2 gap-4 text-xs text-gray-400">
+      {cookie.domain && (
+        <div>
+          <span className="font-medium">Domain:</span> {cookie.domain}
+        </div>
+      )}
+      {cookie.path && (
+        <div>
+          <span className="font-medium">Path:</span> {cookie.path}
+        </div>
+      )}
+      {cookie.expires && (
+        <div>
+          <span className="font-medium">Expires:</span> {cookie.expires}
+        </div>
+      )}
+      {cookie.maxAge && (
+        <div>
+          <span className="font-medium">Max-Age:</span> {cookie.maxAge}
+        </div>
+      )}
+      {cookie.sameSite && (
+        <div>
+          <span className="font-medium">SameSite:</span> {cookie.sameSite}
+        </div>
+      )}
+    </div>
+  </div>
+);

package/src/ui/components/JsonTree.tsx

@@ -35,13 +35,20 @@ export const JsonTree = ({
       shouldExpandNodeInitially={shouldExpandNodeInitially}
       // For objects and arrays
       getItemString={(_type, data, itemType, itemString) => (
-        <JsonTreeCopyableItem getCopyableValue={() => JSON.stringify(data, null, 2)}>
-          <>{itemType} {itemString}</>
+        <JsonTreeCopyableItem
+          getCopyableValue={() => JSON.stringify(data, null, 2)}
+        >
+          <>
+            {itemType} {itemString}
+          </>
         </JsonTreeCopyableItem>
       )}
       // For primitives
       valueRenderer={(valueAsString, value) => (
-        <JsonTreeCopyableItem getCopyableValue={() => String(value)} className="ml-2">
+        <JsonTreeCopyableItem
+          getCopyableValue={() => String(value)}
+          className="ml-2"
+        >
           {String(valueAsString)}
         </JsonTreeCopyableItem>
       )}

package/src/ui/components/JsonTreeCopyableItem.tsx

@@ -1,33 +1,37 @@
-import { Check, Copy } from "lucide-react";
-import { MouseEvent, PropsWithChildren } from "react";
-import { useCopyToClipboard } from "../hooks/useCopyToClipboard";
-import { cn } from "../utils/cn";
+import { Check, Copy } from 'lucide-react';
+import { MouseEvent, PropsWithChildren } from 'react';
+import { useCopyToClipboard } from '../hooks/useCopyToClipboard';
+import { cn } from '../utils/cn';
 
 type JsonTreeCopyableItemProps = PropsWithChildren<{
   getCopyableValue: () => string;
   className?: string;
 }>;
 
-export const JsonTreeCopyableItem = ({ children, getCopyableValue, className }: JsonTreeCopyableItemProps) => {
+export const JsonTreeCopyableItem = ({
+  children,
+  getCopyableValue,
+  className,
+}: JsonTreeCopyableItemProps) => {
   const { isCopied, copy } = useCopyToClipboard();
-  
+
   const handleCopy = (event: MouseEvent) => {
     event.stopPropagation();
 
     copy(getCopyableValue());
-  }
+  };
 
   const Icon = isCopied ? Check : Copy;
 
   return (
     <span className={cn('inline-block group', className)}>
       {children}
-      <div 
+      <div
         className="inline-block cursor-pointer opacity-0 group-hover:opacity-100 text-gray-500 hover:text-gray-300 transition-all p-2 -m-2 ml-0 translate-y-0.75"
         onClick={handleCopy}
       >
-        <Icon className='h-4 w-4' />
+        <Icon className="h-4 w-4" />
       </div>
     </span>
   );
-}
+};

package/src/ui/components/RequestList.tsx

@@ -17,6 +17,7 @@ import {
 } from '../state/hooks';
 import { getStatusColor } from '../utils/getStatusColor';
 import { FilterState } from './FilterBar';
+import { isNumber } from '../../utils/isNumber';
 
 type NetworkRequest = {
   id: RequestId;
@@ -134,7 +135,7 @@ const processNetworkRequests = (
       method: request.method,
       domain,
       path,
-      size: formatSize(request.size || 0),
+      size: isNumber(request.size) ? formatSize(request.size) : '—',
       time: formatDuration(duration),
       type: request.type,
       startTime: formatStartTime(request.timestamp),
@@ -153,8 +154,13 @@ const columns = [
   }),
   columnHelper.accessor('name', {
     header: 'Name',
-    cell: ({ getValue }) => (
-      <div className="flex-1 min-w-0 truncate">{getValue()}</div>
+    cell: ({ row, getValue }) => (
+      <div 
+        className="flex-1 min-w-0 truncate"
+        title={row.original.path}
+      >
+        {getValue()}
+      </div>
     ),
     sortingFn: 'alphanumeric',
   }),
@@ -184,13 +190,17 @@ const columns = [
   }),
   columnHelper.accessor('size', {
     header: 'Size',
-    cell: ({ getValue }) => <div className="text-gray-300">{getValue()}</div>,
+    cell: ({ getValue }) => (
+      <div className="text-gray-300 whitespace-nowrap">{getValue()}</div>
+    ),
     size: 80,
     sortingFn: sortSize,
   }),
   columnHelper.accessor('time', {
     header: 'Time',
-    cell: ({ getValue }) => <div className="text-gray-300">{getValue()}</div>,
+    cell: ({ getValue }) => (
+      <div className="text-gray-300 whitespace-nowrap">{getValue()}</div>
+    ),
     size: 80,
     sortingFn: sortTime,
   }),

package/src/ui/components/Section.tsx

@@ -1,15 +1,42 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { cn } from '../utils/cn';
 
 export type SectionProps = {
   title: string;
   children: React.ReactNode;
+  collapsible?: boolean;
 };
 
-export const Section = ({ title, children }: SectionProps) => {
+export const Section = ({
+  title,
+  children,
+  collapsible = true,
+}: SectionProps) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const isChildrenVisible = !collapsible || !isCollapsed;
+
+  const handleCollapseSection = () => {
+    setIsCollapsed((prevState) => !prevState);
+  };
+
+  const headerClassName = `flex items-center w-full text-left text-sm text-gray-300 mb-2 ${
+    collapsible ? 'hover:text-white' : 'cursor-default'
+  }`;
+
   return (
     <div>
-      <h4 className="text-sm font-medium text-gray-300 mb-2">{title}</h4>
-      {children}
+      <button
+        onClick={collapsible ? handleCollapseSection : undefined}
+        className={headerClassName}
+        tabIndex={collapsible ? 0 : -1}
+      >
+        {collapsible && (
+          <span className={cn('mr-2', { 'rotate-90': !isCollapsed })}>▶</span>
+        )}
+        <span className="font-medium">{title}</span>
+      </button>
+      {isChildrenVisible && children}
     </div>
   );
 };

package/src/ui/state/model.ts

@@ -1,4 +1,4 @@
-import { Initiator, ResourceType, RequestPostData } from '../../shared/client';
+import { Initiator, ResourceType, HttpHeaders, RequestPostData } from '../../shared/client';
 
 export type RequestId = string;
 export type Timestamp = number;
@@ -21,7 +21,7 @@ export type HttpResponseData = {
 export type HttpRequest = {
   url: string;
   method: HttpMethod;
-  headers: Record<string, string>;
+  headers: HttpHeaders;
   body?: HttpRequestData;
 };
 
@@ -29,7 +29,7 @@ export type HttpResponse = {
   url: string;
   status: number;
   statusText: string;
-  headers: Record<string, string>;
+  headers: HttpHeaders;
   contentType: string;
   size: number;
   responseTime: Timestamp;
@@ -129,7 +129,7 @@ export type ProcessedRequest = {
   status: HttpStatus | WebSocketStatus | SSEStatus;
   timestamp: Timestamp;
   duration?: number;
-  size?: number;
+  size: number | null;
   method: HttpMethod | 'WS' | 'SSE';
   httpStatus?: number;
 };