@sailfish-ai/recorder 1.8.10 → 1.8.12-alpha-2

package/dist/recording.js

@@ -155,8 +155,8 @@ export function initializeConsolePlugin(consoleRecordSettings, sessionId) {
 }
 export async function initializeRecording(captureSettings, // TODO - Sibyl post-launch - replace type
 // networkRecordSettings: NetworkRecordOptions,
-backendApi, apiKey, sessionId) {
-    const webSocket = initializeWebSocket(backendApi, apiKey, sessionId);
+backendApi, apiKey, sessionId, envValue) {
+    const webSocket = initializeWebSocket(backendApi, apiKey, sessionId, envValue);
     try {
         record({
             emit(event) {

package/dist/session.js

@@ -1,12 +1,49 @@
 import { v4 as uuidv4 } from "uuid";
 import { HAS_WINDOW } from "./runtimeEnv";
-// 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.
+// Hybrid approach: use window.name as a temporary "refresh flag" and sessionStorage for persistence
+// - window.name flag is removed immediately after reading, preserving customer's data
+// - sessionStorage stores the actual session ID
+// - beforeunload sets a flag in window.name to detect page refresh vs duplicate tab
+const SESSION_ID_KEY = "sailfishSessionId";
+const REFRESH_FLAG = "__sailfish_refresh__";
+// Cache the resolved session ID to avoid regenerating on multiple calls
+let resolvedSessionId = null;
 export function getOrSetSessionId() {
     if (!HAS_WINDOW)
         return uuidv4();
-    if (!window.name) {
-        window.name = uuidv4();
+    // Return cached session ID if already resolved
+    if (resolvedSessionId) {
+        return resolvedSessionId;
     }
-    return window.name;
+    // Check if window.name contains our refresh flag
+    const isRefresh = window.name.startsWith(REFRESH_FLAG);
+    // Remove our flag and restore customer's original window.name
+    if (isRefresh) {
+        window.name = window.name.substring(REFRESH_FLAG.length);
+    }
+    if (isRefresh) {
+        // Page refresh - reuse existing session ID from sessionStorage
+        const existingSessionId = window.sessionStorage.getItem(SESSION_ID_KEY);
+        if (existingSessionId) {
+            resolvedSessionId = existingSessionId;
+            return existingSessionId;
+        }
+    }
+    // New tab or duplicate tab - generate new session ID
+    const sessionId = uuidv4();
+    resolvedSessionId = sessionId;
+    try {
+        window.sessionStorage.setItem(SESSION_ID_KEY, sessionId);
+    }
+    catch (error) {
+        // Ignore storage errors, use in-memory session ID
+    }
+    return sessionId;
+}
+// Set up beforeunload listener to mark page refresh
+if (HAS_WINDOW) {
+    window.addEventListener("beforeunload", () => {
+        // Prepend our flag to preserve customer's window.name
+        window.name = REFRESH_FLAG + window.name;
+    });
 }

package/dist/types/graphql.d.ts

@@ -1,8 +1,9 @@
-import { CaptureSettingsResponse, CreateTriageResponse, GraphQLResponse, StartSessionResponse } from "./types";
+import { CaptureSettingsResponse, CreateTriageResponse, FunctionSpanTrackingEnabledResponse, GraphQLResponse, StartSessionResponse } from "./types";
 export declare function sendGraphQLRequest<T>(operationName: string, query: string, variables: object, retries?: number, // Number of retries before giving up
 initialBackoff?: number, // Initial backoff in milliseconds
 backoffFactor?: number): Promise<GraphQLResponse<T>>;
 export declare function fetchCaptureSettings(apiKey: string, backendApi: string): Promise<GraphQLResponse<CaptureSettingsResponse>>;
+export declare function fetchFunctionSpanTrackingEnabled(apiKey: string, backendApi: string): Promise<GraphQLResponse<FunctionSpanTrackingEnabledResponse>>;
 export declare function startRecordingSession(apiKey: string, recordingId: string, backendApi: string, serviceIdentifier: string, serviceVersion?: string, mapUuid?: string, gitSha?: string, library?: string, serviceAdditionalMetadata?: Record<string, any>): Promise<GraphQLResponse<StartSessionResponse>>;
 export declare function sendDomainsToNotPropagateHeaderTo(apiKey: string, domains: string[], backendApi: string): Promise<GraphQLResponse<void>>;
 export declare function createTriageFromRecorder(apiKey: string, backendApi: string, recordingSessionId: string, timestampStart: string, timestampEnd: string, description?: string): Promise<GraphQLResponse<CreateTriageResponse>>;

package/dist/types/index.d.ts

@@ -31,6 +31,7 @@ export * from "./graphql";
 export { openReportIssueModal } from "./inAppReportIssueModal";
 export * from "./recording";
 export * from "./sendSailfishMessages";
+export { getOrSetSessionId } from "./session";
 export * from "./types";
 export * from "./utils";
 export * from "./websocket";

package/dist/types/recording.d.ts

@@ -10,4 +10,4 @@ export declare const getUrlAndStoredUuids: () => {
 export declare function initializeDomContentEvents(sessionId: string): void;
 export declare function initializeConsolePlugin(consoleRecordSettings: LogRecordOptions, sessionId: string): void;
 export declare function initializeRecording(captureSettings: any, // TODO - Sibyl post-launch - replace type
-backendApi: string, apiKey: string, sessionId: string): Promise<ReconnectingWebSocket>;
+backendApi: string, apiKey: string, sessionId: string, envValue?: string): Promise<ReconnectingWebSocket>;

package/dist/types/types.d.ts

@@ -46,6 +46,9 @@ export interface GraphQLResponse<T> {
 export interface CaptureSettingsResponse {
     captureSettingsFromApiKey: CaptureSettings;
 }
+export interface FunctionSpanTrackingEnabledResponse {
+    isFunctionSpanTrackingEnabledFromApiKey: boolean;
+}
 export interface StartSessionResponse {
     startRecordingSession: {
         id: string;

package/dist/types/websocket.d.ts

@@ -1,7 +1,12 @@
 import ReconnectingWebSocket from "reconnecting-websocket";
+/**
+ * Clear stale function span tracking state (called from index.tsx to validate localStorage)
+ * This disables tracking and clears localStorage if backend says tracking is not active
+ */
+export declare function clearStaleFuncSpanState(): void;
 export declare function flushBufferedEvents(): Promise<void>;
 export declare function sendEvent(event: any): void;
-export declare function initializeWebSocket(backendApi: string, apiKey: string, sessionId: string): ReconnectingWebSocket;
+export declare function initializeWebSocket(backendApi: string, apiKey: string, sessionId: string, envValue?: string): ReconnectingWebSocket;
 export declare function sendMessage(message: Record<string, any>): void;
 /**
  * Enable function span tracking for this session (e.g., when report issue recording starts)
@@ -17,6 +22,11 @@ export declare function disableFunctionSpanTracking(): void;
  * Check if function span tracking is currently enabled
  */
 export declare function isFunctionSpanTrackingEnabled(): boolean;
+/**
+ * Initialize function span tracking state from API response (during page load)
+ * This is called before the WebSocket connects to ensure headers are added from the start
+ */
+export declare function initializeFunctionSpanTrackingFromApi(isEnabled: boolean): void;
 /**
  * Get the current funcspan header name and value
  * Header constants are defined here but used by HTTP interceptors in index.tsx

package/dist/websocket.js

@@ -14,12 +14,24 @@ const FUNCSPAN_HEADER_VALUE = "1-0-5-5-0-1.0";
 // Tracking configuration type constants (must match backend TrackingConfigurationType enum)
 const TRACKING_CONFIG_GLOBAL = "global";
 const TRACKING_CONFIG_PER_SESSION = "per_session";
-// localStorage key for persisting global function span tracking state
-const FUNCSPAN_GLOBAL_STATE_KEY = "sailfish_funcspan_global_state";
 let webSocket = null;
 let isDraining = false;
 let inFlightFlush = null;
 let flushIntervalId = null;
+// Function span tracking state (only manages enabled/disabled)
+let funcSpanTrackingEnabled = false;
+let funcSpanTimeoutId = null;
+let funcSpanExpirationTime = null; // Timestamp when tracking should expire (milliseconds)
+let isLocalTrackingMode = false; // True when tracking is enabled locally (Report Issue), not globally
+// Saved global state when switching to local mode
+let savedGlobalTimeoutId = null;
+let savedGlobalExpirationTime = null;
+// LocalStorage key for persisting global function span tracking state
+const FUNCSPAN_STORAGE_KEY = "sailfish_funcspan_global_state";
+/**
+ * Save global function span tracking state to localStorage
+ * This persists the state across page refreshes
+ */
 function saveGlobalFuncSpanState(enabled, expirationTimestampMs) {
     try {
         if (typeof localStorage === "undefined")
@@ -27,73 +39,73 @@ function saveGlobalFuncSpanState(enabled, expirationTimestampMs) {
         const state = {
             enabled,
             expirationTimestampMs,
+            savedAt: Date.now()
         };
-        localStorage.setItem(FUNCSPAN_GLOBAL_STATE_KEY, JSON.stringify(state));
+        localStorage.setItem(FUNCSPAN_STORAGE_KEY, JSON.stringify(state));
         if (DEBUG) {
-            console.log(`[Sailfish] Saved global function span state to localStorage:`, state);
+            console.log("[Sailfish] Saved funcSpan state to localStorage:", state);
         }
     }
     catch (e) {
         if (DEBUG) {
-            console.warn(`[Sailfish] Failed to save global function span state to localStorage:`, e);
+            console.warn("[Sailfish] Failed to save funcSpan state to localStorage:", e);
         }
     }
 }
+/**
+ * Load global function span tracking state from localStorage
+ */
 function loadGlobalFuncSpanState() {
     try {
         if (typeof localStorage === "undefined")
             return null;
-        const stored = localStorage.getItem(FUNCSPAN_GLOBAL_STATE_KEY);
+        const stored = localStorage.getItem(FUNCSPAN_STORAGE_KEY);
         if (!stored)
             return null;
         const state = JSON.parse(stored);
-        // Check if the stored state has expired
-        if (state.enabled && state.expirationTimestampMs) {
-            const now = Date.now();
-            if (now >= state.expirationTimestampMs) {
-                // Expired - clear localStorage and return null
-                if (DEBUG) {
-                    console.log(`[Sailfish] Stored global function span state has expired, clearing`);
-                }
-                localStorage.removeItem(FUNCSPAN_GLOBAL_STATE_KEY);
-                return null;
-            }
-        }
         if (DEBUG) {
-            console.log(`[Sailfish] Loaded global function span state from localStorage:`, state);
+            console.log("[Sailfish] Loaded funcSpan state from localStorage:", state);
         }
         return state;
     }
     catch (e) {
         if (DEBUG) {
-            console.warn(`[Sailfish] Failed to load global function span state from localStorage:`, e);
+            console.warn("[Sailfish] Failed to load funcSpan state from localStorage:", e);
         }
         return null;
     }
 }
+/**
+ * Clear global function span tracking state from localStorage
+ */
 function clearGlobalFuncSpanState() {
     try {
         if (typeof localStorage === "undefined")
             return;
-        localStorage.removeItem(FUNCSPAN_GLOBAL_STATE_KEY);
+        localStorage.removeItem(FUNCSPAN_STORAGE_KEY);
         if (DEBUG) {
-            console.log(`[Sailfish] Cleared global function span state from localStorage`);
+            console.log("[Sailfish] Cleared funcSpan state from localStorage");
         }
     }
     catch (e) {
         if (DEBUG) {
-            console.warn(`[Sailfish] Failed to clear global function span state from localStorage:`, e);
+            console.warn("[Sailfish] Failed to clear funcSpan state from localStorage:", e);
         }
     }
 }
-// Function span tracking state (only manages enabled/disabled)
-let funcSpanTrackingEnabled = false;
-let funcSpanTimeoutId = null;
-let funcSpanExpirationTime = null; // Timestamp when tracking should expire (milliseconds)
-let isLocalTrackingMode = false; // True when tracking is enabled locally (Report Issue), not globally
-// Saved global state when switching to local mode
-let savedGlobalTimeoutId = null;
-let savedGlobalExpirationTime = null;
+/**
+ * Clear stale function span tracking state (called from index.tsx to validate localStorage)
+ * This disables tracking and clears localStorage if backend says tracking is not active
+ */
+export function clearStaleFuncSpanState() {
+    funcSpanTrackingEnabled = false;
+    funcSpanExpirationTime = null;
+    isLocalTrackingMode = false;
+    clearGlobalFuncSpanState();
+    if (DEBUG) {
+        console.log("[Sailfish] Cleared stale function span tracking state (backend validation failed)");
+    }
+}
 // Load persisted global state immediately on module initialization
 // This ensures headers are added from the very first HTTP request, even before WebSocket connects
 (() => {
@@ -105,9 +117,34 @@ let savedGlobalExpirationTime = null;
         if (DEBUG) {
             console.log(`[Sailfish] Module init: Restored global function span tracking from localStorage:`, {
                 enabled: true,
-                expirationTimestampMs: funcSpanExpirationTime,
+                expirationTime: funcSpanExpirationTime
             });
         }
+        // Check if tracking has already expired
+        if (funcSpanExpirationTime !== null) {
+            const now = Date.now();
+            if (now >= funcSpanExpirationTime) {
+                // Already expired, clear it
+                funcSpanTrackingEnabled = false;
+                funcSpanExpirationTime = null;
+                clearGlobalFuncSpanState();
+                if (DEBUG) {
+                    console.log("[Sailfish] Module init: Persisted tracking already expired, cleared state");
+                }
+            }
+            else {
+                // State is still valid, keep it temporarily until WebSocket provides the true state
+                if (DEBUG) {
+                    console.log("[Sailfish] Module init: Function span tracking is active and valid (temporary until WebSocket confirms)");
+                }
+            }
+        }
+        else {
+            // No expiration time - keep enabled temporarily until WebSocket provides the true state
+            if (DEBUG) {
+                console.log("[Sailfish] Module init: Function span tracking is active (no expiration, temporary until WebSocket confirms)");
+            }
+        }
     }
 })();
 function isWebSocketOpen(ws) {
@@ -203,14 +240,15 @@ export function sendEvent(event) {
         saveEventToIDB(enrichedEvent);
     }
 }
-export function initializeWebSocket(backendApi, apiKey, sessionId) {
-    // Note: Global function span tracking state is now loaded at module initialization time
-    // (see IIFE above) so headers work immediately, even before WebSocket connects.
-    // The WebSocket "funcSpanTrackingControl" message will update the state if needed.
+export function initializeWebSocket(backendApi, apiKey, sessionId, envValue) {
     const wsHost = getWebSocketHost(backendApi);
     const apiProtocol = new URL(backendApi).protocol;
     const wsScheme = apiProtocol === "https:" ? "wss" : "ws";
-    const wsUrl = `${wsScheme}://${wsHost}/ws/notify/?apiKey=${apiKey}&sessionId=${sessionId}&sender=JS%2FTS&version=${version}`;
+    let wsUrl = `${wsScheme}://${wsHost}/ws/notify/?apiKey=${apiKey}&sessionId=${sessionId}&sender=JS%2FTS&version=${version}`;
+    // Append envValue if provided
+    if (envValue) {
+        wsUrl += `&envValue=${encodeURIComponent(envValue)}`;
+    }
     const options = {
         connectionTimeout: 30000,
     };
@@ -289,6 +327,25 @@ export function initializeWebSocket(backendApi, apiKey, sessionId) {
                                     if (DEBUG) {
                                         console.log(`[Sailfish] GLOBAL function span tracking auto-disabled at server expiration time`);
                                     }
+                                    // Notify backend that this client's tracking has expired
+                                    // Backend will update database and broadcast to all other clients
+                                    try {
+                                        if (isWebSocketOpen(webSocket)) {
+                                            webSocket.send(JSON.stringify({
+                                                type: "funcSpanTrackingExpired",
+                                                sessionId: getOrSetSessionId(),
+                                                expiredAt: Date.now(),
+                                            }));
+                                            if (DEBUG) {
+                                                console.log(`[Sailfish] Notified backend that function span tracking expired`);
+                                            }
+                                        }
+                                    }
+                                    catch (e) {
+                                        if (DEBUG) {
+                                            console.warn(`[Sailfish] Failed to notify backend of tracking expiry:`, e);
+                                        }
+                                    }
                                 }
                             }, msUntilExpiration);
                         }
@@ -319,6 +376,24 @@ export function initializeWebSocket(backendApi, apiKey, sessionId) {
                                     if (DEBUG) {
                                         console.log(`[Sailfish] GLOBAL function span tracking auto-disabled after ${timeoutSeconds}s (legacy)`);
                                     }
+                                    // Notify backend that this client's tracking has expired
+                                    try {
+                                        if (isWebSocketOpen(webSocket)) {
+                                            webSocket.send(JSON.stringify({
+                                                type: "funcSpanTrackingExpired",
+                                                sessionId: getOrSetSessionId(),
+                                                expiredAt: Date.now(),
+                                            }));
+                                            if (DEBUG) {
+                                                console.log(`[Sailfish] Notified backend that function span tracking expired (legacy timeout)`);
+                                            }
+                                        }
+                                    }
+                                    catch (e) {
+                                        if (DEBUG) {
+                                            console.warn(`[Sailfish] Failed to notify backend of tracking expiry:`, e);
+                                        }
+                                    }
                                 }
                             }, timeoutSeconds * 1000);
                         }
@@ -364,7 +439,12 @@ export function sendMessage(message) {
         ...message,
         app_url: message?.app_url ?? window?.location?.href,
     });
-    if (isWebSocketOpen(webSocket)) {
+    // Check isDraining to prevent out-of-order delivery during reconnection
+    // When draining buffered events, queue new messages to maintain order
+    if (isDraining || !isWebSocketOpen(webSocket)) {
+        saveNotifyMessageToIDB(msg);
+    }
+    else {
         try {
             webSocket.send(msg);
         }
@@ -372,9 +452,6 @@ export function sendMessage(message) {
             saveNotifyMessageToIDB(msg);
         }
     }
-    else {
-        saveNotifyMessageToIDB(msg);
-    }
 }
 function getWebSocketHost(url) {
     const parser = document.createElement("a");
@@ -389,18 +466,14 @@ export function enableFunctionSpanTracking() {
     if (DEBUG) {
         console.log("[Sailfish] enableFunctionSpanTracking() called - Report Issue recording started (LOCAL MODE)");
     }
-    // If global tracking was already active, save its state so we can restore it later
-    if (funcSpanTrackingEnabled && !isLocalTrackingMode) {
-        savedGlobalTimeoutId = funcSpanTimeoutId;
-        savedGlobalExpirationTime = funcSpanExpirationTime;
-        if (DEBUG) {
-            console.log("[Sailfish] Saved global tracking state while switching to local mode");
-        }
-    }
     funcSpanTrackingEnabled = true;
     isLocalTrackingMode = true; // Mark as local tracking
     funcSpanExpirationTime = null; // Local mode has no expiration
-    funcSpanTimeoutId = null; // Clear timeout (saved above if it was global)
+    // Clear any existing timeout
+    if (funcSpanTimeoutId !== null) {
+        window.clearTimeout(funcSpanTimeoutId);
+        funcSpanTimeoutId = null;
+    }
     // Report this session to backend for tracking with per_session configuration type
     if (isWebSocketOpen(webSocket)) {
         try {
@@ -453,29 +526,17 @@ export function disableFunctionSpanTracking() {
         console.warn(`[FUNCSPAN STOP] ✗ WebSocket not open, cannot notify tracking end`);
     }
     if (isLocalTrackingMode) {
+        funcSpanTrackingEnabled = false;
         isLocalTrackingMode = false;
-        // Restore global tracking state if it was active before local mode
-        if (savedGlobalTimeoutId !== null || savedGlobalExpirationTime !== null) {
-            funcSpanTrackingEnabled = true; // Keep tracking enabled (global was active)
-            funcSpanExpirationTime = savedGlobalExpirationTime;
-            funcSpanTimeoutId = savedGlobalTimeoutId;
-            if (DEBUG) {
-                console.log("[Sailfish] LOCAL tracking mode disabled, restored GLOBAL tracking state");
-            }
-            // Clear saved state
-            savedGlobalTimeoutId = null;
-            savedGlobalExpirationTime = null;
-        }
-        else {
-            // No global tracking was active, fully disable
-            funcSpanTrackingEnabled = false;
-            funcSpanExpirationTime = null;
-            funcSpanTimeoutId = null;
-            if (DEBUG) {
-                console.log("[Sailfish] LOCAL tracking mode disabled, no global tracking to restore");
-            }
+        funcSpanExpirationTime = null;
+        if (DEBUG) {
+            console.log("[Sailfish] LOCAL tracking mode disabled");
         }
     }
+    if (funcSpanTimeoutId !== null) {
+        window.clearTimeout(funcSpanTimeoutId);
+        funcSpanTimeoutId = null;
+    }
 }
 /**
  * Check if function span tracking is currently enabled
@@ -483,6 +544,28 @@ export function disableFunctionSpanTracking() {
 export function isFunctionSpanTrackingEnabled() {
     return funcSpanTrackingEnabled;
 }
+/**
+ * Initialize function span tracking state from API response (during page load)
+ * This is called before the WebSocket connects to ensure headers are added from the start
+ */
+export function initializeFunctionSpanTrackingFromApi(isEnabled) {
+    if (isEnabled && !funcSpanTrackingEnabled) {
+        funcSpanTrackingEnabled = true;
+        isLocalTrackingMode = false; // This is global tracking from API
+        funcSpanExpirationTime = null; // Will be set by WebSocket message later
+        if (DEBUG) {
+            console.log("[Sailfish] Function span tracking initialized as ENABLED from API check");
+        }
+    }
+    else if (!isEnabled && funcSpanTrackingEnabled) {
+        funcSpanTrackingEnabled = false;
+        isLocalTrackingMode = false;
+        funcSpanExpirationTime = null;
+        if (DEBUG) {
+            console.log("[Sailfish] Function span tracking initialized as DISABLED from API check");
+        }
+    }
+}
 /**
  * Get the current funcspan header name and value
  * Header constants are defined here but used by HTTP interceptors in index.tsx
@@ -499,6 +582,7 @@ export function getFuncSpanHeader() {
             // Tracking has expired, disable it immediately
             funcSpanTrackingEnabled = false;
             funcSpanExpirationTime = null;
+            clearGlobalFuncSpanState();
             if (DEBUG) {
                 console.log("[Sailfish] Function span tracking expired on header check - disabling now");
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sailfish-ai/recorder",
-  "version": "1.8.10",
+  "version": "1.8.12-alpha-2",
   "publishPublicly": true,
   "type": "module",
   "main": "dist/recorder.cjs",
@@ -37,7 +37,7 @@
     "dist"
   ],
   "dependencies": {
-    "@sailfish-ai/sf-map-utils": "0.4.3",
+    "@sailfish-ai/sf-map-utils": "0.4.4",
     "@sailfish-rrweb/rrweb-plugin-console-record": "0.5.2",
     "@sailfish-rrweb/rrweb-record-only": "0.5.2",
     "@sailfish-rrweb/types": "0.5.2",