react-native-network-lens 0.0.0-stage → 0.1.1

package/src/theme.ts

@@ -0,0 +1,174 @@
+import { createContext, useContext } from 'react';
+import { Platform, useColorScheme } from 'react-native';
+import type { DeepPartial } from './types';
+
+export type ThemeName = 'light' | 'dark' | 'auto';
+
+export type Theme = {
+  colors: {
+    background: string;
+    surface: string;
+    surfaceAlt: string;
+    border: string;
+    text: string;
+    textMuted: string;
+    primary: string;
+    onPrimary: string;
+    statusGood: string;
+    statusRedirect: string;
+    statusWarning: string;
+    statusBad: string;
+    statusPending: string;
+    methodGet: string;
+    methodPost: string;
+    methodPut: string;
+    methodPatch: string;
+    methodDelete: string;
+    methodOther: string;
+    jsonKey: string;
+    jsonString: string;
+    jsonNumber: string;
+    jsonBoolean: string;
+    jsonNull: string;
+    highlight: string;
+    highlightActive: string;
+    onHighlight: string;
+  };
+  fonts: {
+    mono: string;
+  };
+  sizes: {
+    codeFontSize: number;
+    codeLineHeight: number;
+  };
+};
+
+const mono = Platform.select({
+  ios: 'Menlo',
+  android: 'monospace',
+  default: 'monospace',
+});
+
+export const lightTheme: Theme = {
+  colors: {
+    background: '#f2f3f5',
+    surface: '#ffffff',
+    surfaceAlt: '#eaecf0',
+    border: '#d9dce1',
+    text: '#161a21',
+    textMuted: '#6b7280',
+    primary: '#2563eb',
+    onPrimary: '#ffffff',
+    statusGood: '#15803d',
+    statusRedirect: '#0e7490',
+    statusWarning: '#c2410c',
+    statusBad: '#b91c1c',
+    statusPending: '#6b7280',
+    methodGet: '#2563eb',
+    methodPost: '#15803d',
+    methodPut: '#b45309',
+    methodPatch: '#7c3aed',
+    methodDelete: '#b91c1c',
+    methodOther: '#475569',
+    jsonKey: '#881391',
+    jsonString: '#c41a16',
+    jsonNumber: '#1c00cf',
+    jsonBoolean: '#0d22aa',
+    jsonNull: '#808080',
+    highlight: '#fde68a',
+    highlightActive: '#f59e0b',
+    onHighlight: '#1f2937',
+  },
+  fonts: { mono: mono ?? 'monospace' },
+  sizes: { codeFontSize: 13, codeLineHeight: 20 },
+};
+
+export const darkTheme: Theme = {
+  colors: {
+    background: '#0f1115',
+    surface: '#181b21',
+    surfaceAlt: '#22262e',
+    border: '#2d323c',
+    text: '#e6e8eb',
+    textMuted: '#9aa3af',
+    primary: '#60a5fa',
+    onPrimary: '#0b1220',
+    statusGood: '#4ade80',
+    statusRedirect: '#22d3ee',
+    statusWarning: '#fb923c',
+    statusBad: '#f87171',
+    statusPending: '#9aa3af',
+    methodGet: '#60a5fa',
+    methodPost: '#4ade80',
+    methodPut: '#fbbf24',
+    methodPatch: '#c084fc',
+    methodDelete: '#f87171',
+    methodOther: '#94a3b8',
+    jsonKey: '#e2a8ff',
+    jsonString: '#ff8a80',
+    jsonNumber: '#9ecbff',
+    jsonBoolean: '#9ecbff',
+    jsonNull: '#9aa3af',
+    highlight: '#5b4a12',
+    highlightActive: '#d97706',
+    onHighlight: '#fef3c7',
+  },
+  fonts: { mono: mono ?? 'monospace' },
+  sizes: { codeFontSize: 13, codeLineHeight: 20 },
+};
+
+export type ThemeInput = ThemeName | DeepPartial<Theme>;
+
+export const ThemeContext = createContext<ThemeInput>('auto');
+
+const merge = (base: Theme, override: DeepPartial<Theme>): Theme => ({
+  colors: { ...base.colors, ...(override.colors as Partial<Theme['colors']>) },
+  fonts: { ...base.fonts, ...(override.fonts as Partial<Theme['fonts']>) },
+  sizes: { ...base.sizes, ...(override.sizes as Partial<Theme['sizes']>) },
+});
+
+export const resolveTheme = (
+  input: ThemeInput,
+  systemScheme: 'light' | 'dark'
+): Theme => {
+  if (input === 'auto') return systemScheme === 'dark' ? darkTheme : lightTheme;
+  if (input === 'dark') return darkTheme;
+  if (input === 'light') return lightTheme;
+  return merge(systemScheme === 'dark' ? darkTheme : lightTheme, input);
+};
+
+export const useTheme = (): Theme => {
+  const input = useContext(ThemeContext);
+  const scheme = useColorScheme();
+  return resolveTheme(input, scheme === 'dark' ? 'dark' : 'light');
+};
+
+export const methodColor = (theme: Theme, method: string): string => {
+  switch (method) {
+    case 'GET':
+      return theme.colors.methodGet;
+    case 'POST':
+      return theme.colors.methodPost;
+    case 'PUT':
+      return theme.colors.methodPut;
+    case 'PATCH':
+      return theme.colors.methodPatch;
+    case 'DELETE':
+      return theme.colors.methodDelete;
+    default:
+      return theme.colors.methodOther;
+  }
+};
+
+export const statusColor = (
+  theme: Theme,
+  status: number,
+  failed = false
+): string => {
+  if (failed) return theme.colors.statusBad;
+  if (status <= 0) return theme.colors.statusPending;
+  if (status < 300) return theme.colors.statusGood;
+  if (status < 400) return theme.colors.statusRedirect;
+  if (status < 500) return theme.colors.statusWarning;
+  return theme.colors.statusBad;
+};

package/src/types.ts

@@ -0,0 +1,83 @@
+export type Headers = Record<string, string>;
+
+export type RequestMethod =
+  | 'GET'
+  | 'POST'
+  | 'PUT'
+  | 'PATCH'
+  | 'DELETE'
+  | 'HEAD'
+  | 'OPTIONS'
+  | (string & {});
+
+/** Lifecycle of a captured request. */
+export type RequestState = 'pending' | 'done' | 'failed';
+
+export type FailureReason = 'error' | 'timeout' | 'abort';
+
+export type StatusGroup =
+  '1xx' | '2xx' | '3xx' | '4xx' | '5xx' | 'pending' | 'failed';
+
+export interface NetworkLensOptions {
+  /**
+   * Master switch. When `false` nothing is intercepted and every UI component
+   * renders nothing, so you can wire it to `__DEV__` or a remote feature flag.
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Max number of requests to keep before the oldest ones are dropped.
+   * @default 500
+   */
+  maxRequests?: number;
+  /** Hosts to ignore, e.g. `services.test.com` */
+  ignoredHosts?: string[];
+  /** Exact urls to ignore, e.g. `https://services.test.com/test` */
+  ignoredUrls?: string[];
+  /**
+   * Patterns to ignore. They are tested against `${method} ${url}`,
+   * e.g. `/^GET https:\/\/test\.com\/pages\/.*$/`
+   */
+  ignoredPatterns?: RegExp[];
+  /**
+   * How often (ms) the UI is notified about new data.
+   * @default 50
+   */
+  refreshRate?: number;
+}
+
+/** @deprecated use `NetworkLensOptions` */
+export type StartNetworkLoggingOptions = NetworkLensOptions;
+
+/**
+ * A body after we tried to understand it.
+ * `text` is always the raw textual representation used by the "Raw" view.
+ */
+export type ParsedBody =
+  | { kind: 'empty'; text: '' }
+  | { kind: 'json'; value: unknown; text: string }
+  | { kind: 'form'; value: Record<string, string>; text: string }
+  | { kind: 'text'; text: string }
+  | { kind: 'binary'; text: string; size: number; mimeType?: string };
+
+/** Light-weight projection of a request used by list rows. */
+export interface NetworkRequestRow {
+  id: string;
+  method: RequestMethod;
+  url: string;
+  host: string;
+  path: string;
+  status: number;
+  state: RequestState;
+  statusGroup: StatusGroup;
+  failureReason?: FailureReason;
+  duration: number;
+  startTime: number;
+  responseSize: number;
+  gqlOperation?: string;
+  updatedAt: number;
+}
+
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};

package/src/utils/body.ts

@@ -0,0 +1,194 @@
+import type { ParsedBody } from '../types';
+import { byteLength } from './format';
+import { parseQueryString } from './url';
+
+const EMPTY: ParsedBody = { kind: 'empty', text: '' };
+
+type FormDataLike = { _parts?: unknown[] };
+
+const isFormDataLike = (value: unknown): value is FormDataLike =>
+  !!value &&
+  typeof value === 'object' &&
+  Array.isArray((value as FormDataLike)._parts);
+
+const formPartsToRecord = (parts: unknown[]): Record<string, string> => {
+  const result: Record<string, string> = {};
+  for (const part of parts) {
+    if (!Array.isArray(part)) continue;
+    const [name, value] = part as [unknown, unknown];
+    const key = String(name);
+    if (value && typeof value === 'object') {
+      const file = value as { name?: string; type?: string; uri?: string };
+      result[key] = `[file${file.name ? ` ${file.name}` : ''}${
+        file.type ? ` (${file.type})` : ''
+      }]`;
+    } else {
+      result[key] = String(value);
+    }
+  }
+  return result;
+};
+
+const looksLikeUrlEncoded = (text: string, contentType?: string) => {
+  if (contentType?.includes('application/x-www-form-urlencoded')) return true;
+  if (text.length > 10_000) return false;
+  if (/[\s{}[\]"]/.test(text)) return false;
+  return /^[^=&]+=[^&]*(&[^=&]+=[^&]*)*$/.test(text);
+};
+
+export const stringifyJson = (value: unknown): string => {
+  try {
+    return JSON.stringify(value, null, 2) ?? '';
+  } catch {
+    return String(value);
+  }
+};
+
+export const tryParseJson = (
+  text: string
+): { ok: true; value: unknown } | { ok: false } => {
+  const trimmed = text.trim();
+  if (!trimmed) return { ok: false };
+  const first = trimmed[0];
+  if (
+    first !== '{' &&
+    first !== '[' &&
+    first !== '"' &&
+    !/^[-\d tfn]/.test(first ?? '')
+  ) {
+    return { ok: false };
+  }
+  try {
+    return { ok: true, value: JSON.parse(trimmed) };
+  } catch {
+    return { ok: false };
+  }
+};
+
+export const parseTextBody = (
+  text: string,
+  contentType?: string
+): ParsedBody => {
+  if (!text) return EMPTY;
+  const json = tryParseJson(text);
+  if (
+    json.ok &&
+    (typeof json.value === 'object' || Array.isArray(json.value))
+  ) {
+    return { kind: 'json', value: json.value, text: stringifyJson(json.value) };
+  }
+  if (looksLikeUrlEncoded(text, contentType)) {
+    const value = parseQueryString(text);
+    return { kind: 'form', value, text: stringifyJson(value) };
+  }
+  return { kind: 'text', text };
+};
+
+const describeBinary = (value: unknown, mimeType?: string): ParsedBody => {
+  let size = 0;
+  let label = 'binary';
+  if (typeof ArrayBuffer !== 'undefined' && value instanceof ArrayBuffer) {
+    size = value.byteLength;
+    label = 'ArrayBuffer';
+  } else if (value && typeof value === 'object') {
+    const v = value as { size?: number; byteLength?: number; type?: string };
+    size = v.size ?? v.byteLength ?? 0;
+    label = typeof v.size === 'number' ? 'Blob' : label;
+    mimeType = mimeType || v.type;
+  }
+  const text = `[${label}${mimeType ? ` ${mimeType}` : ''}${
+    size ? `, ${size} bytes` : ''
+  }]`;
+  return { kind: 'binary', text, size, mimeType };
+};
+
+/**
+ * Normalises whatever was passed to `xhr.send()`.
+ */
+export const parseRequestBody = (
+  data: unknown,
+  contentType?: string
+): ParsedBody => {
+  if (data === null || data === undefined || data === '') return EMPTY;
+  if (typeof data === 'string') return parseTextBody(data, contentType);
+  if (isFormDataLike(data)) {
+    const value = formPartsToRecord(data._parts ?? []);
+    return { kind: 'form', value, text: stringifyJson(value) };
+  }
+  if (typeof data === 'object') {
+    if (
+      typeof ArrayBuffer !== 'undefined' &&
+      (data instanceof ArrayBuffer || ArrayBuffer.isView(data))
+    ) {
+      return describeBinary(data, contentType);
+    }
+    if ('size' in (data as object) && 'type' in (data as object)) {
+      return describeBinary(data, contentType);
+    }
+    return { kind: 'json', value: data, text: stringifyJson(data) };
+  }
+  return parseTextBody(String(data), contentType);
+};
+
+const readBlobAsText = (blob: unknown): Promise<string> =>
+  new Promise((resolve, reject) => {
+    const Reader = (globalThis as { FileReader?: new () => FileReaderLike })
+      .FileReader;
+    if (!Reader) {
+      reject(new Error('FileReader is not available'));
+      return;
+    }
+    const reader = new Reader();
+    reader.onload = () => resolve(String(reader.result ?? ''));
+    reader.onerror = () =>
+      reject(reader.error ?? new Error('Failed to read blob'));
+    try {
+      reader.readAsText(blob as Blob);
+    } catch (error) {
+      reject(error);
+    }
+  });
+
+interface FileReaderLike {
+  result: unknown;
+  error: unknown;
+  onload: (() => void) | null;
+  onerror: (() => void) | null;
+  readAsText: (blob: Blob) => void;
+}
+
+const TEXTUAL_MIME =
+  /json|text|xml|javascript|x-www-form-urlencoded|graphql|html/i;
+
+/**
+ * Normalises an XHR response. Blob responses are only decoded when they look textual.
+ */
+export const parseResponseBody = async (
+  response: unknown,
+  responseType: string,
+  contentType?: string
+): Promise<ParsedBody> => {
+  if (response === null || response === undefined || response === '')
+    return EMPTY;
+  if (typeof response === 'string') return parseTextBody(response, contentType);
+  if (responseType === 'blob') {
+    const mime = contentType || (response as { type?: string }).type;
+    if (!mime || TEXTUAL_MIME.test(mime)) {
+      try {
+        const text = await readBlobAsText(response);
+        if (text) return parseTextBody(text, mime);
+      } catch {
+        // fall through to the binary description
+      }
+    }
+    return describeBinary(response, mime);
+  }
+  if (responseType === 'arraybuffer' || response instanceof ArrayBuffer) {
+    return describeBinary(response, contentType);
+  }
+  // responseType 'json' (or anything else that is already an object)
+  return { kind: 'json', value: response, text: stringifyJson(response) };
+};
+
+export const bodySize = (body: ParsedBody): number =>
+  body.kind === 'binary' ? body.size : byteLength(body.text);

package/src/utils/debounce.ts

@@ -0,0 +1,18 @@
+export default function debounce<T extends (...args: never[]) => void>(
+  fn: T,
+  wait: number
+): T & { cancel: () => void } {
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  const debounced = ((...args: Parameters<T>) => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = undefined;
+      fn(...args);
+    }, wait);
+  }) as T & { cancel: () => void };
+  debounced.cancel = () => {
+    if (timer) clearTimeout(timer);
+    timer = undefined;
+  };
+  return debounced;
+}

package/src/utils/format.ts

@@ -0,0 +1,50 @@
+export const formatBytes = (bytes: number): string => {
+  if (!bytes || bytes < 0) return '';
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ['KB', 'MB', 'GB'];
+  let value = bytes / 1024;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;
+};
+
+export const formatDuration = (ms: number): string => {
+  if (ms < 0) return '';
+  if (ms < 1000) return `${Math.round(ms)} ms`;
+  return `${(ms / 1000).toFixed(2)} s`;
+};
+
+const pad = (num: number) => `0${num}`.slice(-2);
+
+export const formatTime = (time: number, withMillis = false): string => {
+  if (!time) return '';
+  const date = new Date(time);
+  const base = `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(
+    date.getSeconds()
+  )}`;
+  if (!withMillis) return base;
+  return `${base}.${`00${date.getMilliseconds()}`.slice(-3)}`;
+};
+
+export const formatDateTime = (time: number): string => {
+  if (!time) return '';
+  return new Date(time).toISOString();
+};
+
+/** Approximate size of a string in bytes (UTF-8). */
+export const byteLength = (text: string): number => {
+  let bytes = 0;
+  for (let i = 0; i < text.length; i++) {
+    const code = text.charCodeAt(i);
+    if (code < 0x80) bytes += 1;
+    else if (code < 0x800) bytes += 2;
+    else if (code >= 0xd800 && code <= 0xdbff) {
+      bytes += 4;
+      i += 1;
+    } else bytes += 3;
+  }
+  return bytes;
+};

package/src/utils/logger.ts

@@ -0,0 +1,3 @@
+export const warn = (message: string): void => {
+  console.warn(`[react-native-network-lens] ${message}`);
+};

package/src/utils/search.ts

@@ -0,0 +1,72 @@
+export interface LineMatch {
+  line: number;
+  start: number;
+  end: number;
+}
+
+/** Finds every (case-insensitive) occurrence of `query` in `lines`. */
+export const findLineMatches = (
+  lines: readonly string[],
+  query: string
+): LineMatch[] => {
+  const needle = query.toLowerCase();
+  if (!needle) return [];
+  const matches: LineMatch[] = [];
+  lines.forEach((line, index) => {
+    const haystack = line.toLowerCase();
+    let from = 0;
+    while (from <= haystack.length - needle.length) {
+      const at = haystack.indexOf(needle, from);
+      if (at === -1) break;
+      matches.push({ line: index, start: at, end: at + needle.length });
+      from = at + Math.max(needle.length, 1);
+    }
+  });
+  return matches;
+};
+
+export interface TextSegment {
+  text: string;
+  highlighted: boolean;
+}
+
+/** Splits `text` into highlighted / plain segments for the given query. */
+export const splitHighlights = (text: string, query: string): TextSegment[] => {
+  const needle = query.toLowerCase();
+  if (!needle || !text) return [{ text, highlighted: false }];
+  const haystack = text.toLowerCase();
+  const segments: TextSegment[] = [];
+  let cursor = 0;
+  while (cursor < text.length) {
+    const at = haystack.indexOf(needle, cursor);
+    if (at === -1) break;
+    if (at > cursor)
+      segments.push({ text: text.slice(cursor, at), highlighted: false });
+    segments.push({
+      text: text.slice(at, at + needle.length),
+      highlighted: true,
+    });
+    cursor = at + needle.length;
+  }
+  if (cursor < text.length)
+    segments.push({ text: text.slice(cursor), highlighted: false });
+  return segments;
+};
+
+export const MAX_LINE_CHARS = 2000;
+
+/** Splits text into lines, hard-wrapping absurdly long ones so layout stays sane. */
+export const toLines = (text: string): string[] => {
+  const lines = text.split(/\r?\n/);
+  const result: string[] = [];
+  for (const line of lines) {
+    if (line.length <= MAX_LINE_CHARS) {
+      result.push(line);
+      continue;
+    }
+    for (let i = 0; i < line.length; i += MAX_LINE_CHARS) {
+      result.push(line.slice(i, i + MAX_LINE_CHARS));
+    }
+  }
+  return result;
+};

package/src/utils/url.ts

@@ -0,0 +1,59 @@
+/**
+ * Tiny URL helpers that do not rely on the `URL` global, because React Native's
+ * implementation is incomplete (no `searchParams`, throws on relative urls).
+ */
+
+export interface UrlParts {
+  host: string;
+  path: string;
+  query: Record<string, string>;
+  hasQuery: boolean;
+}
+
+export const extractHost = (url: string): string => {
+  const match = /^[a-z][a-z0-9+.-]*:\/\/([^/?#]+)/i.exec(url);
+  return match?.[1] ?? '';
+};
+
+export const parseQueryString = (search: string): Record<string, string> => {
+  const result: Record<string, string> = {};
+  const trimmed = search.replace(/^\?/, '');
+  if (!trimmed) return result;
+  for (const pair of trimmed.split('&')) {
+    if (!pair) continue;
+    const eq = pair.indexOf('=');
+    const rawKey = eq === -1 ? pair : pair.slice(0, eq);
+    const rawValue = eq === -1 ? '' : pair.slice(eq + 1);
+    const key = safeDecode(rawKey);
+    const value = safeDecode(rawValue);
+    // Keep duplicates readable: `a=1&a=2` -> `a: "1, 2"`
+    result[key] = key in result ? `${result[key]}, ${value}` : value;
+  }
+  return result;
+};
+
+export const safeDecode = (value: string): string => {
+  try {
+    return decodeURIComponent(value.replace(/\+/g, ' '));
+  } catch {
+    return value;
+  }
+};
+
+export const parseUrl = (url: string): UrlParts => {
+  const host = extractHost(url);
+  const afterHost = host ? url.slice(url.indexOf(host) + host.length) : url;
+  const hashIndex = afterHost.indexOf('#');
+  const withoutHash =
+    hashIndex === -1 ? afterHost : afterHost.slice(0, hashIndex);
+  const qIndex = withoutHash.indexOf('?');
+  const path =
+    (qIndex === -1 ? withoutHash : withoutHash.slice(0, qIndex)) || '/';
+  const search = qIndex === -1 ? '' : withoutHash.slice(qIndex + 1);
+  return {
+    host,
+    path,
+    query: parseQueryString(search),
+    hasQuery: search.length > 0,
+  };
+};