@obsrviq/tracker 0.4.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obsrviq/tracker",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -27,7 +27,7 @@
     "@rrweb/types": "2.0.1",
     "fflate": "^0.8.2",
     "rrweb": "2.0.1",
-    "@obsrviq/types": "0.4.0"
+    "@obsrviq/types": "0.4.1"
   },
   "devDependencies": {
     "tsup": "^8.3.5",

package/src/index.ts

@@ -4,6 +4,8 @@ import { Transport } from './transport.js';
 import { instrumentDom } from './recorder.js';
 import { instrumentConsole } from './console.js';
 import { instrumentNetwork } from './network.js';
+import { instrumentWebSocket } from './websocket.js';
+import { setCustomMaskKeys, markMaskConfigReady } from './mask.js';
 import { instrumentErrors } from './errors.js';
 import { instrumentVitals } from './vitals.js';
 import { instrumentInteractions } from './interactions.js';
@@ -97,6 +99,14 @@ class ObsrviqClient {
     // askPermission = "show a built-in consent prompt"; it implies a consent gate.
     if (this.config.askPermission) this.config.requireConsent = true;
 
+    // Custom masking keys: apply any static ones NOW, then fetch the per-site list
+    // (GET /v1/config) and merge. Fired before the network instrumenter is installed
+    // so this request is never self-recorded; the transport also re-masks custom
+    // keys at send time so nothing captured before the fetch resolves can leak.
+    const staticMaskKeys = Array.isArray(config.maskKeys) ? config.maskKeys : [];
+    setCustomMaskKeys(staticMaskKeys);
+    void this.loadRemoteMaskKeys(staticMaskKeys);
+
     this.startSession();
 
     // Init-time identity (rarely known this early — usually set later via identify()).
@@ -124,6 +134,39 @@ class ObsrviqClient {
     }
   }
 
+  /** Fetch the per-site masking config (GET /v1/config) and merge its keys with any
+   *  static ones. Best-effort: on failure the built-in masking still applies. */
+  private async loadRemoteMaskKeys(staticKeys: string[]): Promise<void> {
+    const cfg = this.config;
+    if (!cfg || typeof fetch === 'undefined') {
+      markMaskConfigReady();
+      return;
+    }
+    try {
+      const ctrl = new AbortController();
+      const timer = setTimeout(() => ctrl.abort(), 2000);
+      try {
+        const url = `${cfg.endpoint.replace(/\/$/, '')}/v1/config?key=${encodeURIComponent(cfg.siteKey)}`;
+        const res = await fetch(url, { credentials: 'omit', mode: 'cors', signal: ctrl.signal });
+        if (res.ok) {
+          const data = (await res.json()) as { maskKeys?: unknown };
+          const remote = Array.isArray(data.maskKeys)
+            ? data.maskKeys.filter((k): k is string => typeof k === 'string')
+            : [];
+          setCustomMaskKeys([...staticKeys, ...remote]);
+        }
+      } finally {
+        clearTimeout(timer);
+      }
+    } catch {
+      /* offline / blocked / timeout / bad JSON — built-in masking still protects. */
+    } finally {
+      // Always release the transport's hold — a failed/slow fetch must never block
+      // sending forever (built-in + static-key masking still applies).
+      markMaskConfigReady();
+    }
+  }
+
   /** (Re)create the session id, clock, meta, and transport. Used by init() and
    *  reset(). Does not start recording — callers decide via maybeStart().
    *  @param seedInitUser seed identity from the init-time `cfg.userId`. True for
@@ -237,6 +280,7 @@ class ObsrviqClient {
     // before app code runs more requests; DOM last so its snapshot is current.
     this.teardowns.push(instrumentConsole(ctx));
     this.teardowns.push(instrumentNetwork(ctx));
+    this.teardowns.push(instrumentWebSocket(ctx));
     this.teardowns.push(instrumentErrors(ctx));
     this.teardowns.push(instrumentVitals(ctx));
     this.teardowns.push(instrumentInteractions(ctx));

package/src/mask.ts

@@ -2,14 +2,34 @@
 // anything leaves the page. Heuristics catch the obvious PII; tenants tighten
 // with maskTextSelector / beforeSend.
 
+import type { ObsrviqEvent } from '@obsrviq/types';
+
 const EMAIL = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}/gi;
 const CC = /\b(?:\d[ -]*?){13,19}\b/g; // candidate card numbers
 const SSN = /\b\d{3}-\d{2}-\d{4}\b/g;
 const LONG_DIGITS = /\b\d{9,}\b/g; // phone-ish / account-ish
 
-// Keys whose values we always redact regardless of content.
-const SENSITIVE_KEYS =
-  /(pass(word)?|secret|token|api[-_]?key|authorization|cookie|ssn|card|cvv|pin|otp)/i;
+// Keys whose values we always redact, regardless of content. Two tiers so we
+// catch real secrets without over-redacting innocent fields:
+//   STRONG — long/unambiguous tokens, safe to match as a substring of the key
+//            name (e.g. "accessToken", "x-api-key", "clientSecret").
+//   WEAK   — short/ambiguous tokens that we only honour when they stand alone as
+//            a key SEGMENT, so "shipping"(pin) / "discard"(card) / "author"(auth)
+//            aren't caught but "pin" / "cardNumber" / "authToken" are.
+const SENSITIVE_STRONG =
+  /(password|passwd|passphrase|secret|token|authoriz|apikey|api[_-]key|creditcard|cardnumber|cardholder|cookie|cvv|cvc)/i;
+const SENSITIVE_WEAK = new Set(['pass', 'pwd', 'auth', 'card', 'pin', 'otp', 'ssn', 'cvv', 'cvc']);
+
+/** Split a key name into lowercase word segments on delimiters AND camelCase
+ *  boundaries: "accessToken" → [access, token], "api_key" → [api, key]. */
+function keySegments(key: string): string[] {
+  return key
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
+    .split(/[^A-Za-z0-9]+/)
+    .filter(Boolean)
+    .map((s) => s.toLowerCase());
+}
 
 export function maskString(input: string): string {
   return input
@@ -24,8 +44,109 @@ function luhnish(s: string): boolean {
   return digits.length >= 13 && digits.length <= 19;
 }
 
-export function isSensitiveKey(key: string): boolean {
-  return SENSITIVE_KEYS.test(key);
+// Customer-defined keys to mask (case-insensitive exact match), delivered via the
+// per-site config (GET /v1/config) and/or the init `maskKeys` option. Additive to
+// the built-in list above — you can only add protections, never remove them.
+let customKeys = new Set<string>();
+export function setCustomMaskKeys(keys: string[]): void {
+  customKeys = new Set(keys.map((k) => String(k).trim().toLowerCase()).filter(Boolean));
+}
+
+// Whether the per-site mask config (GET /v1/config) has settled. Until it does,
+// remote-only custom keys aren't known yet, so the transport holds non-unload
+// sends (below) to avoid leaking a custom-keyed value in the brief init window.
+let maskConfigSettled = false;
+export function markMaskConfigReady(): void {
+  maskConfigSettled = true;
+}
+export function isMaskConfigPending(): boolean {
+  return !maskConfigSettled;
+}
+export function hasCustomMaskKeys(): boolean {
+  return customKeys.size > 0;
+}
+function isCustomKey(key: string): boolean {
+  return customKeys.has(key.toLowerCase());
+}
+
+/** Key-based sensitivity test: built-in STRONG/WEAK tiers PLUS any customer-
+ *  configured keys (exact, case-insensitive). Boundary-aware so innocent fields
+ *  like "shipping" / "discard" / "author" aren't redacted. */
+export function isSensitiveKeyName(key: string): boolean {
+  if (isCustomKey(key)) return true;
+  if (SENSITIVE_STRONG.test(key)) return true;
+  return keySegments(key).some((seg) => SENSITIVE_WEAK.has(seg));
+}
+
+/** Redact sensitive-key values in a parsed object (built-in list + custom keys).
+ *  The send-time safety net that guarantees a `{"password": "…"}` style body can
+ *  never leave the page unmasked, even for non-DOM network/WS payloads (whose
+ *  capture-time masking is PII-pattern only, not key-aware). */
+function redactSensitiveInValue(value: unknown, depth = 0): unknown {
+  if (depth > 24 || value === null || typeof value !== 'object') return value;
+  if (Array.isArray(value)) return value.map((v) => redactSensitiveInValue(v, depth + 1));
+  const out: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(value as Record<string, unknown>)) {
+    out[k] = isSensitiveKeyName(k) ? '«redacted»' : redactSensitiveInValue(v, depth + 1);
+  }
+  return out;
+}
+
+/** String-level key redaction for payloads that don't parse as JSON — non-JSON
+ *  bodies (form-urlencoded / query strings) AND truncated JSON, where the
+ *  structured path bails. Captures each `"key": value` (JSON-ish, tolerant of a
+ *  cut-off tail) and `key=value` (form / query) key name and redacts the value
+ *  when the key is sensitive. */
+function redactSensitiveInRawText(text: string): string {
+  let out = text.replace(
+    /"([A-Za-z0-9_.\-]+)"\s*:\s*("(?:[^"\\]|\\.)*"|[^,}\]\s]+)/g,
+    (m, key: string) => (isSensitiveKeyName(key) ? '"' + key + '": "«redacted»"' : m),
+  );
+  out = out.replace(
+    /(^|[?&])([A-Za-z0-9_.\-[\]]+)=([^&\s]*)/g,
+    (m, pre: string, key: string) => (isSensitiveKeyName(key) ? pre + key + '=«redacted»' : m),
+  );
+  return out;
+}
+
+/** Redact sensitive-key values in a stored body/arg string. Tries structured
+ *  JSON first; falls back to a string scan for non-JSON or truncated payloads so a
+ *  sensitive key can't slip through in `email=a&password=b` or a cut-off body. */
+function redactSensitiveInText(text: string | undefined): string | undefined {
+  if (!text) return text;
+  const trimmed = text.trim();
+  if (trimmed[0] === '{' || trimmed[0] === '[') {
+    try {
+      return JSON.stringify(redactSensitiveInValue(JSON.parse(trimmed)));
+    } catch {
+      /* truncated / invalid JSON — fall through to the string scan */
+    }
+  }
+  return redactSensitiveInRawText(text);
+}
+
+/** Send-time pass: mask sensitive keys (built-in list + custom keys) across a
+ *  batch's bodies / frames / console args / custom props (mutates in place).
+ *  Always runs — the built-in list applies with no per-site config needed. */
+export function redactBatchSensitiveKeys(events: ObsrviqEvent[]): void {
+  for (const e of events) {
+    if (e.type === 'network' || e.type === 'ws') {
+      const anyE = e as unknown as {
+        requestBody?: { preview?: string };
+        responseBody?: { preview?: string };
+        body?: { preview?: string };
+      };
+      if (anyE.requestBody?.preview) anyE.requestBody.preview = redactSensitiveInText(anyE.requestBody.preview);
+      if (anyE.responseBody?.preview) anyE.responseBody.preview = redactSensitiveInText(anyE.responseBody.preview);
+      if (anyE.body?.preview) anyE.body.preview = redactSensitiveInText(anyE.body.preview);
+    } else if (e.type === 'custom') {
+      const c = e as unknown as { props?: Record<string, unknown> };
+      if (c.props) c.props = redactSensitiveInValue(c.props) as Record<string, unknown>;
+    } else if (e.type === 'console') {
+      const args = (e as unknown as { args?: Array<{ kind: string; json?: string }> }).args;
+      if (args) for (const a of args) if (a.kind === 'object' && a.json) a.json = redactSensitiveInText(a.json);
+    }
+  }
 }
 
 /** Recursively mask an object's string values and sensitive keys. */
@@ -36,7 +157,7 @@ export function maskValue(value: unknown, depth = 0): unknown {
   if (Array.isArray(value)) return value.map((v) => maskValue(v, depth + 1));
   const out: Record<string, unknown> = {};
   for (const [k, v] of Object.entries(value as Record<string, unknown>)) {
-    out[k] = isSensitiveKey(k) ? '«redacted»' : maskValue(v, depth + 1);
+    out[k] = isSensitiveKeyName(k) ? '«redacted»' : maskValue(v, depth + 1);
   }
   return out;
 }

package/src/network.ts

@@ -66,47 +66,214 @@ function bodyPreview(
   };
 }
 
-function enrichTiming(ctx: InstrumentCtx, url: string, base: NetworkTiming): NetworkTiming {
+function perfNow(): number {
+  return typeof performance !== 'undefined' ? performance.now() : 0;
+}
+
+/** Resource Timing `entry.name` is always absolute; requests may be issued with a
+ *  relative URL. Absolutize (query preserved) so the two can be matched. */
+function absUrl(raw: string): string {
   try {
-    const entries = performance.getEntriesByType('resource') as PerformanceResourceTiming[];
-    // newest matching entry by URL
-    const match = entries.filter((e) => e.name === url).pop();
-    if (!match) return base;
-    const t: NetworkTiming = { ...base };
-    if (match.domainLookupEnd && match.domainLookupStart)
-      t.dns = Math.max(0, match.domainLookupEnd - match.domainLookupStart);
-    if (match.connectEnd && match.connectStart)
-      t.tcp = Math.max(0, match.connectEnd - match.connectStart);
-    if (match.secureConnectionStart)
-      t.tls = Math.max(0, match.connectEnd - match.secureConnectionStart);
-    if (match.responseStart && match.requestStart)
-      t.ttfb = Math.max(0, match.responseStart - match.requestStart);
-    if (match.responseEnd && match.responseStart)
-      t.download = Math.max(0, match.responseEnd - match.responseStart);
-    return t;
+    return new URL(raw, typeof location !== 'undefined' ? location.href : undefined).href;
   } catch {
-    return base;
+    return raw;
+  }
+}
+
+/** Extract the DNS/TCP/TLS/TTFB/Download breakdown from a matched Resource Timing
+ *  entry, layered onto the SDK-measured `base` (startT/endT/duration). Phases that
+ *  are zero — a reused keep-alive connection, or a cross-origin resource without a
+ *  `Timing-Allow-Origin` header (browser zeroes them for privacy) — are left
+ *  undefined so the player shows "—" rather than a misleading 0. */
+function phasesFrom(m: PerformanceResourceTiming, base: NetworkTiming): NetworkTiming {
+  const t: NetworkTiming = { ...base };
+  const r = (n: number) => Math.round(n);
+  // Every phase is guarded on its START marker being > 0. A cross-origin resource
+  // without `Timing-Allow-Origin` has its start markers (domainLookupStart,
+  // connectStart, secureConnectionStart, requestStart, responseStart) zeroed by the
+  // browser while responseEnd stays real — so a bare `end > start` check would
+  // compute a garbage phase (e.g. download = responseEnd − 0). Requiring start > 0
+  // omits those phases instead.
+  if (m.domainLookupStart > 0 && m.domainLookupEnd > m.domainLookupStart)
+    t.dns = r(m.domainLookupEnd - m.domainLookupStart);
+  if (m.connectStart > 0 && m.connectEnd > m.connectStart) t.tcp = r(m.connectEnd - m.connectStart);
+  if (m.secureConnectionStart > 0 && m.connectEnd > m.secureConnectionStart)
+    t.tls = r(m.connectEnd - m.secureConnectionStart);
+  if (m.requestStart > 0 && m.responseStart > m.requestStart)
+    t.ttfb = r(m.responseStart - m.requestStart);
+  if (m.responseStart > 0 && m.responseEnd > m.responseStart)
+    t.download = r(m.responseEnd - m.responseStart);
+  return t;
+}
+
+/** Pick the Resource Timing entry that best corresponds to a request that started
+ *  at `perfStart` (performance-timeline ms): same URL, started at ~the same time.
+ *  Guards against mis-attributing timing when the same URL is hit repeatedly. */
+function matchEntry(
+  name: string,
+  perfStart: number,
+  entries: PerformanceResourceTiming[],
+): PerformanceResourceTiming | undefined {
+  let best: PerformanceResourceTiming | undefined;
+  let bestDelta = Infinity;
+  for (const e of entries) {
+    if (e.name !== name) continue;
+    if (e.startTime < perfStart - 4) continue; // started before our request → not ours
+    const d = e.startTime - perfStart;
+    if (d < bestDelta) {
+      bestDelta = d;
+      best = e;
+    }
   }
+  return best;
+}
+
+interface PendingTiming {
+  name: string; // absolute URL, to match against PerformanceResourceTiming.name
+  perfStart: number;
+  base: NetworkTiming;
+  resolve: (t: NetworkTiming) => void;
+  timer: ReturnType<typeof setTimeout>;
+}
+
+/** How long to wait for a Resource Timing entry to be published before giving up
+ *  and emitting with duration-only timing. The browser adds the entry to the
+ *  performance buffer *slightly after* fetch/XHR completion, so a synchronous
+ *  lookup at completion almost always misses it — hence this short async wait. */
+const TIMING_WAIT_MS = 300;
+
+interface TimingResolver {
+  resolve(rawUrl: string, perfStart: number, base: NetworkTiming): Promise<NetworkTiming>;
+  flushPending(): void;
+  teardown(): void;
+}
+
+/** Resolves the phase breakdown for a fetch/XHR asynchronously. A single shared
+ *  PerformanceObserver watches for resource entries as they land and settles the
+ *  matching pending request; unmatched requests settle on a short timeout. */
+function createTimingResolver(): TimingResolver {
+  const pending: PendingTiming[] = [];
+  let obs: PerformanceObserver | undefined;
+
+  const stopObs = () => {
+    if (obs) {
+      try {
+        obs.disconnect();
+      } catch {
+        /* ignore */
+      }
+      obs = undefined;
+    }
+  };
+
+  const settle = (p: PendingTiming, t: NetworkTiming) => {
+    const i = pending.indexOf(p);
+    if (i === -1) return; // already settled
+    pending.splice(i, 1);
+    clearTimeout(p.timer);
+    p.resolve(t);
+    if (pending.length === 0) stopObs();
+  };
+
+  const consume = (entries: PerformanceEntryList) => {
+    for (const e of entries as PerformanceResourceTiming[]) {
+      let best: PendingTiming | undefined;
+      let bestDelta = Infinity;
+      for (const p of pending) {
+        if (e.name !== p.name || e.startTime < p.perfStart - 4) continue;
+        const d = e.startTime - p.perfStart;
+        if (d < bestDelta) {
+          bestDelta = d;
+          best = p;
+        }
+      }
+      if (best) settle(best, phasesFrom(e, best.base));
+    }
+  };
+
+  const ensureObserver = () => {
+    if (obs || typeof PerformanceObserver === 'undefined') return;
+    try {
+      obs = new PerformanceObserver((list) => consume(list.getEntries()));
+      obs.observe({ type: 'resource', buffered: false });
+    } catch {
+      obs = undefined;
+    }
+  };
+
+  return {
+    resolve(rawUrl, perfStart, base) {
+      if (typeof performance === 'undefined') return Promise.resolve(base);
+      const name = absUrl(rawUrl);
+      // Fast path: the entry may already be buffered (cached / same-tick resources).
+      try {
+        const now = performance.getEntriesByType('resource') as PerformanceResourceTiming[];
+        const immediate = matchEntry(name, perfStart, now);
+        if (immediate) return Promise.resolve(phasesFrom(immediate, base));
+      } catch {
+        /* ignore */
+      }
+      if (typeof PerformanceObserver === 'undefined') return Promise.resolve(base);
+      // Slow path: wait for the entry to be published (or time out).
+      return new Promise<NetworkTiming>((resolve) => {
+        const p: PendingTiming = {
+          name,
+          perfStart,
+          base,
+          resolve,
+          timer: setTimeout(() => settle(p, base), TIMING_WAIT_MS),
+        };
+        pending.push(p);
+        ensureObserver();
+      });
+    },
+    // Force-settle everything still in flight (with duration-only timing) so their
+    // events are emitted into the transport buffer before an unload beacon fires.
+    flushPending() {
+      for (const p of [...pending]) settle(p, p.base);
+    },
+    teardown() {
+      this.flushPending();
+      stopObs();
+    },
+  };
 }
 
 export function instrumentNetwork(ctx: InstrumentCtx): Teardown {
+  const timing = createTimingResolver();
+  // On page hide, settle any request whose Resource Timing hasn't arrived yet so
+  // its event lands in the transport buffer before the unload flush.
+  const onPageHide = () => timing.flushPending();
+  const onVisibility = () => {
+    if (typeof document !== 'undefined' && document.visibilityState === 'hidden') timing.flushPending();
+  };
+  if (typeof window !== 'undefined') window.addEventListener('pagehide', onPageHide);
+  if (typeof document !== 'undefined') document.addEventListener('visibilitychange', onVisibility);
+
   const teardowns: Teardown[] = [];
-  teardowns.push(wrapFetch(ctx));
-  teardowns.push(wrapXhr(ctx));
+  teardowns.push(wrapFetch(ctx, timing));
+  teardowns.push(wrapXhr(ctx, timing));
   teardowns.push(wrapBeacon(ctx));
   teardowns.push(observeResources(ctx));
+  teardowns.push(() => {
+    if (typeof window !== 'undefined') window.removeEventListener('pagehide', onPageHide);
+    if (typeof document !== 'undefined') document.removeEventListener('visibilitychange', onVisibility);
+    timing.teardown();
+  });
   return () => teardowns.forEach((t) => t());
 }
 
 // ───────────────────────────── fetch ────────────────────────────────
-function wrapFetch(ctx: InstrumentCtx): Teardown {
+function wrapFetch(ctx: InstrumentCtx, tr: TimingResolver): Teardown {
   const orig = window.fetch;
   if (!orig) return () => {};
   window.fetch = async function (input: RequestInfo | URL, init?: RequestInit) {
     const rawUrl = input instanceof Request ? input.url : String(input);
     // Never record our own telemetry round-trips to the ingest endpoint.
-    if (rawUrl.includes('/v1/batch')) return orig.call(window, input as RequestInfo, init);
+    if (rawUrl.includes('/v1/batch') || rawUrl.includes('/v1/config'))
+      return orig.call(window, input as RequestInfo, init);
     const startT = ctx.clock.now();
+    const perfStart = perfNow();
     const method = (init?.method || (input instanceof Request ? input.method : 'GET')).toUpperCase();
     const url = redactUrl(rawUrl);
     const reqHeaders = pickHeaders(
@@ -116,25 +283,29 @@ function wrapFetch(ctx: InstrumentCtx): Teardown {
 
     const emit = (partial: Partial<NetworkEvent>) => {
       const endT = ctx.clock.now();
-      const timing = enrichTiming(ctx, rawUrl, { startT, endT, duration: endT - startT });
-      const ev: NetworkEvent = {
-        id: uuid(),
-        sessionId: ctx.sessionId,
-        type: 'network',
-        t: startT,
-        ts: ctx.clock.wall(),
-        initiator: 'fetch',
-        method,
-        url,
-        status: 0,
-        ok: false,
-        resourceType: 'fetch',
-        requestHeaders: reqHeaders,
-        timing,
-        ...partial,
-      };
-      ctx.emit(ev);
+      const base: NetworkTiming = { startT, endT, duration: endT - startT };
       ctx.markActivity();
+      // Resolve the phase breakdown asynchronously — the Resource Timing entry is
+      // published just after completion, so a synchronous read would miss it.
+      void tr.resolve(rawUrl, perfStart, base).then((timing) => {
+        const ev: NetworkEvent = {
+          id: uuid(),
+          sessionId: ctx.sessionId,
+          type: 'network',
+          t: startT,
+          ts: ctx.clock.wall(),
+          initiator: 'fetch',
+          method,
+          url,
+          status: 0,
+          ok: false,
+          resourceType: 'fetch',
+          requestHeaders: reqHeaders,
+          timing,
+          ...partial,
+        };
+        ctx.emit(ev);
+      });
     };
 
     try {
@@ -188,11 +359,12 @@ interface XhrMeta {
   url: string;
   rawUrl: string;
   startT: number;
+  perfStart: number;
   reqHeaders: Record<string, string>;
   body?: string;
 }
 
-function wrapXhr(ctx: InstrumentCtx): Teardown {
+function wrapXhr(ctx: InstrumentCtx, tr: TimingResolver): Teardown {
   const XHR = XMLHttpRequest.prototype;
   const origOpen = XHR.open;
   const origSend = XHR.send;
@@ -206,6 +378,7 @@ function wrapXhr(ctx: InstrumentCtx): Teardown {
       rawUrl,
       url: redactUrl(rawUrl),
       startT: 0,
+      perfStart: 0,
       reqHeaders: {},
     });
     return origOpen.apply(this, [method, url, ...rest] as never);
@@ -226,14 +399,15 @@ function wrapXhr(ctx: InstrumentCtx): Teardown {
     const meta = META.get(this);
     if (meta) {
       meta.startT = ctx.clock.now();
+      meta.perfStart = perfNow();
       if (ctx.config.captureNetworkBodies) meta.body = stringifyBody(body);
       const finish = (error?: string) => {
         const endT = ctx.clock.now();
-        const timing = enrichTiming(ctx, meta.rawUrl, {
+        const base: NetworkTiming = {
           startT: meta.startT,
           endT,
           duration: endT - meta.startT,
-        });
+        };
         const status = this.status;
         const respHeaders = parseRawHeaders(ctx, this.getAllResponseHeaders());
         // Response body (texty + readable responseType only), parallel to fetch.
@@ -247,28 +421,32 @@ function wrapXhr(ctx: InstrumentCtx): Teardown {
             /* opaque/cross-origin response — skip the body */
           }
         }
-        const ev: NetworkEvent = {
-          id: uuid(),
-          sessionId: ctx.sessionId,
-          type: 'network',
-          t: meta.startT,
-          ts: ctx.clock.wall(),
-          initiator: 'xhr',
-          method: meta.method,
-          url: meta.url,
-          status,
-          ok: status >= 200 && status < 400,
-          resourceType: 'xhr',
-          requestHeaders: meta.reqHeaders,
-          responseHeaders: respHeaders,
-          responseSize: safeLen(this),
-          requestBody: ctx.config.captureNetworkBodies ? bodyPreview(meta.body, undefined) : undefined,
-          responseBody,
-          timing,
-          error: error || classifyHttp(status),
-        };
-        ctx.emit(ev);
+        const responseSize = safeLen(this);
         ctx.markActivity();
+        // Resolve the phase breakdown asynchronously (see wrapFetch).
+        void tr.resolve(meta.rawUrl, meta.perfStart, base).then((timing) => {
+          const ev: NetworkEvent = {
+            id: uuid(),
+            sessionId: ctx.sessionId,
+            type: 'network',
+            t: meta.startT,
+            ts: ctx.clock.wall(),
+            initiator: 'xhr',
+            method: meta.method,
+            url: meta.url,
+            status,
+            ok: status >= 200 && status < 400,
+            resourceType: 'xhr',
+            requestHeaders: meta.reqHeaders,
+            responseHeaders: respHeaders,
+            responseSize,
+            requestBody: ctx.config.captureNetworkBodies ? bodyPreview(meta.body, undefined) : undefined,
+            responseBody,
+            timing,
+            error: error || classifyHttp(status),
+          };
+          ctx.emit(ev);
+        });
       };
       this.addEventListener('loadend', () => finish());
       this.addEventListener('error', () => finish('network'));

package/src/transport.ts

@@ -1,5 +1,6 @@
 import { gzipSync } from 'fflate';
 import type { IngestBatch, IngestSessionMeta, ObsrviqEvent } from '@obsrviq/types';
+import { redactBatchSensitiveKeys, isMaskConfigPending } from './mask.js';
 
 export interface TransportOptions {
   endpoint: string;
@@ -55,10 +56,30 @@ export class Transport {
   /** Build, compress, and send the current buffer. Returns true on success. */
   async flush(reason: 'timer' | 'hidden' | 'pagehide' | 'manual' | 'backpressure'): Promise<boolean> {
     if (this.sending || this.buffer.length === 0) return true;
+
+    // Hold non-unload sends until the per-site mask config has loaded, so a
+    // remote-only custom key can't leak in the brief init fetch window. The fetch
+    // is bounded (index.ts marks config ready within ~2s even on failure/timeout),
+    // so this delays at most the first batch — it never blocks data indefinitely.
+    // Unload flushes (pagehide/hidden) can't wait, so they proceed best-effort.
+    const unloading = reason === 'pagehide' || reason === 'hidden';
+    if (!unloading && isMaskConfigPending()) {
+      if (!this.stopped) setTimeout(() => void this.flush('timer'), 200);
+      return true;
+    }
+
     this.sending = true;
     const events = this.buffer;
     this.buffer = [];
 
+    // Send-time safety net: mask sensitive keys across the batch — the built-in
+    // list (password/token/secret/…) PLUS any customer-defined keys — so a
+    // `{"password":"…"}` style body can't leave the page unmasked. Network/WS
+    // bodies get PII-pattern masking at capture but not key-based masking, so this
+    // is where key redaction lands for them; it also covers custom keys captured
+    // before the per-site config arrived.
+    redactBatchSensitiveKeys(events);
+
     let batch: IngestBatch | null = {
       siteKey: this.opts.siteKey,
       sessionId: this.opts.sessionId,