@obsrviq/tracker 0.4.0 → 0.4.2

package/dist/index.js

@@ -506,36 +506,144 @@ 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 () => {
   };
@@ -543,6 +651,7 @@ function wrapFetch(ctx) {
     const rawUrl = input instanceof Request ? input.url : String(input);
     if (rawUrl.includes("/v1/batch")) 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 +660,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 +722,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 +735,7 @@ function wrapXhr(ctx) {
       rawUrl,
       url: redactUrl(rawUrl),
       startT: 0,
+      perfStart: 0,
       reqHeaders: {}
     });
     return origOpen.apply(this, [method, url, ...rest]);
@@ -642,14 +754,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 +774,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"));