@rozenite/network-activity-plugin 1.8.1 → 1.10.0

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/download.ts

@@ -0,0 +1,154 @@
+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);
+};

package/src/ui/utils/hex.ts

@@ -0,0 +1,59 @@
+// Byte-level helpers shared by HexView and any future binary-inspection
+// surface. Kept small and pure so unit tests don't need a DOM.
+
+export const BYTES_PER_HEX_ROW = 16;
+// One blank space between bytes, plus an extra blank space after byte 8
+// to group the row into halves. Same convention as `xxd`.
+export const BYTES_PER_GROUP = 8;
+
+const ASCII_PRINTABLE_MIN = 0x20;
+const ASCII_PRINTABLE_MAX = 0x7e;
+
+export const toHexPair = (byte: number): string =>
+  byte.toString(16).toUpperCase().padStart(2, '0');
+
+export const toAsciiChar = (byte: number): string =>
+  byte >= ASCII_PRINTABLE_MIN && byte <= ASCII_PRINTABLE_MAX
+    ? String.fromCharCode(byte)
+    : '.';
+
+export type HexRow = {
+  offset: string;
+  hex: string;
+  ascii: string;
+};
+
+const sliceHexBytes = (
+  bytes: Uint8Array,
+  start: number,
+  end: number,
+): number[] => {
+  const out: number[] = [];
+  const limit = Math.min(end, bytes.length);
+  for (let i = start; i < limit; i++) {
+    out.push(bytes[i]);
+  }
+  return out;
+};
+
+export const formatHexRow = (bytes: Uint8Array, rowStart: number): HexRow => {
+  const rowEnd = rowStart + BYTES_PER_HEX_ROW;
+  const leftSlice = sliceHexBytes(bytes, rowStart, rowStart + BYTES_PER_GROUP);
+  const rightSlice = sliceHexBytes(bytes, rowStart + BYTES_PER_GROUP, rowEnd);
+
+  const left = leftSlice.map(toHexPair).join(' ');
+  const right = rightSlice.map(toHexPair).join(' ');
+  const hex = right ? `${left}  ${right}` : left;
+
+  const asciiSlice = sliceHexBytes(bytes, rowStart, rowEnd);
+  const ascii = asciiSlice.map(toAsciiChar).join('');
+
+  return {
+    offset: rowStart.toString(16).padStart(8, '0'),
+    hex,
+    ascii,
+  };
+};
+
+export const rowCountForByteLength = (byteLength: number): number =>
+  Math.ceil(byteLength / BYTES_PER_HEX_ROW);

package/src/ui/utils/initiator.ts

@@ -0,0 +1,136 @@
+import type { Initiator, InitiatorStackFrame } from '../../shared/client';
+
+type FrameLocation = {
+  functionName?: string;
+  url?: string;
+  lineNumber?: number;
+  columnNumber?: number;
+};
+
+const SOURCE_PATH_PATTERN = /(?:^|\/)((?:apps|packages|src)\/.+)$/;
+
+const safeDecodeURIComponent = (value: string) => {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+};
+
+export const getGeneratedFrameLocation = (
+  frame?: InitiatorStackFrame | Initiator,
+): FrameLocation | null => {
+  if (!frame?.generatedUrl) {
+    return null;
+  }
+
+  return {
+    functionName: frame.functionName,
+    url: frame.generatedUrl,
+    lineNumber: frame.generatedLineNumber,
+    columnNumber: frame.generatedColumnNumber,
+  };
+};
+
+export const getSourceFrameLocation = (
+  frame?: InitiatorStackFrame | Initiator,
+): FrameLocation | null => {
+  if (!frame?.url) {
+    return null;
+  }
+
+  return {
+    functionName: frame.functionName,
+    url: frame.url,
+    lineNumber: frame.lineNumber,
+    columnNumber: frame.columnNumber,
+  };
+};
+
+export const formatSourcePath = (url: string) => {
+  const withoutQuery = url.split(/[?#]/)[0];
+  const decodedPath = safeDecodeURIComponent(withoutQuery).replace(
+    /^file:\/\//,
+    '',
+  );
+  const bundlePathMatch = decodedPath.match(/([^/]+\.bundle)(?:\/|$)/);
+
+  if (bundlePathMatch) {
+    return bundlePathMatch[1];
+  }
+
+  const sourcePathMatch = decodedPath.match(SOURCE_PATH_PATTERN);
+
+  if (sourcePathMatch) {
+    return sourcePathMatch[1];
+  }
+
+  try {
+    const parsedUrl = new URL(url);
+    const fileName = parsedUrl.pathname.split('/').filter(Boolean).pop();
+
+    return fileName || parsedUrl.hostname || url;
+  } catch {
+    const pathParts = decodedPath.split('/').filter(Boolean);
+
+    return pathParts.slice(-3).join('/') || decodedPath || url;
+  }
+};
+
+export const formatFrameLocation = (frame?: FrameLocation | null) => {
+  if (!frame?.url) {
+    return null;
+  }
+
+  const locationParts = [formatSourcePath(frame.url)];
+  if (frame.lineNumber !== undefined) {
+    locationParts.push(String(frame.lineNumber));
+  }
+  if (frame.columnNumber !== undefined) {
+    locationParts.push(String(frame.columnNumber));
+  }
+
+  return locationParts.join(':');
+};
+
+export const getBestInitiatorFrame = (
+  initiator?: Initiator,
+): FrameLocation | null => {
+  const directSourceFrame = getSourceFrameLocation(initiator);
+  if (directSourceFrame) {
+    return directSourceFrame;
+  }
+
+  const stackSourceFrame =
+    initiator?.stack
+      ?.filter((frame) => !frame.isCollapsed)
+      .map(getSourceFrameLocation)
+      .find((frame): frame is FrameLocation => frame !== null) ?? null;
+
+  return stackSourceFrame ?? getGeneratedFrameLocation(initiator);
+};
+
+export const getInitiatorLabel = (initiator?: Initiator) => {
+  if (!initiator) {
+    return null;
+  }
+
+  if (initiator.symbolicationStatus === 'pending') {
+    return 'Resolving source...';
+  }
+
+  const bestFrame = getBestInitiatorFrame(initiator);
+  if (!bestFrame) {
+    return null;
+  }
+
+  return (
+    bestFrame.functionName ??
+    formatFrameLocation(bestFrame) ??
+    (bestFrame.url ? formatSourcePath(bestFrame.url) : null)
+  );
+};
+
+export const getInitiatorLocationLabel = (initiator?: Initiator) => {
+  return formatFrameLocation(getBestInitiatorFrame(initiator));
+};