@diegotsi/flint-core 1.9.0 → 1.10.0

package/dist/index.d.ts

@@ -3,7 +3,11 @@ interface NetworkCollector {
     stop(): void;
     getEntries(): NetworkEntry[];
 }
-declare function createNetworkCollector(extraBlockedHosts?: string[]): NetworkCollector;
+interface NetworkCollectorOptions {
+    maxEntries?: number;
+    maxResponseBody?: number;
+}
+declare function createNetworkCollector(extraBlockedHosts?: string[], options?: NetworkCollectorOptions): NetworkCollector;
 
 interface ConsoleCollector {
     start(): void;
@@ -62,6 +66,13 @@ interface NetworkEntry {
     responseSize?: number;
     requestContentType?: string;
     responseContentType?: string;
+    statusText?: string;
+    /** How the entry was captured. "perf" entries have no body/headers. */
+    source?: "fetch" | "xhr" | "perf";
+    /** Network-level failure (offline, CORS, DNS, timeout) — distinct from a 4xx/5xx response. */
+    failed?: boolean;
+    /** Present when `failed` is true. */
+    errorMessage?: string;
 }
 interface FormErrorField {
     name: string;
@@ -177,7 +188,7 @@ interface FlintConfig {
         environment?: () => EnvironmentInfo;
     };
     /** @internal Injected by framework packages to start replay without rrweb in core */
-    _replayRecorder?: (onEmit: (event: unknown) => void) => Promise<(() => void) | undefined>;
+    _replayRecorder?: (onEmit: (event: unknown, isCheckout?: boolean) => void) => Promise<(() => void) | undefined>;
 }
 interface CollectedMeta {
     environment: EnvironmentInfo;
@@ -303,6 +314,23 @@ declare function trackDatadogBugReported(meta: {
     title?: string;
 }): void;
 
+/**
+ * Rolling buffer for rrweb replay events.
+ *
+ * rrweb playback requires the event stream to begin with a Meta + FullSnapshot
+ * ("checkout"). A naive time-window trim can strip that opening snapshot and
+ * leave the player with orphaned incremental mutations it can't render.
+ *
+ * When the recorder signals checkouts (via `isCheckout`), this buffer trims by
+ * *segment* instead of by time: it always retains the current checkout segment
+ * plus the previous one, so the buffer never starts mid-stream. Recorders that
+ * never signal a checkout fall back to the legacy time-window trim.
+ */
+interface ReplayBuffer {
+    push(event: unknown, isCheckout?: boolean): void;
+    getEvents(): unknown[];
+}
+
 interface FlintInstance {
     config: FlintConfig;
     console: ConsoleCollector | null;
@@ -310,7 +338,7 @@ interface FlintInstance {
     formErrors: FormErrorCollector | null;
     frustration: FrustrationCollector | null;
     errorCapture: ErrorCaptureCollector | null;
-    replayEvents: unknown[];
+    replayBuffer: ReplayBuffer;
     stopReplay: (() => void) | null;
 }
 declare function init(config: FlintConfig): void;

package/dist/index.js

@@ -903,7 +903,8 @@ function captureHeaders(raw, max) {
         count++;
       }
     } else {
-      const entries = typeof Headers !== "undefined" && raw instanceof Headers ? raw.entries() : Array.isArray(raw) ? raw : Object.entries(raw);
+      const headersLike = raw;
+      const entries = typeof headersLike.entries === "function" && typeof headersLike.forEach === "function" ? headersLike.entries() : Array.isArray(raw) ? raw : Object.entries(raw);
       for (const [k, v] of entries) {
         total++;
         if (count >= max) continue;
@@ -921,7 +922,7 @@ function captureHeaders(raw, max) {
 function extractContentType(headers) {
   if (!headers) return void 0;
   try {
-    if (typeof Headers !== "undefined" && headers instanceof Headers) return headers.get("content-type") ?? void 0;
+    if (typeof headers.get === "function") return headers.get("content-type") ?? void 0;
     if (Array.isArray(headers)) {
       const found = headers.find(([k]) => k.toLowerCase() === "content-type");
       return found?.[1];
@@ -934,17 +935,22 @@ function extractContentType(headers) {
   }
   return void 0;
 }
-function createNetworkCollector(extraBlockedHosts = []) {
+function createNetworkCollector(extraBlockedHosts = [], options) {
+  const maxEntries = options?.maxEntries ?? MAX_ENTRIES3;
+  const maxResponseBody = options?.maxResponseBody ?? MAX_RESPONSE_BODY;
   const entries = [];
   const blocked = /* @__PURE__ */ new Set([...DEFAULT_BLOCKED_HOSTS, ...extraBlockedHosts]);
   let origFetch = null;
   let origXHROpen = null;
   let origXHRSend = null;
   let origXHRSetHeader = null;
+  let perfObserver = null;
   let active = false;
+  const seenUrls = /* @__PURE__ */ new Set();
   function push(entry) {
+    seenUrls.add(entry.fullUrl ?? entry.url);
     entries.push(entry);
-    if (entries.length > MAX_ENTRIES3) entries.shift();
+    if (entries.length > maxEntries) entries.shift();
   }
   return {
     start() {
@@ -952,19 +958,50 @@ function createNetworkCollector(extraBlockedHosts = []) {
       active = true;
       origFetch = window.fetch;
       window.fetch = async (input, init2) => {
-        const method = (init2?.method ?? "GET").toUpperCase();
-        const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+        const reqObj = typeof Request !== "undefined" && input instanceof Request ? input : null;
+        const method = (init2?.method ?? reqObj?.method ?? "GET").toUpperCase();
+        const url = reqObj ? reqObj.url : typeof input === "string" ? input : input.href;
         const startTime = Date.now();
-        const reqBody = safeBodyPreview(init2?.body, MAX_REQUEST_BODY);
-        const reqHeaders = captureHeaders(init2?.headers, MAX_HEADERS);
-        const reqContentType = extractContentType(init2?.headers);
-        const res = await origFetch.call(window, input, init2);
+        const reqHeaders = captureHeaders(init2?.headers ?? reqObj?.headers, MAX_HEADERS);
+        const reqContentType = extractContentType(init2?.headers ?? reqObj?.headers);
+        let reqBody = safeBodyPreview(init2?.body, MAX_REQUEST_BODY);
+        if (reqBody === void 0 && reqObj && !shouldIgnore(url, blocked)) {
+          try {
+            const t = await reqObj.clone().text();
+            if (t) reqBody = t.length > MAX_REQUEST_BODY ? t.slice(0, MAX_REQUEST_BODY) + "\u2026" : t;
+          } catch {
+          }
+        }
+        let res;
+        try {
+          res = await origFetch.call(window, input, init2);
+        } catch (err) {
+          if (!shouldIgnore(url, blocked)) {
+            push({
+              method,
+              url: truncateUrl(url),
+              fullUrl: captureFullUrl(url),
+              status: 0,
+              duration: Date.now() - startTime,
+              timestamp: startTime,
+              source: "fetch",
+              failed: true,
+              errorMessage: err instanceof Error ? err.message : String(err),
+              requestHeaders: reqHeaders,
+              requestBody: reqBody,
+              requestContentType: reqContentType
+            });
+          }
+          throw err;
+        }
         if (!shouldIgnore(url, blocked)) {
           const entry = {
             method,
             url: truncateUrl(url),
             fullUrl: captureFullUrl(url),
             status: res.status,
+            statusText: res.statusText || void 0,
+            source: "fetch",
             duration: Date.now() - startTime,
             timestamp: startTime,
             requestHeaders: reqHeaders,
@@ -977,7 +1014,7 @@ function createNetworkCollector(extraBlockedHosts = []) {
           try {
             const clone = res.clone();
             clone.text().then((text) => {
-              entry.responseBody = text.length > MAX_RESPONSE_BODY ? text.slice(0, MAX_RESPONSE_BODY) + "\u2026" : text;
+              entry.responseBody = text.length > maxResponseBody ? text.slice(0, maxResponseBody) + "\u2026" : text;
               if (!entry.responseSize && text.length) entry.responseSize = text.length;
             }).catch(() => {
             });
@@ -1014,13 +1051,16 @@ function createNetworkCollector(extraBlockedHosts = []) {
       XMLHttpRequest.prototype.open = function(method, url, async, username, password) {
         const startTime = Date.now();
         const urlStr = typeof url === "string" ? url : url.href;
+        let captured = false;
         this.addEventListener("load", () => {
+          if (captured) return;
+          captured = true;
           if (!shouldIgnore(urlStr, blocked)) {
             const meta = xhrMeta.get(this);
             let resBody;
             try {
               const text = this.responseText;
-              resBody = text && text.length > MAX_RESPONSE_BODY ? text.slice(0, MAX_RESPONSE_BODY) + "\u2026" : text || void 0;
+              resBody = text && text.length > maxResponseBody ? text.slice(0, maxResponseBody) + "\u2026" : text || void 0;
             } catch {
             }
             push({
@@ -1028,6 +1068,8 @@ function createNetworkCollector(extraBlockedHosts = []) {
               url: truncateUrl(urlStr),
               fullUrl: captureFullUrl(urlStr),
               status: this.status,
+              statusText: this.statusText || void 0,
+              source: "xhr",
               duration: Date.now() - startTime,
               timestamp: startTime,
               requestHeaders: meta?.reqHeaders && Object.keys(meta.reqHeaders).length > 0 ? meta.reqHeaders : void 0,
@@ -1040,8 +1082,58 @@ function createNetworkCollector(extraBlockedHosts = []) {
             });
           }
         });
+        const pushFailure = (errorMessage) => {
+          if (captured) return;
+          captured = true;
+          if (shouldIgnore(urlStr, blocked)) return;
+          const meta = xhrMeta.get(this);
+          push({
+            method: method.toUpperCase(),
+            url: truncateUrl(urlStr),
+            fullUrl: captureFullUrl(urlStr),
+            status: 0,
+            source: "xhr",
+            failed: true,
+            errorMessage,
+            duration: Date.now() - startTime,
+            timestamp: startTime,
+            requestHeaders: meta?.reqHeaders && Object.keys(meta.reqHeaders).length > 0 ? meta.reqHeaders : void 0,
+            requestBody: meta?.reqBody,
+            requestContentType: meta?.reqContentType
+          });
+        };
+        this.addEventListener("error", () => pushFailure("Network error"));
+        this.addEventListener("timeout", () => pushFailure("Timeout"));
+        this.addEventListener("abort", () => pushFailure("Aborted"));
         return origXHROpen.apply(this, [method, url, async ?? true, username, password]);
       };
+      if (typeof PerformanceObserver !== "undefined") {
+        try {
+          perfObserver = new PerformanceObserver((list) => {
+            for (const entry of list.getEntries()) {
+              const res = entry;
+              if (res.initiatorType !== "fetch" && res.initiatorType !== "xmlhttprequest") continue;
+              const url = res.name;
+              if (shouldIgnore(url, blocked)) continue;
+              if (seenUrls.has(captureFullUrl(url)) || seenUrls.has(truncateUrl(url))) continue;
+              push({
+                // Resource timing does not expose the HTTP method; default to GET.
+                method: "GET",
+                url: truncateUrl(url),
+                fullUrl: captureFullUrl(url),
+                status: res.responseStatus ?? 0,
+                source: "perf",
+                duration: Math.round(res.duration),
+                timestamp: Math.round(performance.timeOrigin + res.startTime),
+                responseSize: res.transferSize || res.encodedBodySize || void 0
+              });
+            }
+          });
+          perfObserver.observe({ type: "resource", buffered: true });
+        } catch {
+          perfObserver = null;
+        }
+      }
     },
     stop() {
       if (!active) return;
@@ -1050,6 +1142,10 @@ function createNetworkCollector(extraBlockedHosts = []) {
       if (origXHROpen) XMLHttpRequest.prototype.open = origXHROpen;
       if (origXHRSend) XMLHttpRequest.prototype.send = origXHRSend;
       if (origXHRSetHeader) XMLHttpRequest.prototype.setRequestHeader = origXHRSetHeader;
+      if (perfObserver) {
+        perfObserver.disconnect();
+        perfObserver = null;
+      }
     },
     getEntries() {
       return [...entries];
@@ -1057,6 +1153,34 @@ function createNetworkCollector(extraBlockedHosts = []) {
   };
 }
 
+// src/replayBuffer.ts
+function createReplayBuffer(replayBufferMs, now = Date.now) {
+  const events = [];
+  let checkoutSeen = false;
+  let recentCheckoutIdx = 0;
+  return {
+    push(event, isCheckout) {
+      if (isCheckout) {
+        checkoutSeen = true;
+        if (events.length > 0) {
+          events.splice(0, recentCheckoutIdx);
+          recentCheckoutIdx = events.length;
+        }
+      }
+      events.push(event);
+      if (!checkoutSeen) {
+        const cutoff = now() - replayBufferMs;
+        while (events.length > 0 && events[0].timestamp < cutoff) {
+          events.shift();
+        }
+      }
+    },
+    getEvents() {
+      return [...events];
+    }
+  };
+}
+
 // src/store.ts
 var formErrorCollectorRef = null;
 function _setFormErrorCollector(collector) {
@@ -1172,7 +1296,7 @@ function init(config) {
   if (config.user) {
     flint.setUser(config.user);
   }
-  const replayEvents = [];
+  const replayBuffer = createReplayBuffer(replayBufferMs);
   let stopReplay = null;
   debugLog(config, "Collectors started", {
     console: !!consoleCol,
@@ -1188,16 +1312,12 @@ function init(config) {
     formErrors: formErrorsCol,
     frustration: frustrationCol,
     errorCapture: errorCaptureCol,
-    replayEvents,
+    replayBuffer,
     stopReplay: null
   };
   if (enableReplay && _replayRecorder) {
-    _replayRecorder((event) => {
-      replayEvents.push(event);
-      const cutoff = Date.now() - replayBufferMs;
-      while (replayEvents.length > 0 && replayEvents[0].timestamp < cutoff) {
-        replayEvents.shift();
-      }
+    _replayRecorder((event, isCheckout) => {
+      replayBuffer.push(event, isCheckout);
     }).then((stop) => {
       stopReplay = stop ?? null;
       if (instance) instance.stopReplay = stopReplay;
@@ -1289,7 +1409,7 @@ function getMeta(extraMeta) {
   };
 }
 function getReplayEvents() {
-  return instance ? [...instance.replayEvents] : [];
+  return instance ? instance.replayBuffer.getEvents() : [];
 }
 function getConfig() {
   return instance?.config ?? null;