@rozenite/network-activity-plugin 1.9.0 → 1.11.0

package/src/ui/utils/symbolication.ts

@@ -0,0 +1,248 @@
+import type { Initiator, InitiatorStackFrame } from '../../shared/client';
+
+type ReactNativeStackFrame = {
+  methodName: string;
+  file: string | null | undefined;
+  lineNumber: number | null | undefined;
+  column: number | null | undefined;
+  collapse?: boolean;
+};
+
+type SymbolicatedStackTrace = {
+  stack: ReadonlyArray<ReactNativeStackFrame>;
+  codeFrame?: Initiator['codeFrame'];
+};
+
+type SymbolicateStackTrace = (
+  stack: ReadonlyArray<ReactNativeStackFrame>,
+) => Promise<SymbolicatedStackTrace>;
+
+const normalizeFunctionName = (functionName?: string) => {
+  const trimmedFunctionName = functionName?.trim();
+
+  return trimmedFunctionName &&
+    trimmedFunctionName !== '<anonymous>' &&
+    trimmedFunctionName !== 'anonymous' &&
+    trimmedFunctionName !== '<unknown>'
+    ? trimmedFunctionName
+    : undefined;
+};
+
+const getGeneratedFrameLocation = (frame: InitiatorStackFrame) => ({
+  url: frame.generatedUrl ?? frame.url,
+  lineNumber: frame.generatedLineNumber ?? frame.lineNumber,
+  columnNumber: frame.generatedColumnNumber ?? frame.columnNumber,
+});
+
+const isGeneratedBundleUrl = (url: string) =>
+  /[^/]+\.bundle(?:[/?#]|$)/.test(url);
+
+const canSymbolicateStack = (stack?: InitiatorStackFrame[]) =>
+  stack?.some((frame) =>
+    getGeneratedFrameLocation(frame).url?.startsWith('http'),
+  ) ?? false;
+
+const toReactNativeStackFrame = (
+  frame: InitiatorStackFrame,
+): ReactNativeStackFrame | null => {
+  const generatedLocation = getGeneratedFrameLocation(frame);
+
+  if (!generatedLocation.url) {
+    return null;
+  }
+
+  return {
+    methodName: frame.functionName ?? '<anonymous>',
+    file: generatedLocation.url,
+    lineNumber: generatedLocation.lineNumber,
+    column: generatedLocation.columnNumber,
+  };
+};
+
+const fromSymbolicatedStackFrame = (
+  frame: ReactNativeStackFrame,
+  generatedFrame: InitiatorStackFrame = {},
+): InitiatorStackFrame => {
+  const generatedLocation = getGeneratedFrameLocation(generatedFrame);
+  const sourceUrl =
+    frame.file &&
+    frame.file !== generatedLocation.url &&
+    !isGeneratedBundleUrl(frame.file)
+      ? frame.file
+      : undefined;
+
+  return {
+    functionName:
+      normalizeFunctionName(frame.methodName) ?? generatedFrame.functionName,
+    url: sourceUrl,
+    lineNumber: sourceUrl ? (frame.lineNumber ?? undefined) : undefined,
+    columnNumber: sourceUrl ? (frame.column ?? undefined) : undefined,
+    generatedUrl: generatedLocation.url,
+    generatedLineNumber: generatedLocation.lineNumber,
+    generatedColumnNumber: generatedLocation.columnNumber,
+    isCollapsed: frame.collapse,
+  };
+};
+
+const getComparableSourcePath = (url?: string) =>
+  url?.split(/[?#]/)[0].replace(/^file:\/\//, '');
+
+const ANSI_SEQUENCE_PATTERN = new RegExp(
+  [
+    '[\\u001b\\u009b][[\\]()#;?]*',
+    '(?:(?:(?:[a-zA-Z\\d]*(?:;[a-zA-Z\\d]*)*)?\\u0007)',
+    '|(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-nq-uy=><~]))',
+  ].join(''),
+  'g',
+);
+
+const stripAnsiSequences = (value: string) =>
+  // Metro returns code frames formatted for terminals. DevTools renders them
+  // as plain text, so terminal control sequences need to be removed.
+  value.replace(ANSI_SEQUENCE_PATTERN, '');
+
+const sanitizeCodeFrame = (
+  codeFrame: Initiator['codeFrame'] | undefined,
+) => {
+  if (!codeFrame) {
+    return null;
+  }
+
+  return {
+    ...codeFrame,
+    content: stripAnsiSequences(codeFrame.content),
+  };
+};
+
+const isSameSourcePath = (left?: string, right?: string) => {
+  const leftPath = getComparableSourcePath(left);
+  const rightPath = getComparableSourcePath(right);
+
+  if (!leftPath || !rightPath) {
+    return false;
+  }
+
+  return leftPath.endsWith(rightPath) || rightPath.endsWith(leftPath);
+};
+
+const getSourceFrameForCodeFrame = (
+  stack: InitiatorStackFrame[],
+  codeFrame: Initiator['codeFrame'] | undefined,
+) => {
+  if (!codeFrame?.fileName) {
+    return null;
+  }
+
+  return (
+    stack.find((frame) => isSameSourcePath(codeFrame.fileName, frame.url)) ??
+    null
+  );
+};
+
+const getCodeFrameForSourceFrame = (
+  codeFrame: Initiator['codeFrame'] | undefined,
+  sourceFrame: InitiatorStackFrame | undefined,
+) => {
+  if (!codeFrame || !isSameSourcePath(codeFrame.fileName, sourceFrame?.url)) {
+    return null;
+  }
+
+  return sanitizeCodeFrame(codeFrame);
+};
+
+const getPreferredSourceFrame = (
+  stack: InitiatorStackFrame[],
+  codeFrame: Initiator['codeFrame'] | undefined,
+) =>
+  getSourceFrameForCodeFrame(stack, codeFrame) ??
+  stack.find((frame) => frame.url && !frame.isCollapsed) ??
+  stack.find((frame) => frame.url) ??
+  stack[0];
+
+const getSymbolicationEndpoint = () => {
+  if (typeof window === 'undefined') {
+    throw new Error('Unable to resolve Metro symbolication endpoint');
+  }
+
+  return new URL('/symbolicate', window.location.origin).toString();
+};
+
+export const symbolicateStackTraceWithMetro: SymbolicateStackTrace = async (
+  stack,
+) => {
+  const response = await fetch(getSymbolicationEndpoint(), {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ stack }),
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `Metro symbolication failed with status ${response.status}`,
+    );
+  }
+
+  return response.json() as Promise<SymbolicatedStackTrace>;
+};
+
+export const symbolicateInitiator = async (
+  initiator: Initiator,
+  symbolicateStackTrace: SymbolicateStackTrace = symbolicateStackTraceWithMetro,
+): Promise<Initiator | null> => {
+  if (!canSymbolicateStack(initiator.stack)) {
+    return null;
+  }
+
+  const generatedStackFrames =
+    initiator.stack
+      ?.map(toReactNativeStackFrame)
+      .filter((frame): frame is ReactNativeStackFrame => frame !== null) ?? [];
+
+  if (generatedStackFrames.length === 0) {
+    return null;
+  }
+
+  try {
+    const symbolicatedStackTrace =
+      await symbolicateStackTrace(generatedStackFrames);
+
+    const symbolicatedStack = symbolicatedStackTrace.stack.map((frame, index) =>
+      fromSymbolicatedStackFrame(frame, initiator.stack?.[index]),
+    );
+    const sourceFrame = getPreferredSourceFrame(
+      symbolicatedStack,
+      symbolicatedStackTrace.codeFrame,
+    );
+    const hasSourceMappedFrame = symbolicatedStack.some((frame) => frame.url);
+
+    return {
+      ...initiator,
+      type: sourceFrame?.url ? 'script' : initiator.type,
+      functionName: sourceFrame?.functionName,
+      url: sourceFrame?.url,
+      lineNumber: sourceFrame?.lineNumber,
+      columnNumber: sourceFrame?.columnNumber,
+      generatedUrl: sourceFrame?.generatedUrl ?? initiator.generatedUrl,
+      generatedLineNumber:
+        sourceFrame?.generatedLineNumber ?? initiator.generatedLineNumber,
+      generatedColumnNumber:
+        sourceFrame?.generatedColumnNumber ?? initiator.generatedColumnNumber,
+      stack: symbolicatedStack,
+      codeFrame: getCodeFrameForSourceFrame(
+        symbolicatedStackTrace.codeFrame,
+        sourceFrame,
+      ),
+      symbolicationStatus: hasSourceMappedFrame ? 'complete' : 'unavailable',
+      symbolicationError: undefined,
+    };
+  } catch (error) {
+    return {
+      ...initiator,
+      symbolicationStatus: 'failed',
+      symbolicationError:
+        error instanceof Error ? error.message : 'Unable to symbolicate stack',
+    };
+  }
+};

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

package/src/ui/views/InspectorView.tsx

@@ -1,15 +1,24 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Toolbar } from '../components/Toolbar';
 import { RequestList } from '../components/RequestList';
 import { SidePanel } from '../components/SidePanel';
-import { FilterBar, FilterState } from '../components/FilterBar';
+import { FilterBar } from '../components/FilterBar';
+import { NetworkTimeline } from '../components/NetworkTimeline';
 import { NetworkActivityDevToolsClient } from '../../shared/client';
 import {
   useNetworkActivityClientManagement,
   useHasSelectedRequest,
   useNetworkActivityActions,
   useOverrides,
+  useProcessedRequests,
 } from '../state/hooks';
+import { createDefaultFilter } from '../state/filter';
+import type { FilterState } from '../state/filter';
+import { matchesRequestFilter } from '../utils/requestFilters';
+import {
+  requestOverlapsTimelineRange,
+  type TimelineRangeSelection,
+} from '../utils/timelineModel';
 
 export type InspectorViewProps = {
   client: NetworkActivityDevToolsClient;
@@ -20,10 +29,31 @@ export const InspectorView = ({ client }: InspectorViewProps) => {
   const clientManagement = useNetworkActivityClientManagement();
   const hasSelectedRequest = useHasSelectedRequest();
   const overrides = useOverrides();
-  const [filter, setFilter] = useState<FilterState>({
-    text: '',
-    types: new Set(['http', 'websocket', 'sse']),
-  });
+  const processedRequests = useProcessedRequests();
+  const [filter, setFilter] = useState<FilterState>(() =>
+    createDefaultFilter(),
+  );
+  const [timelineSelection, setTimelineSelection] =
+    useState<TimelineRangeSelection | null>(null);
+
+  const filteredRequests = useMemo(() => {
+    return processedRequests.filter((request) =>
+      matchesRequestFilter(request, filter, {
+        hasOverride: overrides.has(request.name),
+      }),
+    );
+  }, [processedRequests, filter, overrides]);
+
+  const visibleRequests = useMemo(() => {
+    if (!timelineSelection) {
+      return filteredRequests;
+    }
+
+    const now = Date.now();
+    return filteredRequests.filter((request) =>
+      requestOverlapsTimelineRange(request, timelineSelection, now),
+    );
+  }, [filteredRequests, timelineSelection]);
 
   useEffect(() => {
     if (!client) {
@@ -49,13 +79,18 @@ export const InspectorView = ({ client }: InspectorViewProps) => {
       <FilterBar filter={filter} onFilterChange={setFilter} />
 
       <div className="flex flex-1 overflow-hidden">
-        {/* Request List */}
         <div
           className={`flex flex-col ${
             hasSelectedRequest ? 'w-1/2' : 'w-full'
           } border-r border-gray-700 overflow-hidden`}
         >
-          <RequestList filter={filter} />
+          <NetworkTimeline
+            requests={filteredRequests}
+            selection={timelineSelection}
+            filteredRequestCount={visibleRequests.length}
+            onSelectionChange={setTimelineSelection}
+          />
+          <RequestList requests={visibleRequests} />
         </div>
 
         {hasSelectedRequest && <SidePanel />}