@sailfish-ai/recorder 1.7.50 → 1.8.1

package/dist/env.js

@@ -0,0 +1,55 @@
+// Avoid referencing `import.meta` in distributed code.
+// Priority: explicit global → process.env → default false.
+export function readDebugFlag() {
+    // 1) Global (works in any bundler and vanilla <script> usage)
+    try {
+        const g = globalThis;
+        if (typeof g.__SAILFISH_DEBUG__ === "boolean")
+            return g.__SAILFISH_DEBUG__;
+    }
+    catch { }
+    // 2) process.env (webpack/rollup/esbuild all replace at build-time)
+    try {
+        const p = typeof process !== "undefined" ? process : undefined;
+        if (p?.env?.SAILFISH_DEBUG != null) {
+            const v = String(p.env.SAILFISH_DEBUG).toLowerCase();
+            return v === "1" || v === "true" || v === "yes";
+        }
+    }
+    catch { }
+    // 3) Build-time define fallback (we'll inject __SAILFISH_DEBUG__ in vite.config)
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const D = globalThis.__SAILFISH_DEBUG_DEFINE__;
+        if (typeof D === "boolean")
+            return D;
+    }
+    catch { }
+    return false;
+}
+// Build-time injected Git SHA (without using `import.meta`).
+export function readGitSha() {
+    // 1) global
+    try {
+        const g = globalThis;
+        if (typeof g.__GIT_SHA__ === "string" && g.__GIT_SHA__)
+            return g.__GIT_SHA__;
+    }
+    catch { }
+    // 2) process.env
+    try {
+        const p = typeof process !== "undefined" ? process : undefined;
+        if (p?.env?.GIT_SHA)
+            return String(p.env.GIT_SHA);
+    }
+    catch { }
+    // 3) build-time define fallback (see vite.config define)
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const S = globalThis.__GIT_SHA_DEFINE__;
+        if (typeof S === "string" && S)
+            return S;
+    }
+    catch { }
+    return undefined;
+}

package/dist/errorInterceptor.js

@@ -8,7 +8,9 @@ import { sendMessage } from "./websocket";
 export async function resolveStackTrace(stackTrace) {
     if (!stackTrace)
         return ["No stack trace available"];
-    const traceLines = Array.isArray(stackTrace) ? stackTrace : stackTrace.split("\n");
+    const traceLines = Array.isArray(stackTrace)
+        ? stackTrace
+        : stackTrace.split("\n");
     const mappedStack = [];
     for (const line of traceLines) {
         const match = line.match(/\/assets\/([^\/]+\.js):(\d+):(\d+)/);
@@ -24,7 +26,7 @@ export async function resolveStackTrace(stackTrace) {
             if (!response.ok) {
                 break;
             }
-            const rawSourceMap = await response.json();
+            const rawSourceMap = (await response.json());
             if (!rawSourceMap.sources || !Array.isArray(rawSourceMap.sources)) {
                 mappedStack.push(line);
                 continue;
@@ -50,7 +52,9 @@ export async function resolveStackTrace(stackTrace) {
                     contextSnippet = lines.slice(start, end).map((line, i) => {
                         const lineNumber = start + i + 1;
                         const prefix = lineNumber === errorLine ? "👉" : "  ";
-                        return `${prefix} ${lineNumber.toString().padStart(4)} | ${line.trim()}`;
+                        return `${prefix} ${lineNumber
+                            .toString()
+                            .padStart(4)} | ${line.trim()}`;
                     });
                 }
                 mappedStack.push(`${original.source}:${original.line}:${original.column} (${original.name || "anonymous"})`);
@@ -96,8 +100,13 @@ async function captureError(error, isPromiseRejection = false) {
     };
     // Sends the mapped error details to the backend.
     sendMessage({
-        type: "frontendError",
-        data: errorDetails,
+        type: "event",
+        event: {
+            type: 6,
+            data: {
+                payload: errorDetails,
+            },
+        },
     });
 }
 /**

package/dist/exponentialBackoff.js

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

package/dist/graphql.js

@@ -1,5 +1,6 @@
 import { exponentialBackoff } from "./exponentialBackoff"; // Import your custom backoff function
-const DEBUG = import.meta.env.VITE_DEBUG ? import.meta.env.VITE_DEBUG : false;
+import { readDebugFlag } from "./env";
+const DEBUG = readDebugFlag(); // A wrapper around fetch that suppresses connection refused errors
 export function sendGraphQLRequest(operationName, query, variables, retries = 5, // Number of retries before giving up
 initialBackoff = 2000, // Initial backoff in milliseconds
 backoffFactor = 2) {

package/dist/index.js

@@ -1,8 +1,10 @@
-const DEBUG = import.meta.env.VITE_DEBUG ? import.meta.env.VITE_DEBUG : false;
+import { readDebugFlag } from "./env";
 // import { NetworkRecordOptions } from "@sailfish-rrweb/rrweb-plugin-network-record";
 import { v4 as uuidv4 } from "uuid";
 import { NetworkRequestEventId, STATIC_EXTENSIONS, xSf3RidHeader, } from "./constants";
 import { gatherAndCacheDeviceInfo } from "./deviceInfo";
+import { readGitSha } from "./env";
+import { initializeErrorInterceptor } from "./errorInterceptor";
 import { fetchCaptureSettings, sendDomainsToNotPropagateHeaderTo, startRecordingSession, } from "./graphql";
 import { setupIssueReporting } from "./inAppReportIssueModal";
 import { sendMapUuidIfAvailable } from "./mapUuid";
@@ -11,6 +13,7 @@ import { HAS_DOCUMENT, HAS_LOCAL_STORAGE, HAS_SESSION_STORAGE, HAS_WINDOW, } fro
 import { getOrSetSessionId } from "./session";
 import { withAppUrlMetadata } from "./utils";
 import { sendEvent, sendMessage } from "./websocket";
+const DEBUG = readDebugFlag(); // A wrapper around fetch that suppresses connection refused errors
 // Default list of domains to ignore
 const DOMAINS_TO_NOT_PROPAGATE_HEADER_TO_DEFAULT = [
     "t.co",
@@ -79,7 +82,12 @@ export const DEFAULT_CONSOLE_RECORDING_SETTINGS = {
 //   recordBody: true,
 //   recordInitialRequests: false,
 // };
-function trackDomainChanges() {
+function trackDomainChangesOnce() {
+    const g = (window.__sailfish_recorder ||= {});
+    if (g.routeWatcherIntervalId) {
+        // already running
+        return;
+    }
     let lastDomain = window.location.href.split("?")[0];
     const checkDomainChange = (forceSend = false) => {
         const currentDomain = window.location.href.split("?")[0];
@@ -104,8 +112,8 @@ function trackDomainChanges() {
     const debouncedCheck = debounce(() => checkDomainChange(), 500);
     // Force the first check to send the initial URL on load
     checkDomainChange(true);
-    // Set interval to periodically check if the domain or path has changed
-    setInterval(debouncedCheck, 1000); // Adjust the interval as needed
+    // Start a single interval and remember it
+    g.routeWatcherIntervalId = window.setInterval(debouncedCheck, 1000);
 }
 // Debounce utility function
 function debounce(func, wait) {
@@ -558,37 +566,6 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo = []) {
         }
     }
 }
-// Note - if you update this, you must copy this function to the documentation in docs/docs/getting-started/updating-autoinstall-prs.md.
-function getCompileTimeGitSha() {
-    // 1) Preferred: a hard-coded global replaced at build time (all bundlers support "define")
-    //    e.g. webpack DefinePlugin/esbuild/rollup/vite: __GIT_SHA__ => JSON.stringify('<sha>')
-    try {
-        const g = globalThis;
-        if (g && typeof g.__GIT_SHA__ === "string" && g.__GIT_SHA__) {
-            return g.__GIT_SHA__;
-        }
-    }
-    catch { }
-    // 2) Common pattern: process.env.GIT_SHA (webpack/rollup/esbuild/parcel)
-    try {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const p = typeof process !== "undefined" ? process : undefined;
-        if (p?.env?.GIT_SHA)
-            return String(p.env.GIT_SHA);
-    }
-    catch { }
-    // 3) Vite (or other tools exposing import.meta.env)
-    try {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const im = import.meta;
-        if (im?.env?.VITE_GIT_SHA)
-            return String(im.env.VITE_GIT_SHA);
-        if (im?.env?.GIT_SHA)
-            return String(im.env.GIT_SHA);
-    }
-    catch { }
-    return undefined;
-}
 // --- helper for mapUuid default from window ---
 function getMapUuidFromWindow() {
     try {
@@ -606,38 +583,77 @@ function getMapUuidFromWindow() {
 // it would be 1 serviceIdentifier per frontend user session,
 // which is very wasteful
 export async function startRecording({ apiKey, backendApi = "https://api-service.sailfishqa.com", domainsToPropagateHeaderTo = [], domainsToNotPropagateHeaderTo = [], serviceVersion, serviceIdentifier, gitSha, serviceAdditionalMetadata, }) {
-    const effectiveGitSha = gitSha ?? getCompileTimeGitSha();
+    const effectiveGitSha = gitSha ?? readGitSha();
     const effectiveServiceIdentifier = serviceIdentifier ?? "";
     const effectiveServiceVersion = serviceVersion ?? "";
     const effectiveLibrary = "JS/TS"; // from Recorder.LIBRARY_CHOICES
     const effectiveMapUuid = getMapUuidFromWindow();
     const sessionId = getOrSetSessionId();
-    initializeDomContentEvents(sessionId);
-    initializeConsolePlugin(DEFAULT_CONSOLE_RECORDING_SETTINGS, sessionId);
+    const g = (window.__sailfish_recorder ||= {});
+    g.sessionId = sessionId;
+    g.apiKey = apiKey;
+    g.backendApi = backendApi;
+    // Already fully initialized for this session with an open socket? No-op.
+    if (g.initialized &&
+        g.sessionId === sessionId &&
+        g.ws &&
+        g.ws.readyState === 1) {
+        trackDomainChangesOnce(); // ensure single watcher alive
+        return;
+    }
+    // One-time installs (per window)
+    if (!g.domEventsInit) {
+        initializeDomContentEvents(sessionId);
+        g.domEventsInit = true;
+    }
+    if (!g.consoleInit) {
+        initializeConsolePlugin(DEFAULT_CONSOLE_RECORDING_SETTINGS, sessionId);
+        g.consoleInit = true;
+    }
+    if (!g.errorInit) {
+        initializeErrorInterceptor();
+        g.errorInit = true;
+    }
     storeCredentialsAndConnection({ apiKey, backendApi });
-    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);
+    trackDomainChangesOnce();
+    sessionStorage.setItem("sailfishApiKey", apiKey);
+    sessionStorage.setItem("sailfishBackendApi", backendApi);
+    if (!g.sentDoNotPropagateOnce) {
+        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));
+        g.sentDoNotPropagateOnce = true;
+    }
+    // Patch XHR/fetch once per window
+    if (!g.xhrPatched) {
+        setupXMLHttpRequestInterceptor(domainsToNotPropagateHeaderTo);
+        g.xhrPatched = true;
+    }
+    if (!g.fetchPatched) {
+        setupFetchInterceptor(domainsToNotPropagateHeaderTo);
+        g.fetchPatched = true;
+    }
     gatherAndCacheDeviceInfo();
     try {
         const captureSettingsResponse = await fetchCaptureSettings(apiKey, backendApi);
         const captureSettings = captureSettingsResponse.data?.captureSettingsFromApiKey ||
             DEFAULT_CAPTURE_SETTINGS;
+        // If a socket is already open now, stop here.
+        if (g.ws && g.ws.readyState === 1) {
+            return;
+        }
         const metadataWithAppUrl = withAppUrlMetadata(serviceAdditionalMetadata);
+        // Create/ensure a server-side recording session once per browser session
         const sessionResponse = await startRecordingSession(apiKey, sessionId, backendApi, effectiveServiceIdentifier, effectiveServiceVersion, effectiveMapUuid, effectiveGitSha, effectiveLibrary, metadataWithAppUrl);
         if (sessionResponse.data?.startRecordingSession) {
-            const websocket = await initializeRecording(captureSettings, 
-            // DEFAULT_NETWORK_CAPTURE_SETTINGS,
-            backendApi, apiKey, sessionId);
-            // Send parameters once before starting interval
-            sendMapUuidIfAvailable(serviceIdentifier, serviceVersion);
+            const websocket = await initializeRecording(captureSettings, backendApi, apiKey, sessionId);
+            g.ws = websocket;
+            g.initialized = true;
+            if (!g.sentMapUuidOnce) {
+                sendMapUuidIfAvailable(serviceIdentifier, serviceVersion);
+                g.sentMapUuidOnce = true;
+            }
         }
         else {
             console.error("Failed to start recording session:", sessionResponse.errors || sessionResponse);
@@ -647,22 +663,49 @@ export async function startRecording({ apiKey, backendApi = "https://api-service
         console.error("Error starting recording:", error);
     }
 }
+/*
+  If there are any interface changes, you MUST change the following file(s):
+  => prefect/workspace/flows/fix_code_issues/tasks/autoinstall/js_ts_frontend/create_sailfish_instrumentation_wrapper_jsx_tsx_component.py
+*/
 export const initRecorder = async (options) => {
-    console.log("Initializing Sailfish Recorder with options:", options);
     // Only run on the client (browser) environment
-    if (typeof window === "undefined") {
+    if (typeof window === "undefined")
+        return;
+    const g = (window.__sailfish_recorder ||= {});
+    const currentSessionId = getOrSetSessionId();
+    // If already initialized for this session and socket is open, do nothing.
+    if (g.initialized &&
+        g.sessionId === currentSessionId &&
+        g.ws &&
+        g.ws.readyState === 1) {
         return;
     }
-    // Directly invoke the startRecording function from within the same package
-    return startRecording(options).then(() => {
-        setupIssueReporting({
-            apiKey: options.apiKey,
-            backendApi: options.backendApi ?? "https://api-service.sailfishqa.com",
-            getSessionId: () => getOrSetSessionId(),
-            shortcuts: options.reportIssueShortcuts,
-            customBaseUrl: options.customBaseUrl,
+    // Coalesce concurrent calls into one promise
+    if (!g.initPromise) {
+        g.initPromise = (async () => {
+            if (!g.hasLoggedInitOnce) {
+                // Log only once per window lifecycle to avoid noisy logs when routes remount.
+                console.log("Initializing Sailfish Recorder (first run) …");
+                g.hasLoggedInitOnce = true;
+            }
+            await startRecording(options);
+            // Set up the issue reporting UI once
+            if (!g.issueReportingInit) {
+                setupIssueReporting({
+                    apiKey: options.apiKey,
+                    backendApi: options.backendApi ?? "https://api-service.sailfishqa.com",
+                    getSessionId: () => getOrSetSessionId(),
+                    shortcuts: options.reportIssueShortcuts,
+                    customBaseUrl: options.customBaseUrl,
+                });
+                g.issueReportingInit = true;
+            }
+        })().finally(() => {
+            // Keep all state/flags, but clear the temp promise so a brand-new session can re-init later
+            delete g.initPromise;
         });
-    });
+    }
+    return g.initPromise;
 };
 // Re-export from other modules
 export * from "./graphql";

package/dist/recording.js

@@ -2,7 +2,6 @@ import { record } from "@sailfish-rrweb/rrweb-record-only";
 import { getRecordConsolePlugin, } from "@sailfish-rrweb/rrweb-plugin-console-record";
 // import { NetworkRecordOptions } from "@sailfish-rrweb/rrweb-plugin-network-record";
 import { EventType } from "@sailfish-rrweb/types";
-import { ZendeskAPI } from "react-zendesk";
 import { Complete, DomContentEventId, DomContentSource, Loading, } from "./constants";
 import suppressConsoleLogsDuringCall from "./suppressConsoleLogsDuringCall";
 import { initializeWebSocket, sendEvent } from "./websocket";
@@ -10,6 +9,53 @@ const MASK_CLASS = "sailfishSanitize";
 const ZENDESK_ELEMENT_ID = "zendesk_chat";
 const ZENDESK_PROVIDER = "Zendesk";
 const ZENDESK_TAG_PREFIX = "sailfish-session-";
+// ─────────────────────────────────────────────────────────────────────────────
+// Zendesk (Messaging) optional helpers
+// Docs (Messaging widget show/open + core API):
+//   - https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/web/messaging-show-web-widget/
+//   - https://developer.zendesk.com/api-reference/widget-messaging/web/core/
+// Conversation tags via Messaging:
+//   - zE('messenger:set', 'conversationTags', [...])
+// ─────────────────────────────────────────────────────────────────────────────
+/** Is the Zendesk Messaging API available? */
+function hasZendesk() {
+    return typeof window !== "undefined" && typeof window.zE === "function";
+}
+/**
+ * Queue-safe "ready" hook. If Zendesk is present, `zE(callback)` registers `callback` to run
+ * when the widget is ready (or queues it if loading). If absent, do nothing.
+ */
+function whenZendeskReady(ballback) {
+    if (typeof window === "undefined")
+        return;
+    const zE = window.zE;
+    if (typeof zE === "function") {
+        try {
+            // Per Zendesk snippet semantics, zE(ballback) queues the callback until ready.
+            zE(ballback);
+        }
+        catch {
+            // ignore
+        }
+    }
+}
+/** Call zE safely. Returns true if the call executed. */
+function zE_safe(...args) {
+    try {
+        if (hasZendesk()) {
+            // Non-null assertion ok: guarded by hasZendesk()
+            window.zE(...args);
+            return true;
+        }
+    }
+    catch {
+        // ignore
+    }
+    return false;
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Recorder logic
+// ─────────────────────────────────────────────────────────────────────────────
 function maskInputFn(text, node) {
     if (node.type === "hidden") {
         return "";
@@ -122,37 +168,53 @@ backendApi, apiKey, sessionId) {
             maskTextClass: MASK_CLASS,
             ...captureSettings,
         });
-        suppressConsoleLogsDuringCall(() => {
-            ZendeskAPI("messenger:set", "conversationTags", [
-                `${ZENDESK_TAG_PREFIX}${sessionId}`,
-            ]);
-        });
-        const handleWidgetOpen = () => {
-            record.addSailfishEvent(EventType.SailfishCustom, {
-                action: "customer support chat opened",
-                element_id: ZENDESK_ELEMENT_ID,
-                provider: ZENDESK_PROVIDER,
+        // ───────────────────────────────────────────────────────────────────────
+        // Zendesk (Messaging) — OPTIONAL
+        // If a site uses Zendesk Messaging (and includes the snippet), wire tags
+        // and events once the widget is ready. Otherwise, this is a no-op.
+        //
+        // APIs used (Messaging):
+        //   zE('messenger:set', 'conversationTags', string[])
+        //   zE('messenger:on', 'open' | 'close' | 'unreadMessages', callback)
+        // Docs: show/open guidance + core API.
+        // ───────────────────────────────────────────────────────────────────────
+        whenZendeskReady(() => {
+            // Tag the conversation with our session id (if supported).
+            suppressConsoleLogsDuringCall(() => {
+                zE_safe("messenger:set", "conversationTags", [
+                    `${ZENDESK_TAG_PREFIX}${sessionId}`,
+                ]);
             });
-        };
-        const handleWidgetClose = () => {
-            record.addSailfishEvent(EventType.SailfishCustom, {
-                action: "customer support chat closed",
-                element_id: ZENDESK_ELEMENT_ID,
-                provider: ZENDESK_PROVIDER,
+            const handleWidgetOpen = () => {
+                record.addSailfishEvent(EventType.SailfishCustom, {
+                    action: "customer support chat opened",
+                    element_id: ZENDESK_ELEMENT_ID,
+                    provider: ZENDESK_PROVIDER,
+                });
+            };
+            const handleWidgetClose = () => {
+                record.addSailfishEvent(EventType.SailfishCustom, {
+                    action: "customer support chat closed",
+                    element_id: ZENDESK_ELEMENT_ID,
+                    provider: ZENDESK_PROVIDER,
+                });
+            };
+            const handleUnreadMessages = (count) => {
+                record.addSailfishEvent(EventType.SailfishCustom, {
+                    action: "zendesk unreadmessages",
+                    element_id: ZENDESK_ELEMENT_ID,
+                    provider: ZENDESK_PROVIDER,
+                });
+            };
+            suppressConsoleLogsDuringCall(() => {
+                zE_safe("messenger:on", "open", handleWidgetOpen);
+                zE_safe("messenger:on", "close", handleWidgetClose);
+                zE_safe("messenger:on", "unreadMessages", handleUnreadMessages);
             });
-        };
-        const handleUnreadMessages = (count) => {
-            record.addSailfishEvent(EventType.SailfishCustom, {
-                action: "zendesk unreadmessages",
-                element_id: ZENDESK_ELEMENT_ID,
-                provider: ZENDESK_PROVIDER,
-            });
-        };
-        suppressConsoleLogsDuringCall(() => {
-            ZendeskAPI("messenger:on", "open", handleWidgetOpen);
-            ZendeskAPI("messenger:on", "close", handleWidgetClose);
-            ZendeskAPI("messenger:on", "unreadMessages", handleUnreadMessages);
         });
+        // ───────────────────────────────────────────────────────────────────────
+        // End Zendesk (optional)
+        // ───────────────────────────────────────────────────────────────────────
     }
     catch (error) {
         console.error("Error importing plugins!", error);