@rozenite/network-activity-plugin 1.9.0 → 1.11.0

package/src/ui/state/filter.ts

@@ -0,0 +1,49 @@
+import type { HttpMethod, NetworkEventSource } from '../../shared/client';
+
+export type RequestTypeFilter = 'http' | 'websocket' | 'sse';
+
+export type AdvancedFilterState = {
+  methods: Set<HttpMethod>;
+  sources: Set<NetworkEventSource>;
+  status: string;
+  domain: string;
+  contentType: string;
+  failedOnly: boolean;
+  inFlightOnly: boolean;
+  overriddenOnly: boolean;
+  minSize: string;
+  maxSize: string;
+  minDuration: string;
+  maxDuration: string;
+};
+
+export type FilterState = {
+  text: string;
+  types: Set<RequestTypeFilter>;
+  advanced: AdvancedFilterState;
+};
+
+export const DEFAULT_REQUEST_TYPES: RequestTypeFilter[] = [
+  'http',
+  'websocket',
+  'sse',
+];
+
+export const createDefaultFilter = (): FilterState => ({
+  text: '',
+  types: new Set(DEFAULT_REQUEST_TYPES),
+  advanced: {
+    methods: new Set(),
+    sources: new Set(),
+    status: '',
+    domain: '',
+    contentType: '',
+    failedOnly: false,
+    inFlightOnly: false,
+    overriddenOnly: false,
+    minSize: '',
+    maxSize: '',
+    minDuration: '',
+    maxDuration: '',
+  },
+});

package/src/ui/state/hooks.ts

@@ -4,7 +4,7 @@ import type { NetworkActivityState } from './store';
 import { getProcessedRequests, getSelectedRequest } from './derived';
 
 export const useNetworkActivityStore = <T>(
-  selector: (state: NetworkActivityState) => T
+  selector: (state: NetworkActivityState) => T,
 ): T => {
   return useStore(store, selector);
 };
@@ -39,7 +39,7 @@ export const useNetworkActivityClientManagement = () => {
 
 export const useWebSocketMessages = (requestId: string) => {
   return useNetworkActivityStore(
-    (state) => state.websocketMessages.get(requestId) || []
+    (state) => state.websocketMessages.get(requestId) || [],
   );
 };
 

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,8 @@ export type ProcessedRequest = {
   size: number | null;
   method: HttpMethod | 'WS' | 'SSE';
   httpStatus?: number;
+  contentType?: string;
+  ttfb?: number;
   progress?: {
     loaded: number;
     total: number;

package/src/ui/state/store.ts

@@ -19,12 +19,17 @@ 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;
 
 const STORE_VERSION = 1;
 
+const getElapsedDuration = (endTimestamp: number, startTimestamp: number) => {
+  return Math.max(endTimestamp - startTimestamp, 0);
+};
+
 export interface NetworkActivityState {
   // State
   isRecording: boolean;
@@ -128,7 +133,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 +185,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;
             }
 
@@ -265,6 +306,10 @@ export const createNetworkActivityStore = () =>
                 const updatedEntry: HttpNetworkEntry = {
                   ...httpEntry,
                   status: 'failed',
+                  duration: getElapsedDuration(
+                    eventData.timestamp,
+                    httpEntry.timestamp,
+                  ),
                   error: eventData.error,
                 };
 
@@ -377,7 +422,10 @@ export const createNetworkActivityStore = () =>
                   status: 'closed',
                   closeCode: eventData.code,
                   closeReason: eventData.reason,
-                  duration: eventData.timestamp - wsEntry.timestamp,
+                  duration: getElapsedDuration(
+                    eventData.timestamp,
+                    wsEntry.timestamp,
+                  ),
                 };
 
                 const newEntries = new Map(state.networkEntries);
@@ -458,6 +506,10 @@ export const createNetworkActivityStore = () =>
                 const updatedEntry: WebSocketNetworkEntry = {
                   ...wsEntry,
                   status: 'error',
+                  duration: getElapsedDuration(
+                    eventData.timestamp,
+                    wsEntry.timestamp,
+                  ),
                   error: eventData.error,
                 };
 
@@ -554,6 +606,10 @@ export const createNetworkActivityStore = () =>
                 const updatedEntry: SSENetworkEntry = {
                   ...sseEntry,
                   status: 'error',
+                  duration: getElapsedDuration(
+                    eventData.timestamp,
+                    sseEntry.timestamp,
+                  ),
                   error: eventData.error.message,
                 };
 
@@ -574,7 +630,10 @@ export const createNetworkActivityStore = () =>
                 const updatedEntry: SSENetworkEntry = {
                   ...sseEntry,
                   status: 'closed',
-                  duration: eventData.timestamp - sseEntry.timestamp,
+                  duration: getElapsedDuration(
+                    eventData.timestamp,
+                    sseEntry.timestamp,
+                  ),
                 };
 
                 const newEntries = new Map(state.networkEntries);
@@ -594,7 +653,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>
+  );
+};