@rozenite/network-activity-plugin 1.8.1 → 1.10.0

package/src/ui/response-renderers/svg.tsx

@@ -0,0 +1,27 @@
+import { CodeBlock } from '../components/CodeBlock';
+import type { ResponseRenderer } from './types';
+
+export const svgRenderer: ResponseRenderer = {
+  id: 'svg',
+  matches: (contentType, body) =>
+    typeof body === 'string' && contentType.startsWith('image/svg+xml'),
+  views: ['preview', 'raw'],
+  defaultView: 'preview',
+  supportsOverride: false,
+  render: ({ view, body }) => {
+    if (typeof body !== 'string') return null;
+    if (view === 'preview') {
+      // <img>-embedded SVG runs no scripts in any major browser — this
+      // is the safe way to render SVG from untrusted servers.
+      const dataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(body)}`;
+      return (
+        <img
+          src={dataUrl}
+          alt="SVG response"
+          className="max-w-full max-h-[400px] object-contain bg-gray-800 rounded-md border border-gray-700 p-2"
+        />
+      );
+    }
+    return <CodeBlock>{body}</CodeBlock>;
+  },
+};

package/src/ui/response-renderers/text-fallback.tsx

@@ -0,0 +1,14 @@
+import { CodeBlock } from '../components/CodeBlock';
+import type { ResponseRenderer } from './types';
+
+export const textFallbackRenderer: ResponseRenderer = {
+  id: 'text-fallback',
+  matches: (_contentType, body) => typeof body === 'string',
+  views: ['raw'],
+  defaultView: 'raw',
+  supportsOverride: true,
+  render: ({ body }) => {
+    if (typeof body !== 'string') return null;
+    return <CodeBlock>{body}</CodeBlock>;
+  },
+};

package/src/ui/response-renderers/types.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+import type { HttpHeaders, ResponseBody } from '../../shared/client';
+
+export type ResponseView = 'preview' | 'raw';
+
+export type RenderCtx = {
+  contentType: string;
+  url: string;
+  // Response headers, used for fields like Content-Length and
+  // Content-Disposition filename. Optional so renderers can be
+  // tested with minimal fixtures.
+  headers?: HttpHeaders;
+  // Response size in bytes as reported by capture (may differ from
+  // the decoded base64 length when the server gzips on the wire).
+  size?: number;
+};
+
+export type RenderArgs = {
+  view: ResponseView;
+  body: ResponseBody;
+  ctx: RenderCtx;
+};
+
+// A response-format renderer: a self-contained entry the dispatcher
+// picks based on `matches`. Order in the `renderers` array is matching
+// priority — first match wins, so narrower predicates come before
+// wider fallbacks.
+export type ResponseRenderer = {
+  id: string;
+  matches: (contentType: string, body: ResponseBody) => boolean;
+  // Empty when the renderer has no toggleable views (e.g. a single
+  // placeholder for empty bodies). The Preview/Raw toggle is hidden
+  // unless `views.length > 1`.
+  views: ResponseView[];
+  defaultView: ResponseView;
+  supportsOverride: boolean;
+  render: (args: RenderArgs) => ReactNode;
+};

package/src/ui/response-renderers/unknown.tsx

@@ -0,0 +1,18 @@
+import type { ResponseRenderer } from './types';
+
+// Defensive last-resort match — every preceding renderer should already
+// have claimed any well-formed body. Reaching this renderer means the
+// wire format produced a shape no one handles, which is a bug somewhere
+// upstream. The label exposes the content-type for the bug report.
+export const unknownRenderer: ResponseRenderer = {
+  id: 'unknown',
+  matches: () => true,
+  views: [],
+  defaultView: 'raw',
+  supportsOverride: false,
+  render: ({ ctx }) => (
+    <div className="text-sm text-gray-400">
+      Could not display response (Content-Type: {ctx.contentType || 'unknown'})
+    </div>
+  ),
+};

package/src/ui/response-renderers/xml.tsx

@@ -0,0 +1,46 @@
+import { CodeBlock } from '../components/CodeBlock';
+import { XmlTree } from '../components/XmlTree';
+import { isXmlContentType } from '../../utils/getContentTypeMimeType';
+import type { ResponseRenderer } from './types';
+
+// DOMParser does not throw on malformed XML — instead it produces a
+// Document containing a `<parsererror>` element, but with different
+// placement across engines: Chrome/Safari put it as `documentElement`;
+// Firefox nests it under a dedicated namespace. Cover both.
+const FIREFOX_PARSERERROR_NS =
+  'http://www.mozilla.org/newlayout/xml/parsererror.xml';
+
+const hasParseError = (doc: Document): boolean =>
+  doc.documentElement.nodeName === 'parsererror' ||
+  doc.getElementsByTagNameNS(FIREFOX_PARSERERROR_NS, 'parsererror').length > 0;
+
+export const xmlRenderer: ResponseRenderer = {
+  id: 'xml',
+  matches: (contentType, body) =>
+    typeof body === 'string' && isXmlContentType(contentType),
+  views: ['preview', 'raw'],
+  defaultView: 'preview',
+  supportsOverride: true,
+  render: ({ view, body }) => {
+    if (typeof body !== 'string') return null;
+    const doc = new DOMParser().parseFromString(body, 'application/xml');
+    if (hasParseError(doc)) {
+      return (
+        <>
+          <CodeBlock>{body}</CodeBlock>
+          <div className="text-xs text-gray-500 mt-1">
+            ⚠️ Failed to parse as XML, showing as raw text
+          </div>
+        </>
+      );
+    }
+    if (view === 'raw') {
+      return <CodeBlock>{body}</CodeBlock>;
+    }
+    return (
+      <CodeBlock>
+        <XmlTree root={doc.documentElement} />
+      </CodeBlock>
+    );
+  },
+};

package/src/ui/state/derived.ts

@@ -18,6 +18,7 @@ export const getProcessedRequests = memoize((state: NetworkActivityState) => {
         id: httpEntry.id,
         type: 'http',
         source: httpEntry.source,
+        initiator: httpEntry.initiator,
         name: httpEntry.request.url,
         status: httpEntry.status,
         timestamp: httpEntry.timestamp,
@@ -25,6 +26,7 @@ export const getProcessedRequests = memoize((state: NetworkActivityState) => {
         size: httpEntry.size ?? null,
         method: httpEntry.request.method,
         httpStatus: httpEntry.response?.status,
+        contentType: httpEntry.response?.contentType,
         progress: httpEntry.progress,
       });
     } else if (entry.type === 'websocket') {
@@ -40,12 +42,15 @@ export const getProcessedRequests = memoize((state: NetworkActivityState) => {
         size: null,
         method: 'WS',
         httpStatus: 0,
+        contentType: undefined,
       });
     } else if (entry.type === 'sse') {
       const sseEntry = entry as SSENetworkEntry;
       requests.push({
         id: sseEntry.id,
         type: 'sse',
+        source: sseEntry.source,
+        initiator: sseEntry.initiator,
         name: sseEntry.request.url,
         status: sseEntry.status,
         timestamp: sseEntry.timestamp,
@@ -53,6 +58,7 @@ export const getProcessedRequests = memoize((state: NetworkActivityState) => {
         size: null,
         method: 'SSE',
         httpStatus: 0,
+        contentType: sseEntry.response?.contentType,
       });
     }
   }
@@ -80,6 +86,7 @@ export const getRequestSummary = (
         id: httpEntry.id,
         type: 'http',
         source: httpEntry.source,
+        initiator: httpEntry.initiator,
         name: httpEntry.request.url,
         status: httpEntry.status,
         timestamp: httpEntry.timestamp,
@@ -87,6 +94,7 @@ export const getRequestSummary = (
         size: httpEntry.size ?? null,
         method: httpEntry.request.method,
         httpStatus: httpEntry.response?.status || 0,
+        contentType: httpEntry.response?.contentType,
         progress: httpEntry.progress,
       };
     } else if (entry.type === 'websocket') {
@@ -102,12 +110,15 @@ export const getRequestSummary = (
         size: null,
         method: 'WS',
         httpStatus: 0,
+        contentType: undefined,
       };
     } else if (entry.type === 'sse') {
       const sseEntry = entry as SSENetworkEntry;
       return {
         id: sseEntry.id,
         type: 'sse',
+        source: sseEntry.source,
+        initiator: sseEntry.initiator,
         name: sseEntry.request.url,
         status: sseEntry.status,
         timestamp: sseEntry.timestamp,
@@ -115,6 +126,7 @@ export const getRequestSummary = (
         size: null,
         method: 'SSE',
         httpStatus: 0,
+        contentType: sseEntry.response?.contentType,
       };
     }
 

package/src/ui/state/model.ts

@@ -4,6 +4,7 @@ import {
   HttpHeaders,
   RequestPostData,
   NetworkEventSource,
+  ResponseBody,
 } from '../../shared/client';
 
 export type RequestId = string;
@@ -21,7 +22,9 @@ export type HttpRequestData = {
 
 export type HttpResponseData = {
   type: string;
-  data: string;
+  // Mirrors the bridge `ResponseBody` minus null — the store only assigns
+  // `data` when the wire body is non-null (null body → undefined response.body).
+  data: NonNullable<ResponseBody>;
 };
 
 export type HttpRequest = {
@@ -140,6 +143,7 @@ export type ProcessedRequest = {
   id: RequestId;
   type: NetworkEntryType;
   source?: NetworkEventSource;
+  initiator?: Initiator;
   name: string;
   status: HttpStatus | WebSocketStatus | SSEStatus;
   timestamp: Timestamp;
@@ -147,6 +151,7 @@ export type ProcessedRequest = {
   size: number | null;
   method: HttpMethod | 'WS' | 'SSE';
   httpStatus?: number;
+  contentType?: string;
   progress?: {
     loaded: number;
     total: number;

package/src/ui/state/store.ts

@@ -19,6 +19,7 @@ import { getId } from '../utils/getId';
 import { assert } from '../utils/assert';
 import { getContentTypeMime } from '../../utils/getContentTypeMimeType';
 import { applyReactNativeRequestHeadersLogic } from '../../utils/applyReactNativeRequestHeadersLogic';
+import { symbolicateInitiator } from '../utils/symbolication';
 
 const MAX_WEBSOCKET_MESSAGES_PER_CONNECTION = 32;
 const MAX_SSE_MESSAGES_PER_CONNECTION = 32;
@@ -128,7 +129,10 @@ export const createNetworkActivityStore = () =>
                 data as NetworkActivityEventMap['recording-state'];
               const { isRecording, _client } = get();
               if (_client && isRecording !== eventData.isRecording) {
-                _client.send(isRecording ? 'network-enable' : 'network-disable', {});
+                _client.send(
+                  isRecording ? 'network-enable' : 'network-disable',
+                  {},
+                );
               }
               break;
             }
@@ -177,6 +181,39 @@ export const createNetworkActivityStore = () =>
                 newEntries.set(eventData.requestId, entry);
                 return { networkEntries: newEntries };
               });
+
+              if (eventData.initiator.symbolicationStatus === 'pending') {
+                void symbolicateInitiator(eventData.initiator).then(
+                  (symbolicatedInitiator) => {
+                    if (!symbolicatedInitiator) {
+                      return;
+                    }
+
+                    set((state) => {
+                      const entry = state.networkEntries.get(
+                        eventData.requestId,
+                      );
+
+                      if (
+                        !entry ||
+                        (entry.type !== 'http' && entry.type !== 'sse') ||
+                        entry.initiator?.symbolicationStatus !== 'pending'
+                      ) {
+                        return {};
+                      }
+
+                      const updatedEntry = {
+                        ...entry,
+                        initiator: symbolicatedInitiator,
+                      };
+
+                      const newEntries = new Map(state.networkEntries);
+                      newEntries.set(eventData.requestId, updatedEntry);
+                      return { networkEntries: newEntries };
+                    });
+                  },
+                );
+              }
               break;
             }
 
@@ -594,7 +631,7 @@ export const createNetworkActivityStore = () =>
             // Subscribe to all events using the unified handler
             const unsubscribeFunctions = [
               client.onMessage('recording-state', (data) =>
-                handleEvent('recording-state', data)
+                handleEvent('recording-state', data),
               ),
               client.onMessage('client-ui-settings', (data) =>
                 handleEvent('client-ui-settings', data),

package/src/ui/tabs/InitiatorTab.tsx

@@ -0,0 +1,230 @@
+import { ScrollArea } from '../components/ScrollArea';
+import { Section } from '../components/Section';
+import { KeyValueGrid, type KeyValueItem } from '../components/KeyValueGrid';
+import type { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
+import type { Initiator, InitiatorStackFrame } from '../../shared/client';
+import {
+  formatFrameLocation,
+  formatSourcePath,
+  getBestInitiatorFrame,
+  getGeneratedFrameLocation,
+  getInitiatorLabel,
+  getInitiatorLocationLabel,
+  getSourceFrameLocation,
+} from '../utils/initiator';
+
+export type InitiatorTabProps = {
+  selectedRequest: HttpNetworkEntry | SSENetworkEntry;
+};
+
+const formatInitiatorType = (type: string) => {
+  switch (type) {
+    case 'script':
+      return 'Script';
+    case 'other':
+      return 'Other';
+    default:
+      return type;
+  }
+};
+
+const formatSymbolicationStatus = (initiator?: Initiator) => {
+  switch (initiator?.symbolicationStatus) {
+    case 'pending':
+      return 'Resolving source...';
+    case 'complete':
+      return 'Resolved';
+    case 'failed':
+      return 'Failed';
+    case 'unavailable':
+      return 'Unavailable';
+    default:
+      return null;
+  }
+};
+
+const getInitiatorItems = (initiator?: Initiator): KeyValueItem[] => {
+  if (!initiator) {
+    return [];
+  }
+
+  const sourceFrame = getBestInitiatorFrame(initiator);
+  const sourceLocation = getInitiatorLocationLabel(initiator);
+  const generatedLocation = formatFrameLocation(
+    getGeneratedFrameLocation(initiator),
+  );
+  const status = formatSymbolicationStatus(initiator);
+
+  return [
+    {
+      key: 'Type',
+      value: formatInitiatorType(initiator.type),
+    },
+    ...(status
+      ? [
+          {
+            key: 'Source map',
+            value: status,
+            valueClassName:
+              initiator.symbolicationStatus === 'failed'
+                ? 'text-red-300'
+                : 'text-gray-300',
+          },
+        ]
+      : []),
+    ...(sourceFrame?.functionName
+      ? [
+          {
+            key: 'Function',
+            value: sourceFrame.functionName,
+            valueClassName: 'font-mono text-blue-300',
+          },
+        ]
+      : []),
+    ...(sourceFrame?.url
+      ? [
+          {
+            key: 'Source',
+            value: formatSourcePath(sourceFrame.url),
+            valueClassName: 'font-mono text-blue-300',
+          },
+        ]
+      : []),
+    ...(sourceFrame?.lineNumber !== undefined
+      ? [
+          {
+            key: 'Line',
+            value: sourceFrame.lineNumber,
+          },
+        ]
+      : []),
+    ...(sourceFrame?.columnNumber !== undefined
+      ? [
+          {
+            key: 'Column',
+            value: sourceFrame.columnNumber,
+          },
+        ]
+      : []),
+    ...(sourceLocation
+      ? [
+          {
+            key: 'Location',
+            value: sourceLocation,
+            valueClassName: 'font-mono text-blue-300',
+          },
+        ]
+      : []),
+    ...(generatedLocation && generatedLocation !== sourceLocation
+      ? [
+          {
+            key: 'Generated',
+            value: generatedLocation,
+            valueClassName: 'font-mono text-gray-500',
+          },
+        ]
+      : []),
+  ];
+};
+
+const getStackFrameLocation = (frame: InitiatorStackFrame) => {
+  const sourceLocation = formatFrameLocation(getSourceFrameLocation(frame));
+  const generatedLocation = formatFrameLocation(
+    getGeneratedFrameLocation(frame),
+  );
+
+  if (
+    sourceLocation &&
+    generatedLocation &&
+    sourceLocation !== generatedLocation
+  ) {
+    return (
+      <span>
+        {sourceLocation}
+        <span className="ml-2 text-gray-500">
+          generated {generatedLocation}
+        </span>
+      </span>
+    );
+  }
+
+  return sourceLocation ?? generatedLocation ?? 'Unknown location';
+};
+
+const getStackItems = (initiator?: Initiator): KeyValueItem[] => {
+  return (
+    initiator?.stack?.map((frame, index) => {
+      return {
+        key: frame.functionName || `Frame ${index + 1}`,
+        value: getStackFrameLocation(frame),
+        keyClassName: 'font-mono',
+        valueClassName: 'font-mono text-blue-300',
+      };
+    }) ?? []
+  );
+};
+
+export const InitiatorTab = ({ selectedRequest }: InitiatorTabProps) => {
+  const initiator = selectedRequest.initiator;
+  const initiatorItems = getInitiatorItems(initiator);
+  const stackItems = getStackItems(initiator);
+  const initiatorLabel = getInitiatorLabel(initiator);
+  const initiatorLocation = getInitiatorLocationLabel(initiator);
+  const hasSourceMappedFrame = Boolean(
+    getSourceFrameLocation(initiator) ||
+      initiator?.stack?.some((frame) => getSourceFrameLocation(frame)),
+  );
+
+  return (
+    <ScrollArea className="h-full w-full">
+      <div className="p-4 space-y-4">
+        <div className="rounded-md border border-gray-700 bg-gray-800/60 p-3">
+          <div className="text-xs uppercase text-gray-500">Triggered by</div>
+          <div className="mt-1 font-mono text-sm text-blue-300">
+            {initiatorLabel ?? 'Unknown initiator'}
+          </div>
+          {initiatorLocation && initiatorLocation !== initiatorLabel && (
+            <div className="mt-1 font-mono text-xs text-gray-400 wrap-anywhere">
+              {initiatorLocation}
+            </div>
+          )}
+        </div>
+
+        <Section title="Initiator">
+          <KeyValueGrid
+            items={initiatorItems}
+            emptyMessage="No initiator metadata available"
+          />
+        </Section>
+
+        {!hasSourceMappedFrame &&
+          initiator?.symbolicationStatus !== 'pending' && (
+            <div className="rounded-md border border-gray-700 bg-gray-800/60 p-3 text-sm text-gray-400">
+              This request only includes generated bundle location data. Metro
+              source maps were not available for this entry.
+            </div>
+          )}
+
+        {initiator?.symbolicationError && (
+          <div className="rounded-md border border-red-900/70 bg-red-950/30 p-3 text-sm text-red-200">
+            {initiator.symbolicationError}
+          </div>
+        )}
+
+        {initiator?.codeFrame && (
+          <Section title="Code Frame">
+            <pre className="overflow-auto rounded-md bg-gray-950 p-3 text-xs text-gray-300">
+              <code>{initiator.codeFrame.content}</code>
+            </pre>
+          </Section>
+        )}
+
+        {stackItems.length > 0 && (
+          <Section title="Stack Preview">
+            <KeyValueGrid items={stackItems} />
+          </Section>
+        )}
+      </div>
+    </ScrollArea>
+  );
+};