@sailfish-ai/recorder 1.7.46 → 1.7.49

package/dist/inAppReportIssueModal.js

@@ -15,6 +15,7 @@ export const ReportIssueContext = {
     apiKey: null,
     backendApi: null,
     triageBaseUrl: "https://app.sailfishqa.com",
+    deactivateIsolation: () => { },
 };
 let modalEl = null;
 let currentState = {
@@ -94,6 +95,8 @@ export function setupIssueReporting(options) {
     ReportIssueContext.apiKey = options.apiKey;
     ReportIssueContext.backendApi = options.backendApi;
     ReportIssueContext.resolveSessionId = options.getSessionId;
+    if (options.customBaseUrl)
+        ReportIssueContext.triageBaseUrl = options.customBaseUrl;
     ReportIssueContext.shortcuts = mergeShortcutsConfig(options.shortcuts);
     const { shortcuts } = ReportIssueContext;
     window.addEventListener("keydown", (e) => {
@@ -165,7 +168,7 @@ function getSessionIdSafely() {
     }
     return ReportIssueContext.resolveSessionId();
 }
-export function openReportIssueModal(customBaseUrl) {
+export function openReportIssueModal() {
     if (isRecording) {
         stopRecording();
         return;
@@ -173,11 +176,9 @@ export function openReportIssueModal(customBaseUrl) {
     injectModalHTML();
     if (modalEl)
         document.body.appendChild(modalEl);
-    // Store custom base URL globally for reuse
-    ReportIssueContext.triageBaseUrl =
-        customBaseUrl ?? "https://app.sailfishqa.com";
 }
 function closeModal() {
+    ReportIssueContext.deactivateIsolation();
     // ✅ Explicitly blur the focused element
     if (document.activeElement instanceof HTMLElement) {
         document.activeElement.blur();
@@ -198,6 +199,174 @@ function closeModal() {
     if (timerInterval)
         clearInterval(timerInterval);
 }
+function activateModalIsolation(modal) {
+    // A. Ensure modal is a proper dialog & focus anchor
+    modal.setAttribute("role", "dialog");
+    modal.setAttribute("aria-modal", "true");
+    if (!modal.hasAttribute("tabindex"))
+        modal.setAttribute("tabindex", "-1");
+    // What element we want to keep focused
+    const focusEl = modal.querySelector("#sf-issue-description") ||
+        modal.querySelector("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])") ||
+        modal;
+    // Put sentinels to keep Tab inside
+    const startSentinel = document.createElement("div");
+    const endSentinel = document.createElement("div");
+    startSentinel.tabIndex = 0;
+    endSentinel.tabIndex = 0;
+    startSentinel.style.position = endSentinel.style.position = "fixed"; // not visible
+    startSentinel.style.width = endSentinel.style.width = "1px";
+    startSentinel.style.height = endSentinel.style.height = "1px";
+    startSentinel.style.outline = endSentinel.style.outline = "none";
+    modal.prepend(startSentinel);
+    modal.append(endSentinel);
+    const getFocusable = () => Array.from(modal.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])")).filter((el) => !el.hasAttribute("disabled") && el.offsetParent !== null);
+    const cycleFocus = (forward) => {
+        const list = getFocusable();
+        if (list.length === 0)
+            return;
+        const target = forward ? list[0] : list[list.length - 1];
+        target.focus({ preventScroll: true });
+    };
+    startSentinel.addEventListener("focus", () => cycleFocus(false));
+    endSentinel.addEventListener("focus", () => cycleFocus(true));
+    // B. Event quarantine: block interactions outside modal
+    const quarantine = (e) => {
+        const t = e.target;
+        if (!t)
+            return;
+        if (!modal.contains(t)) {
+            // Stop any event that could lead to focus shift or interaction
+            e.stopImmediatePropagation();
+            e.preventDefault();
+            // Snap focus back inside immediately
+            refocus();
+        }
+    };
+    // We capture broadly to beat most libs
+    const quarantineEvents = [
+        "mousedown",
+        "mouseup",
+        "click",
+        "pointerdown",
+        "pointerup",
+        "touchstart",
+        "touchend",
+        "wheel",
+        "keydown",
+        "keyup",
+        "focus",
+        "focusin",
+        "focusout",
+        "blur",
+    ];
+    quarantineEvents.forEach((type) => document.addEventListener(type, quarantine, true));
+    // C. Focus watchdog: if *anything* steals focus (even iframes), snap back.
+    let rafId = 0;
+    let lastSelection = null;
+    const textarea = focusEl instanceof HTMLTextAreaElement ? focusEl : null;
+    // Track caret to restore it when we yank focus back
+    const trackCaret = () => {
+        if (textarea && document.activeElement === textarea) {
+            try {
+                lastSelection = {
+                    start: textarea.selectionStart ?? textarea.value.length,
+                    end: textarea.selectionEnd ?? textarea.value.length,
+                };
+            }
+            catch {
+                // ignore
+            }
+        }
+    };
+    const refocus = () => {
+        const target = modal.querySelector(":focus") ||
+            textarea ||
+            focusEl ||
+            modal;
+        // Put focus back
+        target.focus({ preventScroll: true });
+        // Restore caret if possible
+        if (textarea && document.activeElement === textarea && lastSelection) {
+            try {
+                textarea.setSelectionRange(lastSelection.start, lastSelection.end, "none");
+            }
+            catch {
+                // ignore
+            }
+        }
+    };
+    // NEW: selection-aware helper (don’t refocus if selection lives inside modal)
+    const selectionInsideModal = () => {
+        const sel = typeof document.getSelection === "function"
+            ? document.getSelection()
+            : null;
+        if (!sel)
+            return false;
+        // check anchor/focus nodes first
+        const nodes = [sel.anchorNode, sel.focusNode].filter(Boolean);
+        if (nodes.some((n) => modal.contains(n)))
+            return true;
+        // fallback to range container if available
+        if (sel.rangeCount > 0) {
+            const container = sel.getRangeAt(0).commonAncestorContainer;
+            if (container &&
+                modal.contains(container.nodeType === 3 ? container.parentNode : container)) {
+                return true;
+            }
+        }
+        return false;
+    };
+    // NEW: tiny hysteresis to ignore transient focus blips
+    const ESCAPED_FRAMES_THRESHOLD = 2;
+    let escapedFrames = 0;
+    const watchdog = () => {
+        const ae = document.activeElement;
+        const escaped = ae === document.body || ae == null || !modal.contains(ae);
+        const selectingInside = selectionInsideModal();
+        if (escaped && !selectingInside) {
+            escapedFrames += 1;
+            if (escapedFrames >= ESCAPED_FRAMES_THRESHOLD) {
+                refocus();
+                escapedFrames = 0;
+            }
+        }
+        else {
+            escapedFrames = 0;
+            trackCaret();
+        }
+        rafId = window.requestAnimationFrame(watchdog);
+    };
+    rafId = window.requestAnimationFrame(watchdog);
+    // Also bounce on immediate blur/focusout — but skip if selection is inside modal
+    const onBlurLike = () => {
+        // Let the blur settle, then snap back if truly escaped
+        setTimeout(() => {
+            const ae = document.activeElement;
+            const escaped = ae === document.body || ae == null || !modal.contains(ae);
+            if (escaped && !selectionInsideModal()) {
+                refocus();
+            }
+        }, 0);
+    };
+    window.addEventListener("blur", onBlurLike, true);
+    document.addEventListener("focusout", onBlurLike, true);
+    // Initial focus
+    setTimeout(() => focusEl.focus({ preventScroll: true }), 0);
+    // Cleanup
+    return () => {
+        try {
+            startSentinel.remove();
+            endSentinel.remove();
+        }
+        catch { }
+        quarantineEvents.forEach((type) => document.removeEventListener(type, quarantine, true));
+        window.removeEventListener("blur", onBlurLike, true);
+        document.removeEventListener("focusout", onBlurLike, true);
+        if (rafId)
+            cancelAnimationFrame(rafId);
+    };
+}
 function injectModalHTML(initialMode = "lookback") {
     if (modalEl) {
         modalEl.remove();
@@ -349,6 +518,7 @@ function injectModalHTML(initialMode = "lookback") {
     currentState.mode = initialMode;
     document.body.appendChild(modalEl);
     bindListeners();
+    ReportIssueContext.deactivateIsolation = activateModalIsolation(modalEl);
 }
 function setActiveTab(mode) {
     currentState.mode = mode;

package/dist/index.js

@@ -1,11 +1,4 @@
 const DEBUG = import.meta.env.VITE_DEBUG ? import.meta.env.VITE_DEBUG : false;
-// ── SSR guards ─────────────────────────────────────────
-const HAS_WINDOW = typeof globalThis !== "undefined" &&
-    typeof globalThis.window !== "undefined";
-const HAS_DOCUMENT = typeof globalThis !== "undefined" &&
-    typeof globalThis.document !== "undefined";
-const HAS_LOCAL_STORAGE = typeof globalThis !== "undefined" && "localStorage" in globalThis;
-const HAS_SESSION_STORAGE = typeof globalThis !== "undefined" && "sessionStorage" in globalThis;
 // import { NetworkRecordOptions } from "@sailfish-rrweb/rrweb-plugin-network-record";
 import { v4 as uuidv4 } from "uuid";
 import { NetworkRequestEventId, STATIC_EXTENSIONS, xSf3RidHeader, } from "./constants";
@@ -14,6 +7,8 @@ import { fetchCaptureSettings, sendDomainsToNotPropagateHeaderTo, startRecording
 import { setupIssueReporting } from "./inAppReportIssueModal";
 import { sendMapUuidIfAvailable } from "./mapUuid";
 import { getUrlAndStoredUuids, initializeConsolePlugin, initializeDomContentEvents, initializeRecording, } from "./recording";
+import { HAS_DOCUMENT, HAS_LOCAL_STORAGE, HAS_SESSION_STORAGE, HAS_WINDOW, } from "./runtimeEnv";
+import { getOrSetSessionId } from "./session";
 import { sendEvent, sendMessage } from "./websocket";
 // Default list of domains to ignore
 const DOMAINS_TO_NOT_PROPAGATE_HEADER_TO_DEFAULT = [
@@ -33,234 +28,12 @@ const BAD_HTTP_STATUS = [
 ];
 const CORS_KEYWORD = "CORS";
 export const STORAGE_VERSION = 1;
-export const DYNAMIC_PASSED_HOSTS_KEY = "dynamicPassedHosts";
-export const DYNAMIC_EXCLUDED_HOSTS_KEY = "dynamicExcludedHosts";
 const SF_API_KEY_FOR_UPDATE = "sailfishApiKey";
 const SF_BACKEND_API = "sailfishBackendApi";
 const INCLUDE = "include";
 const SAME_ORIGIN = "same-origin";
 const ALLOWED_HEADERS_HEADER = "access-control-allow-headers";
 const OPTIONS = "OPTIONS";
-export const dynamicExcludedHosts = new Set();
-export const dynamicPassedHosts = new Set();
-// 1️⃣ dynamicExcludedHosts.add override
-const originalExcludedAdd = dynamicExcludedHosts.add;
-dynamicExcludedHosts.add = (host) => {
-    const cleaned = host?.trim();
-    if (!cleaned || dynamicExcludedHosts.has(cleaned)) {
-        return dynamicExcludedHosts;
-    }
-    // 1. Add to the excluded Set
-    originalExcludedAdd.call(dynamicExcludedHosts, cleaned);
-    // 2. If it was previously in passed, remove it
-    if (dynamicPassedHosts.has(cleaned)) {
-        dynamicPassedHosts.delete(cleaned);
-    }
-    // 3. Consolidate dynamic exclusions into smart wildcards
-    const consolidated = consolidateDynamicExclusions(dynamicExcludedHosts);
-    dynamicExcludedHosts.clear();
-    for (const p of consolidated) {
-        originalExcludedAdd.call(dynamicExcludedHosts, p);
-    }
-    // 4. Persist wrapper to localStorage
-    try {
-        if (HAS_LOCAL_STORAGE) {
-            // TODO decouple into two logical pieces
-            const wrapper = {
-                version: STORAGE_VERSION,
-                entries: {},
-            };
-            const now = Date.now();
-            for (const p of dynamicExcludedHosts) {
-                wrapper.entries[p] = now;
-            }
-            localStorage.setItem(DYNAMIC_EXCLUDED_HOSTS_KEY, JSON.stringify(wrapper));
-        }
-    }
-    catch (e) {
-        if (DEBUG)
-            console.warn("Persist dynamicExcludedHosts failed:", e);
-    }
-    // 5. Notify backend of the updated Set
-    updateExcludedHostsStorageAndBackend(dynamicExcludedHosts);
-    return dynamicExcludedHosts;
-};
-// 2️⃣ dynamicPassedHosts.add override (timestamps refreshed on every call)
-const originalPassedAdd = dynamicPassedHosts.add;
-dynamicPassedHosts.add = (host) => {
-    const cleaned = host?.trim();
-    if (!cleaned) {
-        return dynamicPassedHosts;
-    }
-    // 1. Persist wrapper to localStorage (update timestamp unconditionally)
-    try {
-        if (HAS_LOCAL_STORAGE) {
-            // TODO decouple into two logical pieces
-            const raw = localStorage.getItem(DYNAMIC_PASSED_HOSTS_KEY);
-            let wrapper;
-            if (!raw) {
-                wrapper = { version: STORAGE_VERSION, entries: {} };
-            }
-            else {
-                const parsed = JSON.parse(raw);
-                if (Array.isArray(parsed)) {
-                    // migrate old array → wrapper
-                    wrapper = {
-                        version: STORAGE_VERSION,
-                        entries: Object.fromEntries(parsed.map((h) => [h, Date.now()])),
-                    };
-                }
-                else if (parsed &&
-                    typeof parsed === "object" &&
-                    "entries" in parsed &&
-                    typeof parsed.entries === "object") {
-                    wrapper = parsed;
-                }
-                else {
-                    wrapper = { version: STORAGE_VERSION, entries: {} };
-                }
-            }
-            // always set/update the timestamp
-            wrapper.entries[cleaned] = Date.now();
-            wrapper.version = STORAGE_VERSION;
-            localStorage.setItem(DYNAMIC_PASSED_HOSTS_KEY, JSON.stringify(wrapper));
-        }
-    }
-    catch (e) {
-        if (DEBUG)
-            console.warn("Persist dynamicPassedHosts failed:", e);
-    }
-    // 2. Add to the passed Set if not already present
-    if (!dynamicPassedHosts.has(cleaned)) {
-        originalPassedAdd.call(dynamicPassedHosts, cleaned);
-    }
-    return dynamicPassedHosts;
-};
-/**
- * Notify the backend of the updated dynamicExcludedHosts
- */
-function updateExcludedHostsStorageAndBackend(dynamicExcludedHosts) {
-    if (!HAS_SESSION_STORAGE)
-        return;
-    const apiKeyForUpdate = sessionStorage.getItem(SF_API_KEY_FOR_UPDATE) || "";
-    const apiForUpdate = sessionStorage.getItem(SF_BACKEND_API) || "";
-    if (!apiForUpdate) {
-        return;
-    }
-    sendDomainsToNotPropagateHeaderTo(apiKeyForUpdate, [...dynamicExcludedHosts, ...DOMAINS_TO_NOT_PROPAGATE_HEADER_TO_DEFAULT], apiForUpdate).catch((error) => console.error("Failed to send domains to not propagate header to:", error));
-}
-/**
- * Given a set of excluded hostPaths (like "foo.com/bar", "foo.com/baz", etc.),
- * find any path prefixes under each host that appear ≥ threshold times,
- * and replace their individual entries with a single wildcard pattern
- * (e.g. "foo.com/bar*").
- */
-export function consolidateDynamicExclusions(hostPathSet, threshold = 3) {
-    // 1️⃣ Group by host
-    const byHost = {};
-    for (const hostPath of hostPathSet) {
-        const [host, ...rest] = hostPath.split("/");
-        const path = rest.length ? `/${rest.join("/")}` : "/";
-        (byHost[host] ??= []).push(path);
-    }
-    const newSet = new Set();
-    for (const host in byHost) {
-        const paths = byHost[host];
-        if (paths.length < threshold) {
-            // not enough entries to bother; keep them as-is
-            for (const p of paths)
-                newSet.add(`${host}${p}`);
-            continue;
-        }
-        const root = { count: 0, children: new Map() };
-        for (const p of paths) {
-            root.count++;
-            const segments = p.split("/").filter(Boolean);
-            let node = root;
-            for (const seg of segments) {
-                if (!node.children.has(seg)) {
-                    node.children.set(seg, { count: 0, children: new Map() });
-                }
-                node = node.children.get(seg);
-                node.count++;
-            }
-        }
-        // 3️⃣ Walk the trie and pick prefixes where node.count ≥ threshold
-        function gather(node, prefixSegments) {
-            // if this node covers ≥ threshold of this host’s paths, collapse here
-            if (node.count >= threshold && prefixSegments.length > 0) {
-                const wildcardPath = "/" + prefixSegments.join("/") + "/*";
-                newSet.add(`${host}${wildcardPath}`);
-                return;
-            }
-            // otherwise, recurse into children
-            for (const [seg, child] of node.children) {
-                gather(child, prefixSegments.concat(seg));
-            }
-        }
-        gather(root, []);
-    }
-    return newSet;
-}
-// 2️⃣ Load & evict old entries (>7 days) + version check for Excluded
-if (HAS_LOCAL_STORAGE) {
-    (() => {
-        const stored = localStorage.getItem(DYNAMIC_EXCLUDED_HOSTS_KEY);
-        if (!stored)
-            return;
-        try {
-            const wrapper = JSON.parse(stored);
-            // if it's from an old version, drop it
-            if (wrapper.version !== STORAGE_VERSION) {
-                localStorage.removeItem(DYNAMIC_EXCLUDED_HOSTS_KEY);
-                return;
-            }
-            const now = Date.now();
-            const valid = {};
-            for (const [host, ts] of Object.entries(wrapper.entries)) {
-                if (now - ts < 7 * 24 * 60 * 60 * 1000) {
-                    dynamicExcludedHosts.add(host);
-                    valid[host] = ts;
-                }
-            }
-            localStorage.setItem(DYNAMIC_EXCLUDED_HOSTS_KEY, JSON.stringify({ version: STORAGE_VERSION, entries: valid }));
-        }
-        catch (e) {
-            if (DEBUG)
-                console.warn("Failed to parse dynamicExcludedHosts:", e);
-            localStorage.removeItem(DYNAMIC_EXCLUDED_HOSTS_KEY);
-        }
-    })();
-}
-// 3️⃣ Load & evict old entries (>7 days) + version check for Passed
-if (HAS_LOCAL_STORAGE) {
-    (() => {
-        const stored = localStorage.getItem(DYNAMIC_PASSED_HOSTS_KEY);
-        if (!stored)
-            return;
-        try {
-            const wrapper = JSON.parse(stored);
-            if (wrapper.version !== STORAGE_VERSION) {
-                localStorage.removeItem(DYNAMIC_PASSED_HOSTS_KEY);
-                return;
-            }
-            const now = Date.now();
-            const valid = {};
-            for (const [host, ts] of Object.entries(wrapper.entries)) {
-                if (now - ts < 7 * 24 * 60 * 60 * 1000) {
-                    dynamicPassedHosts.add(host);
-                    valid[host] = ts;
-                }
-            }
-            localStorage.setItem(DYNAMIC_PASSED_HOSTS_KEY, JSON.stringify({ version: STORAGE_VERSION, entries: valid }));
-        }
-        catch (e) {
-            if (DEBUG)
-                console.warn("Failed to parse dynamicPassedHosts:", e);
-            localStorage.removeItem(DYNAMIC_PASSED_HOSTS_KEY);
-        }
-    })();
-}
 const ActionType = {
     PROPAGATE: "propagate",
     IGNORE: "ignore",
@@ -323,7 +96,6 @@ function trackDomainChanges() {
                     timestamp,
                     page_visit_uuid: pageVisitUUID,
                     prev_page_visit_uuid: prevPageVisitUUID,
-                    session_id: getOrSetSessionId(),
                 },
             });
         }
@@ -384,16 +156,6 @@ function getOrSetUserDeviceUuid() {
     }
     return userDeviceUuid;
 }
-// Storing the sailfishSessionId in window.name, as window.name retains its value after a page refresh
-// but resets when a new tab (including a duplicated tab) is opened.
-function getOrSetSessionId() {
-    if (!HAS_WINDOW)
-        return uuidv4();
-    if (!window.name) {
-        window.name = uuidv4();
-    }
-    return window.name;
-}
 // Function to handle resetting the sessionId when the page becomes visible again
 function handleVisibilityChange() {
     if (document.visibilityState === "visible") {
@@ -655,7 +417,6 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo = []) {
             else {
                 return target.apply(thisArg, args);
             }
-            const domain = new URL(url, window.location.href).hostname;
             // 2️⃣ Skip header injection if excluded
             if (shouldSkipHeadersPropagation(url, domainsToNotPropagateHeadersTo)) {
                 return target.apply(thisArg, args);
@@ -761,7 +522,7 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo = []) {
             return await target.call(thisArg, input, modifiedInit);
         }
     }
-    // Helper to retry a fetch without the X-Sf3-Rid header if the initial attempt fails due to that header
+    // Helper to retry a fetch without the X-Sf3-Rid header when we receive 400/403 errors
     async function retryWithoutPropagateHeaders(target, thisArg, args, url) {
         try {
             // **Fix:** Properly await and clone the request without the tracing header
@@ -856,6 +617,10 @@ export async function startRecording({ apiKey, backendApi = "https://api-service
     trackDomainChanges();
     sessionStorage.setItem(SF_API_KEY_FOR_UPDATE, apiKey);
     sessionStorage.setItem(SF_BACKEND_API, backendApi);
+    sendDomainsToNotPropagateHeaderTo(apiKey, [
+        ...domainsToNotPropagateHeaderTo,
+        ...DOMAINS_TO_NOT_PROPAGATE_HEADER_TO_DEFAULT,
+    ], backendApi).catch((error) => console.error("Failed to send domains to not propagate header to:", error));
     // Setup interceptors with custom ignore and propagate domains
     setupXMLHttpRequestInterceptor(domainsToNotPropagateHeaderTo);
     setupFetchInterceptor(domainsToNotPropagateHeaderTo);
@@ -893,6 +658,7 @@ export const initRecorder = async (options) => {
             backendApi: options.backendApi ?? "https://api-service.sailfishqa.com",
             getSessionId: () => getOrSetSessionId(),
             shortcuts: options.reportIssueShortcuts,
+            customBaseUrl: options.customBaseUrl,
         });
     });
 };

package/dist/runtimeEnv.js

@@ -0,0 +1,7 @@
+// ── SSR guards ─────────────────────────────────────────
+export const HAS_WINDOW = typeof globalThis !== "undefined" &&
+    typeof globalThis.window !== "undefined";
+export const HAS_DOCUMENT = typeof globalThis !== "undefined" &&
+    typeof globalThis.document !== "undefined";
+export const HAS_LOCAL_STORAGE = typeof globalThis !== "undefined" && "localStorage" in globalThis;
+export const HAS_SESSION_STORAGE = typeof globalThis !== "undefined" && "sessionStorage" in globalThis;