@sailfish-ai/recorder 1.7.11 → 1.7.12

package/dist/index.js

@@ -1,11 +1,12 @@
+const DEBUG = import.meta.env.VITE_DEBUG ? import.meta.env.VITE_DEBUG : false;
 // import { NetworkRecordOptions } from "@sailfish-rrweb/rrweb-plugin-network-record";
 import { v4 as uuidv4 } from "uuid";
+import { NetworkRequestEventId, xSf3RidHeader } from "./constants";
 import { gatherAndCacheDeviceInfo } from "./deviceInfo";
 import { fetchCaptureSettings, sendDomainsToNotPropagateHeaderTo, startRecordingSession, } from "./graphql";
 import { sendMapUuidIfAvailable } from "./mapUuid";
-import { initializeDomContentEvents, initializeConsolePlugin, initializeRecording, getUrlAndStoredUuids, } from "./recording";
+import { getUrlAndStoredUuids, initializeConsolePlugin, initializeDomContentEvents, initializeRecording, } from "./recording";
 import { sendEvent, sendMessage } from "./websocket";
-import { NetworkRequestEventId, xSf3RidHeader } from "./constants";
 // Default list of domains to ignore
 const DOMAINS_TO_NOT_PROPAGATE_HEADER_TO_DEFAULT = [
     "t.co",
@@ -16,6 +17,84 @@ const DOMAINS_TO_NOT_PROPAGATE_HEADER_TO_DEFAULT = [
     "*.smooch.io", // Exclude smooch-related requests
     "*.zendesk.com", // Exclude zendesk-related requests
 ];
+const BAD_HTTP_STATUS = [
+    400, // BAD REQUEST
+    403, // FORBIDDEN
+];
+const CORS_KEYWORD = "CORS";
+const DYNAMIC_PASSED_HOSTS_KEY = "dynamicPassedHosts";
+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";
+/**
+ * Notify the backend of the updated dynamicExcludedHosts
+ */
+function updateExcludedHostsStorageAndBackend(dynamicExcludedHosts) {
+    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));
+}
+const dynamicExcludedHosts = new Set();
+const dynamicPassedHosts = new Set();
+// Load initial dynamicExcludedHosts from localStorage
+(() => {
+    const stored = localStorage.getItem(DYNAMIC_EXCLUDED_HOSTS_KEY);
+    if (stored) {
+        try {
+            JSON.parse(stored).forEach((host) => dynamicExcludedHosts.add(host));
+        }
+        catch (e) {
+            if (DEBUG)
+                console.log("Failed to parse dynamicExcludedHosts from storage", e);
+            localStorage.removeItem(DYNAMIC_EXCLUDED_HOSTS_KEY);
+        }
+    }
+})();
+// Load initial dynamicPassedHosts from localStorage
+(() => {
+    const stored = localStorage.getItem(DYNAMIC_PASSED_HOSTS_KEY);
+    if (stored) {
+        try {
+            JSON.parse(stored).forEach((host) => dynamicPassedHosts.add(host));
+        }
+        catch (e) {
+            if (DEBUG)
+                console.log("Failed to parse dynamicPassedHosts from storage", e);
+            localStorage.removeItem(DYNAMIC_PASSED_HOSTS_KEY);
+        }
+    }
+})();
+// Override add() to persist updates to localStorage
+const originalExcludedAdd = dynamicExcludedHosts.add;
+dynamicExcludedHosts.add = (host) => {
+    const cleanedHost = host?.trim();
+    if (!cleanedHost) {
+        return dynamicExcludedHosts;
+    }
+    originalExcludedAdd.call(dynamicExcludedHosts, cleanedHost);
+    localStorage.setItem(DYNAMIC_EXCLUDED_HOSTS_KEY, JSON.stringify(Array.from(dynamicExcludedHosts)));
+    updateExcludedHostsStorageAndBackend(dynamicExcludedHosts);
+    return dynamicExcludedHosts;
+};
+const originalPassedAdd = dynamicPassedHosts.add;
+dynamicPassedHosts.add = (host) => {
+    const cleanedHost = host?.trim();
+    if (!cleanedHost) {
+        return dynamicPassedHosts;
+    }
+    originalPassedAdd.call(dynamicPassedHosts, cleanedHost);
+    localStorage.setItem(DYNAMIC_PASSED_HOSTS_KEY, JSON.stringify(Array.from(dynamicPassedHosts)));
+    return dynamicPassedHosts;
+};
+const ActionType = {
+    PROPAGATE: "propagate",
+    IGNORE: "ignore",
+};
 export const DEFAULT_CAPTURE_SETTINGS = {
     recordCanvas: false,
     recordCrossOriginIframes: false,
@@ -215,19 +294,88 @@ export function matchUrlWithWildcard(url, patterns) {
         return true;
     });
 }
+function shouldSkipHeadersPropagation(url, domainsToNotPropagateHeadersTo = []) {
+    const combinedIgnoreDomains = [
+        ...DOMAINS_TO_NOT_PROPAGATE_HEADER_TO_DEFAULT,
+        ...domainsToNotPropagateHeadersTo,
+    ];
+    const defaultExcluded = matchUrlWithWildcard(url, combinedIgnoreDomains);
+    if (defaultExcluded) {
+        return true;
+    }
+    const domain = new URL(url).hostname;
+    // Check dynamically excluded hosts (those that reject the tracing header runtime)
+    return dynamicExcludedHosts.has(domain);
+}
+/**
+ * Performs an OPTIONS preflight check using XHR.
+ * Returns ActionType.PROPAGATE if server responds 2xx, ActionType.IGNORE on error or non-2xx.
+ */
+function performOptionsPreflightForXHR(url, init, xSf3RidHeaderValue, domain) {
+    return new Promise((resolve) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open("OPTIONS", url, true);
+        // Mirror credentials
+        xhr.withCredentials = init.credentials === INCLUDE;
+        // CORS preflight headers
+        const method = (init.method || "GET").toUpperCase();
+        xhr.setRequestHeader("Access-Control-Request-Method", method);
+        const rawHeaders = init.headers instanceof Headers
+            ? Object.entries(init.headers)
+            : init.headers || {};
+        const customHeaders = Object.keys(rawHeaders)
+            .map((h) => h.toLowerCase())
+            .filter((h) => ![
+            "accept",
+            "content-type",
+            "accept-language",
+            "content-language",
+        ].includes(h));
+        if (customHeaders.length) {
+            xhr.setRequestHeader("Access-Control-Request-Headers", customHeaders.join(","));
+        }
+        // Add tracing header
+        this.setRequestHeader(xSf3RidHeader, xSf3RidHeaderValue);
+        xhr.onload = () => {
+            if (xhr.status >= 200 && xhr.status < 300) {
+                resolve(ActionType.PROPAGATE);
+            }
+            else {
+                DEBUG &&
+                    console.log(`[XHR Interceptor] OPTIONS returned status ${xhr.status} for ${domain}`);
+                resolve(null);
+            }
+        };
+        xhr.onerror = () => {
+            DEBUG &&
+                console.log(`[XHR Interceptor] Preflight OPTIONS CORS or network error for ${domain}`);
+            resolve(ActionType.IGNORE);
+        };
+        xhr.send();
+    });
+}
 // Updated XMLHttpRequest interceptor with domain exclusion
-function setupXMLHttpRequestInterceptor(domainsToNotPropagateHeaderTo, domainsToPropagateHeadersTo = []) {
+function setupXMLHttpRequestInterceptor(domainsToNotPropagateHeaderTo = []) {
     const originalOpen = XMLHttpRequest.prototype.open;
     const originalSend = XMLHttpRequest.prototype.send;
+    const originalSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
     const sessionId = getOrSetSessionId();
-    // Combined ignore and propagate logic
-    const combinedIgnoreDomains = [
-        ...DOMAINS_TO_NOT_PROPAGATE_HEADER_TO_DEFAULT,
-        ...domainsToNotPropagateHeaderTo,
-    ];
+    // Intercept setRequestHeader()
+    XMLHttpRequest.prototype.setRequestHeader = function (name, value) {
+        // initialize the buffer on first use
+        if (!this._capturedRequestHeaders) {
+            this._capturedRequestHeaders = {};
+        }
+        // store header name + value
+        this._capturedRequestHeaders[name] = value;
+        // still call the native method so the header actually goes on the wire
+        return originalSetRequestHeader.call(this, name, value);
+    };
     // Intercept open()
     XMLHttpRequest.prototype.open = function (method, url, ...args) {
         this._requestUrl = typeof url === "string" && url.length > 0 ? url : null;
+        this._requestMethod = method;
+        this._capturedRequestHeaders = {};
         return originalOpen.apply(this, [method, url, ...args]);
     };
     // Intercept send()
@@ -235,37 +383,112 @@ function setupXMLHttpRequestInterceptor(domainsToNotPropagateHeaderTo, domainsTo
         const url = this._requestUrl;
         if (!url)
             return originalSend.apply(this, args);
+        const domain = new URL(url).hostname;
         // Skip domain check for excluded domains
-        if (matchUrlWithWildcard(url, combinedIgnoreDomains)) {
+        if (shouldSkipHeadersPropagation(url, domainsToNotPropagateHeaderTo)) {
             return originalSend.apply(this, args);
         }
-        // Check if domain should propagate headers
-        const shouldPropagateHeader = domainsToPropagateHeadersTo.length === 0 ||
-            matchUrlWithWildcard(url, domainsToPropagateHeadersTo);
-        if (sessionId && shouldPropagateHeader) {
-            try {
-                const pageVisitUUID = sessionStorage.getItem("pageVisitUUID");
-                const networkUUID = uuidv4();
-                this.setRequestHeader(xSf3RidHeader, `${sessionId}/${pageVisitUUID}/${networkUUID}`);
-            }
-            catch (e) {
-                console.warn(`Could not set X-Sf3-Rid header for ${url}`, e);
+        const pageVisitUUID = sessionStorage.getItem("pageVisitUUID");
+        const networkUUID = uuidv4();
+        const xSf3RidHeaderValue = `${sessionId}/${pageVisitUUID}/${networkUUID}`;
+        const proceedSend = () => {
+            if (sessionId) {
+                try {
+                    this.setRequestHeader(xSf3RidHeader, xSf3RidHeaderValue);
+                }
+                catch (e) {
+                    console.warn(`Could not set X-Sf3-Rid header for ${url}`, e);
+                }
             }
+            // On CORS or network error during send, add domain to passed-hosts list
+            this.addEventListener("error", () => {
+                dynamicExcludedHosts.add(domain);
+            }, { once: true });
+            // On successful send (HTTP 2xx), add domain to passed-hosts list
+            this.addEventListener("load", () => {
+                if (this.status === 0) {
+                    // status 0 on load is often a CORS‐blocked response
+                    dynamicExcludedHosts.add(domain);
+                }
+                if (this.status >= 200 && this.status < 300) {
+                    dynamicPassedHosts.add(domain);
+                }
+            }, { once: true });
+            return originalSend.apply(this, args);
+        };
+        if (!dynamicPassedHosts.has(domain)) {
+            // perform XHR-based preflight
+            const init = {
+                method: this._requestMethod,
+                headers: this._capturedRequestHeaders,
+                credentials: this.withCredentials ? INCLUDE : SAME_ORIGIN,
+            };
+            performOptionsPreflightForXHR(url, init, xSf3RidHeaderValue, domain)
+                .then((preflight) => {
+                if (preflight === ActionType.IGNORE) {
+                    dynamicExcludedHosts.add(domain);
+                    originalSend.call(this, args);
+                }
+                else {
+                    proceedSend();
+                }
+            })
+                .catch(() => {
+                // On error, treat as ignore
+                dynamicExcludedHosts.add(domain);
+                originalSend.call(this, args);
+            });
+            // just return void
+            return;
         }
-        return originalSend.apply(this, args);
+        return proceedSend();
     };
 }
+/**
+ * Performs an OPTIONS preflight check to decide header propagation.
+ * Returns 'propagate' if OPTIONS succeeds, 'ignore' otherwise.
+ */
+async function performOptionsPreflight(target, thisArg, url, init, sessionId, domain) {
+    try {
+        const headers = new Headers(init.headers || {});
+        headers.set(xSf3RidHeader, sessionId);
+        const response = await target.call(thisArg, url, {
+            method: "OPTIONS",
+            headers,
+        });
+        if (response.ok) {
+            return ActionType.PROPAGATE;
+        }
+        else {
+            DEBUG &&
+                console.log(`[Fetch Interceptor] OPTIONS returned status ${response.status} for ${domain}`);
+            return null;
+        }
+    }
+    catch (error) {
+        // Treat fetch errors (likely CORS failures) as ignore
+        if (error instanceof TypeError || error?.message?.includes(CORS_KEYWORD)) {
+            DEBUG &&
+                console.log(`[Fetch Interceptor] Preflight OPTIONS CORS error for ${domain}:`, error);
+            return ActionType.IGNORE;
+        }
+        // Other failures also ignored as some APIs or reverse proxies (e.g. NGINX) don’t route
+        // or handle OPTIONS requests, leading to:
+        // * 404 Not Found
+        // * 405 Method Not Allowed
+        // * 500 Internal Server Error
+        DEBUG &&
+            console.log(`[Fetch Interceptor] Preflight OPTIONS failed for ${domain}:`, error);
+        return null;
+    }
+}
 // Updated fetch interceptor with exclusion handling
-function setupFetchInterceptor(domainsToNotPropagateHeadersTo, domainsToPropagateHeadersTo = []) {
+function setupFetchInterceptor(domainsToNotPropagateHeadersTo = []) {
     const originalFetch = window.fetch;
     const sessionId = getOrSetSessionId();
-    const combinedIgnoreDomains = [
-        ...DOMAINS_TO_NOT_PROPAGATE_HEADER_TO_DEFAULT,
-        ...domainsToNotPropagateHeadersTo,
-    ];
     const cache = new Map();
     window.fetch = new Proxy(originalFetch, {
-        apply: (target, thisArg, args) => {
+        apply: async (target, thisArg, args) => {
             let input = args[0];
             let init = args[1] || {};
             let url;
@@ -281,30 +504,41 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo, domainsToPropagat
             else {
                 return target.apply(thisArg, args); // Skip unsupported inputs
             }
-            // Cache check
-            if (cache.has(url)) {
-                const cachedResult = cache.get(url);
-                if (cachedResult === "ignore") {
+            // Determine the target domain
+            const domain = new URL(url, window.location.href).hostname;
+            // Use cached decision if available
+            if (cache.has(domain)) {
+                const decision = cache.get(domain);
+                if (decision === ActionType.IGNORE) {
                     return target.apply(thisArg, args);
                 }
-                if (cachedResult === "propagate") {
+                if (decision === ActionType.PROPAGATE) {
                     return injectHeaderWrapper(target, thisArg, args, input, init, sessionId, url);
                 }
             }
-            // Check domain exclusion
-            if (matchUrlWithWildcard(url, combinedIgnoreDomains)) {
-                cache.set(url, "ignore");
+            // Check exclusion domains and cache 'ignore'
+            if (shouldSkipHeadersPropagation(url, domainsToNotPropagateHeadersTo)) {
+                cache.set(domain, ActionType.IGNORE);
                 return target.apply(thisArg, args);
             }
-            // Check domain propagation
-            const shouldPropagateHeader = domainsToPropagateHeadersTo.length === 0 ||
-                matchUrlWithWildcard(url, domainsToPropagateHeadersTo);
-            if (!shouldPropagateHeader) {
-                cache.set(url, "ignore");
+            let decision = ActionType.PROPAGATE;
+            // Check if domain verified before
+            if (!dynamicPassedHosts.has(domain)) {
+                // Perform OPTIONS preflight to decide header propagation
+                const res = await performOptionsPreflight(target, thisArg, url, init, sessionId, domain);
+                // Skip the header propagation as OPTIONS return Ignore
+                if (res === ActionType.IGNORE) {
+                    decision = res;
+                    dynamicExcludedHosts.add(domain);
+                }
+            }
+            cache.set(domain, decision);
+            if (decision === ActionType.PROPAGATE) {
+                return injectHeaderWrapper(target, thisArg, args, input, init, sessionId, url);
+            }
+            else {
                 return target.apply(thisArg, args);
             }
-            cache.set(url, "propagate");
-            return injectHeaderWrapper(target, thisArg, args, input, init, sessionId, url);
         },
     });
     // Wrapper function to emit 'networkRequest' event
@@ -314,12 +548,24 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo, domainsToPropagat
             const urlAndStoredUuids = getUrlAndStoredUuids();
             const method = init.method || "GET";
             const startTime = Date.now();
+            const domain = new URL(url).hostname;
             try {
-                const response = await injectHeader(target, thisArg, input, init, sessionId, urlAndStoredUuids.page_visit_uuid, networkUUID);
+                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 the server rejects our header, retry without it
+                if (BAD_HTTP_STATUS.includes(response.status)) {
+                    DEBUG && console.log("Perform retry as status was fail:", response);
+                    response = retryWithoutPropagateHeaders(target, thisArg, args, url);
+                    isRetry = true;
+                }
                 const endTime = Date.now();
                 const status = response.status;
                 const success = response.ok;
-                const error = success ? '' : `Request Error: ${response.statusText}`;
+                const error = success ? "" : `Request Error: ${response.statusText}`;
+                if (success) {
+                    (isRetry ? dynamicExcludedHosts : dynamicPassedHosts).add(domain);
+                }
                 // Emit 'networkRequestFinished' event
                 const eventData = {
                     type: NetworkRequestEventId,
@@ -346,6 +592,16 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo, domainsToPropagat
                 const success = false;
                 const responseCode = error.response?.status || 500;
                 const errorMessage = error.message || "Fetch request failed";
+                // Treat fetch errors (likely CORS failures) as ignore
+                // Since some APIs or reverse proxies (such as NGINX) do not route or handle OPTIONS requests, CORS may occur while the request is being made.
+                if (error instanceof TypeError ||
+                    error?.message?.includes(CORS_KEYWORD)) {
+                    DEBUG &&
+                        console.log(`[Fetch Interceptor] CORS error for ${domain}:`, error);
+                    dynamicExcludedHosts.add(domain);
+                    return target.apply(thisArg, args);
+                }
+                dynamicPassedHosts.add(domain);
                 // Emit 'networkRequestFinished' event with error
                 const eventData = {
                     type: NetworkRequestEventId,
@@ -362,7 +618,7 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo, domainsToPropagat
                         method,
                         url,
                     },
-                    ...urlAndStoredUuids
+                    ...urlAndStoredUuids,
                 };
                 sendEvent(eventData);
                 throw error;
@@ -393,6 +649,32 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo, domainsToPropagat
             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
+    async function retryWithoutPropagateHeaders(target, thisArg, args, url) {
+        const domain = new URL(url).hostname;
+        try {
+            // Retry the fetch without the header
+            // const retryResponse = await originalFetch(retryRequest);
+            const response = target.apply(thisArg, args);
+            // Check if retry succeeded (no network error thrown, and not a 400/403 response)
+            if (response.ok || !BAD_HTTP_STATUS.includes(response.status)) {
+                // Mark this domain to exclude the header going forward without header
+                dynamicExcludedHosts.add(domain);
+                cache.set(domain, ActionType.IGNORE); // mark domain as 'ignore' in the cache
+                // Log the original failure and the successful retry
+                console.info(`Retried request to ${url} without ${xSf3RidHeader} succeeded. ` +
+                    `Added "${domain}" to header exclusion lists.`);
+            }
+            // Return the response from the retry attempt (successful or not)
+            return response;
+        }
+        catch (retryError) {
+            // Propagate the failure (no domain added to exclude lists since retry failed)
+            DEBUG &&
+                console.log(`Retry without ${xSf3RidHeader} for ${url} also failed:`, retryError);
+            throw retryError;
+        }
+    }
 }
 // Main Recording Function
 export async function startRecording({ apiKey, backendApi = "https://api-service.sailfishqa.com", domainsToPropagateHeaderTo = [], domainsToNotPropagateHeaderTo = [], serviceVersion = "", serviceIdentifier = "", }) {
@@ -401,13 +683,27 @@ export async function startRecording({ apiKey, backendApi = "https://api-service
     initializeConsolePlugin(DEFAULT_CONSOLE_RECORDING_SETTINGS, sessionId);
     storeCredentialsAndConnection({ apiKey, backendApi });
     trackDomainChanges();
+    // Add provided domainsToNotPropagateHeaderTo to dynamicExcludedHosts without triggering updateExcludedHostsStorageAndBackend
+    domainsToNotPropagateHeaderTo?.forEach((host) => {
+        host?.trim() && originalExcludedAdd.call(dynamicExcludedHosts, host);
+    });
+    // Persist updated excluded hosts to localStorage
+    localStorage.setItem(DYNAMIC_EXCLUDED_HOSTS_KEY, JSON.stringify(Array.from(dynamicExcludedHosts)));
+    // Add provided domainsToPropagateHeaderTo to dynamicPassedHosts
+    domainsToPropagateHeaderTo.forEach((host) => {
+        originalPassedAdd.call(dynamicPassedHosts, host);
+    });
+    // Persist updated included hosts to localStorage
+    localStorage.setItem(DYNAMIC_PASSED_HOSTS_KEY, JSON.stringify(Array.from(dynamicPassedHosts)));
     // Non-blocking GraphQL request to send the domains if provided
-    if (domainsToNotPropagateHeaderTo.length > 0) {
-        sendDomainsToNotPropagateHeaderTo(apiKey, domainsToNotPropagateHeaderTo, backendApi).catch((error) => console.error("Failed to send domains to not propagate header to:", error));
+    if (dynamicExcludedHosts.size > 0) {
+        sendDomainsToNotPropagateHeaderTo(apiKey, [...dynamicExcludedHosts, ...DOMAINS_TO_NOT_PROPAGATE_HEADER_TO_DEFAULT], backendApi).catch((error) => console.error("Failed to send domains to not propagate header to:", error));
     }
+    sessionStorage.setItem(SF_API_KEY_FOR_UPDATE, apiKey);
+    sessionStorage.setItem(SF_BACKEND_API, backendApi);
     // Setup interceptors with custom ignore and propagate domains
-    setupXMLHttpRequestInterceptor(domainsToNotPropagateHeaderTo, domainsToPropagateHeaderTo);
-    setupFetchInterceptor(domainsToNotPropagateHeaderTo, domainsToPropagateHeaderTo);
+    setupXMLHttpRequestInterceptor(domainsToPropagateHeaderTo);
+    setupFetchInterceptor(domainsToPropagateHeaderTo);
     gatherAndCacheDeviceInfo();
     try {
         const captureSettingsResponse = await fetchCaptureSettings(apiKey, backendApi);
@@ -438,9 +734,9 @@ export const initRecorder = async (options) => {
     return startRecording(options);
 };
 // Re-export from other modules
-export * from "./utils";
 export * from "./graphql";
 export * from "./recording";
 export * from "./sendSailfishMessages";
 export * from "./types";
+export * from "./utils";
 export * from "./websocket";