@rozenite/network-activity-plugin 1.10.0 → 1.11.0

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

@@ -0,0 +1,352 @@
+import type { ProcessedRequest } from '../state/model';
+
+export const TIMELINE_LAYOUT = {
+  minVisibleBarPercent: 0.65,
+  minRangeMs: 1000,
+  liveRefreshMs: 1000,
+  maxRenderedRequests: 1000,
+  laneCount: 8,
+  laneHeightPx: 2,
+  laneGapPx: 6,
+  laneHitTargetHeightPx: 8,
+  rulerHeightPx: 22,
+  laneTopPx: 32,
+  laneBottomPaddingPx: 18,
+  tickTargetCount: 7,
+  minTickLabelGapPercent: 6,
+  rangePaddingRatio: 0.025,
+  minRangePaddingMs: 25,
+  streamingRequestMaxDurationMs: 5000,
+} as const;
+
+const NICE_TICK_FACTORS = [1, 2, 2.5, 5, 10] as const;
+
+type TimelineLayout = {
+  [Key in keyof typeof TIMELINE_LAYOUT]: number;
+};
+
+export type TimelineTick = {
+  label: string;
+  offsetPercent: number;
+};
+
+export type TimelineRangeSelection = {
+  startTime: number;
+  endTime: number;
+};
+
+export type TimelineRow = {
+  request: ProcessedRequest;
+  offsetPercent: number;
+  widthPercent: number;
+  duration: number;
+  ttfbPercent: number;
+  receivePercent: number;
+  isActive: boolean;
+  lane: number;
+  isOverflowingLane: boolean;
+};
+
+export type TimelineModel = {
+  rows: TimelineRow[];
+  ticks: TimelineTick[];
+  rangeStart: number;
+  rangeDuration: number;
+  chartHeight: number;
+  totalRequestCount: number;
+  hiddenRequestCount: number;
+};
+
+const ACTIVE_HTTP_STATUSES = new Set<ProcessedRequest['status']>([
+  'pending',
+  'loading',
+]);
+const ACTIVE_WEBSOCKET_STATUSES = new Set<ProcessedRequest['status']>([
+  'connecting',
+  'open',
+  'closing',
+]);
+const ACTIVE_SSE_STATUSES = new Set<ProcessedRequest['status']>([
+  'connecting',
+  'open',
+]);
+
+const clamp = (value: number, minimum: number, maximum: number) => {
+  return Math.min(Math.max(value, minimum), maximum);
+};
+
+export const getTimelineChartHeight = (
+  layout: TimelineLayout = TIMELINE_LAYOUT,
+) => {
+  return (
+    layout.laneTopPx +
+    layout.laneCount * layout.laneHeightPx +
+    (layout.laneCount - 1) * layout.laneGapPx +
+    layout.laneBottomPaddingPx
+  );
+};
+
+export const getTimelineLaneTop = (
+  lane: number,
+  layout: TimelineLayout = TIMELINE_LAYOUT,
+) => {
+  return lane * (layout.laneHeightPx + layout.laneGapPx) + layout.laneTopPx;
+};
+
+export const getTimelineTrackTop = (
+  lane: number,
+  layout: TimelineLayout = TIMELINE_LAYOUT,
+) => {
+  const visualBarTop = getTimelineLaneTop(lane, layout);
+  return (
+    visualBarTop - (layout.laneHitTargetHeightPx - layout.laneHeightPx) / 2
+  );
+};
+
+export const getTimelineBarTopOffset = (
+  layout: TimelineLayout = TIMELINE_LAYOUT,
+) => {
+  return (layout.laneHitTargetHeightPx - layout.laneHeightPx) / 2;
+};
+
+export const isRequestActive = (request: ProcessedRequest) => {
+  switch (request.type) {
+    case 'http':
+      return ACTIVE_HTTP_STATUSES.has(request.status);
+    case 'websocket':
+      return ACTIVE_WEBSOCKET_STATUSES.has(request.status);
+    case 'sse':
+      return ACTIVE_SSE_STATUSES.has(request.status);
+  }
+};
+
+export const formatTimelineOffset = (milliseconds: number) => {
+  if (milliseconds < 1000) {
+    return `${Math.round(milliseconds)} ms`;
+  }
+
+  if (milliseconds < 60000) {
+    return `${(milliseconds / 1000).toFixed(milliseconds < 10000 ? 1 : 0)} s`;
+  }
+
+  const totalSeconds = Math.round(milliseconds / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}m ${seconds.toString().padStart(2, '0')}s`;
+};
+
+export const getRequestEndTime = (request: ProcessedRequest, now: number) => {
+  if (typeof request.duration === 'number') {
+    return request.timestamp + Math.max(request.duration, 0);
+  }
+
+  if (isRequestActive(request)) {
+    return Math.max(now, request.timestamp);
+  }
+
+  return request.timestamp;
+};
+
+export const getTimelineRequestEndTime = (
+  request: ProcessedRequest,
+  now: number,
+  layout: TimelineLayout = TIMELINE_LAYOUT,
+) => {
+  const endTime = getRequestEndTime(request, now);
+
+  if (request.type !== 'websocket' && request.type !== 'sse') {
+    return endTime;
+  }
+
+  return Math.min(
+    endTime,
+    request.timestamp + layout.streamingRequestMaxDurationMs,
+  );
+};
+
+export const requestOverlapsTimelineRange = (
+  request: ProcessedRequest,
+  range: TimelineRangeSelection,
+  now: number,
+  layout: TimelineLayout = TIMELINE_LAYOUT,
+) => {
+  const rangeStart = Math.min(range.startTime, range.endTime);
+  const rangeEnd = Math.max(range.startTime, range.endTime);
+  const requestStart = request.timestamp;
+  const requestEnd = getTimelineRequestEndTime(request, now, layout);
+
+  return requestStart <= rangeEnd && requestEnd >= rangeStart;
+};
+
+const getNiceTickStep = (rangeDuration: number, targetTickCount: number) => {
+  const targetStep = rangeDuration / targetTickCount;
+  const exponent = Math.floor(Math.log10(targetStep));
+  const magnitude = 10 ** exponent;
+  const normalizedStep = targetStep / magnitude;
+  const factor =
+    NICE_TICK_FACTORS.find((candidate) => candidate >= normalizedStep) ??
+    NICE_TICK_FACTORS[NICE_TICK_FACTORS.length - 1];
+
+  return factor * magnitude;
+};
+
+export const getTimelineTicks = (
+  rangeDuration: number,
+  layout: TimelineLayout = TIMELINE_LAYOUT,
+): TimelineTick[] => {
+  const step = getNiceTickStep(rangeDuration, layout.tickTargetCount);
+  const ticks: TimelineTick[] = [];
+
+  for (let value = 0; value <= rangeDuration; value += step) {
+    ticks.push({
+      label: formatTimelineOffset(value),
+      offsetPercent: (value / rangeDuration) * 100,
+    });
+  }
+
+  if (
+    ticks.length === 0 ||
+    ticks[ticks.length - 1].offsetPercent < 100 - Number.EPSILON
+  ) {
+    const finalTick = {
+      label: formatTimelineOffset(rangeDuration),
+      offsetPercent: 100,
+    };
+    const previousTick = ticks[ticks.length - 1];
+
+    if (
+      !previousTick ||
+      (finalTick.label !== previousTick.label &&
+        finalTick.offsetPercent - previousTick.offsetPercent >=
+          layout.minTickLabelGapPercent)
+    ) {
+      ticks.push(finalTick);
+    }
+  }
+
+  return ticks;
+};
+
+const getTimelineBounds = (
+  requests: ProcessedRequest[],
+  now: number,
+  layout: TimelineLayout,
+) => {
+  return requests.reduce(
+    (result, request) => {
+      const endTime = getTimelineRequestEndTime(request, now, layout);
+
+      return {
+        start: Math.min(result.start, request.timestamp),
+        end: Math.max(result.end, endTime),
+      };
+    },
+    {
+      start: Number.POSITIVE_INFINITY,
+      end: Number.NEGATIVE_INFINITY,
+    },
+  );
+};
+
+const getEarliestLaneIndex = (laneEndTimes: number[]) => {
+  return laneEndTimes.reduce((earliestIndex, laneEndTime, index) => {
+    return laneEndTime < laneEndTimes[earliestIndex] ? index : earliestIndex;
+  }, 0);
+};
+
+const getRenderableRequests = (
+  requests: ProcessedRequest[],
+  layout: TimelineLayout,
+) => {
+  if (requests.length <= layout.maxRenderedRequests) {
+    return requests;
+  }
+
+  return [...requests]
+    .sort((a, b) => b.timestamp - a.timestamp)
+    .slice(0, layout.maxRenderedRequests);
+};
+
+export const getTimelineModel = (
+  requests: ProcessedRequest[],
+  now: number,
+  layout: TimelineLayout = TIMELINE_LAYOUT,
+): TimelineModel => {
+  const renderableRequests = getRenderableRequests(requests, layout);
+  const hiddenRequestCount = requests.length - renderableRequests.length;
+
+  if (renderableRequests.length === 0) {
+    return {
+      rows: [],
+      ticks: getTimelineTicks(layout.minRangeMs, layout),
+      rangeStart: 0,
+      rangeDuration: layout.minRangeMs,
+      chartHeight: getTimelineChartHeight(layout),
+      totalRequestCount: requests.length,
+      hiddenRequestCount,
+    };
+  }
+
+  const bounds = getTimelineBounds(renderableRequests, now, layout);
+  const rawRangeDuration = Math.max(
+    bounds.end - bounds.start,
+    layout.minRangeMs,
+  );
+  const rangePadding = Math.max(
+    rawRangeDuration * layout.rangePaddingRatio,
+    layout.minRangePaddingMs,
+  );
+  const rangeStart = bounds.start - rangePadding;
+  const rangeDuration = rawRangeDuration + rangePadding * 2;
+  const laneEndTimes = Array.from({ length: layout.laneCount }, () => 0);
+
+  const rows = [...renderableRequests]
+    .sort((a, b) => a.timestamp - b.timestamp)
+    .map((request): TimelineRow => {
+      const startTime = request.timestamp;
+      const endTime = getTimelineRequestEndTime(request, now, layout);
+      const duration = Math.max(endTime - startTime, 0);
+      const offsetPercent = clamp(
+        ((startTime - rangeStart) / rangeDuration) * 100,
+        0,
+        100 - layout.minVisibleBarPercent,
+      );
+      const widthPercent = Math.min(
+        Math.max((duration / rangeDuration) * 100, layout.minVisibleBarPercent),
+        100 - offsetPercent,
+      );
+      const ttfb = clamp(request.ttfb ?? 0, 0, duration);
+      const ttfbPercent = duration === 0 ? 0 : (ttfb / duration) * 100;
+      const receivePercent = Math.max(100 - ttfbPercent, 0);
+      const availableLane = laneEndTimes.findIndex(
+        (laneEndTime) => laneEndTime <= startTime,
+      );
+      const isOverflowingLane = availableLane === -1;
+      const lane = isOverflowingLane
+        ? getEarliestLaneIndex(laneEndTimes)
+        : availableLane;
+      laneEndTimes[lane] = Math.max(laneEndTimes[lane], endTime);
+
+      return {
+        request,
+        offsetPercent,
+        widthPercent,
+        duration,
+        ttfbPercent,
+        receivePercent,
+        isActive: isRequestActive(request),
+        lane,
+        isOverflowingLane,
+      };
+    });
+
+  return {
+    rows,
+    ticks: getTimelineTicks(rangeDuration, layout),
+    rangeStart,
+    rangeDuration,
+    chartHeight: getTimelineChartHeight(layout),
+    totalRequestCount: requests.length,
+    hiddenRequestCount,
+  };
+};