@rozenite/network-activity-plugin 1.9.0 → 1.10.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/views/InspectorView.tsx

@@ -2,7 +2,11 @@ import { useEffect, 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 {
+  createDefaultFilter,
+  FilterBar,
+  FilterState,
+} from '../components/FilterBar';
 import { NetworkActivityDevToolsClient } from '../../shared/client';
 import {
   useNetworkActivityClientManagement,
@@ -20,10 +24,9 @@ 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 [filter, setFilter] = useState<FilterState>(() =>
+    createDefaultFilter(),
+  );
 
   useEffect(() => {
     if (!client) {

package/src/utils/__tests__/getContentTypeMimeType.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest';
 import {
   getContentTypeMime,
   isJsonContentType,
+  isXmlContentType,
 } from '../getContentTypeMimeType';
 
 describe('getContentTypeMimeType', () => {
@@ -28,4 +29,37 @@ describe('getContentTypeMimeType', () => {
       }),
     ).toBe('Application/LD+JSON');
   });
+
+  it('recognizes application/xml and text/xml with parameters', () => {
+    expect(isXmlContentType('application/xml')).toBe(true);
+    expect(isXmlContentType('application/xml; charset=utf-8')).toBe(true);
+    expect(isXmlContentType('text/xml')).toBe(true);
+    expect(isXmlContentType('text/xml; charset=utf-8')).toBe(true);
+  });
+
+  it('recognizes RFC 7303 +xml content types (Atom, RSS, SOAP, XHTML, SVG, ...)', () => {
+    expect(isXmlContentType('application/atom+xml')).toBe(true);
+    expect(isXmlContentType('application/rss+xml')).toBe(true);
+    expect(isXmlContentType('application/soap+xml; charset=utf-8')).toBe(true);
+    expect(isXmlContentType('application/xhtml+xml')).toBe(true);
+    // SVG is XML by structure — the predicate matches it. The registry
+    // gives svgRenderer an earlier slot so it claims SVG first; that
+    // ordering is verified separately in dispatch.test.ts.
+    expect(isXmlContentType('image/svg+xml')).toBe(true);
+  });
+
+  it('is case-insensitive (normalizeContentType lowercases)', () => {
+    expect(isXmlContentType('Application/XML')).toBe(true);
+    expect(isXmlContentType('Application/Atom+XML')).toBe(true);
+  });
+
+  it('rejects non-xml content types', () => {
+    expect(isXmlContentType('text/plain')).toBe(false);
+    expect(isXmlContentType('text/html')).toBe(false);
+    expect(isXmlContentType('application/json')).toBe(false);
+    expect(isXmlContentType('application/xmlfoo')).toBe(false);
+    expect(isXmlContentType(undefined)).toBe(false);
+    expect(isXmlContentType(null)).toBe(false);
+    expect(isXmlContentType('')).toBe(false);
+  });
 });

package/src/utils/getContentTypeMimeType.ts

@@ -29,3 +29,17 @@ export function isJsonContentType(contentType: string | null | undefined) {
 
   return mimeType === 'application/json' || mimeType.endsWith('+json');
 }
+
+export function isXmlContentType(contentType: string | null | undefined) {
+  if (!contentType) {
+    return false;
+  }
+
+  const mimeType = normalizeContentType(contentType);
+
+  return (
+    mimeType === 'application/xml' ||
+    mimeType === 'text/xml' ||
+    mimeType.endsWith('+xml')
+  );
+}

package/vite.config.ts

@@ -8,8 +8,12 @@ export default defineConfig({
   plugins: [rozenitePlugin()],
   test: {
     passWithNoTests: true,
+    setupFiles: ['./vitest.setup.ts'],
     alias: {
-      '@rozenite/agent-shared': resolve(__dirname, '../agent-shared/src/index.ts'),
+      '@rozenite/agent-shared': resolve(
+        __dirname,
+        '../agent-shared/src/index.ts',
+      ),
     },
   },
   base: './',

package/vitest.setup.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { afterEach, vi } from 'vitest';
+import { cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+
+afterEach(() => {
+  cleanup();
+});
+
+// `react-virtuoso` doesn't render rows in jsdom — the underlying
+// element-resize observation never fires without a real browser
+// layout. Replace it with a non-virtualized passthrough so RTL tests
+// can assert on the actual row content. Production code is unaffected.
+vi.mock('react-virtuoso', () => ({
+  Virtuoso: ({
+    totalCount,
+    itemContent,
+    className,
+  }: {
+    totalCount: number;
+    itemContent: (index: number) => React.ReactNode;
+    className?: string;
+  }) =>
+    React.createElement(
+      'div',
+      { 'data-testid': 'virtuoso-mock', className },
+      ...Array.from({ length: totalCount }, (_, i) =>
+        React.createElement('div', { key: i }, itemContent(i)),
+      ),
+    ),
+}));