@rozenite/network-activity-plugin 1.9.0 → 1.11.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));
+};

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`;
+};