@sailfish-ai/recorder 1.11.5 → 1.12.4

package/README.md

@@ -131,7 +131,7 @@ await initRecorder({
 | `serviceAdditionalMetadata` | `Record<string, any>` | — | Arbitrary metadata attached to every session. |
 | `domainsToPropagateHeaderTo` | `string[]` | `[]` | Domains (wildcards allowed) that receive the `X-Sf3-Rid` tracing header, letting Sailfish join frontend sessions with backend traces. |
 | `domainsToNotPropagateHeaderTo` | `string[]` | `[]` | Domains to exclude, appended to the built-in denylist. |
-| `enableFiberTracking` | `boolean` | `false` | Adds `data-sf-source="file.tsx:42"` attributes to DOM nodes for source-mapped coverage (React only). Pairs with the Babel plugin. |
+| `enableFiberTracking` | `boolean` | `false` | **Superseded — see note below.** Adds `data-sf-source="file.tsx:42"` attributes to DOM nodes for source-mapped coverage (React only). Pairs with the legacy Babel plugin. Disabled by default and retained for backward compatibility only; new integrations should use the build plugin's `data-sf-id` path instead. |
 | `enableIpTracking` | `boolean` | `false` | Fetches the visitor IP asynchronously for session metadata. |
 | `captureStreamingResponseBody` | `boolean` | `true` | Capture prefixes of streaming (SSE, ndjson, chunked) responses. |
 | `captureResponseBodyMaxMb` | `number` | `10` | Max non-streaming response body to capture, in MB. `0` disables body capture. |
@@ -325,6 +325,24 @@ Place `<SailfishProvider>` in `app/layout.tsx`.
 
 ## Babel plugin — source-mapped coverage
 
+> **⚠️ Deprecated / superseded.** The `@sailfish-ai/recorder/babel-plugin`
+> (which injects `data-sf-source="file.tsx:42"`) and the matching
+> `enableFiberTracking` recorder option are **legacy** and are **disabled by
+> default**. They are retained for backward compatibility only and are no longer
+> the recommended way to get click-to-code / source-mapped coverage.
+>
+> New integrations should use the **build plugin** (`sf-map-utils` — the
+> Vite / Rollup / esbuild / webpack adapters, or `withSailfish(next.config)` for
+> Next.js / SWC), which stamps the canonical **`data-sf-id`** attribute at build
+> time and uploads a per-module source manifest. This is the path click-to-code
+> resolution is built against.
+>
+> **Coexistence:** both attributes may appear on the same element if you enable
+> both paths during a migration. This is safe — the click-to-code resolver
+> **prefers `data-sf-id`** and only falls back to `data-sf-source` / fiber data
+> when no `data-sf-id` is present. There is no need to remove the Babel plugin
+> before adopting the build plugin; you can migrate incrementally.
+
 `@sailfish-ai/recorder/babel-plugin` injects `data-sf-source="file.tsx:42"` attributes into your JSX at compile time so clicks and views in the Sailfish dashboard link back to the exact source line.
 
 ### Vite + React

package/dist/chunkSerializer.js

@@ -26,7 +26,51 @@ const CHUNK_ID_BASE = 100_001;
 export async function chunkedSnapshot(doc, mirror, options = {}) {
     const chunkSize = options.chunkSize ?? 500;
     const maxChunkMs = options.maxChunkMs ?? 16;
-    const { blockClass, blockSelector, maskTextClass, maskTextSelector } = options;
+    const { blockClass, blockSelector, maskTextClass, maskTextSelector, maskInputSelector, maskInputOptions, maskInputFn, maskTextFn, unmaskSelector, } = options;
+    /** Safe wrapper — a malformed user-supplied selector must not crash the walker. */
+    function matchesSelectorSafe(el, selector) {
+        if (!selector)
+            return false;
+        try {
+            return el.matches(selector);
+        }
+        catch {
+            return false;
+        }
+    }
+    function closestSelectorSafe(el, selector) {
+        if (!el || !selector)
+            return false;
+        try {
+            return !!el.closest(selector);
+        }
+        catch {
+            return false;
+        }
+    }
+    function isUnmasked(el) {
+        return closestSelectorSafe(el, unmaskSelector);
+    }
+    /**
+     * Decide whether an input/textarea/select's value should be masked, given
+     * the configured maskInputOptions and maskInputSelector. unmaskSelector
+     * (checked separately at call sites) overrides this.
+     */
+    function shouldMaskInputValue(el) {
+        const tag = el.tagName;
+        if (tag === "TEXTAREA" && maskInputOptions?.textarea)
+            return true;
+        if (tag === "SELECT" && maskInputOptions?.select)
+            return true;
+        if (tag === "INPUT") {
+            const inputType = el.type || "text";
+            if (maskInputOptions?.[inputType])
+                return true;
+        }
+        if (matchesSelectorSafe(el, maskInputSelector))
+            return true;
+        return false;
+    }
     let nextId = CHUNK_ID_BASE;
     let nodeCount = 0;
     let chunkStart = performance.now();
@@ -46,34 +90,26 @@ export async function chunkedSnapshot(doc, mirror, options = {}) {
         }
     }
     function isBlocked(el) {
+        // unmaskSelector exempts elements from block as well as mask.
+        if (isUnmasked(el))
+            return false;
         if (blockClass && el.classList?.contains(blockClass))
             return true;
-        if (blockSelector) {
-            try {
-                if (el.matches(blockSelector))
-                    return true;
-            }
-            catch {
-                /* invalid selector */
-            }
-        }
+        if (matchesSelectorSafe(el, blockSelector))
+            return true;
         return false;
     }
     function shouldMaskText(node) {
         const parent = node.parentElement;
         if (!parent)
             return false;
+        // unmaskSelector overrides every other mask rule — short-circuit early.
+        if (isUnmasked(parent))
+            return false;
         if (maskTextClass && parent.closest(`.${maskTextClass}`))
             return true;
-        if (maskTextSelector) {
-            try {
-                if (parent.closest(maskTextSelector))
-                    return true;
-            }
-            catch {
-                /* invalid selector */
-            }
-        }
+        if (closestSelectorSafe(parent, maskTextSelector))
+            return true;
         return false;
     }
     function getAttributes(el) {
@@ -83,11 +119,18 @@ export async function chunkedSnapshot(doc, mirror, options = {}) {
             attrs[attr.name] = attr.value;
         }
         const tag = el.tagName;
-        // Capture live input/textarea/select values
+        // Capture live input/textarea/select values, applying Form Privacy Rules.
         if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") {
             const input = el;
             if (input.value !== undefined && input.value !== "") {
-                attrs.value = input.value;
+                let value = input.value;
+                const mask = !isUnmasked(el) && shouldMaskInputValue(el);
+                if (mask) {
+                    value = maskInputFn
+                        ? maskInputFn(value, el)
+                        : "*".repeat(value.length);
+                }
+                attrs.value = value;
             }
         }
         if (tag === "INPUT") {
@@ -168,9 +211,13 @@ export async function chunkedSnapshot(doc, mirror, options = {}) {
                 let textContent = node.textContent || "";
                 const parent = node.parentElement;
                 const isStyle = parent?.tagName === "STYLE" || undefined;
-                // Mask text content when under maskTextClass/maskTextSelector
+                // Mask text content when under maskTextClass/maskTextSelector.
+                // Defer to caller-supplied maskTextFn when provided so the same
+                // unmask shim used by rrweb's record path also applies here.
                 if (!isStyle && shouldMaskText(node) && textContent) {
-                    textContent = textContent.replace(/\S/g, "*");
+                    textContent = maskTextFn
+                        ? maskTextFn(textContent, parent)
+                        : textContent.replace(/\S/g, "*");
                 }
                 const result = {
                     type: TEXT,

package/dist/chunks/chunkSerializer-DDukZpgl.js

@@ -0,0 +1,116 @@
+import { y as e } from "./index-D6axlCRu.js";
+async function chunkedSnapshot(t, n, s = {}) {
+  const o = s.chunkSize ?? 500, r = s.maxChunkMs ?? 16, { blockClass: a, blockSelector: c, maskTextClass: i, maskTextSelector: u, maskInputSelector: d, maskInputOptions: l, maskInputFn: f, maskTextFn: N, unmaskSelector: m } = s;
+  function matchesSelectorSafe(e2, t2) {
+    if (!t2) return false;
+    try {
+      return e2.matches(t2);
+    } catch {
+      return false;
+    }
+  }
+  function closestSelectorSafe(e2, t2) {
+    if (!e2 || !t2) return false;
+    try {
+      return !!e2.closest(t2);
+    } catch {
+      return false;
+    }
+  }
+  function isUnmasked(e2) {
+    return closestSelectorSafe(e2, m);
+  }
+  let h = 100001, p = 0, S = performance.now();
+  function genId(e2) {
+    if (n.hasNode(e2)) return n.getId(e2);
+    const t2 = h++;
+    return n.add(e2, { id: t2 }), t2;
+  }
+  function getAttributes(e2) {
+    const t2 = {};
+    for (let n3 = 0; n3 < e2.attributes.length; n3++) {
+      const s2 = e2.attributes[n3];
+      t2[s2.name] = s2.value;
+    }
+    const n2 = e2.tagName;
+    if ("INPUT" === n2 || "TEXTAREA" === n2 || "SELECT" === n2) {
+      const n3 = e2;
+      if (void 0 !== n3.value && "" !== n3.value) {
+        let s2 = n3.value;
+        const o2 = !isUnmasked(e2) && (function shouldMaskInputValue(e3) {
+          const t3 = e3.tagName;
+          if ("TEXTAREA" === t3 && (l == null ? void 0 : l.textarea)) return true;
+          if ("SELECT" === t3 && (l == null ? void 0 : l.select)) return true;
+          if ("INPUT" === t3) {
+            const t4 = e3.type || "text";
+            if (l == null ? void 0 : l[t4]) return true;
+          }
+          return !!matchesSelectorSafe(e3, d);
+        })(e2);
+        o2 && (s2 = f ? f(s2, e2) : "*".repeat(s2.length)), t2.value = s2;
+      }
+    }
+    if ("INPUT" === n2) {
+      const n3 = e2;
+      "checkbox" !== n3.type && "radio" !== n3.type || (t2.checked = n3.checked);
+    }
+    return "OPTION" === n2 && (t2.selected = e2.selected), t2;
+  }
+  try {
+    return await (async function serialize(n2) {
+      if (n2 !== t && !n2.parentNode) return null;
+      switch (await (async function maybeYield() {
+        p++, (p % o === 0 || performance.now() - S > r) && (await e(), S = performance.now());
+      })(), n2.nodeType) {
+        case Node.DOCUMENT_NODE: {
+          const e2 = genId(n2), t2 = [];
+          for (const e3 of Array.from(n2.childNodes)) {
+            const n3 = await serialize(e3);
+            n3 && t2.push(n3);
+          }
+          return { type: 0, childNodes: t2, id: e2 };
+        }
+        case Node.DOCUMENT_TYPE_NODE: {
+          const e2 = n2;
+          return { type: 1, childNodes: [], id: genId(n2), name: e2.name, publicId: e2.publicId, systemId: e2.systemId };
+        }
+        case Node.ELEMENT_NODE: {
+          const e2 = n2, t2 = genId(n2), s2 = e2.tagName.toLowerCase(), o2 = "http://www.w3.org/2000/svg" === e2.namespaceURI || void 0;
+          if ((function isBlocked(e3) {
+            var _a;
+            return !(isUnmasked(e3) || (!a || !((_a = e3.classList) == null ? void 0 : _a.contains(a))) && !matchesSelectorSafe(e3, c));
+          })(e2)) return { type: 2, tagName: s2, attributes: getAttributes(e2), childNodes: [], id: t2, isSVG: o2, needBlock: true };
+          const r2 = [];
+          for (const t3 of Array.from(e2.childNodes)) {
+            if (!t3.parentNode) continue;
+            const e3 = await serialize(t3);
+            e3 && r2.push(e3);
+          }
+          const i2 = { type: 2, tagName: s2, attributes: getAttributes(e2), childNodes: r2, id: t2 };
+          return o2 && (i2.isSVG = true), i2;
+        }
+        case Node.TEXT_NODE: {
+          let e2 = n2.textContent || "";
+          const t2 = n2.parentElement, s2 = "STYLE" === (t2 == null ? void 0 : t2.tagName) || void 0;
+          !s2 && (function shouldMaskText(e3) {
+            const t3 = e3.parentElement;
+            return !(!t3 || isUnmasked(t3) || (!i || !t3.closest(`.${i}`)) && !closestSelectorSafe(t3, u));
+          })(n2) && e2 && (e2 = N ? N(e2, t2) : e2.replace(/\S/g, "*"));
+          const o2 = { type: 3, textContent: e2, childNodes: [], id: genId(n2) };
+          return s2 && (o2.isStyle = true), o2;
+        }
+        case Node.COMMENT_NODE:
+          return { type: 5, textContent: n2.textContent || "", childNodes: [], id: genId(n2) };
+        case Node.CDATA_SECTION_NODE:
+          return { type: 4, textContent: "", childNodes: [], id: genId(n2) };
+        default:
+          return null;
+      }
+    })(t);
+  } catch (e2) {
+    return console.warn("[Sailfish] chunkSnapshot serialization error:", e2), null;
+  }
+}
+export {
+  chunkedSnapshot
+};

package/dist/chunks/chunkSerializer-FQtY90Av.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const e = require("./index-C-qbsfKe.js");
+exports.chunkedSnapshot = async function chunkedSnapshot(t, n, s = {}) {
+  const o = s.chunkSize ?? 500, r = s.maxChunkMs ?? 16, { blockClass: a, blockSelector: c, maskTextClass: i, maskTextSelector: u, maskInputSelector: d, maskInputOptions: l, maskInputFn: f, maskTextFn: N, unmaskSelector: h } = s;
+  function matchesSelectorSafe(e2, t2) {
+    if (!t2) return false;
+    try {
+      return e2.matches(t2);
+    } catch {
+      return false;
+    }
+  }
+  function closestSelectorSafe(e2, t2) {
+    if (!e2 || !t2) return false;
+    try {
+      return !!e2.closest(t2);
+    } catch {
+      return false;
+    }
+  }
+  function isUnmasked(e2) {
+    return closestSelectorSafe(e2, h);
+  }
+  let m = 100001, p = 0, S = performance.now();
+  function genId(e2) {
+    if (n.hasNode(e2)) return n.getId(e2);
+    const t2 = m++;
+    return n.add(e2, { id: t2 }), t2;
+  }
+  function getAttributes(e2) {
+    const t2 = {};
+    for (let n3 = 0; n3 < e2.attributes.length; n3++) {
+      const s2 = e2.attributes[n3];
+      t2[s2.name] = s2.value;
+    }
+    const n2 = e2.tagName;
+    if ("INPUT" === n2 || "TEXTAREA" === n2 || "SELECT" === n2) {
+      const n3 = e2;
+      if (void 0 !== n3.value && "" !== n3.value) {
+        let s2 = n3.value;
+        const o2 = !isUnmasked(e2) && (function shouldMaskInputValue(e3) {
+          const t3 = e3.tagName;
+          if ("TEXTAREA" === t3 && (l == null ? void 0 : l.textarea)) return true;
+          if ("SELECT" === t3 && (l == null ? void 0 : l.select)) return true;
+          if ("INPUT" === t3) {
+            const t4 = e3.type || "text";
+            if (l == null ? void 0 : l[t4]) return true;
+          }
+          return !!matchesSelectorSafe(e3, d);
+        })(e2);
+        o2 && (s2 = f ? f(s2, e2) : "*".repeat(s2.length)), t2.value = s2;
+      }
+    }
+    if ("INPUT" === n2) {
+      const n3 = e2;
+      "checkbox" !== n3.type && "radio" !== n3.type || (t2.checked = n3.checked);
+    }
+    return "OPTION" === n2 && (t2.selected = e2.selected), t2;
+  }
+  try {
+    return await (async function serialize(n2) {
+      if (n2 !== t && !n2.parentNode) return null;
+      switch (await (async function maybeYield() {
+        p++, (p % o === 0 || performance.now() - S > r) && (await e.yieldToMain(), S = performance.now());
+      })(), n2.nodeType) {
+        case Node.DOCUMENT_NODE: {
+          const e2 = genId(n2), t2 = [];
+          for (const e3 of Array.from(n2.childNodes)) {
+            const n3 = await serialize(e3);
+            n3 && t2.push(n3);
+          }
+          return { type: 0, childNodes: t2, id: e2 };
+        }
+        case Node.DOCUMENT_TYPE_NODE: {
+          const e2 = n2;
+          return { type: 1, childNodes: [], id: genId(n2), name: e2.name, publicId: e2.publicId, systemId: e2.systemId };
+        }
+        case Node.ELEMENT_NODE: {
+          const e2 = n2, t2 = genId(n2), s2 = e2.tagName.toLowerCase(), o2 = "http://www.w3.org/2000/svg" === e2.namespaceURI || void 0;
+          if ((function isBlocked(e3) {
+            var _a;
+            return !(isUnmasked(e3) || (!a || !((_a = e3.classList) == null ? void 0 : _a.contains(a))) && !matchesSelectorSafe(e3, c));
+          })(e2)) return { type: 2, tagName: s2, attributes: getAttributes(e2), childNodes: [], id: t2, isSVG: o2, needBlock: true };
+          const r2 = [];
+          for (const t3 of Array.from(e2.childNodes)) {
+            if (!t3.parentNode) continue;
+            const e3 = await serialize(t3);
+            e3 && r2.push(e3);
+          }
+          const i2 = { type: 2, tagName: s2, attributes: getAttributes(e2), childNodes: r2, id: t2 };
+          return o2 && (i2.isSVG = true), i2;
+        }
+        case Node.TEXT_NODE: {
+          let e2 = n2.textContent || "";
+          const t2 = n2.parentElement, s2 = "STYLE" === (t2 == null ? void 0 : t2.tagName) || void 0;
+          !s2 && (function shouldMaskText(e3) {
+            const t3 = e3.parentElement;
+            return !(!t3 || isUnmasked(t3) || (!i || !t3.closest(`.${i}`)) && !closestSelectorSafe(t3, u));
+          })(n2) && e2 && (e2 = N ? N(e2, t2) : e2.replace(/\S/g, "*"));
+          const o2 = { type: 3, textContent: e2, childNodes: [], id: genId(n2) };
+          return s2 && (o2.isStyle = true), o2;
+        }
+        case Node.COMMENT_NODE:
+          return { type: 5, textContent: n2.textContent || "", childNodes: [], id: genId(n2) };
+        case Node.CDATA_SECTION_NODE:
+          return { type: 4, textContent: "", childNodes: [], id: genId(n2) };
+        default:
+          return null;
+      }
+    })(t);
+  } catch (e2) {
+    return console.warn("[Sailfish] chunkSnapshot serialization error:", e2), null;
+  }
+};