@rozenite/network-activity-plugin 1.10.0 → 1.12.0

package/src/ui/utils/__tests__/timelineModel.test.ts

@@ -0,0 +1,170 @@
+import { describe, expect, it } from 'vitest';
+import type { ProcessedRequest } from '../../state/model';
+import {
+  formatTimelineOffset,
+  getTimelineModel,
+  getTimelineRequestEndTime,
+  getTimelineTicks,
+  isRequestActive,
+  requestOverlapsTimelineRange,
+  TIMELINE_LAYOUT,
+} from '../timelineModel';
+
+const createRequest = (
+  overrides: Partial<ProcessedRequest> = {},
+): ProcessedRequest => ({
+  id: 'request-1',
+  type: 'http',
+  name: 'https://example.com/api',
+  status: 'finished',
+  timestamp: 0,
+  duration: 100,
+  size: null,
+  method: 'GET',
+  ...overrides,
+});
+
+describe('timelineModel', () => {
+  it('formats minute offsets without rolling seconds up to 60', () => {
+    expect(formatTimelineOffset(119_900)).toBe('2m 00s');
+  });
+
+  it('treats websocket closing state as active', () => {
+    expect(
+      isRequestActive(
+        createRequest({
+          type: 'websocket',
+          status: 'closing',
+          method: 'WS',
+        }),
+      ),
+    ).toBe(true);
+  });
+
+  it('uses the earliest ending lane when all lanes are occupied', () => {
+    const requests = Array.from(
+      { length: TIMELINE_LAYOUT.laneCount },
+      (_, index) =>
+        createRequest({
+          id: `request-${index}`,
+          timestamp: 0,
+          duration: index === 1 ? 100 : 1000,
+        }),
+    );
+
+    const overflowingRequest = createRequest({
+      id: 'overflowing-request',
+      timestamp: 50,
+      duration: 200,
+    });
+
+    const model = getTimelineModel([...requests, overflowingRequest], 0);
+    const overflowingRow = model.rows.find(
+      (row) => row.request.id === overflowingRequest.id,
+    );
+
+    expect(overflowingRow?.lane).toBe(1);
+    expect(overflowingRow?.isOverflowingLane).toBe(true);
+  });
+
+  it('keeps long-session tick counts near the target count', () => {
+    const oneHour = 60 * 60 * 1000;
+    const model = getTimelineModel(
+      [
+        createRequest({
+          duration: oneHour,
+        }),
+      ],
+      0,
+    );
+
+    expect(model.ticks.length).toBeLessThanOrEqual(
+      TIMELINE_LAYOUT.tickTargetCount + 2,
+    );
+  });
+
+  it('does not add a duplicate final tick label', () => {
+    const ticks = getTimelineTicks(1548, {
+      ...TIMELINE_LAYOUT,
+      tickTargetCount: 7,
+    });
+
+    expect(ticks.map((tick) => tick.label)).toEqual([
+      '0 ms',
+      '250 ms',
+      '500 ms',
+      '750 ms',
+      '1.0 s',
+      '1.3 s',
+      '1.5 s',
+    ]);
+  });
+
+  it('caps rendered rows for large recordings', () => {
+    const maxRenderedRequests = 3;
+    const model = getTimelineModel(
+      Array.from({ length: 5 }, (_, index) =>
+        createRequest({
+          id: `request-${index}`,
+          timestamp: index,
+        }),
+      ),
+      0,
+      {
+        ...TIMELINE_LAYOUT,
+        maxRenderedRequests,
+      },
+    );
+
+    expect(model.rows.map((row) => row.request.id)).toEqual([
+      'request-2',
+      'request-3',
+      'request-4',
+    ]);
+    expect(model.totalRequestCount).toBe(5);
+    expect(model.hiddenRequestCount).toBe(2);
+  });
+
+  it('caps websocket and SSE duration in the timeline model', () => {
+    const now = 60_000;
+    const websocketRequest = createRequest({
+      type: 'websocket',
+      status: 'open',
+      method: 'WS',
+      timestamp: 0,
+      duration: undefined,
+    });
+
+    expect(getTimelineRequestEndTime(websocketRequest, now)).toBe(
+      TIMELINE_LAYOUT.streamingRequestMaxDurationMs,
+    );
+
+    const model = getTimelineModel([websocketRequest], now);
+
+    expect(model.rows[0].duration).toBe(
+      TIMELINE_LAYOUT.streamingRequestMaxDurationMs,
+    );
+  });
+
+  it('matches requests that overlap a selected timeline range', () => {
+    const request = createRequest({
+      timestamp: 1000,
+      duration: 400,
+    });
+
+    expect(
+      requestOverlapsTimelineRange(
+        request,
+        { startTime: 1200, endTime: 1400 },
+        0,
+      ),
+    ).toBe(true);
+    expect(
+      requestOverlapsTimelineRange(
+        request,
+        { startTime: 1500, endTime: 1600 },
+        0,
+      ),
+    ).toBe(false);
+  });
+});

package/src/ui/utils/download.ts

@@ -152,3 +152,10 @@ export const downloadBlob = (blob: Blob, filename: string): void => {
   // the request when the URL disappears mid-click.
   setTimeout(() => URL.revokeObjectURL(objectUrl), 0);
 };
+
+export const downloadJson = (data: unknown, filename: string): void => {
+  downloadBlob(
+    new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }),
+    filename,
+  );
+};

package/src/ui/utils/requestFilters.ts

@@ -0,0 +1,183 @@
+import type { FilterState } from '../state/filter';
+import type { ProcessedRequest } from '../state/model';
+import type { HttpMethod } from '../../shared/client';
+
+export type RequestFilterOptions = {
+  hasOverride?: boolean;
+};
+
+const parseThreshold = (value: string): number | null => {
+  const normalizedValue = value.trim();
+  if (!normalizedValue) {
+    return null;
+  }
+
+  const parsedValue = Number(normalizedValue);
+  return Number.isFinite(parsedValue) ? parsedValue : null;
+};
+
+const matchesStatusFilter = (
+  statusCode: number | undefined,
+  statusFilter: string,
+) => {
+  const normalizedFilter = statusFilter.trim().toLowerCase();
+  if (!normalizedFilter) {
+    return true;
+  }
+
+  if (statusCode === undefined) {
+    return false;
+  }
+
+  const statusRangeMatch = normalizedFilter.match(/^(\d{3})\s*-\s*(\d{3})$/);
+  if (statusRangeMatch) {
+    const min = Number(statusRangeMatch[1]);
+    const max = Number(statusRangeMatch[2]);
+    return statusCode >= min && statusCode <= max;
+  }
+
+  const statusClassMatch = normalizedFilter.match(/^([1-5])xx$/);
+  if (statusClassMatch) {
+    return Math.floor(statusCode / 100) === Number(statusClassMatch[1]);
+  }
+
+  const comparisonMatch = normalizedFilter.match(/^(>=|<=|>|<)\s*(\d{3})$/);
+  if (comparisonMatch) {
+    const value = Number(comparisonMatch[2]);
+    switch (comparisonMatch[1]) {
+      case '>=':
+        return statusCode >= value;
+      case '<=':
+        return statusCode <= value;
+      case '>':
+        return statusCode > value;
+      case '<':
+        return statusCode < value;
+    }
+  }
+
+  return statusCode === Number(normalizedFilter);
+};
+
+const isInFlightStatus = (status: ProcessedRequest['status']) => {
+  return ['pending', 'loading', 'connecting', 'open'].includes(status);
+};
+
+const isFailedStatus = (status: ProcessedRequest['status']) => {
+  return ['failed', 'error'].includes(status);
+};
+
+const isHttpMethod = (
+  method: ProcessedRequest['method'],
+): method is HttpMethod => method !== 'WS' && method !== 'SSE';
+
+const extractDomainAndPath = (url: string) => {
+  try {
+    const { hostname, pathname, search, hash, port } = new URL(url);
+
+    return {
+      domain: `${hostname}${port ? `:${port}` : ''}`,
+      path: `${pathname}${search}${hash}`,
+    };
+  } catch {
+    return { domain: 'unknown', path: url };
+  }
+};
+
+export const matchesRequestFilter = (
+  request: ProcessedRequest,
+  filter: FilterState,
+  options: RequestFilterOptions = {},
+) => {
+  if (filter.types.size > 0 && !filter.types.has(request.type)) {
+    return false;
+  }
+
+  if (
+    filter.advanced.methods.size > 0 &&
+    (!isHttpMethod(request.method) ||
+      !filter.advanced.methods.has(request.method))
+  ) {
+    return false;
+  }
+
+  if (
+    filter.advanced.sources.size > 0 &&
+    (!request.source || !filter.advanced.sources.has(request.source))
+  ) {
+    return false;
+  }
+
+  if (!matchesStatusFilter(request.httpStatus, filter.advanced.status)) {
+    return false;
+  }
+
+  const { domain, path } = extractDomainAndPath(request.name);
+  const domainFilter = filter.advanced.domain.trim().toLowerCase();
+  if (domainFilter && !domain.toLowerCase().includes(domainFilter)) {
+    return false;
+  }
+
+  const contentTypeFilter = filter.advanced.contentType.trim().toLowerCase();
+  if (
+    contentTypeFilter &&
+    !request.contentType?.toLowerCase().includes(contentTypeFilter)
+  ) {
+    return false;
+  }
+
+  if (filter.advanced.failedOnly && !isFailedStatus(request.status)) {
+    return false;
+  }
+
+  if (filter.advanced.inFlightOnly && !isInFlightStatus(request.status)) {
+    return false;
+  }
+
+  if (filter.advanced.overriddenOnly && !options.hasOverride) {
+    return false;
+  }
+
+  const minSize = parseThreshold(filter.advanced.minSize);
+  if (minSize !== null && (request.size === null || request.size < minSize)) {
+    return false;
+  }
+
+  const maxSize = parseThreshold(filter.advanced.maxSize);
+  if (maxSize !== null && (request.size === null || request.size > maxSize)) {
+    return false;
+  }
+
+  const duration = request.duration || 0;
+  const minDuration = parseThreshold(filter.advanced.minDuration);
+  if (minDuration !== null && duration < minDuration) {
+    return false;
+  }
+
+  const maxDuration = parseThreshold(filter.advanced.maxDuration);
+  if (maxDuration !== null && duration > maxDuration) {
+    return false;
+  }
+
+  const searchText = filter.text.trim().toLowerCase();
+  if (!searchText) {
+    return true;
+  }
+
+  const searchableFields = [
+    request.name,
+    request.method,
+    request.status,
+    request.httpStatus,
+    request.source,
+    request.type,
+    request.contentType,
+    domain,
+    path,
+  ]
+    .filter((value) => value !== undefined && value !== null)
+    .join(' ')
+    .toLowerCase();
+
+  return searchableFields.includes(searchText);
+};

package/src/ui/utils/sessionExport.ts

@@ -0,0 +1,185 @@
+import type {
+  HttpNetworkEntry,
+  NetworkEntry,
+  RequestId,
+  SSENetworkEntry,
+  WebSocketMessage,
+  WebSocketNetworkEntry,
+} from '../state/model';
+
+const EXPORT_SCHEMA_VERSION = 1;
+
+type ExportedHttpEntry = {
+  id: RequestId;
+  type: 'http';
+  source?: NetworkEntry['source'];
+  timestamp: number;
+  duration: number | null;
+  status: HttpNetworkEntry['status'];
+  error?: string;
+  canceled?: boolean;
+  request: HttpNetworkEntry['request'];
+  response: HttpNetworkEntry['response'] | null;
+  size: number | null;
+  ttfb: number | null;
+  initiator?: HttpNetworkEntry['initiator'];
+  resourceType?: HttpNetworkEntry['resourceType'];
+  progress?: HttpNetworkEntry['progress'];
+};
+
+type ExportedWebSocketEntry = {
+  id: RequestId;
+  type: 'websocket';
+  source?: NetworkEntry['source'];
+  timestamp: number;
+  duration: number | null;
+  status: WebSocketNetworkEntry['status'];
+  connection: WebSocketNetworkEntry['connection'];
+  error?: string;
+  closeCode?: number;
+  closeReason?: string;
+  messages: WebSocketMessage[];
+};
+
+type ExportedSSEEntry = {
+  id: RequestId;
+  type: 'sse';
+  source?: NetworkEntry['source'];
+  timestamp: number;
+  duration: number | null;
+  status: SSENetworkEntry['status'];
+  error?: string;
+  request: SSENetworkEntry['request'];
+  response: SSENetworkEntry['response'] | null;
+  initiator?: SSENetworkEntry['initiator'];
+  resourceType?: SSENetworkEntry['resourceType'];
+  messages: SSENetworkEntry['messages'];
+};
+
+export type ExportedNetworkEntry =
+  | ExportedHttpEntry
+  | ExportedWebSocketEntry
+  | ExportedSSEEntry;
+
+export type NetworkActivitySessionExport = {
+  schemaVersion: typeof EXPORT_SCHEMA_VERSION;
+  tool: 'rozenite-network-activity';
+  exportedAt: string;
+  summary: {
+    totalEntries: number;
+    httpRequests: number;
+    webSocketConnections: number;
+    sseConnections: number;
+    realtimeMessages: number;
+  };
+  entries: ExportedNetworkEntry[];
+};
+
+const getDuration = (duration: number | undefined) => duration ?? null;
+
+const serializeHttpEntry = (entry: HttpNetworkEntry): ExportedHttpEntry => ({
+  id: entry.id,
+  type: 'http',
+  source: entry.source,
+  timestamp: entry.timestamp,
+  duration: getDuration(entry.duration),
+  status: entry.status,
+  error: entry.error,
+  canceled: entry.canceled,
+  request: entry.request,
+  response: entry.response ?? null,
+  size: entry.size ?? null,
+  ttfb: entry.ttfb ?? null,
+  initiator: entry.initiator,
+  resourceType: entry.resourceType,
+  progress: entry.progress,
+});
+
+const serializeWebSocketEntry = (
+  entry: WebSocketNetworkEntry,
+  websocketMessages: Map<RequestId, WebSocketMessage[]>,
+): ExportedWebSocketEntry => ({
+  id: entry.id,
+  type: 'websocket',
+  source: entry.source,
+  timestamp: entry.timestamp,
+  duration: getDuration(entry.duration),
+  status: entry.status,
+  connection: entry.connection,
+  error: entry.error,
+  closeCode: entry.closeCode,
+  closeReason: entry.closeReason,
+  messages: websocketMessages.get(entry.id) ?? [],
+});
+
+const serializeSSEEntry = (entry: SSENetworkEntry): ExportedSSEEntry => ({
+  id: entry.id,
+  type: 'sse',
+  source: entry.source,
+  timestamp: entry.timestamp,
+  duration: getDuration(entry.duration),
+  status: entry.status,
+  error: entry.error,
+  request: entry.request,
+  response: entry.response ?? null,
+  initiator: entry.initiator,
+  resourceType: entry.resourceType,
+  messages: entry.messages,
+});
+
+const serializeEntry = (
+  entry: NetworkEntry,
+  websocketMessages: Map<RequestId, WebSocketMessage[]>,
+): ExportedNetworkEntry => {
+  switch (entry.type) {
+    case 'http':
+      return serializeHttpEntry(entry);
+    case 'websocket':
+      return serializeWebSocketEntry(entry, websocketMessages);
+    case 'sse':
+      return serializeSSEEntry(entry);
+  }
+};
+
+export const createNetworkActivitySessionExport = (
+  networkEntries: Map<RequestId, NetworkEntry>,
+  websocketMessages: Map<RequestId, WebSocketMessage[]>,
+  exportedAt = new Date(),
+): NetworkActivitySessionExport => {
+  const entries = Array.from(networkEntries.values())
+    .sort((a, b) => a.timestamp - b.timestamp)
+    .map((entry) => serializeEntry(entry, websocketMessages));
+
+  return {
+    schemaVersion: EXPORT_SCHEMA_VERSION,
+    tool: 'rozenite-network-activity',
+    exportedAt: exportedAt.toISOString(),
+    summary: {
+      totalEntries: entries.length,
+      httpRequests: entries.filter((entry) => entry.type === 'http').length,
+      webSocketConnections: entries.filter(
+        (entry) => entry.type === 'websocket',
+      ).length,
+      sseConnections: entries.filter((entry) => entry.type === 'sse').length,
+      realtimeMessages: entries.reduce((count, entry) => {
+        if (entry.type === 'websocket' || entry.type === 'sse') {
+          return count + entry.messages.length;
+        }
+
+        return count;
+      }, 0),
+    },
+    entries,
+  };
+};
+
+export const getNetworkActivitySessionExportFileName = (
+  exportedAt = new Date(),
+) => {
+  const timestamp = exportedAt
+    .toISOString()
+    .replace(/\.\d{3}Z$/, 'Z')
+    .replace(/[:]/g, '-');
+
+  return `rozenite-network-session-${timestamp}.json`;
+};

package/src/ui/utils/symbolication.ts

@@ -37,9 +37,12 @@ const getGeneratedFrameLocation = (frame: InitiatorStackFrame) => ({
 const isGeneratedBundleUrl = (url: string) =>
   /[^/]+\.bundle(?:[/?#]|$)/.test(url);
 
+const isMetroSymbolicatableUrl = (url?: string) =>
+  url?.startsWith('http') ?? false;
+
 const canSymbolicateStack = (stack?: InitiatorStackFrame[]) =>
   stack?.some((frame) =>
-    getGeneratedFrameLocation(frame).url?.startsWith('http'),
+    isMetroSymbolicatableUrl(getGeneratedFrameLocation(frame).url),
   ) ?? false;
 
 const toReactNativeStackFrame = (
@@ -47,7 +50,7 @@ const toReactNativeStackFrame = (
 ): ReactNativeStackFrame | null => {
   const generatedLocation = getGeneratedFrameLocation(frame);
 
-  if (!generatedLocation.url) {
+  if (!isMetroSymbolicatableUrl(generatedLocation.url)) {
     return null;
   }
 
@@ -195,21 +198,45 @@ export const symbolicateInitiator = async (
     return null;
   }
 
-  const generatedStackFrames =
-    initiator.stack
-      ?.map(toReactNativeStackFrame)
-      .filter((frame): frame is ReactNativeStackFrame => frame !== null) ?? [];
+  const originalStack = initiator.stack ?? [];
+  const generatedStackFrames = originalStack.flatMap(
+    (originalFrame, originalIndex) => {
+      const frame = toReactNativeStackFrame(originalFrame);
+      return frame ? [{ frame, originalIndex }] : [];
+    },
+  );
 
   if (generatedStackFrames.length === 0) {
     return null;
   }
 
   try {
-    const symbolicatedStackTrace =
-      await symbolicateStackTrace(generatedStackFrames);
+    const symbolicatedStackTrace = await symbolicateStackTrace(
+      generatedStackFrames.map((entry) => entry.frame),
+    );
 
-    const symbolicatedStack = symbolicatedStackTrace.stack.map((frame, index) =>
-      fromSymbolicatedStackFrame(frame, initiator.stack?.[index]),
+    const symbolicatedFramesByOriginalIndex = new Map<
+      number,
+      InitiatorStackFrame
+    >();
+
+    symbolicatedStackTrace.stack.forEach((frame, index) => {
+      const generatedFrame = generatedStackFrames[index];
+      if (!generatedFrame) {
+        return;
+      }
+
+      symbolicatedFramesByOriginalIndex.set(
+        generatedFrame.originalIndex,
+        fromSymbolicatedStackFrame(
+          frame,
+          originalStack[generatedFrame.originalIndex],
+        ),
+      );
+    });
+
+    const symbolicatedStack = originalStack.map(
+      (frame, index) => symbolicatedFramesByOriginalIndex.get(index) ?? frame,
     );
     const sourceFrame = getPreferredSourceFrame(
       symbolicatedStack,