@sailfish-ai/recorder 1.8.2 → 1.8.8

package/README.md

@@ -1,3 +1,7 @@
 # JS/TS Record-Only Package
 
 ## Sailfish AI's frontend recorder
+
+## Trigger build - 31112025 1150PM GMT+4
+
+## Trigger build - 06112025 0854PM GMT+4

package/dist/errorInterceptor.js

@@ -1,73 +1,89 @@
 import { SourceMapConsumer } from "source-map-js";
 import { sendMessage } from "./websocket";
-/**
- * Resolves stack traces using source maps.
- * @param stackTrace - The minified stack trace.
- * @returns The mapped stack trace with original file/line/column.
- */
+const mapCache = new Map();
+// Matches: url-or-path/to/file.js?cache=123:LINE:COL  (also if wrapped in "foo (...)" )
+const FLEX_RE = /(?:\(|\s|^)(https?:\/\/[^)\s]+|\/[^)\s]+|[^)\s]+)?\/?([^/]+\.js)(?:\?[^:)]*)?:(\d+):(\d+)/;
+async function getConsumerFor(fullPathOrUrl, fileBase) {
+    // Build a list of candidate .map URLs (strip query, try same-dir first, then /assets)
+    const baseNoQuery = (fullPathOrUrl || `/assets/${fileBase}`).split("?")[0];
+    const candidates = [
+        `${baseNoQuery}.map`,
+        // Vite deps fallback:
+        baseNoQuery.replace(/\.js$/, ".js.map"),
+        // Legacy assets fallback:
+        `/assets/${fileBase}.map`,
+    ];
+    for (const url of candidates) {
+        try {
+            if (mapCache.has(url))
+                return mapCache.get(url);
+            const res = await fetch(url);
+            if (!res.ok)
+                continue;
+            const raw = (await res.json());
+            if (!raw || !raw.mappings || !raw.sources)
+                continue;
+            const consumer = await new SourceMapConsumer(raw);
+            mapCache.set(url, consumer);
+            return consumer;
+        }
+        catch {
+            // try next candidate
+        }
+    }
+    return null;
+}
 export async function resolveStackTrace(stackTrace) {
     if (!stackTrace)
         return ["No stack trace available"];
     const traceLines = Array.isArray(stackTrace)
         ? stackTrace
         : stackTrace.split("\n");
-    const mappedStack = [];
-    for (const line of traceLines) {
-        const match = line.match(/\/assets\/([^\/]+\.js):(\d+):(\d+)/);
-        if (!match) {
-            mappedStack.push(line); // Keep non-matching lines
+    const out = [];
+    for (const rawLine of traceLines) {
+        const m = rawLine.match(FLEX_RE);
+        if (!m) {
+            out.push(rawLine);
             continue;
         }
-        const [, fileUrl, lineNum, colNum] = match;
-        const fileName = fileUrl.split("/").pop();
-        const sourceMapUrl = `/assets/${fileName}.map`;
-        try {
-            const response = await fetch(sourceMapUrl);
-            if (!response.ok) {
-                break;
-            }
-            const rawSourceMap = (await response.json());
-            if (!rawSourceMap.sources || !Array.isArray(rawSourceMap.sources)) {
-                mappedStack.push(line);
-                continue;
-            }
-            const consumer = await new SourceMapConsumer(rawSourceMap);
-            const original = consumer.originalPositionFor({
-                line: parseInt(lineNum, 10) - 1,
-                column: parseInt(colNum, 10),
-            });
-            if (original.source && original.line) {
-                // Get index of original source in rawSourceMap.sources
-                const sourceIndex = rawSourceMap.sources.indexOf(original.source);
-                let contextSnippet = [];
-                if (sourceIndex !== -1 &&
-                    rawSourceMap.sourcesContent &&
-                    rawSourceMap.sourcesContent[sourceIndex]) {
-                    const lines = rawSourceMap.sourcesContent[sourceIndex].split("\n");
-                    const errorLine = original.line || 1;
-                    // Define range (clamp within file bounds)
-                    const start = Math.max(errorLine - 6, 0); // -6 because index is 0-based
-                    const end = Math.min(errorLine + 4, lines.length); // +4 to get 5 lines after
-                    // Extract and trim context lines
-                    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()}`;
-                    });
-                }
-                mappedStack.push(`${original.source}:${original.line}:${original.column} (${original.name || "anonymous"})`);
-            }
-            else {
-                mappedStack.push(line);
+        const [, fullPathOrUrl, fileBase, lineStr, colStr] = m;
+        const genLine = parseInt(lineStr, 10); // 1-based ✅
+        const genCol = Math.max(0, parseInt(colStr, 10) - 1); // 0-based ✅
+        if (!Number.isFinite(genLine) || !Number.isFinite(genCol)) {
+            out.push(rawLine + "  [Invalid line/column]");
+            continue;
+        }
+        const consumer = await getConsumerFor(fullPathOrUrl, fileBase);
+        if (!consumer) {
+            out.push(`${rawLine}  [No source map found for ${fileBase}]`);
+            continue;
+        }
+        // Try exact col, then small backoff
+        let mapped = consumer.originalPositionFor({
+            line: genLine,
+            column: genCol,
+            bias: SourceMapConsumer.GREATEST_LOWER_BOUND,
+        });
+        if (!mapped.source || mapped.line == null) {
+            for (let d = 1; d <= 20; d++) {
+                mapped = consumer.originalPositionFor({
+                    line: genLine,
+                    column: Math.max(0, genCol - d),
+                    bias: SourceMapConsumer.GREATEST_LOWER_BOUND,
+                });
+                if (mapped.source && mapped.line != null)
+                    break;
             }
         }
-        catch (err) {
-            mappedStack.push(line);
+        if (mapped.source && mapped.line != null) {
+            const fn = mapped.name || "anonymous";
+            out.push(`${mapped.source}:${mapped.line}:${mapped.column ?? 0} (${fn})`);
+        }
+        else {
+            out.push(`${rawLine}  [No mapping found in ${fileBase}]`);
         }
     }
-    return mappedStack;
+    return out;
 }
 /**
  * Captures full error details and resolves the stack trace.
@@ -89,9 +105,11 @@ async function captureError(error, isPromiseRejection = false) {
     }
     const mappedStack = await resolveStackTrace(stack);
     const filteredStack = mappedStack.filter((line) => !line.includes("chunk-") && !line.includes("react-dom"));
+    const trace = filteredStack.length > 0 ? filteredStack : mappedStack;
     const errorDetails = {
         message: errorMessage,
         stack,
+        trace,
         filteredStack,
         userAgent: navigator.userAgent,
         url: window.location.href,

package/dist/inAppReportIssueModal.js

@@ -674,7 +674,7 @@ function startCountdownThenRecord() {
     let count = 3;
     overlay.textContent = count.toString();
     document.body.appendChild(overlay);
-    const interval = setInterval(() => {
+    const interval = setInterval(async () => {
         count--;
         if (count > 0) {
             overlay.textContent = count.toString();
@@ -685,6 +685,14 @@ function startCountdownThenRecord() {
             // Begin recording
             recordingStartTime = Date.now();
             isRecording = true;
+            // Enable function span tracking for this recording session
+            try {
+                const { enableFunctionSpanTracking } = await import("./websocket");
+                enableFunctionSpanTracking();
+            }
+            catch (e) {
+                console.error("[Report Issue] Failed to enable function span tracking:", e);
+            }
             closeModal();
             showFloatingTimer();
         }
@@ -742,12 +750,20 @@ function showFloatingTimer() {
         timerEl.textContent = `${mins}:${secs}`;
     }, 1000);
 }
-function stopRecording() {
+async function stopRecording() {
     recordingEndTime = Date.now();
     isRecording = false;
     if (timerInterval)
         clearInterval(timerInterval);
     document.getElementById("sf-recording-indicator")?.remove();
+    // Disable function span tracking after recording stops
+    try {
+        const { disableFunctionSpanTracking } = await import("./websocket");
+        disableFunctionSpanTracking();
+    }
+    catch (e) {
+        console.error("[Report Issue] Failed to disable function span tracking:", e);
+    }
     reopenModalAfterStop();
 }
 function reopenModalAfterStop() {

package/dist/index.js

@@ -12,7 +12,7 @@ import { getUrlAndStoredUuids, initializeConsolePlugin, initializeDomContentEven
 import { HAS_DOCUMENT, HAS_LOCAL_STORAGE, HAS_SESSION_STORAGE, HAS_WINDOW, } from "./runtimeEnv";
 import { getOrSetSessionId } from "./session";
 import { withAppUrlMetadata } from "./utils";
-import { sendEvent, sendMessage } from "./websocket";
+import { getFuncSpanHeader, 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 = [
@@ -167,15 +167,42 @@ function getOrSetUserDeviceUuid() {
 }
 // Function to handle resetting the sessionId when the page becomes visible again
 function handleVisibilityChange() {
-    if (document.visibilityState === "visible") {
-        getOrSetSessionId(); // Restore sessionId when the user returns to the page
+    const visibilityState = document.visibilityState;
+    const timestamp = Date.now();
+    // Restore sessionId when the user returns to the page
+    if (visibilityState === "visible") {
+        getOrSetSessionId();
     }
+    // Send visibility change event for both visible and hidden states
+    try {
+        const url = window.location.href.split("?")[0];
+        sendMessage({
+            type: "visibilityChange",
+            data: {
+                state: visibilityState,
+                url,
+                timestamp,
+                ...getUrlAndStoredUuids(),
+            },
+        });
+        if (DEBUG) {
+            console.log(`[Sailfish] Tab became ${visibilityState}, sent visibility change event`);
+        }
+    }
+    catch (error) {
+        console.warn("[Sailfish] Failed to send visibility change event:", error);
+    }
+    // Store visibility state in sessionStorage
+    sessionStorage.setItem("tabVisibilityChanged", timestamp.toString());
+    sessionStorage.setItem("tabVisibilityState", visibilityState);
 }
-function clearPageVisitUuid() {
+function clearPageVisitDataFromSessionStorage() {
     if (!HAS_SESSION_STORAGE)
         return;
     sessionStorage.removeItem("pageVisitUUID");
     sessionStorage.removeItem("prevPageVisitUUID");
+    sessionStorage.removeItem("tabVisibilityChanged");
+    sessionStorage.removeItem("tabVisibilityState");
 }
 // Initialize event listeners for visibility change and page unload
 if (HAS_DOCUMENT) {
@@ -183,8 +210,8 @@ if (HAS_DOCUMENT) {
 }
 if (HAS_WINDOW) {
     window.addEventListener("beforeunload", () => {
-        window.name = "";
-        clearPageVisitUuid();
+        // window.name = "";
+        clearPageVisitDataFromSessionStorage();
     });
 }
 function storeCredentialsAndConnection({ apiKey, backendApi, }) {
@@ -353,11 +380,36 @@ function setupXMLHttpRequestInterceptor(domainsToNotPropagateHeaderTo = []) {
         catch (e) {
             console.warn(`Could not set X-Sf3-Rid for ${url}`, e);
         }
-        // 3️⃣ Track timing
+        // Add funcspan header if tracking is enabled
+        const funcSpanHeader = getFuncSpanHeader();
+        if (funcSpanHeader) {
+            try {
+                this.setRequestHeader(funcSpanHeader.name, funcSpanHeader.value);
+                if (DEBUG) {
+                    console.log(`[Sailfish] Added funcspan header to XMLHttpRequest:`, {
+                        url,
+                        header: funcSpanHeader.name,
+                    });
+                }
+            }
+            catch (e) {
+                if (DEBUG) {
+                    console.warn(`[Sailfish] Could not set funcspan header for ${url}`, e);
+                }
+            }
+        }
+        // 3️⃣ Track timing and capture request data
         const startTime = Date.now();
         let finished = false;
+        const requestBody = args[0]; // Capture the request body/payload
+        const requestHeaders = { ...this._capturedRequestHeaders }; // Capture request headers
+        // Filter out internal Sailfish headers from the captured headers
+        delete requestHeaders[xSf3RidHeader];
+        if (funcSpanHeader) {
+            delete requestHeaders[funcSpanHeader.name];
+        }
         // 4️⃣ Helper to emit networkRequestFinished
-        const emitFinished = (success, status, errorMsg) => {
+        const emitFinished = (success, status, errorMsg, responseData, responseHeaders) => {
             if (finished)
                 return;
             finished = true;
@@ -376,6 +428,10 @@ function setupXMLHttpRequestInterceptor(domainsToNotPropagateHeaderTo = []) {
                     error: errorMsg,
                     method: this._requestMethod,
                     url,
+                    request_headers: requestHeaders,
+                    request_body: requestBody,
+                    response_headers: responseHeaders,
+                    response_body: responseData,
                 },
                 ...getUrlAndStoredUuids(),
             });
@@ -383,12 +439,42 @@ function setupXMLHttpRequestInterceptor(domainsToNotPropagateHeaderTo = []) {
         // 6️⃣ On successful load
         this.addEventListener("load", () => {
             const status = this.status || 0;
+            let responseData;
+            let responseHeaders = null;
+            try {
+                // Try to capture response data
+                responseData = this.responseText || this.response;
+            }
+            catch (e) {
+                // Response might not be accessible in some cases
+                responseData = null;
+            }
+            // Capture response headers
+            try {
+                responseHeaders = {};
+                const allHeaders = this.getAllResponseHeaders();
+                if (allHeaders) {
+                    // Parse headers string into object
+                    allHeaders.split('\r\n').forEach(line => {
+                        const parts = line.split(': ');
+                        if (parts.length === 2) {
+                            responseHeaders[parts[0]] = parts[1];
+                        }
+                    });
+                }
+            }
+            catch (e) {
+                if (DEBUG) {
+                    console.warn("[Sailfish] Failed to capture XHR response headers:", e);
+                }
+                responseHeaders = null;
+            }
             if (status >= 200 && status < 300) {
-                emitFinished(true, status, "");
+                emitFinished(true, status, "", responseData, responseHeaders);
             }
             else {
                 const msg = this.statusText || `HTTP ${status}`;
-                emitFinished(false, status, msg);
+                emitFinished(false, status, msg, responseData, responseHeaders);
             }
         }, { once: true });
         // 7️⃣ On network/CORS error
@@ -435,21 +521,74 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo = []) {
             return injectHeaderWrapper(target, thisArg, args, input, init, sessionId, url);
         },
     });
-    // 2️⃣ Fetch interceptor’s injectHeaderWrapper(); emits 'networkRequest' event
+    // 2️⃣ Fetch interceptor's injectHeaderWrapper(); emits 'networkRequest' event
     async function injectHeaderWrapper(target, thisArg, args, input, init, sessionId, url) {
         if (!sessionId) {
             return target.apply(thisArg, args);
         }
-        const networkUUID = uuidv4();
+        // Generate a fresh UUID for this request attempt
+        let networkUUID = uuidv4();
         const urlAndStoredUuids = getUrlAndStoredUuids();
         const method = init.method || "GET";
         const startTime = Date.now();
+        // Capture request headers and body
+        let requestHeaders = {};
+        let requestBody;
+        try {
+            if (input instanceof Request) {
+                // Extract headers from Request object
+                input.headers.forEach((value, key) => {
+                    requestHeaders[key] = value;
+                });
+                // Try to clone and read body if present
+                try {
+                    const clonedRequest = input.clone();
+                    requestBody = await clonedRequest.text();
+                }
+                catch (e) {
+                    requestBody = null;
+                }
+            }
+            else {
+                // Extract headers from init
+                if (init.headers) {
+                    if (init.headers instanceof Headers) {
+                        init.headers.forEach((value, key) => {
+                            requestHeaders[key] = value;
+                        });
+                    }
+                    else if (Array.isArray(init.headers)) {
+                        init.headers.forEach(([key, value]) => {
+                            requestHeaders[key] = value;
+                        });
+                    }
+                    else {
+                        requestHeaders = { ...init.headers };
+                    }
+                }
+                // Capture request body
+                requestBody = init.body;
+            }
+        }
+        catch (e) {
+            if (DEBUG) {
+                console.warn("[Sailfish] Failed to capture request data:", e);
+            }
+        }
+        // Filter out internal Sailfish headers from captured headers
+        delete requestHeaders[xSf3RidHeader];
+        const funcSpanHeaderName = getFuncSpanHeader()?.name;
+        if (funcSpanHeaderName) {
+            delete requestHeaders[funcSpanHeaderName];
+        }
         try {
             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 (BAD_HTTP_STATUS.includes(response.status)) {
                 DEBUG && console.log("Perform retry as status was fail:", response);
+                // Generate a NEW UUID for the retry request so each request has a unique ID
+                networkUUID = uuidv4();
                 response = await retryWithoutPropagateHeaders(target, thisArg, args, url);
                 isRetry = true;
             }
@@ -457,6 +596,33 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo = []) {
             const status = response.status;
             const success = response.ok;
             const error = success ? "" : `Request Error: ${response.statusText}`;
+            // Capture response data
+            let responseData;
+            try {
+                // Clone the response so we don't consume the original stream
+                const clonedResponse = response.clone();
+                responseData = await clonedResponse.text();
+            }
+            catch (e) {
+                if (DEBUG) {
+                    console.warn("[Sailfish] Failed to capture response data:", e);
+                }
+                responseData = null;
+            }
+            // Capture response headers
+            let responseHeaders = null;
+            try {
+                responseHeaders = {};
+                response.headers.forEach((value, key) => {
+                    responseHeaders[key] = value;
+                });
+            }
+            catch (e) {
+                if (DEBUG) {
+                    console.warn("[Sailfish] Failed to capture response headers:", e);
+                }
+                responseHeaders = null;
+            }
             // Emit 'networkRequestFinished' event
             const eventData = {
                 type: NetworkRequestEventId,
@@ -473,6 +639,10 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo = []) {
                     method,
                     url,
                     retry_without_trace_id: isRetry,
+                    request_headers: requestHeaders,
+                    request_body: requestBody,
+                    response_headers: responseHeaders,
+                    response_body: responseData,
                 },
                 ...urlAndStoredUuids,
             };
@@ -503,6 +673,9 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo = []) {
                     error: errorMessage,
                     method,
                     url,
+                    request_headers: requestHeaders,
+                    request_body: requestBody,
+                    response_body: null,
                 },
                 ...urlAndStoredUuids,
             };
@@ -512,11 +685,23 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo = []) {
     }
     // Helper function to inject the X-Sf3-Rid header
     async function injectHeader(target, thisArg, input, init, sessionId, pageVisitUUID, networkUUID) {
+        // Get funcspan header if tracking is enabled
+        const funcSpanHeader = getFuncSpanHeader();
         if (input instanceof Request) {
             // Clone the Request and modify headers
             const clonedRequest = input.clone();
             const newHeaders = new Headers(clonedRequest.headers);
             newHeaders.set(xSf3RidHeader, `${sessionId}/${pageVisitUUID}/${networkUUID}`);
+            // Add funcspan header if tracking is enabled
+            if (funcSpanHeader) {
+                newHeaders.set(funcSpanHeader.name, funcSpanHeader.value);
+                if (DEBUG) {
+                    console.log(`[Sailfish] Added funcspan header to HTTP Request:`, {
+                        url: input.url,
+                        header: funcSpanHeader.name,
+                    });
+                }
+            }
             const modifiedRequest = new Request(clonedRequest, {
                 headers: newHeaders,
             });
@@ -527,6 +712,16 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo = []) {
             const modifiedInit = { ...init };
             const newHeaders = new Headers(init.headers || {});
             newHeaders.set(xSf3RidHeader, `${sessionId}/${pageVisitUUID}/${networkUUID}`);
+            // Add funcspan header if tracking is enabled
+            if (funcSpanHeader) {
+                newHeaders.set(funcSpanHeader.name, funcSpanHeader.value);
+                if (DEBUG) {
+                    console.log(`[Sailfish] Added funcspan header to HTTP fetch:`, {
+                        url: typeof input === "string" ? input : input.href,
+                        header: funcSpanHeader.name,
+                    });
+                }
+            }
             modifiedInit.headers = newHeaders;
             return await target.call(thisArg, input, modifiedInit);
         }
@@ -673,6 +868,8 @@ export const initRecorder = async (options) => {
         return;
     const g = (window.__sailfish_recorder ||= {});
     const currentSessionId = getOrSetSessionId();
+    // remove stale page visit data from previous sessions
+    clearPageVisitDataFromSessionStorage();
     // If already initialized for this session and socket is open, do nothing.
     if (g.initialized &&
         g.sessionId === currentSessionId &&