@keepsnappy/react-native 0.0.0-stage → 0.1.0-alpha.11

package/js/sdk/net.ts

@@ -0,0 +1,684 @@
+// Network request counter. Per request it does constant work: a few global
+// counter increments and one Map lookup for duplicates. Windows never see
+// individual requests: a window snapshots the counters when it opens and closes,
+// and its numbers are the difference. Only the URL path is kept (no scheme, host,
+// query, fragment, headers or bodies); the query enters the duplicate key only
+// as a 32-bit hash, so different search terms are different requests. Path
+// segments that look like identifiers (numbers, UUIDs, hex or token runs,
+// anything with an `@`) are sent as `:id`.
+//
+// Pure logic with injected deps so it runs under bun; net-install.ts wires it to
+// the app's fetch and XMLHttpRequest.
+
+export type NetSource = 'fetch' | 'xhr';
+
+export interface NetTotals {
+  requests: number;
+  duplicates: number;
+  errors: number;
+}
+
+export interface NetWindow {
+  requests: number;
+  byMethod: Record<string, number>;
+  bySource: Record<NetSource, number>;
+  duplicates: number;
+  duplicatesInFlight: number;
+  responses: number;
+  errors: number;
+  paths: [string, number][];
+  backfill: { requests: number; complete: boolean } | null;
+  proc: string;
+  cumStart: NetTotals;
+  cumEnd: NetTotals;
+}
+
+interface KeyEntry {
+  inFlight: number;
+  lastStart: number;
+}
+
+export interface NetHandle {
+  readonly entry: KeyEntry;
+  done: boolean;
+}
+
+interface Started {
+  t: number;
+  method: string;
+  label: string;
+  source: NetSource;
+  dup: boolean;
+  inFlightDup: boolean;
+}
+
+interface Counters {
+  requests: number;
+  duplicates: number;
+  duplicatesInFlight: number;
+  responses: number;
+  errors: number;
+  fetch: number;
+  xhr: number;
+}
+
+interface PathCount {
+  n: number;
+}
+
+interface Snapshot {
+  c: Counters;
+  byMethod: Map<string, number>;
+  // The entry identity tells a label evicted and counted again apart from the one seen at open.
+  paths: Map<string, { entry: PathCount; n: number }>;
+}
+
+export interface NetCounterOptions {
+  now: () => number;
+  // The same request started again this soon is a duplicate even if the first one finished.
+  dupHorizonMs?: number;
+  // A request with no end event after this long no longer counts as in flight.
+  maxInFlightMs?: number;
+  // Requests remembered for backdated windows (ring size).
+  recent?: number;
+  proc?: string;
+  // Called as each request starts (the cause tracker marks a timer tick that fetched).
+  onStart?: () => void;
+}
+
+const MAX_PATH = 120;
+// Path labels kept per process, least recently used evicted first.
+const MAX_PATHS = 256;
+const TOP_PATHS = 10;
+const PRUNE_AT = 512;
+// Key characters held before keys no request can match again are pruned, so long queries cannot grow the map.
+const PRUNE_CHARS = 128 * 1024;
+
+const SCHEME_ONLY = /^[a-z][a-z0-9+.-]*:/i;
+
+const queryStart = (url: string) => {
+  const q = url.indexOf('?');
+  const h = url.indexOf('#');
+  if (q < 0) {
+    return h < 0 ? url.length : h;
+  }
+  return h >= 0 && h < q ? h : q;
+};
+
+const UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+const NUMBER = /^\d+$/;
+const HEX = /^[0-9a-f]{8,}$/i;
+const TOKEN = /^[A-Za-z0-9_-]{16,}={0,2}$/;
+const DIGIT = /\d/;
+const LETTER = /[A-Za-z]/;
+
+const looksLikeId = (segment: string) =>
+  segment.includes('@') ||
+  segment.toLowerCase().includes('%40') ||
+  NUMBER.test(segment) ||
+  UUID.test(segment) ||
+  (HEX.test(segment) && DIGIT.test(segment)) ||
+  (TOKEN.test(segment) && DIGIT.test(segment) && LETTER.test(segment));
+
+const maskIds = (path: string) =>
+  path
+    .split('/')
+    .map(segment => (segment !== '' && looksLikeId(segment) ? ':id' : segment))
+    .join('/');
+
+// `https://h/a/b?q#f` -> `/a/b`; `data:...` -> `data:`. Never returns host or
+// query; identifier-like segments become `:id` (`/users/42` -> `/users/:id`).
+export const pathOf = (url: string): string => {
+  let path = url.slice(0, queryStart(url));
+  const scheme = path.indexOf('://');
+  if (scheme >= 0 || path.startsWith('//')) {
+    const slash = path.indexOf('/', scheme >= 0 ? scheme + 3 : 2);
+    path = slash < 0 ? '/' : path.slice(slash);
+  } else if (!path.startsWith('/')) {
+    const match = SCHEME_ONLY.exec(path);
+    if (match) {
+      return match[0].toLowerCase();
+    }
+  }
+  if (path === '') {
+    return '/';
+  }
+  path = maskIds(path);
+  return path.length > MAX_PATH ? `${path.slice(0, MAX_PATH)}…` : path;
+};
+
+// The query (fragment excluded) with its `?`; '' when there is none. Kept whole in the key: the Map compares strings
+// natively, where hashing them here costs two engine calls per character (long queries, e.g. a test harness's
+// readiness report, made this the SDK's second most expensive function).
+const queryOf = (url: string) => {
+  const q = url.indexOf('?');
+  if (q < 0) {
+    return '';
+  }
+  const h = url.indexOf('#', q);
+  return url.slice(q, h < 0 ? url.length : h);
+};
+
+const zero = (): Counters => ({
+  requests: 0,
+  duplicates: 0,
+  duplicatesInFlight: 0,
+  responses: 0,
+  errors: 0,
+  fetch: 0,
+  xhr: 0,
+});
+
+const bump = (map: Map<string, number>, key: string, by = 1) => {
+  map.set(key, (map.get(key) ?? 0) + by);
+};
+
+export const createNetCounter = (options: NetCounterOptions) => {
+  const now = options.now;
+  const dupHorizonMs = options.dupHorizonMs ?? 3000;
+  const maxInFlightMs = options.maxInFlightMs ?? 60_000;
+  const ringSize = options.recent ?? 256;
+  const proc = options.proc ?? Math.floor(now()).toString(36);
+
+  const keys = new Map<string, KeyEntry>();
+  const c = zero();
+  const byMethod = new Map<string, number>();
+  const paths = new Map<string, PathCount>();
+  let evicted = 0;
+  const open = new Map<number, Snapshot & { backfill: NetWindow['backfill'] }>();
+  const ring: (Started | undefined)[] = new Array(ringSize);
+  let ringNext = 0;
+  let pruned = 0;
+  let keyChars = 0;
+
+  // `settled`: only keys no later request can be a duplicate of (none in flight, past the horizon), so a prune for the
+  // keys' size changes no count; the prune for their number also forgets requests in flight longer than maxInFlightMs.
+  const prune = (t: number, settled: boolean) => {
+    for (const [key, entry] of keys) {
+      if (
+        t - entry.lastStart > dupHorizonMs &&
+        (entry.inFlight === 0 || (!settled && t - entry.lastStart > maxInFlightMs))
+      ) {
+        keys.delete(key);
+        keyChars -= key.length;
+        pruned++;
+      }
+    }
+  };
+
+  // Map order is recency: a used label moves to the end, the first one is evicted.
+  const countPath = (label: string) => {
+    let entry = paths.get(label);
+    if (entry) {
+      paths.delete(label);
+    } else {
+      entry = { n: 0 };
+      if (paths.size >= MAX_PATHS) {
+        const oldest = paths.keys().next().value;
+        if (oldest !== undefined) {
+          paths.delete(oldest);
+          evicted++;
+        }
+      }
+    }
+    entry.n++;
+    paths.set(label, entry);
+  };
+
+  const start = (method: string, url: string, source: NetSource): NetHandle => {
+    options.onStart?.();
+    const t = now();
+    const m = method ? method.toUpperCase() : 'GET';
+    const path = pathOf(url);
+    // In memory only: the unmasked path keeps /users/1 and /users/2 different requests.
+    const key = `${m} ${url.slice(0, queryStart(url))} ${queryOf(url)}`;
+    let entry = keys.get(key);
+    const inFlightDup =
+      entry !== undefined &&
+      entry.inFlight > 0 &&
+      t - entry.lastStart <= maxInFlightMs;
+    const dup =
+      inFlightDup ||
+      (entry !== undefined && t - entry.lastStart <= dupHorizonMs);
+    if (entry === undefined) {
+      if (keys.size >= PRUNE_AT) {
+        prune(t, false);
+      } else if (keyChars >= PRUNE_CHARS) {
+        prune(t, true);
+      }
+      entry = { inFlight: 0, lastStart: t };
+      keys.set(key, entry);
+      keyChars += key.length;
+    }
+    entry.inFlight++;
+    entry.lastStart = t;
+    c.requests++;
+    c[source]++;
+    if (dup) {
+      c.duplicates++;
+    }
+    if (inFlightDup) {
+      c.duplicatesInFlight++;
+    }
+    bump(byMethod, m);
+    const label = `${m} ${path}`;
+    countPath(label);
+    ring[ringNext] = { t, method: m, label, source, dup, inFlightDup };
+    ringNext = (ringNext + 1) % ringSize;
+    return { entry, done: false };
+  };
+
+  // status 0 or `failed`: no response (network error, abort, timeout).
+  const end = (handle: NetHandle, status: number, failed = false) => {
+    if (handle.done) {
+      return;
+    }
+    handle.done = true;
+    handle.entry.inFlight = Math.max(0, handle.entry.inFlight - 1);
+    c.responses++;
+    if (failed || !(status > 0) || status >= 400) {
+      c.errors++;
+    }
+  };
+
+  const snapshot = (): Snapshot => ({
+    c: { ...c },
+    byMethod: new Map(byMethod),
+    paths: new Map([...paths].map(([label, entry]) => [label, { entry, n: entry.n }])),
+  });
+
+  // A backdated window (t0 in the past) also takes the requests started since t0, from the ring.
+  const windowOpen = (id: number, t0: number, backdated: boolean) => {
+    const snap = snapshot();
+    let backfill: NetWindow['backfill'] = null;
+    if (backdated) {
+      let n = 0;
+      let complete = true;
+      for (let i = 1; i <= ringSize; i++) {
+        const req = ring[(ringNext - i + ringSize) % ringSize];
+        if (!req || req.t < t0) {
+          break;
+        }
+        if (i === ringSize) {
+          complete = false;
+        }
+        n++;
+        snap.c.requests--;
+        snap.c[req.source]--;
+        if (req.dup) {
+          snap.c.duplicates--;
+        }
+        if (req.inFlightDup) {
+          snap.c.duplicatesInFlight--;
+        }
+        bump(snap.byMethod, req.method, -1);
+        const before = snap.paths.get(req.label);
+        if (before) {
+          before.n--;
+        }
+      }
+      backfill = { requests: n, complete };
+    }
+    open.set(id, { ...snap, backfill });
+  };
+
+  const diff = (now: Map<string, number>, before: Map<string, number>) => {
+    const out: [string, number][] = [];
+    for (const [key, value] of now) {
+      const d = value - (before.get(key) ?? 0);
+      if (d > 0) {
+        out.push([key, d]);
+      }
+    }
+    return out;
+  };
+
+  const pathsSince = (before: Snapshot['paths']) => {
+    const out: [string, number][] = [];
+    for (const [label, entry] of paths) {
+      const b = before.get(label);
+      const d = b && b.entry === entry ? entry.n - b.n : entry.n;
+      if (d > 0) {
+        out.push([label, d]);
+      }
+    }
+    return out;
+  };
+
+  const windowClose = (id: number): NetWindow | null => {
+    const s = open.get(id);
+    if (!s) {
+      return null;
+    }
+    open.delete(id);
+    return {
+      requests: c.requests - s.c.requests,
+      byMethod: Object.fromEntries(diff(byMethod, s.byMethod)),
+      bySource: { fetch: c.fetch - s.c.fetch, xhr: c.xhr - s.c.xhr },
+      duplicates: c.duplicates - s.c.duplicates,
+      duplicatesInFlight: c.duplicatesInFlight - s.c.duplicatesInFlight,
+      responses: c.responses - s.c.responses,
+      errors: c.errors - s.c.errors,
+      paths: pathsSince(s.paths)
+        .sort((a, b) => b[1] - a[1])
+        .slice(0, TOP_PATHS),
+      backfill: s.backfill,
+      proc,
+      cumStart: {
+        requests: s.c.requests,
+        duplicates: s.c.duplicates,
+        errors: s.c.errors,
+      },
+      cumEnd: { requests: c.requests, duplicates: c.duplicates, errors: c.errors },
+    };
+  };
+
+  const stats = () => ({
+    proc,
+    dupHorizonMs,
+    totals: { ...c },
+    keys: keys.size,
+    pruned,
+    paths: paths.size,
+    pathsEvicted: evicted,
+    openWindows: open.size,
+  });
+
+  return { start, end, windowOpen, windowClose, stats };
+};
+
+export type NetCounter = ReturnType<typeof createNetCounter>;
+
+// Interception of fetch and XMLHttpRequest.
+//
+// React Native's own fetch (whatwg-fetch) is built on XMLHttpRequest; Expo
+// replaces the global fetch with a native one (expo/fetch) that is not. Both are
+// wrapped. A request is counted once, at the outermost layer: the fetch wrapper
+// raises `fetchDepth` while the original fetch runs synchronously, and
+// whatwg-fetch opens its XMLHttpRequest inside that call, so the XHR layer sees
+// the depth and does not count it again. `ownDepth` does the same for the SDK's
+// own traffic (push client), which neither layer counts.
+//
+// Not seen: anything that does not go through JS fetch/XMLHttpRequest, e.g.
+// images loaded natively (Image, expo-image), WebSockets, and native SDKs
+// (Stream, LiveKit, Firebase).
+
+const WRAPPED = '__perflabNet';
+const XHR_STATE = '__perflabNetXhr';
+const EXPO_BUILTIN = Symbol.for('expo.builtin');
+
+type AnyFn = (...args: unknown[]) => unknown;
+
+interface XhrState {
+  skip: boolean;
+  method: string;
+  url: string;
+  handle: NetHandle | null;
+}
+
+interface XhrLike {
+  status?: number;
+  addEventListener?: (type: string, listener: () => void) => void;
+  removeEventListener?: (type: string, listener: () => void) => void;
+  [XHR_STATE]?: XhrState;
+}
+
+export interface NetHooksDeps {
+  target: Record<string, unknown>;
+  counter: NetCounter;
+  enabled: () => boolean;
+}
+
+const fetchTarget = (input: unknown, init: unknown) => {
+  let url = '';
+  let method: unknown;
+  if (typeof input === 'string') {
+    url = input;
+  } else if (input && typeof input === 'object') {
+    const like = input as { url?: unknown; href?: unknown; method?: unknown };
+    url =
+      typeof like.url === 'string'
+        ? like.url
+        : typeof like.href === 'string'
+          ? like.href
+          : String(input);
+    method = like.method;
+  } else {
+    url = String(input);
+  }
+  const initMethod = (init as { method?: unknown } | null | undefined)?.method;
+  if (typeof initMethod === 'string') {
+    method = initMethod;
+  }
+  return { url, method: typeof method === 'string' ? method : 'GET' };
+};
+
+export const createNetHooks = (deps: NetHooksDeps) => {
+  const { target, counter } = deps;
+  let fetchDepth = 0;
+  let ownDepth = 0;
+  const stats = {
+    fetchWrapped: 0,
+    xhrPatched: 0,
+    fetchViaXhr: 0,
+    ownSkipped: 0,
+    lazyWraps: 0,
+    locked: [] as string[],
+    errors: 0,
+    lastError: null as string | null,
+  };
+
+  const fail = (error: unknown) => {
+    stats.errors++;
+    stats.lastError = String(error);
+  };
+
+  const wrapFetch = (original: unknown): unknown => {
+    if (typeof original !== 'function' || (original as unknown as Record<string, unknown>)[WRAPPED]) {
+      return original;
+    }
+    const orig = original as AnyFn;
+    const wrapped = function (this: unknown, ...args: unknown[]) {
+      if (ownDepth > 0 || !deps.enabled()) {
+        if (ownDepth > 0) {
+          stats.ownSkipped++;
+        }
+        return orig.apply(this, args);
+      }
+      let handle: NetHandle | null = null;
+      try {
+        const { method, url } = fetchTarget(args[0], args[1]);
+        handle = counter.start(method, url, 'fetch');
+      } catch (error) {
+        fail(error);
+      }
+      let result: unknown;
+      fetchDepth++;
+      try {
+        result = orig.apply(this, args);
+      } catch (error) {
+        if (handle) {
+          counter.end(handle, 0, true);
+        }
+        throw error;
+      } finally {
+        fetchDepth--;
+      }
+      const h = handle;
+      if (!h || !result || typeof (result as Promise<unknown>).then !== 'function') {
+        return result;
+      }
+      // The app gets the derived promise, so an unhandled rejection stays unhandled.
+      return (result as Promise<unknown>).then(
+        response => {
+          counter.end(h, (response as { status?: number } | null)?.status ?? 0);
+          return response;
+        },
+        error => {
+          counter.end(h, 0, true);
+          throw error;
+        },
+      );
+    };
+    for (const key of Reflect.ownKeys(orig)) {
+      if (key === 'length' || key === 'name' || key === 'prototype') {
+        continue;
+      }
+      const descriptor = Object.getOwnPropertyDescriptor(orig, key);
+      if (descriptor) {
+        try {
+          Object.defineProperty(wrapped, key, descriptor);
+        } catch {
+          // a static we cannot copy is not worth failing the wrap
+        }
+      }
+    }
+    if ((orig as unknown as Record<symbol, unknown>)[EXPO_BUILTIN] && !(EXPO_BUILTIN in wrapped)) {
+      Object.defineProperty(wrapped, EXPO_BUILTIN, { value: true });
+    }
+    Object.defineProperty(wrapped, WRAPPED, { value: orig });
+    stats.fetchWrapped++;
+    return wrapped;
+  };
+
+  const patchXhr = (cls: unknown): unknown => {
+    const proto = (cls as { prototype?: Record<string, unknown> } | null)?.prototype;
+    if (
+      !proto ||
+      typeof proto.open !== 'function' ||
+      typeof proto.send !== 'function' ||
+      Object.prototype.hasOwnProperty.call(proto, WRAPPED)
+    ) {
+      return cls;
+    }
+    const open = proto.open as AnyFn;
+    const send = proto.send as AnyFn;
+    proto.open = function (this: XhrLike, ...args: unknown[]) {
+      const viaFetch = fetchDepth > 0;
+      if (viaFetch) {
+        stats.fetchViaXhr++;
+      }
+      this[XHR_STATE] = {
+        skip: viaFetch || ownDepth > 0,
+        method: typeof args[0] === 'string' ? args[0] : 'GET',
+        url: String(args[1]),
+        handle: null,
+      };
+      return open.apply(this, args);
+    };
+    proto.send = function (this: XhrLike, ...args: unknown[]) {
+      const state = this[XHR_STATE];
+      let handle: NetHandle | null = null;
+      if (state && !state.skip && !state.handle && deps.enabled()) {
+        try {
+          handle = counter.start(state.method, state.url, 'xhr');
+          state.handle = handle;
+          const h = handle;
+          // loadend follows load, error, abort and timeout.
+          const done = () => {
+            this.removeEventListener?.('loadend', done);
+            const status = typeof this.status === 'number' ? this.status : 0;
+            counter.end(h, status, status === 0);
+          };
+          this.addEventListener?.('loadend', done);
+        } catch (error) {
+          fail(error);
+        }
+      }
+      try {
+        return send.apply(this, args);
+      } catch (error) {
+        if (handle) {
+          counter.end(handle, 0, true);
+        }
+        throw error;
+      }
+    };
+    Object.defineProperty(proto, WRAPPED, { value: true });
+    stats.xhrPatched++;
+    return cls;
+  };
+
+  // Wraps a global without evaluating it: React Native and Expo install fetch and
+  // XMLHttpRequest as lazy getters, so a getter is replaced by one that wraps the
+  // value on first read. Called again later because Expo redefines fetch after boot.
+  const ensureGlobal = (name: string, wrap: (value: unknown) => unknown) => {
+    const descriptor = Object.getOwnPropertyDescriptor(target, name);
+    if (!descriptor) {
+      return 'absent';
+    }
+    if (descriptor.get) {
+      if ((descriptor.get as unknown as Record<string, unknown>)[WRAPPED]) {
+        return 'lazy';
+      }
+      if (!descriptor.configurable) {
+        stats.locked.push(name);
+        return 'locked';
+      }
+      const originalGet = descriptor.get;
+      const enumerable = descriptor.enumerable;
+      const settle = (value: unknown) => {
+        const wrapped = value ? wrap(value) : value;
+        Object.defineProperty(target, name, {
+          value: wrapped,
+          writable: true,
+          enumerable,
+          configurable: true,
+        });
+        return wrapped;
+      };
+      const get = function () {
+        stats.lazyWraps++;
+        return settle(originalGet.call(target));
+      };
+      Object.defineProperty(get, WRAPPED, { value: true });
+      Object.defineProperty(target, name, {
+        get,
+        set: settle,
+        enumerable,
+        configurable: true,
+      });
+      return 'lazy';
+    }
+    const value = descriptor.value;
+    const wrapped = value ? wrap(value) : value;
+    if (wrapped === value) {
+      return 'value';
+    }
+    if (descriptor.writable) {
+      target[name] = wrapped;
+    } else if (descriptor.configurable) {
+      Object.defineProperty(target, name, { ...descriptor, value: wrapped });
+    } else {
+      stats.locked.push(name);
+      return 'locked';
+    }
+    return 'value';
+  };
+
+  const ensure = () => {
+    try {
+      return {
+        fetch: ensureGlobal('fetch', wrapFetch),
+        xhr: ensureGlobal('XMLHttpRequest', patchXhr),
+      };
+    } catch (error) {
+      fail(error);
+      return null;
+    }
+  };
+
+  // Runs `run` as SDK traffic: neither fetch nor XHR counts what it starts synchronously.
+  const own = <T>(run: () => T): T => {
+    ownDepth++;
+    try {
+      return run();
+    } finally {
+      ownDepth--;
+    }
+  };
+
+  return { ensure, own, stats: () => ({ ...stats, locked: [...stats.locked] }) };
+};
+
+export type NetHooks = ReturnType<typeof createNetHooks>;