@sailfish-ai/recorder 1.7.42 → 1.7.47

package/dist/constants.js

@@ -1,6 +1,7 @@
 export const DomContentEventId = 24;
 export const NetworkRequestEventId = 27;
 export const xSf3RidHeader = "X-Sf3-Rid";
+// Values for DomContentLoadedEvent
 export const DomContentSource = {
     loading: 0,
     contentLoaded: 1,
@@ -8,6 +9,7 @@ export const DomContentSource = {
     beforeunload: 3,
     unload: 4,
 };
+// Values for NetworkRequestEvent
 export const Loading = "loading";
 export const Complete = "complete";
 export const STATIC_EXTENSIONS = [

package/dist/exponentialBackoff.js

@@ -1,4 +1,5 @@
 const DEBUG = import.meta.env.VITE_DEBUG ? import.meta.env.VITE_DEBUG : false;
+// A wrapper around fetch that suppresses connection refused errors
 export function silentFetch(input, init) {
     return new Promise((resolve, reject) => {
         fetch(input, init)

package/dist/inAppReportIssueModal.js

@@ -1,4 +1,21 @@
 import { createTriageFromRecorder } from "./graphql";
+// TODO - enable configuration by keyboard typing in UI
+const DEFAULT_SHORTCUTS = {
+    enabled: false,
+    openModalExistingMode: { key: "e", requireCmdCtrl: false },
+    openModalCaptureNewMode: { key: "n", requireCmdCtrl: false },
+    closeModal: { key: "escape", requireCmdCtrl: false },
+    submitReport: { key: "enter", requireCmdCtrl: true },
+    startRecording: { key: "r", requireCmdCtrl: false },
+    stopRecording: { key: "escape", requireCmdCtrl: true },
+};
+export const ReportIssueContext = {
+    shortcuts: { ...DEFAULT_SHORTCUTS },
+    resolveSessionId: null,
+    apiKey: null,
+    backendApi: null,
+    triageBaseUrl: "https://app.sailfishqa.com",
+};
 let modalEl = null;
 let currentState = {
     mode: "lookback",
@@ -9,12 +26,6 @@ let recordingStartTime = null;
 let recordingEndTime = null;
 let timerInterval = null;
 let isRecording = false;
-export const ReportIssueContext = {
-    resolveSessionId: null,
-    apiKey: null,
-    backendApi: null,
-    triageBaseUrl: "https://app.sailfishqa.com",
-};
 function isMacPlatform() {
     // Newer API (Chrome, Edge, Opera)
     const uaData = navigator.userAgentData;
@@ -33,62 +44,118 @@ function isTypingInInput() {
         el instanceof HTMLTextAreaElement ||
         (el instanceof HTMLElement && el.isContentEditable));
 }
+function formatShortcutKeyLabel(key) {
+    const map = {
+        escape: "esc",
+    };
+    return (map[key.toLowerCase()] || key).toUpperCase();
+}
+function getShortcutLabel(config) {
+    const parts = [];
+    if (config.requireCmdCtrl) {
+        parts.push(getShortcutKeyCmdCtrlLabel());
+    }
+    parts.push(formatShortcutKeyLabel(config.key));
+    return parts
+        .map((p) => `<span style="background: #F1F5F9; border:1px solid #cbd5e1; border-radius: 4px; padding: 0 4px; font-weight: 500; font-size: 12px; color: #94A3B8; line-height: 16px;">${p}</span>`)
+        .join(config.requireCmdCtrl ? " + " : "");
+}
+function mergeShortcutsConfig(userConfig) {
+    const merged = { ...DEFAULT_SHORTCUTS };
+    if (!userConfig)
+        return merged;
+    // Handle boolean key separately
+    if (typeof userConfig.enabled === "boolean") {
+        merged.enabled = userConfig.enabled;
+    }
+    // Handle object keys explicitly
+    const objectKeys = [
+        "openModalExistingMode",
+        "openModalCaptureNewMode",
+        "closeModal",
+        "submitReport",
+        "startRecording",
+        "stopRecording",
+    ];
+    for (const k of objectKeys) {
+        const val = userConfig[k];
+        if (val && typeof val === "object") {
+            merged[k] = { ...merged[k], ...val };
+            merged[k].key = merged[k].key.toLowerCase();
+        }
+    }
+    return merged;
+}
+function getShortcutLabelFromContext(shortcutKey) {
+    const config = ReportIssueContext.shortcuts[shortcutKey];
+    return getShortcutLabel(config);
+}
 export function setupIssueReporting(options) {
     ReportIssueContext.apiKey = options.apiKey;
     ReportIssueContext.backendApi = options.backendApi;
     ReportIssueContext.resolveSessionId = options.getSessionId;
-    // Attach keyboard shortcuts
+    ReportIssueContext.shortcuts = mergeShortcutsConfig(options.shortcuts);
+    const { shortcuts } = ReportIssueContext;
     window.addEventListener("keydown", (e) => {
         const typingInInput = isTypingInInput();
         const key = e.key.toLowerCase();
         const isCmdOrCtrl = e.metaKey || e.ctrlKey;
-        // Shortcuts for modal open
-        if (!typingInInput && options.enableShortcuts && !isCmdOrCtrl) {
-            if (key === "e") {
-                e.preventDefault();
-                injectModalHTML("lookback");
-                return;
-            }
-            if (key === "n") {
-                e.preventDefault();
-                injectModalHTML("startnow");
-                return;
+        const modalOpen = !!document.getElementById("sf-report-issue-modal");
+        const enableModeShortcuts = !typingInInput && (shortcuts.enabled || modalOpen);
+        const shortcutUsed = (shortcutKey) => key === shortcuts[shortcutKey].key &&
+            isCmdOrCtrl === shortcuts[shortcutKey].requireCmdCtrl;
+        const openModal = modalOpen
+            ? (mode) => {
+                setActiveTab(mode);
+                updateModeSpecificUI(mode);
             }
+            : injectModalHTML;
+        // --- Open modal OR switch mode ---
+        if (enableModeShortcuts && shortcutUsed("openModalExistingMode")) {
+            e.preventDefault();
+            openModal("lookback");
+            return;
         }
-        // Inside modal actions
-        const modalOpen = !!document.getElementById("sf-report-issue-modal");
-        if (!modalOpen && !isRecording)
+        if (enableModeShortcuts && shortcutUsed("openModalCaptureNewMode")) {
+            e.preventDefault();
+            openModal("startnow");
             return;
-        // Escape key → close modal (only if not recording and modal is open)
-        if (!isCmdOrCtrl && key === "escape" && modalOpen && !isRecording) {
+        }
+        // --- Close modal ---
+        if (modalOpen && !isRecording && shortcutUsed("closeModal")) {
             e.preventDefault();
             closeModal();
             return;
         }
-        // Cmd/Ctrl + Enter → submit
-        if (isCmdOrCtrl && key === "enter" && modalOpen) {
+        // --- Submit report ---
+        if (modalOpen && shortcutUsed("submitReport")) {
             const submitBtn = document.getElementById("sf-issue-submit-btn");
             if (submitBtn && !submitBtn.disabled) {
                 e.preventDefault();
                 submitBtn.click();
             }
+            return;
         }
-        // Cmd/Ctrl + Esc → stop recording
-        if (isCmdOrCtrl && key === "escape" && isRecording) {
+        // --- Stop recording ---
+        if (isRecording &&
+            key === shortcuts.stopRecording.key &&
+            isCmdOrCtrl === shortcuts.stopRecording.requireCmdCtrl) {
             e.preventDefault();
             stopRecording();
+            return;
         }
-        // "r" to start recording (only in capture-new mode)
-        if (!typingInInput &&
-            !isCmdOrCtrl &&
-            key === "r" &&
-            modalOpen &&
-            currentState.mode === "startnow") {
+        // --- Start recording ---
+        if (modalOpen &&
+            currentState.mode === "startnow" &&
+            key === shortcuts.startRecording.key &&
+            isCmdOrCtrl === shortcuts.startRecording.requireCmdCtrl &&
+            !typingInInput) {
             const recordBtn = document.getElementById("sf-start-recording-btn");
             if (recordBtn) {
                 e.preventDefault();
                 recordBtn.click();
             }
+            return;
         }
     });
 }
@@ -159,11 +226,11 @@ function injectModalHTML(initialMode = "lookback") {
       <div id="sf-issue-tabs" style="display:flex; gap:4px; margin-bottom:16px; background:#f1f5f9; padding:6px; border-radius:6px; width: fit-content;">
         <button id="sf-tab-lookback" data-mode="lookback" class="sf-issue-tab ${!isStartNow ? "active" : ""}"
           style="padding:6px 12px; border:none; background:${!isStartNow ? "white" : "transparent"}; color: ${!isStartNow ? "#0F172A" : "#64748B"}; border-radius:4px; font-size:14px; cursor:pointer; font-weight:500; height:32px; display: flex; align-items: center; gap: 8px;">
-          Existing <span style="background: #F1F5F9; border:1px solid #cbd5e1; border-radius: 4px; width: 16px; height: 16px; font-size: 12px; display: flex; align-items: center; justify-content: center; color: #94A3B8; font-weight: 500;">E</span>
+          Existing ${getShortcutLabelFromContext("openModalExistingMode")}
         </button>
         <button id="sf-tab-startnow" data-mode="startnow" class="sf-issue-tab ${isStartNow ? "active" : ""}"
           style="padding:6px 12px; border:none; background:${isStartNow ? "white" : "transparent"}; color: ${isStartNow ? "#0F172A" : "#64748B"}; border-radius:4px; font-size:14px; cursor:pointer; font-weight:500; height:32px; display: flex; align-items: center; gap: 8px;">
-          Capture new <span style="background: #F1F5F9; border:1px solid #cbd5e1; border-radius: 4px; width: 16px; height: 16px; font-size: 12px; display: flex; align-items: center; justify-content: center; color: #94A3B8; font-weight: 500;">N</span>
+          Capture new ${getShortcutLabelFromContext("openModalCaptureNewMode")}
         </button>
       </div>
 
@@ -189,7 +256,7 @@ function injectModalHTML(initialMode = "lookback") {
       <textarea id="sf-issue-description" placeholder="Add description here"
         style="width:100%; height:80px; padding:8px 12px; font-size:14px;
                border:1px solid #cbd5e1; border-radius:6px; margin-bottom:20px;
-               resize:none; outline:none;"></textarea>
+               resize:none; outline:none;">${currentState.description}</textarea>
 
       <div id="sf-lookback-container" style="display:${isStartNow ? "none" : "block"}; margin-bottom:20px;">
         <label for="sf-lookback-minutes" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
@@ -261,7 +328,7 @@ function injectModalHTML(initialMode = "lookback") {
               <div style="width: 14px; height: 14px; background: #fc5555; border-radius: 50%; border: 1px solid #991b1b;"></div>
             </div>
             <span>Start Recording</span>
-            <span style="background: #F1F5F9; border:1px solid #cbd5e1; border-radius: 4px; width: 16px; height: 16px; font-size: 12px; display: flex; align-items: center; justify-content: center; color: #94A3B8; font-weight: 500;">R</span>
+            ${getShortcutLabelFromContext("startRecording")}
           </button>
         </div>
 
@@ -270,9 +337,7 @@ function injectModalHTML(initialMode = "lookback") {
           border-radius:6px; font-size:14px; line-height: 24px; font-weight:500;
           cursor:${isStartNow ? "not-allowed" : "pointer"}; opacity:${isStartNow ? "0.4" : "1"}; margin-bottom:1px" ${isStartNow ? "disabled" : ""}>
           Report <span style="margin-left: 8px; display: inline-flex; align-items: center; gap: 4px; color: #94A3B8; font-size: 12px; line-height:16px;">
-                          <span style="background: #F1F5F9; border-radius: 4px; padding: 0 4px; font-weight: 500;">${getShortcutKeyCmdCtrlLabel()}</span>
-                          +
-                          <span style="background: #F1F5F9; border-radius: 4px; padding: 0 4px; font-weight: 500;">ENTER</span>
+                          ${getShortcutLabelFromContext("submitReport")}
                         </span>
         </button>
       </div>
@@ -487,9 +552,7 @@ function showFloatingTimer() {
     <div style="display:flex; align-items:center; gap:4px; margin-left:auto; font-size:14px; color:#0F172A;">
       <span style="color: #71717A;">stop</span>
       <span style="display: inline-flex; align-items: center; gap: 4px; color: #94A3B8; font-size: 12px; line-height:16px;">
-        <span style="background: #F1F5F9; border-radius: 4px; border:1px solid #cbd5e1; padding: 0 4px; font-weight: 500;">${getShortcutKeyCmdCtrlLabel()}</span>
-        +
-        <span style="background: #F1F5F9; border-radius: 4px; border:1px solid #cbd5e1; padding: 0 4px; font-weight: 500;">ESC</span>
+        ${getShortcutLabelFromContext("stopRecording")}
       </span>
     </div>
   `;

package/dist/index.js

@@ -323,6 +323,7 @@ function trackDomainChanges() {
                     timestamp,
                     page_visit_uuid: pageVisitUUID,
                     prev_page_visit_uuid: prevPageVisitUUID,
+                    session_id: getOrSetSessionId(),
                 },
             });
         }
@@ -535,11 +536,6 @@ function shouldSkipHeadersPropagation(url, domainsToNotPropagateHeaderTo = []) {
     if (matchUrlWithWildcard(url, combinedPatterns)) {
         return true;
     }
-    // 3️⃣ DYNAMIC-FAILURE EXCLUSION (exact host)
-    const hostname = urlObj.hostname;
-    if (dynamicExcludedHosts.has(hostname)) {
-        return true;
-    }
     return false;
 }
 // Updated XMLHttpRequest interceptor with domain exclusion
@@ -572,10 +568,6 @@ function setupXMLHttpRequestInterceptor(domainsToNotPropagateHeaderTo = []) {
         if (!url) {
             return originalSend.apply(this, args);
         }
-        // parse host+path for exclusion
-        const urlObj = new URL(url, window.location.href);
-        const domain = urlObj.hostname;
-        const hostPath = urlObj.pathname === "/" ? domain : `${domain}${urlObj.pathname}`;
         // 1️⃣ Skip injection for excluded domains/paths
         if (shouldSkipHeadersPropagation(url, domainsToNotPropagateHeaderTo)) {
             return originalSend.apply(this, args);
@@ -616,15 +608,6 @@ function setupXMLHttpRequestInterceptor(domainsToNotPropagateHeaderTo = []) {
                 },
                 ...getUrlAndStoredUuids(),
             });
-            // 5️⃣ Update dynamic sets
-            if (success) {
-                // once any route passes, skip preflight on entire domain
-                dynamicPassedHosts.add(domain);
-            }
-            else {
-                // only exclude the specific failing path
-                dynamicExcludedHosts.add(hostPath);
-            }
         };
         // 6️⃣ On successful load
         this.addEventListener("load", () => {
@@ -654,7 +637,6 @@ function setupXMLHttpRequestInterceptor(domainsToNotPropagateHeaderTo = []) {
 function setupFetchInterceptor(domainsToNotPropagateHeadersTo = []) {
     const originalFetch = window.fetch;
     const sessionId = getOrSetSessionId();
-    const cachedDomains = new Map();
     window.fetch = new Proxy(originalFetch, {
         apply: async (target, thisArg, args) => {
             let input = args[0];
@@ -688,9 +670,6 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo = []) {
         if (!sessionId) {
             return target.apply(thisArg, args);
         }
-        const urlObj = new URL(url, window.location.href);
-        const domain = urlObj.hostname;
-        const hostPath = urlObj.pathname === "/" ? domain : `${domain}${urlObj.pathname}`;
         const networkUUID = uuidv4();
         const urlAndStoredUuids = getUrlAndStoredUuids();
         const method = init.method || "GET";
@@ -708,13 +687,6 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo = []) {
             const status = response.status;
             const success = response.ok;
             const error = success ? "" : `Request Error: ${response.statusText}`;
-            // 5️⃣ Update dynamic sets
-            if (success) {
-                dynamicPassedHosts.add(domain);
-            }
-            else {
-                dynamicExcludedHosts.add(hostPath);
-            }
             // Emit 'networkRequestFinished' event
             const eventData = {
                 type: NetworkRequestEventId,
@@ -730,6 +702,7 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo = []) {
                     error,
                     method,
                     url,
+                    retry_without_trace_id: isRetry,
                 },
                 ...urlAndStoredUuids,
             };
@@ -744,11 +717,8 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo = []) {
             if (error instanceof TypeError &&
                 error?.message?.toLowerCase().includes(CORS_KEYWORD.toLowerCase())) {
                 // CORS/network failure: exclude just this path
-                dynamicExcludedHosts.add(hostPath);
                 return target.apply(thisArg, args);
             }
-            // On other errors, treat as “passed” so we don’t re-preflight
-            dynamicPassedHosts.add(domain);
             const eventData = {
                 type: NetworkRequestEventId,
                 timestamp: endTime,
@@ -793,7 +763,6 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo = []) {
     }
     // Helper to retry a fetch without the X-Sf3-Rid header if the initial attempt fails due to that header
     async function retryWithoutPropagateHeaders(target, thisArg, args, url) {
-        const domain = new URL(url).hostname;
         try {
             // **Fix:** Properly await and clone the request without the tracing header
             let input = args[0];
@@ -804,12 +773,6 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo = []) {
                 retryHeaders.delete(xSf3RidHeader);
                 retryInit.headers = retryHeaders;
                 const response = await target.call(thisArg, input, retryInit);
-                if (response.ok || !BAD_HTTP_STATUS.includes(response.status)) {
-                    dynamicExcludedHosts.add(domain);
-                    cachedDomains.set(domain, ActionType.IGNORE);
-                    DEBUG &&
-                        console.info(`Retried request to ${url} without ${xSf3RidHeader} succeeded. Added "${domain}" to exclusion list.`);
-                }
                 return response;
             }
             else if (input instanceof Request) {
@@ -819,12 +782,6 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo = []) {
                 retryHeaders.delete(xSf3RidHeader);
                 const retryReq = new Request(cloned, { headers: retryHeaders });
                 const response = await target.call(thisArg, retryReq, init);
-                if (response.ok || !BAD_HTTP_STATUS.includes(response.status)) {
-                    dynamicExcludedHosts.add(domain);
-                    cachedDomains.set(domain, ActionType.IGNORE);
-                    DEBUG &&
-                        console.info(`Retried request to ${url} without ${xSf3RidHeader} succeeded. Added "${domain}" to exclusion list.`);
-                }
                 return response;
             }
             else {
@@ -897,24 +854,6 @@ export async function startRecording({ apiKey, backendApi = "https://api-service
     initializeConsolePlugin(DEFAULT_CONSOLE_RECORDING_SETTINGS, sessionId);
     storeCredentialsAndConnection({ apiKey, backendApi });
     trackDomainChanges();
-    // ─── Merge stored excludes + passed-in excludes ───
-    const initialExcludes = new Set(dynamicExcludedHosts);
-    domainsToNotPropagateHeaderTo.forEach((host) => {
-        if (host?.trim()) {
-            dynamicExcludedHosts.add(host.trim());
-        }
-    });
-    const newlyExcluded = Array.from(dynamicExcludedHosts).filter((h) => !initialExcludes.has(h));
-    if (newlyExcluded.length) {
-        // single notify of the full updated list
-        updateExcludedHostsStorageAndBackend(dynamicExcludedHosts);
-    }
-    // ─── Merge passed hosts ───
-    domainsToPropagateHeaderTo.forEach((host) => {
-        if (host?.trim()) {
-            dynamicPassedHosts.add(host.trim());
-        }
-    });
     sessionStorage.setItem(SF_API_KEY_FOR_UPDATE, apiKey);
     sessionStorage.setItem(SF_BACKEND_API, backendApi);
     // Setup interceptors with custom ignore and propagate domains
@@ -942,6 +881,7 @@ export async function startRecording({ apiKey, backendApi = "https://api-service
     }
 }
 export const initRecorder = async (options) => {
+    console.log("Initializing Sailfish Recorder with options:", options);
     // Only run on the client (browser) environment
     if (typeof window === "undefined") {
         return;
@@ -952,7 +892,7 @@ export const initRecorder = async (options) => {
             apiKey: options.apiKey,
             backendApi: options.backendApi ?? "https://api-service.sailfishqa.com",
             getSessionId: () => getOrSetSessionId(),
-            enableShortcuts: options.enableShortcuts ?? false,
+            shortcuts: options.reportIssueShortcuts,
         });
     });
 };