@sailfish-ai/recorder 1.8.21 → 1.9.0

package/dist/babel-plugin-sailfish-source.cjs

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const e = /* @__PURE__ */ new Set(["button", "a", "input", "select", "textarea", "details", "summary", "Button", "Link", "Input", "Select", "Checkbox", "Radio", "Switch", "Tab", "MenuItem", "IconButton", "TextField", "TextArea"]), t = /* @__PURE__ */ new Set(["button", "link", "checkbox", "radio", "switch", "tab", "menuitem", "option", "combobox", "textbox", "searchbox", "slider", "spinbutton"]);
+function sailfishSourcePlugin(i) {
+  const { types: n } = i;
+  return { name: "sailfish-source", visitor: { JSXOpeningElement(i2, r) {
+    const { opts: s = {}, filename: o } = r, { allElements: a = false, rootDir: u = process.cwd() } = s;
+    if (!o) return;
+    const l = i2.node.name;
+    let c;
+    if (n.isJSXIdentifier(l)) c = l.name;
+    else {
+      if (!n.isJSXMemberExpression(l)) return;
+      c = n.isJSXIdentifier(l.property) ? l.property.name : "";
+    }
+    if (!a) {
+      const r2 = (function isInteractiveElement(i3, n2, r3) {
+        if (e.has(n2)) return true;
+        n2[0], n2[0].toLowerCase();
+        for (const e2 of i3.node.attributes) {
+          if (!r3.isJSXAttribute(e2) || !r3.isJSXIdentifier(e2.name)) continue;
+          const i4 = e2.name.name;
+          if ("onClick" === i4 || "onPress" === i4) return true;
+          if ("data-testid" === i4) return true;
+          if ("role" === i4 && r3.isStringLiteral(e2.value) && t.has(e2.value.value.toLowerCase())) return true;
+          if ("tabIndex" === i4) return true;
+          if ("href" === i4 || "to" === i4) return true;
+        }
+        return false;
+      })(i2, c, n);
+      if (!r2) return;
+    }
+    if (i2.node.attributes.some((e2) => n.isJSXAttribute(e2) && n.isJSXIdentifier(e2.name) && "data-sf-source" === e2.name.name)) return;
+    const f = i2.node.loc;
+    if (!f) return;
+    let d = o;
+    try {
+      d = (void 0)(u, o), d = d.replace(/\\/g, "/");
+    } catch {
+    }
+    const m = `${d}:${f.start.line}`, b = n.jsxAttribute(n.jsxIdentifier("data-sf-source"), n.stringLiteral(m));
+    i2.node.attributes.push(b);
+  } } };
+}
+exports.default = sailfishSourcePlugin, exports.sailfishSourcePlugin = sailfishSourcePlugin;

package/dist/babel-plugin-sailfish-source.js

@@ -0,0 +1,182 @@
+/**
+ * Babel Plugin: Sailfish Source Injection
+ *
+ * Injects data-sf-source attributes into JSX elements at compile time.
+ * This provides source file/line information for coverage analysis.
+ *
+ * Usage in babel.config.js:
+ *
+ *   const sailfishSourcePlugin = require('@anthropic/veritas/babel-plugin-sailfish-source');
+ *
+ *   module.exports = {
+ *     plugins: [
+ *       [sailfishSourcePlugin, {
+ *         // Options:
+ *         // - allElements: Add to all elements (default: false, only interactive)
+ *         // - rootDir: Strip this prefix from file paths (default: process.cwd())
+ *       }]
+ *     ]
+ *   };
+ *
+ * Or in vite.config.ts:
+ *
+ *   import sailfishSourcePlugin from '@anthropic/veritas/babel-plugin-sailfish-source';
+ *
+ *   export default defineConfig({
+ *     plugins: [
+ *       react({
+ *         babel: {
+ *           plugins: [sailfishSourcePlugin]
+ *         }
+ *       })
+ *     ]
+ *   });
+ */
+import * as path from "path";
+// Interactive element tag names that get source info by default
+const INTERACTIVE_TAGS = new Set([
+    "button",
+    "a",
+    "input",
+    "select",
+    "textarea",
+    "details",
+    "summary",
+    // Also include common component patterns
+    "Button",
+    "Link",
+    "Input",
+    "Select",
+    "Checkbox",
+    "Radio",
+    "Switch",
+    "Tab",
+    "MenuItem",
+    "IconButton",
+    "TextField",
+    "TextArea",
+]);
+// Interactive role values
+const INTERACTIVE_ROLES = new Set([
+    "button",
+    "link",
+    "checkbox",
+    "radio",
+    "switch",
+    "tab",
+    "menuitem",
+    "option",
+    "combobox",
+    "textbox",
+    "searchbox",
+    "slider",
+    "spinbutton",
+]);
+export default function sailfishSourcePlugin(babel) {
+    const { types: t } = babel;
+    return {
+        name: "sailfish-source",
+        visitor: {
+            JSXOpeningElement(nodePath, state) {
+                const { opts = {}, filename } = state;
+                const { allElements = false, rootDir = process.cwd() } = opts;
+                // Skip if no filename available
+                if (!filename) {
+                    return;
+                }
+                // Get element name
+                const nameNode = nodePath.node.name;
+                let tagName;
+                if (t.isJSXIdentifier(nameNode)) {
+                    tagName = nameNode.name;
+                }
+                else if (t.isJSXMemberExpression(nameNode)) {
+                    // e.g., MUI.Button -> Button
+                    tagName = t.isJSXIdentifier(nameNode.property)
+                        ? nameNode.property.name
+                        : "";
+                }
+                else {
+                    return;
+                }
+                // Check if element should get source info
+                if (!allElements) {
+                    const isInteractive = isInteractiveElement(nodePath, tagName, t);
+                    if (!isInteractive) {
+                        return;
+                    }
+                }
+                // Check if already has data-sf-source
+                const hasSourceAttr = nodePath.node.attributes.some((attr) => t.isJSXAttribute(attr) &&
+                    t.isJSXIdentifier(attr.name) &&
+                    attr.name.name === "data-sf-source");
+                if (hasSourceAttr) {
+                    return;
+                }
+                // Get source location
+                const loc = nodePath.node.loc;
+                if (!loc) {
+                    return;
+                }
+                // Create relative file path
+                let relativePath = filename;
+                try {
+                    relativePath = path.relative(rootDir, filename);
+                    // Normalize to forward slashes
+                    relativePath = relativePath.replace(/\\/g, "/");
+                }
+                catch {
+                    // Keep absolute path if relative fails
+                }
+                // Create source string: "file:line"
+                const sourceValue = `${relativePath}:${loc.start.line}`;
+                // Add data-sf-source attribute
+                const sourceAttr = t.jsxAttribute(t.jsxIdentifier("data-sf-source"), t.stringLiteral(sourceValue));
+                nodePath.node.attributes.push(sourceAttr);
+            },
+        },
+    };
+}
+/**
+ * Check if element is interactive based on tag name, attributes, or role.
+ */
+function isInteractiveElement(nodePath, tagName, t) {
+    // Check tag name
+    if (INTERACTIVE_TAGS.has(tagName)) {
+        return true;
+    }
+    // Check for lowercase tags (HTML elements)
+    const isLowerCase = tagName[0] === tagName[0].toLowerCase();
+    // Check attributes
+    for (const attr of nodePath.node.attributes) {
+        if (!t.isJSXAttribute(attr) || !t.isJSXIdentifier(attr.name)) {
+            continue;
+        }
+        const attrName = attr.name.name;
+        // Has onClick handler
+        if (attrName === "onClick" || attrName === "onPress") {
+            return true;
+        }
+        // Has data-testid (likely important for testing)
+        if (attrName === "data-testid") {
+            return true;
+        }
+        // Has role attribute with interactive value
+        if (attrName === "role" && t.isStringLiteral(attr.value)) {
+            if (INTERACTIVE_ROLES.has(attr.value.value.toLowerCase())) {
+                return true;
+            }
+        }
+        // Has tabIndex (focusable)
+        if (attrName === "tabIndex") {
+            return true;
+        }
+        // Has href (link-like)
+        if (attrName === "href" || attrName === "to") {
+            return true;
+        }
+    }
+    return false;
+}
+// Also export as named export for ESM
+export { sailfishSourcePlugin };

package/dist/fiberHook.js

@@ -0,0 +1,319 @@
+/**
+ * React Fiber Hook Implementation
+ *
+ * Hooks into React's internals using the same mechanism as React DevTools.
+ * Adds data-sf-component attributes to DOM elements for coverage correlation.
+ * These attributes are captured by rrweb and extracted during on-demand analysis.
+ *
+ * NOTE: React 19 removed _debugSource, so we use _debugOwner to get component names.
+ * Source file/line information is no longer available directly from fibers.
+ */
+import { FiberTag } from "./fiberTypes";
+// Debug flag - enable for troubleshooting
+const DEBUG = false;
+// Track elements we've already annotated to avoid re-processing
+const annotatedElements = new WeakSet();
+// Flag to track if hook is installed
+let hookInstalled = false;
+// Store reference to our handler for chaining
+let ourCommitHandler = null;
+let originalCommitHandler = null;
+// Check if we're in development mode
+const IS_DEV = process.env.NODE_ENV !== "production";
+/**
+ * Get the display name for a component from its Fiber.
+ */
+function getDisplayName(fiber) {
+    const type = fiber.type;
+    if (!type) {
+        return "";
+    }
+    // Function or class component
+    if (typeof type === "function") {
+        return type.displayName || type.name || "";
+    }
+    // ForwardRef
+    if (typeof type === "object" && type !== null) {
+        if (type.$$typeof) {
+            // React.forwardRef
+            if (type.render) {
+                return type.render.displayName || type.render.name || "";
+            }
+            // React.memo
+            if (type.type) {
+                return getDisplayNameFromType(type.type);
+            }
+        }
+    }
+    // Host component (DOM element) - don't return tag name
+    if (typeof type === "string") {
+        return "";
+    }
+    return "";
+}
+/**
+ * Helper to get display name from a type object.
+ */
+function getDisplayNameFromType(type) {
+    if (typeof type === "function") {
+        return type.displayName || type.name || "";
+    }
+    return "";
+}
+/**
+ * Get component names from _debugOwner chain.
+ * Returns array from nearest owner to root (e.g., ["Button", "Sidebar", "App"])
+ */
+function getOwnerChain(fiber) {
+    const owners = [];
+    let owner = fiber?._debugOwner;
+    while (owner) {
+        const name = getDisplayName(owner);
+        if (name && !owners.includes(name)) {
+            owners.push(name);
+        }
+        owner = owner._debugOwner;
+    }
+    return owners;
+}
+/**
+ * Find the nearest named component by walking up _debugOwner chain.
+ */
+function findNearestComponentName(fiber) {
+    // First check the fiber itself
+    const selfName = fiber ? getDisplayName(fiber) : "";
+    if (selfName) {
+        return selfName;
+    }
+    // Then check _debugOwner chain
+    let owner = fiber?._debugOwner;
+    while (owner) {
+        const name = getDisplayName(owner);
+        if (name) {
+            return name;
+        }
+        owner = owner._debugOwner;
+    }
+    return null;
+}
+/**
+ * Get the React Fiber node attached to a DOM element.
+ */
+function getFiberFromElement(element) {
+    const keys = Object.keys(element);
+    // React 18+ uses __reactFiber$
+    const fiberKey = keys.find((key) => key.startsWith("__reactFiber$"));
+    if (fiberKey) {
+        return element[fiberKey];
+    }
+    // Older React versions use __reactInternalInstance$
+    const internalKey = keys.find((key) => key.startsWith("__reactInternalInstance$"));
+    if (internalKey) {
+        return element[internalKey];
+    }
+    return null;
+}
+/**
+ * Add component attributes to a DOM element.
+ *
+ * Attributes added:
+ * - data-sf-component: Nearest owner component name (e.g., "Button")
+ * - data-sf-owners: Full owner chain (e.g., "Button,Sidebar,App")
+ */
+function annotateElement(element, fiber) {
+    if (annotatedElements.has(element)) {
+        return false;
+    }
+    // Get component name from owner chain
+    const componentName = findNearestComponentName(fiber);
+    if (!componentName) {
+        return false;
+    }
+    // Get full owner chain for more context
+    const ownerChain = getOwnerChain(fiber);
+    try {
+        // Add component name
+        element.setAttribute("data-sf-component", componentName);
+        // Add owner chain if we have multiple owners
+        if (ownerChain.length > 0) {
+            element.setAttribute("data-sf-owners", ownerChain.join(","));
+        }
+        annotatedElements.add(element);
+        if (DEBUG) {
+            console.log(`[Sailfish Fiber] Annotated ${element.tagName} with component: ${componentName}, owners: ${ownerChain.join(" > ")}`);
+        }
+        return true;
+    }
+    catch (e) {
+        // Ignore errors (e.g., SVG elements may not support setAttribute)
+        return false;
+    }
+}
+/**
+ * Process a single DOM element - find its fiber and add component attributes.
+ */
+function processElement(element) {
+    if (annotatedElements.has(element)) {
+        return false;
+    }
+    const fiber = getFiberFromElement(element);
+    if (!fiber) {
+        return false;
+    }
+    return annotateElement(element, fiber);
+}
+/**
+ * Process all DOM elements in a fiber's subtree.
+ */
+function processFiberDOM(fiber) {
+    let count = 0;
+    // If this fiber has a direct DOM node
+    if (fiber.tag === FiberTag.HostComponent &&
+        fiber.stateNode instanceof HTMLElement) {
+        if (annotateElement(fiber.stateNode, fiber)) {
+            count++;
+        }
+    }
+    // Process children
+    let child = fiber.child;
+    while (child) {
+        count += processFiberDOM(child);
+        child = child.sibling;
+    }
+    return count;
+}
+/**
+ * Process a commit, adding component attributes to DOM elements.
+ */
+function processCommit(root) {
+    let processedCount = 0;
+    try {
+        const currentFiber = root.current;
+        if (!currentFiber) {
+            return;
+        }
+        processedCount = processFiberDOM(currentFiber);
+    }
+    catch (error) {
+        // Never break React - log and continue
+        console.warn("[Sailfish] Error processing fiber commit:", error);
+        return;
+    }
+    if (DEBUG && processedCount > 0) {
+        console.log(`[Sailfish Fiber] Commit processed: ${processedCount} elements annotated`);
+    }
+}
+/**
+ * Create our commit handler that processes commits and chains to original.
+ */
+function createCommitHandler(existingHook) {
+    return function onCommitFiberRoot(rendererID, root, priorityLevel) {
+        try {
+            processCommit(root);
+        }
+        catch (error) {
+            console.warn("[Sailfish] Error in onCommitFiberRoot:", error);
+        }
+        // Call original if it exists
+        if (originalCommitHandler) {
+            try {
+                originalCommitHandler.call(existingHook, rendererID, root, priorityLevel);
+            }
+            catch (error) {
+                console.warn("[Sailfish] Error calling original onCommitFiberRoot:", error);
+            }
+        }
+    };
+}
+/**
+ * Install the Fiber hook.
+ *
+ * NOTE: For best results, this should be called BEFORE React loads.
+ * If React has already loaded, call processExistingTree() after.
+ *
+ * @returns true if hook was installed, false if already installed or failed
+ */
+export function installFiberHook() {
+    if (hookInstalled) {
+        return false;
+    }
+    if (typeof window === "undefined") {
+        return false;
+    }
+    try {
+        const existingHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+        if (existingHook) {
+            // Save original commit handler
+            originalCommitHandler =
+                existingHook.onCommitFiberRoot?.bind(existingHook) || null;
+            // Create our handler
+            ourCommitHandler = createCommitHandler(existingHook);
+            // Replace handler on the existing hook
+            try {
+                existingHook.onCommitFiberRoot = ourCommitHandler;
+            }
+            catch (e) {
+                console.error("[Sailfish Fiber] Failed to replace handler:", e);
+            }
+            console.log("[Sailfish] React Fiber hook installed (chained with existing)");
+        }
+        else {
+            // Create our handler
+            ourCommitHandler = createCommitHandler(null);
+            // Install our hook
+            window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
+                supportsFiber: true,
+                renderers: new Map(),
+                inject(renderer) {
+                    const id = this.renderers.size + 1;
+                    this.renderers.set(id, renderer);
+                    return id;
+                },
+                onCommitFiberRoot: ourCommitHandler,
+            };
+            console.log("[Sailfish] React Fiber hook installed (fresh)");
+        }
+        hookInstalled = true;
+        return true;
+    }
+    catch (error) {
+        console.warn("[Sailfish] Failed to install fiber hook:", error);
+        return false;
+    }
+}
+/**
+ * Check if the fiber hook is installed.
+ */
+export function isFiberHookInstalled() {
+    return hookInstalled;
+}
+/**
+ * Force process the current React tree by walking the DOM.
+ * Call this after React has mounted to capture the initial tree.
+ */
+export function processExistingTree() {
+    if (typeof window === "undefined")
+        return;
+    if (!IS_DEV)
+        return;
+    let processedCount = 0;
+    let totalElements = 0;
+    try {
+        // Walk all elements in the document
+        const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, null);
+        let node = walker.currentNode;
+        while (node) {
+            totalElements++;
+            if (node instanceof HTMLElement) {
+                if (processElement(node)) {
+                    processedCount++;
+                }
+            }
+            node = walker.nextNode();
+        }
+    }
+    catch (error) {
+        console.warn("[Sailfish Fiber] Error processing existing tree:", error);
+    }
+    console.log(`[Sailfish Fiber] Processed existing tree: ${processedCount} elements annotated out of ${totalElements} elements`);
+}

package/dist/fiberTypes.js

@@ -0,0 +1,25 @@
+/**
+ * React Fiber types for component visibility tracking.
+ * These interfaces represent the minimal subset of React's internal Fiber structure
+ * needed for instrumentation without coupling to React's implementation details.
+ */
+// React Fiber work tags (subset we care about)
+export const FiberTag = {
+    FunctionComponent: 0,
+    ClassComponent: 1,
+    IndeterminateComponent: 2,
+    HostRoot: 3,
+    HostPortal: 4,
+    HostComponent: 5,
+    HostText: 6,
+    Fragment: 7,
+    Mode: 8,
+    ContextConsumer: 9,
+    ContextProvider: 10,
+    ForwardRef: 11,
+    Profiler: 12,
+    SuspenseComponent: 13,
+    MemoComponent: 14,
+    SimpleMemoComponent: 15,
+    LazyComponent: 16,
+};

package/dist/index.js

@@ -39,6 +39,8 @@ const INCLUDE = "include";
 const SAME_ORIGIN = "same-origin";
 const ALLOWED_HEADERS_HEADER = "access-control-allow-headers";
 const OPTIONS = "OPTIONS";
+const AUTHORIZATION_HEADER_KEY_LOWER = "authorization";
+const AUTHORIZATION_HEADER_KEY = "Authorization";
 const ActionType = {
     PROPAGATE: "propagate",
     IGNORE: "ignore",
@@ -54,6 +56,7 @@ export const DEFAULT_CAPTURE_SETTINGS = {
     recordSsn: false,
     recordDob: false,
     sampling: {},
+    enableFiberTracking: true,
 };
 export const DEFAULT_CONSOLE_RECORDING_SETTINGS = {
     level: ["info", "log", "warn", "error"],
@@ -83,6 +86,41 @@ export const DEFAULT_CONSOLE_RECORDING_SETTINGS = {
 //   recordBody: true,
 //   recordInitialRequests: false,
 // };
+function maskAuthorizationHeader(requestHeaders) {
+    const authKey = requestHeaders[AUTHORIZATION_HEADER_KEY_LOWER]
+        ? AUTHORIZATION_HEADER_KEY_LOWER
+        : requestHeaders[AUTHORIZATION_HEADER_KEY]
+            ? AUTHORIZATION_HEADER_KEY
+            : null;
+    if (!authKey) {
+        return;
+    }
+    const authValue = requestHeaders[authKey];
+    const spaceIndex = authValue.indexOf(" ");
+    if (spaceIndex !== -1) {
+        const scheme = authValue.slice(0, spaceIndex + 1); // "Bearer "
+        const token = authValue.slice(spaceIndex + 1);
+        if (token.length > 8) {
+            requestHeaders[authKey] =
+                scheme +
+                    token.slice(0, 4) +
+                    "*".repeat(token.length - 8) +
+                    token.slice(-4);
+        }
+        else {
+            requestHeaders[authKey] = scheme + "*".repeat(token.length);
+        }
+    }
+    else if (authValue.length > 8) {
+        requestHeaders[authKey] =
+            authValue.slice(0, 4) +
+                "*".repeat(authValue.length - 8) +
+                authValue.slice(-4);
+    }
+    else {
+        requestHeaders[authKey] = "*".repeat(authValue.length);
+    }
+}
 function trackDomainChangesOnce() {
     const g = (window.__sailfish_recorder ||= {});
     if (g.routeWatcherIntervalId) {
@@ -403,12 +441,11 @@ function setupXMLHttpRequestInterceptor(domainsToNotPropagateHeaderTo = []) {
         const startTime = Date.now();
         let finished = false;
         const requestBody = args[0]; // Capture the request body/payload
-        const requestHeaders = { ...this._capturedRequestHeaders }; // Capture request headers
-        // Filter out internal Sailfish headers from the captured headers
-        delete requestHeaders[xSf3RidHeader];
-        if (funcSpanHeader) {
-            delete requestHeaders[funcSpanHeader.name];
-        }
+        // Note: _capturedRequestHeaders already includes x-sf3-rid and funcSpan headers
+        // because setRequestHeader() above goes through our intercepted version
+        const requestHeaders = { ...this._capturedRequestHeaders };
+        // Mask authorization header for privacy (preserve scheme like "Bearer", mask the token)
+        maskAuthorizationHeader(requestHeaders);
         // 4️⃣ Helper to emit networkRequestFinished
         const emitFinished = (success, status, errorMsg, responseData, responseHeaders) => {
             if (finished)
@@ -576,20 +613,28 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo = []) {
                 console.warn("[Sailfish] Failed to capture request data:", e);
             }
         }
-        // Filter out internal Sailfish headers from captured headers
+        // Remove any existing Sailfish headers (in case app already set them)
         delete requestHeaders[xSf3RidHeader];
-        const funcSpanHeaderName = getFuncSpanHeader()?.name;
-        if (funcSpanHeaderName) {
-            delete requestHeaders[funcSpanHeaderName];
+        const funcSpanHeader = getFuncSpanHeader();
+        if (funcSpanHeader) {
+            delete requestHeaders[funcSpanHeader.name];
+        }
+        // Add Sailfish headers with correct values
+        const xSf3RidValue = `${sessionId}/${urlAndStoredUuids.page_visit_uuid}/${networkUUID}`;
+        requestHeaders[xSf3RidHeader] = xSf3RidValue;
+        if (funcSpanHeader) {
+            requestHeaders[funcSpanHeader.name] = funcSpanHeader.value;
         }
+        // Mask authorization header for privacy (preserve scheme like "Bearer", mask the token)
+        maskAuthorizationHeader(requestHeaders);
         try {
             let response = await injectHeader(target, thisArg, input, init, sessionId, urlAndStoredUuids.page_visit_uuid, networkUUID);
             let isRetry = false;
             // Retry logic for 400/403 before logging finished event
             if (BAD_HTTP_STATUS.includes(response.status)) {
                 DEBUG && console.log("Perform retry as status was fail:", response);
-                // Generate a NEW UUID for the retry request so each request has a unique ID
-                networkUUID = uuidv4();
+                // Remove x-sf3-rid from captured headers since retry doesn't include it
+                delete requestHeaders[xSf3RidHeader];
                 response = await retryWithoutPropagateHeaders(target, thisArg, args, url);
                 isRetry = true;
             }