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

package/src/ui/tabs/ResponseTab.tsx

@@ -2,12 +2,23 @@ import { useEffect, useRef } from 'react';
 import { ScrollArea } from '../components/ScrollArea';
 import { JsonTree } from '../components/JsonTree';
 import { HttpNetworkEntry } from '../state/model';
+import { Section } from '../components/Section';
+import { KeyValueGrid } from '../components/KeyValueGrid';
+import { CodeBlock } from '../components/CodeBlock';
 
 export type ResponseTabProps = {
   selectedRequest: HttpNetworkEntry;
   onRequestResponseBody: (requestId: string) => void;
 };
 
+const renderResponseBodySection = (children: React.ReactNode) => {
+  return (
+    <Section title="Response Body" collapsible={false}>
+      <div className="space-y-4">{children}</div>
+    </Section>
+  );
+};
+
 export const ResponseTab = ({
   selectedRequest,
   onRequestResponseBody,
@@ -24,10 +35,10 @@ export const ResponseTab = ({
     }
   }, [selectedRequest.id]);
 
-  const renderResponseBody = () => {
-    const responseBody = selectedRequest.response?.body;
+  const responseBody = selectedRequest.response?.body;
 
-    if (!responseBody) {
+  const renderResponseBody = () => {
+    if (!responseBody || responseBody.data === null) {
       return (
         <div className="text-sm text-gray-400">
           No response body available for this request
@@ -37,94 +48,68 @@ export const ResponseTab = ({
 
     const { type, data } = responseBody;
 
-    // Handle null data
-    if (data === null) {
-      return (
-        <div className="text-sm text-gray-400">
-          No response body available for this request
-        </div>
-      );
-    }
+    const contentTypeGrid = (
+      <KeyValueGrid
+        items={[
+          {
+            key: 'Content-Type',
+            value: type,
+            valueClassName: 'text-blue-400',
+          },
+        ]}
+      />
+    );
+
+    if (type.startsWith('application/json')) {
+      let bodyContent;
 
-    // Handle JSON content
-    if (type === 'application/json') {
       try {
         const jsonData = JSON.parse(data);
-        return (
-          <div className="space-y-4">
-            <div className="text-sm mb-2">
-              <span className="text-gray-400">Content-Type: </span>
-              <span className="text-blue-400">{type}</span>
-            </div>
-            <div className="bg-gray-800 p-3 rounded border border-gray-700">
-              <JsonTree data={jsonData} />
-            </div>
-          </div>
+
+        bodyContent = (
+          <CodeBlock>
+            <JsonTree data={jsonData} />
+          </CodeBlock>
         );
       } catch {
-        // Fallback to pre tag if JSON parsing fails
-        return (
-          <div className="space-y-4">
-            <div className="text-sm mb-2">
-              <span className="text-gray-400">Content-Type: </span>
-              <span className="text-blue-400">{type}</span>
-            </div>
-            <pre className="text-sm font-mono text-gray-300 whitespace-pre-wrap bg-gray-800 p-3 rounded border border-gray-700 overflow-x-auto">
-              {data}
-            </pre>
-            <div className="text-xs text-gray-500">
+        bodyContent = (
+          <>
+            <CodeBlock>{data}</CodeBlock>
+            <div className="text-xs text-gray-500 mt-1">
               ⚠️ Failed to parse as JSON, showing as raw text
             </div>
-          </div>
+          </>
         );
       }
-    }
 
-    // Handle HTML content
-    if (type === 'text/html') {
-      return (
-        <div className="space-y-4">
-          <div className="text-sm mb-2">
-            <span className="text-gray-400">Content-Type: </span>
-            <span className="text-blue-400">{type}</span>
-          </div>
-          <pre className="text-sm font-mono text-gray-300 whitespace-pre-wrap bg-gray-800 p-3 rounded border border-gray-700 overflow-x-auto">
-            {data}
-          </pre>
-        </div>
+      return renderResponseBodySection(
+        <>
+          {contentTypeGrid}
+          {bodyContent}
+        </>
       );
     }
 
-    // Handle other text content types
     if (
       type.startsWith('text/') ||
-      type === 'application/xml' ||
-      type === 'application/javascript'
+      type.startsWith('application/xml') ||
+      type.startsWith('application/javascript')
     ) {
-      return (
-        <div className="space-y-4">
-          <div className="text-sm mb-2">
-            <span className="text-gray-400">Content-Type: </span>
-            <span className="text-blue-400">{type}</span>
-          </div>
-          <pre className="text-sm font-mono text-gray-300 whitespace-pre-wrap bg-gray-800 p-3 rounded border border-gray-700 overflow-x-auto">
-            {data}
-          </pre>
-        </div>
+      return renderResponseBodySection(
+        <>
+          {contentTypeGrid}
+          <CodeBlock>{data}</CodeBlock>
+        </>
       );
     }
 
-    // Handle other content types
-    return (
-      <div className="space-y-4">
-        <div className="text-sm mb-2">
-          <span className="text-gray-400">Content-Type: </span>
-          <span className="text-blue-400">{type}</span>
-        </div>
+    return renderResponseBodySection(
+      <>
+        {contentTypeGrid}
         <div className="text-sm text-gray-400">
           Binary content not shown - {data.length} bytes
         </div>
-      </div>
+      </>
     );
   };
 

package/src/utils/applyReactNativeRequestHeadersLogic.ts

@@ -1,5 +1,5 @@
 import { HttpHeaders, RequestPostData } from '../shared/client';
-import { getHttpHeaderValue } from './getHttpHeaderValue';
+import { getHttpHeader } from './getHttpHeader';
 import { inferContentTypeFromPostData } from './inferContentTypeFromPostData';
 
 /**
@@ -12,7 +12,7 @@ export function applyReactNativeRequestHeadersLogic(
   headers: HttpHeaders,
   postData?: RequestPostData
 ): HttpHeaders {
-  const existingContentType = getHttpHeaderValue(headers, 'content-type');
+  const existingContentType = getHttpHeader(headers, 'content-type');
   
   if (existingContentType) {
     return headers;

package/src/utils/applyReactNativeResponseHeadersLogic.ts

@@ -0,0 +1,29 @@
+import { HttpHeaders, XHRHeaders } from '../shared/client';
+import { splitSetCookieHeaderByComma } from './cookieParser';
+import { getHttpHeader } from './getHttpHeader';
+
+/**
+ * Applies React Native specific logic to response headers.
+ * React Native concatenates multiple header values into single strings,
+ * this function parses them back into arrays where appropriate.
+ * 
+ * See:
+ * https://github.com/facebook/react-native/blob/588f0c5ce6c283f116228456da2170d2adc3cbf4/ReactAndroid/src/main/java/com/facebook/react/modules/network/NetworkingModule.java#L637
+ */
+export const applyReactNativeResponseHeadersLogic = (
+  headers: XHRHeaders
+): HttpHeaders => {
+  const parsedHeaders: HttpHeaders = { ...headers };
+
+  const setCookieHeader = getHttpHeader(headers, 'set-cookie');
+
+  if (setCookieHeader) {
+    const { value, originalKey } = setCookieHeader;
+
+    const cookies = splitSetCookieHeaderByComma(value);
+
+    parsedHeaders[originalKey] = cookies.length > 0 ? cookies : value;
+  }
+
+  return parsedHeaders;
+};

package/src/utils/cookieParser.ts

@@ -0,0 +1,126 @@
+import { Cookie, HttpHeaders } from '../shared/client';
+import { getHttpHeader } from './getHttpHeader';
+
+export const parseSetCookieHeader = (setCookieStr: string): Cookie => {
+  const parts = setCookieStr.split(';').map((p) => p.trim());
+  const [nameValue, ...attributes] = parts;
+  const [name, ...valueParts] = nameValue.split('=');
+
+  const value = valueParts.join('=');
+
+  const cookieObj: Cookie = {
+    name: name?.trim() || '',
+    value: value?.trim() || '',
+  };
+
+  attributes.forEach((attr) => {
+    const [attrName, ...attrValueParts] = attr.split('=');
+    const lowerAttrName = attrName.trim().toLowerCase();
+    const attrValue = attrValueParts.join('=');
+
+    switch (lowerAttrName) {
+      case 'domain':
+        cookieObj.domain = attrValue;
+
+        break;
+
+      case 'path':
+        cookieObj.path = attrValue;
+
+        break;
+
+      case 'expires':
+        cookieObj.expires = attrValue;
+
+        break;
+
+      case 'max-age':
+        cookieObj.maxAge = attrValue;
+
+        break;
+
+      case 'secure':
+        cookieObj.secure = true;
+
+        break;
+
+      case 'httponly':
+        cookieObj.httpOnly = true;
+
+        break;
+
+      case 'samesite':
+        cookieObj.sameSite = attrValue;
+
+        break;
+    }
+  });
+
+  return cookieObj;
+};
+
+export const splitSetCookieHeaderByComma = (header: string): string[] => {
+  const regex = /(?:^|,\s)([^=;,]+=[^;]+(?:;[^,]*)*)/g;
+  const matches: string[] = [];
+
+  let match;
+
+  while ((match = regex.exec(header)) !== null) {
+    matches.push(match[1].trim());
+  }
+
+  return matches;
+};
+
+export const parseCookieHeader = (cookieString: string): Cookie[] => {
+  if (!cookieString) return [];
+
+  return cookieString
+    .split(';')
+    .map((cookieStr) => {
+      const [name, ...valueParts] = cookieStr.trim().split('=');
+      const value = valueParts.join('=');
+
+      return {
+        name: name?.trim() || '',
+        value: value?.trim() || '',
+      };
+    })
+    .filter((cookieObj) => cookieObj.name);
+};
+
+export const parseRequestCookiesFromHeaders = (
+  headers: HttpHeaders
+): Cookie[] => {
+  const cookieHeader = getHttpHeader(headers, 'cookie');
+
+  if (!cookieHeader) {
+    return [];
+  }
+
+  const { value } = cookieHeader;
+
+  if (Array.isArray(value)) {
+    return value.flatMap(parseCookieHeader);
+  }
+
+  return parseCookieHeader(value);
+};
+
+export const parseResponseCookiesFromHeaders = (
+  headers: HttpHeaders
+): Cookie[] => {
+  const setCookieHeader = getHttpHeader(headers, 'set-cookie');
+
+  if (!setCookieHeader) {
+    return [];
+  }
+
+  const { value } = setCookieHeader;
+
+  if (Array.isArray(value)) {
+    return value.flatMap(parseSetCookieHeader);
+  }
+
+  return [parseSetCookieHeader(value)];
+};

package/src/utils/getContentTypeMimeType.ts

@@ -1,12 +1,17 @@
 import { HttpHeaders } from '../shared/client';
-import { getHttpHeaderValue } from './getHttpHeaderValue';
+import { getHttpHeader } from './getHttpHeader';
 
 export function getContentTypeMime(headers: HttpHeaders) {
-  const contentType = getHttpHeaderValue(headers, 'content-type');
+  const contentType = getHttpHeader(headers, 'content-type');
 
-  if (contentType) {
-    return contentType.split(';')[0].trim();
+  if (!contentType) {
+    return undefined;
   }
 
-  return undefined;
+  const { value } = contentType;
+
+  // Content-Type can't be an array, but if it does we simply get the first element.
+  const actualValue = Array.isArray(value) ? value[0] : value;
+
+  return actualValue.split(';')[0].trim();
 }

package/src/utils/getHttpHeader.ts

@@ -0,0 +1,17 @@
+import { HttpHeaders, XHRHeaders } from '../shared/client';
+
+// Utility to get header value and actual key case-insensitively
+export function getHttpHeader<T extends HttpHeaders | XHRHeaders>(
+  headers: T,
+  name: string
+) {
+  const lowerName = name.toLowerCase();
+
+  for (const key in headers) {
+    if (key.toLowerCase() === lowerName) {
+      return { value: headers[key], originalKey: key };
+    }
+  }
+
+  return undefined;
+}

package/src/utils/getStringSizeInBytes.ts

@@ -0,0 +1,3 @@
+export const getStringSizeInBytes = (value: string) => {
+  return new TextEncoder().encode(value).length;
+};

package/src/utils/isNumber.ts

@@ -0,0 +1,3 @@
+export const isNumber = (value: unknown): value is number => {
+  return typeof value === 'number';
+};

package/src/utils/safeStringify.ts

@@ -1,7 +1,7 @@
 export function safeStringify(data: unknown): string {
   try {
     return typeof data === 'string' ? data : JSON.stringify(data);
-  } catch (error) {
+  } catch {
     return String(data);
   }
 }

package/dist/src/utils/getHttpHeaderValue.d.ts

@@ -1,2 +0,0 @@
-import { HttpHeaders } from '../shared/client';
-export declare function getHttpHeaderValue(headers: HttpHeaders, name: string): string | undefined;

package/src/utils/getHttpHeaderValue.ts

@@ -1,14 +0,0 @@
-import { HttpHeaders } from '../shared/client';
-
-// Utility to get header value case-insensitively
-export function getHttpHeaderValue(headers: HttpHeaders, name: string) {
-  const lowerName = name.toLowerCase();
-
-  for (const key in headers) {
-    if (key.toLowerCase() === lowerName) {
-      return headers[key];
-    }
-  }
-
-  return undefined;
-}