@obsrviq/tracker 0.4.1 → 0.5.0

package/dist/index.d.ts

@@ -37,6 +37,9 @@ declare class ObsrviqClient {
     /** The current session id (null until init). */
     get sessionId(): string | null;
     init(config: ObsrviqInitConfig): void;
+    /** 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 loadRemoteMaskKeys;
     /** (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

package/dist/index.js

@@ -1,6 +1,105 @@
 import { gzipSync } from 'fflate';
 import { record } from 'rrweb';
 
+// src/transport.ts
+
+// src/mask.ts
+var EMAIL = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}/gi;
+var CC = /\b(?:\d[ -]*?){13,19}\b/g;
+var SSN = /\b\d{3}-\d{2}-\d{4}\b/g;
+var LONG_DIGITS = /\b\d{9,}\b/g;
+var SENSITIVE_STRONG = /(password|passwd|passphrase|secret|token|authoriz|apikey|api[_-]key|creditcard|cardnumber|cardholder|cookie|cvv|cvc)/i;
+var SENSITIVE_WEAK = /* @__PURE__ */ new Set(["pass", "pwd", "auth", "card", "pin", "otp", "ssn", "cvv", "cvc"]);
+function keySegments(key) {
+  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());
+}
+function maskString(input) {
+  return input.replace(EMAIL, "\xABemail\xBB").replace(CC, (m) => luhnish(m) ? "\xABcard\xBB" : m).replace(SSN, "\xABssn\xBB").replace(LONG_DIGITS, "\xABnumber\xBB");
+}
+function luhnish(s) {
+  const digits = s.replace(/\D/g, "");
+  return digits.length >= 13 && digits.length <= 19;
+}
+var customKeys = /* @__PURE__ */ new Set();
+function setCustomMaskKeys(keys) {
+  customKeys = new Set(keys.map((k) => String(k).trim().toLowerCase()).filter(Boolean));
+}
+var maskConfigSettled = false;
+function markMaskConfigReady() {
+  maskConfigSettled = true;
+}
+function isMaskConfigPending() {
+  return !maskConfigSettled;
+}
+function isCustomKey(key) {
+  return customKeys.has(key.toLowerCase());
+}
+function isSensitiveKeyName(key) {
+  if (isCustomKey(key)) return true;
+  if (SENSITIVE_STRONG.test(key)) return true;
+  return keySegments(key).some((seg) => SENSITIVE_WEAK.has(seg));
+}
+function redactSensitiveInValue(value, depth = 0) {
+  if (depth > 24 || value === null || typeof value !== "object") return value;
+  if (Array.isArray(value)) return value.map((v) => redactSensitiveInValue(v, depth + 1));
+  const out = {};
+  for (const [k, v] of Object.entries(value)) {
+    out[k] = isSensitiveKeyName(k) ? "\xABredacted\xBB" : redactSensitiveInValue(v, depth + 1);
+  }
+  return out;
+}
+function redactSensitiveInRawText(text) {
+  let out = text.replace(
+    /"([A-Za-z0-9_.\-]+)"\s*:\s*("(?:[^"\\]|\\.)*"|[^,}\]\s]+)/g,
+    (m, key) => isSensitiveKeyName(key) ? '"' + key + '": "\xABredacted\xBB"' : m
+  );
+  out = out.replace(
+    /(^|[?&])([A-Za-z0-9_.\-[\]]+)=([^&\s]*)/g,
+    (m, pre, key) => isSensitiveKeyName(key) ? pre + key + "=\xABredacted\xBB" : m
+  );
+  return out;
+}
+function redactSensitiveInText(text) {
+  if (!text) return text;
+  const trimmed = text.trim();
+  if (trimmed[0] === "{" || trimmed[0] === "[") {
+    try {
+      return JSON.stringify(redactSensitiveInValue(JSON.parse(trimmed)));
+    } catch {
+    }
+  }
+  return redactSensitiveInRawText(text);
+}
+function redactBatchSensitiveKeys(events) {
+  for (const e of events) {
+    if (e.type === "network" || e.type === "ws") {
+      const anyE = e;
+      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;
+      if (c.props) c.props = redactSensitiveInValue(c.props);
+    } else if (e.type === "console") {
+      const args = e.args;
+      if (args) {
+        for (const a of args) if (a.kind === "object" && a.json) a.json = redactSensitiveInText(a.json);
+      }
+    }
+  }
+}
+function maskValue(value, depth = 0) {
+  if (depth > 6) return "\xABdepth\xBB";
+  if (typeof value === "string") return maskString(value);
+  if (value === null || typeof value !== "object") return value;
+  if (Array.isArray(value)) return value.map((v) => maskValue(v, depth + 1));
+  const out = {};
+  for (const [k, v] of Object.entries(value)) {
+    out[k] = isSensitiveKeyName(k) ? "\xABredacted\xBB" : maskValue(v, depth + 1);
+  }
+  return out;
+}
+
 // src/transport.ts
 var MAX_BUFFER_EVENTS = 5e3;
 var Transport = class {
@@ -36,9 +135,15 @@ var Transport = class {
   /** Build, compress, and send the current buffer. Returns true on success. */
   async flush(reason) {
     if (this.sending || this.buffer.length === 0) return true;
+    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 = [];
+    redactBatchSensitiveKeys(events);
     let batch = {
       siteKey: this.opts.siteKey,
       sessionId: this.opts.sessionId,
@@ -245,34 +350,6 @@ function performanceNow() {
   return typeof performance !== "undefined" ? performance.now() : Date.now();
 }
 
-// src/mask.ts
-var EMAIL = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}/gi;
-var CC = /\b(?:\d[ -]*?){13,19}\b/g;
-var SSN = /\b\d{3}-\d{2}-\d{4}\b/g;
-var LONG_DIGITS = /\b\d{9,}\b/g;
-var SENSITIVE_KEYS = /(pass(word)?|secret|token|api[-_]?key|authorization|cookie|ssn|card|cvv|pin|otp)/i;
-function maskString(input) {
-  return input.replace(EMAIL, "\xABemail\xBB").replace(CC, (m) => luhnish(m) ? "\xABcard\xBB" : m).replace(SSN, "\xABssn\xBB").replace(LONG_DIGITS, "\xABnumber\xBB");
-}
-function luhnish(s) {
-  const digits = s.replace(/\D/g, "");
-  return digits.length >= 13 && digits.length <= 19;
-}
-function isSensitiveKey(key) {
-  return SENSITIVE_KEYS.test(key);
-}
-function maskValue(value, depth = 0) {
-  if (depth > 6) return "\xABdepth\xBB";
-  if (typeof value === "string") return maskString(value);
-  if (value === null || typeof value !== "object") return value;
-  if (Array.isArray(value)) return value.map((v) => maskValue(v, depth + 1));
-  const out = {};
-  for (const [k, v] of Object.entries(value)) {
-    out[k] = isSensitiveKey(k) ? "\xABredacted\xBB" : maskValue(v, depth + 1);
-  }
-  return out;
-}
-
 // src/serialize.ts
 var DEFAULT_MAX_BYTES = 8 * 1024;
 function byteLen(s) {
@@ -506,43 +583,153 @@ function bodyPreview(text, contentType) {
     redacted: masked !== text
   };
 }
-function enrichTiming(ctx, url, base) {
+function perfNow() {
+  return typeof performance !== "undefined" ? performance.now() : 0;
+}
+function absUrl(raw) {
   try {
-    const entries = performance.getEntriesByType("resource");
-    const match = entries.filter((e) => e.name === url).pop();
-    if (!match) return base;
-    const t = { ...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 : void 0).href;
   } catch {
-    return base;
+    return raw;
+  }
+}
+function phasesFrom(m, base) {
+  const t = { ...base };
+  const r = (n) => Math.round(n);
+  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;
+}
+function matchEntry(name, perfStart, entries) {
+  let best;
+  let bestDelta = Infinity;
+  for (const e of entries) {
+    if (e.name !== name) continue;
+    if (e.startTime < perfStart - 4) continue;
+    const d = e.startTime - perfStart;
+    if (d < bestDelta) {
+      bestDelta = d;
+      best = e;
+    }
   }
+  return best;
+}
+var TIMING_WAIT_MS = 300;
+function createTimingResolver() {
+  const pending = [];
+  let obs;
+  const stopObs = () => {
+    if (obs) {
+      try {
+        obs.disconnect();
+      } catch {
+      }
+      obs = void 0;
+    }
+  };
+  const settle = (p, t) => {
+    const i = pending.indexOf(p);
+    if (i === -1) return;
+    pending.splice(i, 1);
+    clearTimeout(p.timer);
+    p.resolve(t);
+    if (pending.length === 0) stopObs();
+  };
+  const consume = (entries) => {
+    for (const e of entries) {
+      let best;
+      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 = void 0;
+    }
+  };
+  return {
+    resolve(rawUrl, perfStart, base) {
+      if (typeof performance === "undefined") return Promise.resolve(base);
+      const name = absUrl(rawUrl);
+      try {
+        const now = performance.getEntriesByType("resource");
+        const immediate = matchEntry(name, perfStart, now);
+        if (immediate) return Promise.resolve(phasesFrom(immediate, base));
+      } catch {
+      }
+      if (typeof PerformanceObserver === "undefined") return Promise.resolve(base);
+      return new Promise((resolve) => {
+        const p = {
+          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();
+    }
+  };
 }
 function instrumentNetwork(ctx) {
+  const timing = createTimingResolver();
+  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 = [];
-  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());
 }
-function wrapFetch(ctx) {
+function wrapFetch(ctx, tr) {
   const orig = window.fetch;
   if (!orig) return () => {
   };
   window.fetch = async function(input, init) {
     const rawUrl = input instanceof Request ? input.url : String(input);
-    if (rawUrl.includes("/v1/batch")) return orig.call(window, input, init);
+    if (rawUrl.includes("/v1/batch") || rawUrl.includes("/v1/config"))
+      return orig.call(window, input, 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(
@@ -551,25 +738,27 @@ function wrapFetch(ctx) {
     );
     const emit = (partial) => {
       const endT = ctx.clock.now();
-      const timing = enrichTiming(ctx, rawUrl, { startT, endT, duration: endT - startT });
-      const ev = {
-        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 = { startT, endT, duration: endT - startT };
       ctx.markActivity();
+      void tr.resolve(rawUrl, perfStart, base).then((timing) => {
+        const ev = {
+          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 {
       const res = await orig.call(window, input, init);
@@ -611,7 +800,7 @@ function classifyFetchError(err) {
   if (msg.includes("timeout")) return "timeout";
   return "network";
 }
-function wrapXhr(ctx) {
+function wrapXhr(ctx, tr) {
   const XHR = XMLHttpRequest.prototype;
   const origOpen = XHR.open;
   const origSend = XHR.send;
@@ -624,6 +813,7 @@ function wrapXhr(ctx) {
       rawUrl,
       url: redactUrl(rawUrl),
       startT: 0,
+      perfStart: 0,
       reqHeaders: {}
     });
     return origOpen.apply(this, [method, url, ...rest]);
@@ -642,14 +832,15 @@ function wrapXhr(ctx) {
     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) => {
         const endT = ctx.clock.now();
-        const timing = enrichTiming(ctx, meta.rawUrl, {
+        const base = {
           startT: meta.startT,
           endT,
           duration: endT - meta.startT
-        });
+        };
         const status = this.status;
         const respHeaders = parseRawHeaders(ctx, this.getAllResponseHeaders());
         let responseBody;
@@ -661,28 +852,31 @@ function wrapXhr(ctx) {
           } catch {
           }
         }
-        const ev = {
-          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, void 0) : void 0,
-          responseBody,
-          timing,
-          error: error || classifyHttp(status)
-        };
-        ctx.emit(ev);
+        const responseSize = safeLen(this);
         ctx.markActivity();
+        void tr.resolve(meta.rawUrl, meta.perfStart, base).then((timing) => {
+          const ev = {
+            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, void 0) : void 0,
+            responseBody,
+            timing,
+            error: error || classifyHttp(status)
+          };
+          ctx.emit(ev);
+        });
       };
       this.addEventListener("loadend", () => finish());
       this.addEventListener("error", () => finish("network"));
@@ -837,6 +1031,101 @@ function headerEntries(headers) {
   return Object.entries(headers);
 }
 
+// src/websocket.ts
+var FRAME_CAP = 4 * 1024;
+function redactUrl2(raw) {
+  try {
+    const u = new URL(raw, location.href);
+    if (u.search) u.search = "?\u2026";
+    return u.toString();
+  } catch {
+    return raw.split("?")[0] ?? raw;
+  }
+}
+function byteLen2(s) {
+  try {
+    return new TextEncoder().encode(s).length;
+  } catch {
+    return s.length;
+  }
+}
+function frameInfo(data, capture) {
+  if (typeof data === "string") {
+    const info = { encoding: "text", size: byteLen2(data) };
+    if (capture) {
+      const masked = maskString(data);
+      const truncated = masked.length > FRAME_CAP;
+      info.body = {
+        preview: truncated ? masked.slice(0, FRAME_CAP) : masked,
+        truncated,
+        redacted: masked !== data
+      };
+    }
+    return info;
+  }
+  let size = 0;
+  if (typeof Blob !== "undefined" && data instanceof Blob) size = data.size;
+  else if (data instanceof ArrayBuffer) size = data.byteLength;
+  else if (ArrayBuffer.isView(data)) size = data.byteLength;
+  return { encoding: "binary", size };
+}
+function instrumentWebSocket(ctx) {
+  const Orig = typeof window !== "undefined" ? window.WebSocket : void 0;
+  if (!Orig) return () => {
+  };
+  const emit = (partial) => {
+    try {
+      const ev = {
+        id: uuid(),
+        sessionId: ctx.sessionId,
+        type: "ws",
+        t: ctx.clock.now(),
+        ts: ctx.clock.wall(),
+        ...partial
+      };
+      ctx.emit(ev);
+    } catch {
+    }
+  };
+  class WrappedWebSocket extends Orig {
+    constructor(url, protocols) {
+      super(url, protocols);
+      try {
+        const connId = uuid();
+        const redUrl = redactUrl2(String(url));
+        const protos = protocols ? Array.isArray(protocols) ? protocols : [protocols] : void 0;
+        const capture = ctx.config.captureNetworkBodies;
+        this.addEventListener("open", () => emit({ connId, url: redUrl, kind: "open", protocols: protos }));
+        this.addEventListener(
+          "close",
+          (e) => emit({ connId, url: redUrl, kind: "close", code: e.code, reason: e.reason || void 0, wasClean: e.wasClean })
+        );
+        this.addEventListener("error", () => emit({ connId, url: redUrl, kind: "error" }));
+        this.addEventListener("message", (e) => {
+          const info = frameInfo(e.data, capture);
+          emit({ connId, url: redUrl, kind: "message", dir: "recv", ...info });
+          ctx.markActivity();
+        });
+        const origSend = super.send.bind(this);
+        this.send = (data) => {
+          origSend(data);
+          try {
+            const info = frameInfo(data, capture);
+            emit({ connId, url: redUrl, kind: "message", dir: "send", ...info });
+            ctx.markActivity();
+          } catch {
+          }
+        };
+      } catch {
+      }
+    }
+  }
+  window.WebSocket = WrappedWebSocket;
+  return () => {
+    window.WebSocket = Orig;
+  };
+}
+
 // src/errors.ts
 function instrumentErrors(ctx) {
   function emitError(args) {
@@ -1621,6 +1910,9 @@ var ObsrviqClient = class {
       this.config.maskAllInputs = false;
     }
     if (this.config.askPermission) this.config.requireConsent = true;
+    const staticMaskKeys = Array.isArray(config.maskKeys) ? config.maskKeys : [];
+    setCustomMaskKeys(staticMaskKeys);
+    void this.loadRemoteMaskKeys(staticMaskKeys);
     this.startSession();
     if (config.userId != null) this.applyUserId(config.userId);
     if (config.metadata && this.meta) this.meta.metadata = { ...config.metadata };
@@ -1641,6 +1933,33 @@ var ObsrviqClient = class {
       this.maybeStart();
     }
   }
+  /** 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. */
+  async loadRemoteMaskKeys(staticKeys) {
+    const cfg = this.config;
+    if (!cfg || typeof fetch === "undefined") {
+      markMaskConfigReady();
+      return;
+    }
+    try {
+      const ctrl = new AbortController();
+      const timer = setTimeout(() => ctrl.abort(), 2e3);
+      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();
+          const remote = Array.isArray(data.maskKeys) ? data.maskKeys.filter((k) => typeof k === "string") : [];
+          setCustomMaskKeys([...staticKeys, ...remote]);
+        }
+      } finally {
+        clearTimeout(timer);
+      }
+    } catch {
+    } finally {
+      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
@@ -1733,6 +2052,7 @@ var ObsrviqClient = class {
     this.transport.start();
     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));