@rozenite/network-activity-plugin 1.9.0 → 1.11.0

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

@@ -0,0 +1,174 @@
+import { describe, expect, it } from 'vitest';
+import type {
+  HttpNetworkEntry,
+  NetworkEntry,
+  RequestId,
+  SSENetworkEntry,
+  WebSocketMessage,
+  WebSocketNetworkEntry,
+} from '../../state/model';
+import {
+  createNetworkActivitySessionExport,
+  getNetworkActivitySessionExportFileName,
+} from '../sessionExport';
+
+const httpEntry: HttpNetworkEntry = {
+  id: 'request-1',
+  type: 'http',
+  timestamp: 100,
+  duration: 50,
+  source: 'builtin',
+  request: {
+    url: 'https://example.com/api',
+    method: 'GET',
+    headers: {
+      accept: 'application/json',
+    },
+  },
+  response: {
+    url: 'https://example.com/api',
+    status: 200,
+    statusText: 'OK',
+    headers: {
+      'content-type': 'application/json',
+    },
+    contentType: 'application/json',
+    size: 17,
+    responseTime: 150,
+    body: {
+      type: 'application/json',
+      data: '{"ok":true}',
+    },
+  },
+  status: 'finished',
+  ttfb: 20,
+  size: 17,
+  resourceType: 'Fetch',
+};
+
+const websocketEntry: WebSocketNetworkEntry = {
+  id: 'ws-socket-1',
+  type: 'websocket',
+  timestamp: 200,
+  duration: 100,
+  source: 'builtin',
+  connection: {
+    url: 'wss://example.com/socket',
+    socketId: 'socket-1',
+    protocols: ['chat'],
+    options: [],
+  },
+  status: 'closed',
+  closeCode: 1000,
+};
+
+const sseEntry: SSENetworkEntry = {
+  id: 'request-sse',
+  type: 'sse',
+  timestamp: 300,
+  duration: 200,
+  source: 'builtin',
+  request: {
+    url: 'https://example.com/events',
+    method: 'GET',
+    headers: {},
+  },
+  response: {
+    url: 'https://example.com/events',
+    status: 200,
+    statusText: 'OK',
+    headers: {
+      'content-type': 'text/event-stream',
+    },
+    contentType: 'text/event-stream',
+    size: 0,
+    responseTime: 310,
+  },
+  status: 'closed',
+  messages: [
+    {
+      id: 'sse-message-1',
+      type: 'message',
+      data: 'hello',
+      timestamp: 320,
+    },
+  ],
+};
+
+const websocketMessages: WebSocketMessage[] = [
+  {
+    id: 'websocket-message-1',
+    direction: 'sent',
+    data: 'ping',
+    messageType: 'text',
+    timestamp: 210,
+  },
+  {
+    id: 'websocket-message-2',
+    direction: 'received',
+    data: 'pong',
+    messageType: 'text',
+    timestamp: 220,
+  },
+];
+
+describe('sessionExport', () => {
+  it('exports captured HTTP and realtime session entries', () => {
+    const networkEntries = new Map<RequestId, NetworkEntry>([
+      [sseEntry.id, sseEntry],
+      [httpEntry.id, httpEntry],
+      [websocketEntry.id, websocketEntry],
+    ]);
+    const exportData = createNetworkActivitySessionExport(
+      networkEntries,
+      new Map([[websocketEntry.id, websocketMessages]]),
+      new Date('2026-05-14T10:00:00.000Z'),
+    );
+
+    expect(exportData).toMatchObject({
+      schemaVersion: 1,
+      tool: 'rozenite-network-activity',
+      exportedAt: '2026-05-14T10:00:00.000Z',
+      summary: {
+        totalEntries: 3,
+        httpRequests: 1,
+        webSocketConnections: 1,
+        sseConnections: 1,
+        realtimeMessages: 3,
+      },
+    });
+    expect(exportData.entries.map((entry) => entry.id)).toEqual([
+      httpEntry.id,
+      websocketEntry.id,
+      sseEntry.id,
+    ]);
+    expect(exportData.entries[0]).toMatchObject({
+      type: 'http',
+      request: {
+        url: 'https://example.com/api',
+      },
+      response: {
+        status: 200,
+        body: {
+          data: '{"ok":true}',
+        },
+      },
+    });
+    expect(exportData.entries[1]).toMatchObject({
+      type: 'websocket',
+      messages: websocketMessages,
+    });
+    expect(exportData.entries[2]).toMatchObject({
+      type: 'sse',
+      messages: sseEntry.messages,
+    });
+  });
+
+  it('creates filesystem-friendly export filenames', () => {
+    expect(
+      getNetworkActivitySessionExportFileName(
+        new Date('2026-05-14T10:00:00.123Z'),
+      ),
+    ).toBe('rozenite-network-session-2026-05-14T10-00-00Z.json');
+  });
+});

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

@@ -0,0 +1,207 @@
+import { describe, expect, it, vi } from 'vitest';
+import {
+  symbolicateInitiator,
+  symbolicateStackTraceWithMetro,
+} from '../symbolication';
+import type { Initiator } from '../../../shared/client';
+
+describe('symbolication', () => {
+  it('selects the source frame matching the Metro code frame', async () => {
+    const initiator: Initiator = {
+      type: 'script',
+      generatedUrl: 'http://localhost:8081/index.bundle',
+      generatedLineNumber: 1,
+      generatedColumnNumber: 100,
+      symbolicationStatus: 'pending',
+      stack: [
+        {
+          functionName: 'fetch',
+          generatedUrl: 'http://localhost:8081/index.bundle',
+          generatedLineNumber: 1,
+          generatedColumnNumber: 100,
+        },
+        {
+          functionName: 'loadUsers',
+          generatedUrl: 'http://localhost:8081/index.bundle',
+          generatedLineNumber: 1,
+          generatedColumnNumber: 200,
+        },
+      ],
+    };
+
+    const symbolicatedInitiator = await symbolicateInitiator(
+      initiator,
+      vi.fn().mockResolvedValue({
+        stack: [
+          {
+            methodName: 'fetch',
+            file: 'node_modules/react-native/Libraries/Network/fetch.js',
+            lineNumber: 10,
+            column: 2,
+          },
+          {
+            methodName: 'loadUsers',
+            file: 'apps/playground/src/app/api.ts',
+            lineNumber: 30,
+            column: 6,
+          },
+        ],
+        codeFrame: {
+          content: '\u001b[90m 30 |\u001b[39m loadUsers();\u001b[0m',
+          fileName: 'apps/playground/src/app/api.ts',
+          location: {
+            row: 30,
+            column: 6,
+          },
+        },
+      }),
+    );
+
+    expect(symbolicatedInitiator).toMatchObject({
+      type: 'script',
+      functionName: 'loadUsers',
+      url: 'apps/playground/src/app/api.ts',
+      lineNumber: 30,
+      columnNumber: 6,
+      symbolicationStatus: 'complete',
+      codeFrame: {
+        content: ' 30 | loadUsers();',
+        fileName: 'apps/playground/src/app/api.ts',
+      },
+    });
+  });
+
+  it('falls back to the first non-collapsed source frame', async () => {
+    const initiator: Initiator = {
+      type: 'script',
+      generatedUrl: 'http://localhost:8081/index.bundle',
+      generatedLineNumber: 1,
+      generatedColumnNumber: 100,
+      symbolicationStatus: 'pending',
+      stack: [
+        {
+          functionName: 'send',
+          generatedUrl: 'http://localhost:8081/index.bundle',
+          generatedLineNumber: 1,
+          generatedColumnNumber: 100,
+        },
+        {
+          functionName: 'loadUsers',
+          generatedUrl: 'http://localhost:8081/index.bundle',
+          generatedLineNumber: 1,
+          generatedColumnNumber: 200,
+        },
+      ],
+    };
+
+    const symbolicatedInitiator = await symbolicateInitiator(
+      initiator,
+      vi.fn().mockResolvedValue({
+        stack: [
+          {
+            methodName: 'send',
+            file: 'packages/network-activity-plugin/src/http.ts',
+            lineNumber: 10,
+            column: 2,
+            collapse: true,
+          },
+          {
+            methodName: 'loadUsers',
+            file: 'apps/playground/src/app/api.ts',
+            lineNumber: 30,
+            column: 6,
+          },
+        ],
+      }),
+    );
+
+    expect(symbolicatedInitiator).toMatchObject({
+      type: 'script',
+      functionName: 'loadUsers',
+      url: 'apps/playground/src/app/api.ts',
+      lineNumber: 30,
+      columnNumber: 6,
+      symbolicationStatus: 'complete',
+      codeFrame: null,
+    });
+  });
+
+  it('reports symbolication failures on the initiator', async () => {
+    const initiator: Initiator = {
+      type: 'script',
+      symbolicationStatus: 'pending',
+      stack: [
+        {
+          generatedUrl: 'http://localhost:8081/index.bundle',
+          generatedLineNumber: 1,
+          generatedColumnNumber: 100,
+        },
+      ],
+    };
+
+    const symbolicatedInitiator = await symbolicateInitiator(
+      initiator,
+      vi.fn().mockRejectedValue(new Error('Metro is unavailable')),
+    );
+
+    expect(symbolicatedInitiator).toMatchObject({
+      symbolicationStatus: 'failed',
+      symbolicationError: 'Metro is unavailable',
+    });
+  });
+
+  it('posts stack frames to the Metro symbolication endpoint from the panel origin', async () => {
+    const originalFetch = globalThis.fetch;
+    const originalWindow = globalThis.window;
+
+    Object.defineProperty(globalThis, 'window', {
+      value: {
+        location: {
+          origin: 'http://localhost:8081',
+        },
+      },
+      configurable: true,
+    });
+
+    globalThis.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: vi.fn().mockResolvedValue({
+        stack: [],
+      }),
+    } as Partial<Response> as Response);
+
+    try {
+      await symbolicateStackTraceWithMetro([
+        {
+          methodName: 'loadUsers',
+          file: 'http://localhost:8081/index.bundle',
+          lineNumber: 1,
+          column: 100,
+        },
+      ]);
+
+      expect(globalThis.fetch).toHaveBeenCalledWith(
+        'http://localhost:8081/symbolicate',
+        expect.objectContaining({
+          method: 'POST',
+          body: JSON.stringify({
+            stack: [
+              {
+                methodName: 'loadUsers',
+                file: 'http://localhost:8081/index.bundle',
+                lineNumber: 1,
+                column: 100,
+              },
+            ],
+          }),
+        }),
+      );
+    } finally {
+      globalThis.fetch = originalFetch;
+      Object.defineProperty(globalThis, 'window', {
+        value: originalWindow,
+        configurable: true,
+      });
+    }
+  });
+});

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

@@ -0,0 +1,161 @@
+import type { HttpHeaders } from '../../shared/client';
+
+// Decode a base64 string to a Uint8Array via `atob`. Mirrors the
+// chunking concern on the encode side: atob produces a binary string,
+// each char is one byte, we re-pack into a typed array byte by byte.
+export const base64ToBytes = (base64: string): Uint8Array => {
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+};
+
+export const base64ToBlob = (base64: string, contentType: string): Blob => {
+  // Allocate the ArrayBuffer up front so the Uint8Array is known to
+  // be ArrayBuffer-backed (not SharedArrayBuffer); satisfies the
+  // BlobPart constraint without a cast.
+  const binary = atob(base64);
+  const buffer = new ArrayBuffer(binary.length);
+  const view = new Uint8Array(buffer);
+  for (let i = 0; i < binary.length; i++) {
+    view[i] = binary.charCodeAt(i);
+  }
+  return new Blob([buffer], {
+    type: contentType || 'application/octet-stream',
+  });
+};
+
+// Fallback extension when neither Content-Disposition nor URL gives us
+// a usable filename. Map a few common content-types so saved files open
+// in the right tool; everything else lands as `.bin`.
+const CONTENT_TYPE_EXTENSIONS: Record<string, string> = {
+  'application/pdf': 'pdf',
+  'application/zip': 'zip',
+  'application/gzip': 'gz',
+  'application/json': 'json',
+  'application/xml': 'xml',
+  'application/javascript': 'js',
+  'application/octet-stream': 'bin',
+  'image/png': 'png',
+  'image/jpeg': 'jpg',
+  'image/gif': 'gif',
+  'image/webp': 'webp',
+  'image/svg+xml': 'svg',
+  'image/bmp': 'bmp',
+  'image/x-icon': 'ico',
+  'audio/mpeg': 'mp3',
+  'audio/ogg': 'ogg',
+  'audio/wav': 'wav',
+  'video/mp4': 'mp4',
+  'video/webm': 'webm',
+  'font/woff': 'woff',
+  'font/woff2': 'woff2',
+  'font/ttf': 'ttf',
+  'font/otf': 'otf',
+  'text/html': 'html',
+  'text/plain': 'txt',
+  'text/css': 'css',
+  'text/csv': 'csv',
+};
+
+const extensionForContentType = (contentType: string): string => {
+  // Strip parameters: "text/html; charset=utf-8" → "text/html".
+  const bare = contentType.split(';', 1)[0]?.trim().toLowerCase() ?? '';
+  return CONTENT_TYPE_EXTENSIONS[bare] ?? 'bin';
+};
+
+export const readHeader = (
+  headers: HttpHeaders | undefined,
+  name: string,
+): string | undefined => {
+  if (!headers) return undefined;
+  const lowerTarget = name.toLowerCase();
+  for (const [key, value] of Object.entries(headers)) {
+    if (key.toLowerCase() === lowerTarget) {
+      return Array.isArray(value) ? value[0] : value;
+    }
+  }
+  return undefined;
+};
+
+// RFC 6266: `Content-Disposition: attachment; filename="report.pdf"`
+// or `filename*=UTF-8''report%20with%20space.pdf`. We only extract the
+// raw value here; downstream callers can sanitize further if they care
+// about path traversal etc. (irrelevant for the playground / debug use
+// case but worth knowing).
+const parseContentDispositionFilename = (
+  header: string | undefined,
+): string | undefined => {
+  if (!header) return undefined;
+  // Prefer RFC 5987 `filename*` over the legacy `filename` when both
+  // are present — it has a stricter encoding contract.
+  const extended = /filename\*\s*=\s*[^']*''([^;]+)/i.exec(header);
+  if (extended?.[1]) {
+    try {
+      return decodeURIComponent(extended[1].trim()) || undefined;
+    } catch {
+      // Fall through to the unencoded form.
+    }
+  }
+  const basic = /filename\s*=\s*("([^"]*)"|([^;]+))/i.exec(header);
+  const value = basic?.[2] ?? basic?.[3];
+  return value?.trim() || undefined;
+};
+
+const filenameFromUrl = (url: string): string | undefined => {
+  try {
+    const parsed = new URL(url);
+    const segments = parsed.pathname.split('/').filter(Boolean);
+    const last = segments[segments.length - 1];
+    return last && last.length > 0 ? last : undefined;
+  } catch {
+    return undefined;
+  }
+};
+
+// Three-tier filename derivation:
+//   1. Content-Disposition filename (RFC 5987 → RFC 6266)
+//   2. Last path segment of the response URL
+//   3. `response.<ext>` where the extension comes from a small
+//      Content-Type → extension map (everything unknown becomes `.bin`)
+export const deriveFilename = ({
+  headers,
+  url,
+  contentType,
+}: {
+  headers?: HttpHeaders;
+  url: string;
+  contentType: string;
+}): string => {
+  const fromDisposition = parseContentDispositionFilename(
+    readHeader(headers, 'Content-Disposition'),
+  );
+  if (fromDisposition) return fromDisposition;
+
+  const fromUrl = filenameFromUrl(url);
+  if (fromUrl) return fromUrl;
+
+  return `response.${extensionForContentType(contentType)}`;
+};
+
+export const downloadBlob = (blob: Blob, filename: string): void => {
+  const objectUrl = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = objectUrl;
+  anchor.download = filename;
+  document.body.appendChild(anchor);
+  anchor.click();
+  document.body.removeChild(anchor);
+  // Defer revoke a tick so Safari's download pipeline doesn't drop
+  // 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,
+  );
+};