@sailfish-ai/recorder 1.7.2 → 1.7.6

package/dist/constants.js

@@ -0,0 +1,12 @@
+export const DomContentEventId = 24;
+export const NetworkRequestEventId = 27;
+export const xSf3RidHeader = "X-Sf3-Rid";
+export const DomContentSource = {
+    loading: 0,
+    contentLoaded: 1,
+    complete: 2,
+    beforeunload: 3,
+    unload: 4,
+};
+export const Loading = "loading";
+export const Complete = "complete";

package/dist/graphql.js

@@ -42,13 +42,18 @@ export function fetchCaptureSettings(apiKey, backendApi) {
   `, { apiKey, backendApi });
 }
 export function startRecordingSession(apiKey, recordingId, backendApi) {
-    return sendGraphQLRequest("StartSession", `mutation StartSession($apiKey: UUID!, $recordingSessionId: UUID!) {
-      startRecordingSession(companyApiKey: $apiKey, sessionId: $recordingSessionId) {
+    return sendGraphQLRequest("StartSession", `mutation StartSession($apiKey: UUID!, $recordingSessionId: UUID!, $pageSplitRecording: Boolean) {
+      startRecordingSession(
+        companyApiKey: $apiKey,
+        sessionId: $recordingSessionId,
+        pageSplitRecordingPossible: $pageSplitRecording
+      ) {
         id
       }
     }`, {
         apiKey,
         recordingSessionId: recordingId,
+        pageSplitRecording: true, // for creating shadow session with page split recording data in BE
         backendApi,
     });
 }

package/dist/index.js

@@ -1,11 +1,12 @@
 // import { NetworkRecordOptions } from "@sailfish-rrweb/rrweb-plugin-network-record";
 import { v4 as uuidv4 } from "uuid";
 import { gatherAndCacheDeviceInfo } from "./deviceInfo";
-import { sendRecordingEvents } from "./eventCache";
+import { cacheEvents, sendRecordingEvents } from "./eventCache";
 import { fetchCaptureSettings, sendDomainsToNotPropagateHeaderTo, startRecordingSession, } from "./graphql";
 import { sendMapUuidIfAvailable } from "./mapUuid";
-import { initializeConsolePlugin, initializeRecording } from "./recording";
+import { initializeDomContentEvents, initializeConsolePlugin, initializeRecording, getUrlAndStoredUuids, } from "./recording";
 import { sendMessage } from "./websocket";
+import { NetworkRequestEventId, xSf3RidHeader } from "./constants";
 // Default list of domains to ignore
 const DOMAINS_TO_NOT_PROPAGATE_HEADER_TO_DEFAULT = [
     "t.co",
@@ -57,18 +58,23 @@ export const DEFAULT_CONSOLE_RECORDING_SETTINGS = {
 //   recordInitialRequests: false,
 // };
 function trackDomainChanges() {
-    let lastDomain = window.location.href;
+    let lastDomain = window.location.href.split("?")[0];
     const checkDomainChange = (forceSend = false) => {
-        const currentDomain = window.location.href;
+        const currentDomain = window.location.href.split("?")[0];
         if (forceSend || currentDomain !== lastDomain) {
-            // console.log(`Domain changed from ${lastDomain} to ${currentDomain}`);
             lastDomain = currentDomain;
+            const pageVisitUUID = uuidv4();
+            const prevPageVisitUUID = sessionStorage.getItem("pageVisitUUID");
+            sessionStorage.setItem("pageVisitUUID", pageVisitUUID);
+            sessionStorage.setItem("prevPageVisitUUID", prevPageVisitUUID);
             const timestamp = Date.now();
             sendMessage({
                 type: "routeChange",
                 data: {
                     url: currentDomain,
                     timestamp,
+                    page_visit_uuid: pageVisitUUID,
+                    prev_page_visit_uuid: prevPageVisitUUID,
                 },
             });
         }
@@ -130,10 +136,17 @@ function handleVisibilityChange() {
         getOrSetSessionId(); // Restore sessionId when the user returns to the page
     }
 }
+function clearPageVisitUuid() {
+    sessionStorage.removeItem("pageVisitUUID");
+    sessionStorage.removeItem("prevPageVisitUUID");
+}
 // Initialize event listeners for visibility change and page unload
 document.addEventListener("visibilitychange", handleVisibilityChange);
 // Clearing window.name on refresh to generate and retain a new sessionId
-window.addEventListener("beforeunload", () => (window.name = ""));
+window.addEventListener("beforeunload", () => {
+    window.name = "";
+    clearPageVisitUuid();
+});
 function storeCredentialsAndConnection({ apiKey, backendApi, }) {
     sessionStorage.setItem("sailfishApiKey", apiKey);
     sessionStorage.setItem("sailfishBackendApi", backendApi);
@@ -232,7 +245,9 @@ function setupXMLHttpRequestInterceptor(domainsToNotPropagateHeaderTo, domainsTo
             matchUrlWithWildcard(url, domainsToPropagateHeadersTo);
         if (sessionId && shouldPropagateHeader) {
             try {
-                this.setRequestHeader("X-Sf3-Rid", sessionId);
+                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);
@@ -274,7 +289,7 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo, domainsToPropagat
                     return target.apply(thisArg, args);
                 }
                 if (cachedResult === "propagate") {
-                    return injectHeader(target, thisArg, args, input, init, sessionId);
+                    return injectHeaderWrapper(target, thisArg, args, input, init, sessionId, url);
                 }
             }
             // Check domain exclusion
@@ -290,38 +305,95 @@ function setupFetchInterceptor(domainsToNotPropagateHeadersTo, domainsToPropagat
                 return target.apply(thisArg, args);
             }
             cache.set(url, "propagate");
-            return injectHeader(target, thisArg, args, input, init, sessionId);
+            return injectHeaderWrapper(target, thisArg, args, input, init, sessionId, url);
         },
     });
-    // Helper function to inject the X-Sf3-Rid header
-    function injectHeader(target, thisArg, args, input, init, sessionId) {
+    // Wrapper function to emit 'networkRequest' event
+    async function injectHeaderWrapper(target, thisArg, args, input, init, sessionId, url) {
         if (sessionId) {
-            if (input instanceof Request) {
-                // Clone the Request and modify headers
-                const clonedRequest = input.clone();
-                const newHeaders = new Headers(clonedRequest.headers);
-                newHeaders.set("X-Sf3-Rid", sessionId);
-                const modifiedRequest = new Request(clonedRequest, {
-                    headers: newHeaders,
+            const networkUUID = uuidv4();
+            const urlAndStoredUuids = getUrlAndStoredUuids();
+            const method = init.method || "GET";
+            const startTime = Date.now();
+            try {
+                const response = await injectHeader(target, thisArg, input, init, sessionId, urlAndStoredUuids.page_visit_uuid, networkUUID);
+                const endTime = Date.now();
+                const status = response.status;
+                const success = response.ok;
+                const error = success ? '' : `Request Error: ${response.statusText}`;
+                // Emit 'networkRequestFinished' event
+                cacheEvents({
+                    type: NetworkRequestEventId,
+                    timestamp: endTime,
+                    data: {
+                        request_id: networkUUID,
+                        session_id: sessionId,
+                        timestamp_start: startTime,
+                        timestamp_end: endTime,
+                        response_code: status,
+                        success,
+                        error,
+                        method,
+                        url,
+                    },
+                    ...urlAndStoredUuids,
                 });
-                return target.call(thisArg, modifiedRequest, init);
+                return response;
             }
-            else {
-                // For string or URL input, modify init to add headers
-                const modifiedInit = { ...init };
-                const newHeaders = new Headers(init.headers || {});
-                newHeaders.set("X-Sf3-Rid", sessionId);
-                modifiedInit.headers = newHeaders;
-                return target.call(thisArg, input, modifiedInit);
+            catch (error) {
+                const endTime = Date.now();
+                const success = false;
+                const responseCode = error.response?.status || 500;
+                const errorMessage = error.message || "Fetch request failed";
+                // Emit 'networkRequestFinished' event with error
+                cacheEvents({
+                    type: NetworkRequestEventId,
+                    timestamp: endTime,
+                    data: {
+                        request_id: networkUUID,
+                        session_id: sessionId,
+                        timestamp_start: startTime,
+                        timestamp_end: endTime,
+                        response_code: responseCode,
+                        success,
+                        error: errorMessage,
+                        method,
+                        url,
+                    },
+                    ...urlAndStoredUuids
+                });
+                throw error;
             }
         }
         else {
             return target.apply(thisArg, args);
         }
     }
+    // Helper function to inject the X-Sf3-Rid header
+    async function injectHeader(target, thisArg, input, init, sessionId, pageVisitUUID, networkUUID) {
+        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}`);
+            const modifiedRequest = new Request(clonedRequest, {
+                headers: newHeaders,
+            });
+            return await target.call(thisArg, modifiedRequest, init);
+        }
+        else {
+            // For string or URL input, modify init to add headers
+            const modifiedInit = { ...init };
+            const newHeaders = new Headers(init.headers || {});
+            newHeaders.set(xSf3RidHeader, `${sessionId}/${pageVisitUUID}/${networkUUID}`);
+            modifiedInit.headers = newHeaders;
+            return await target.call(thisArg, input, modifiedInit);
+        }
+    }
 }
 // Main Recording Function
 export async function startRecording({ apiKey, backendApi = "https://api-service.sailfishqa.com", domainsToPropagateHeaderTo = [], domainsToNotPropagateHeaderTo = [], serviceVersion = "", serviceIdentifier = "", }) {
+    initializeDomContentEvents();
     initializeConsolePlugin(DEFAULT_CONSOLE_RECORDING_SETTINGS);
     let sessionId = getOrSetSessionId();
     storeCredentialsAndConnection({ apiKey, backendApi });

package/dist/recording.js

@@ -5,6 +5,7 @@ import { EventType } from "@sailfish-rrweb/types";
 import { ZendeskAPI } from "react-zendesk";
 import { cacheEvents, sendRecordingEvents } from "./eventCache";
 import { initializeWebSocket } from "./websocket";
+import { DomContentEventId, DomContentSource, Loading, Complete } from "./constants";
 const MASK_CLASS = "sailfishSanitize";
 const ZENDESK_ELEMENT_ID = "zendesk_chat";
 const ZENDESK_PROVIDER = "Zendesk";
@@ -34,6 +35,56 @@ function maskInputFn(text, node) {
     }
     return text;
 }
+export const getUrlAndStoredUuids = () => ({
+    page_visit_uuid: sessionStorage.getItem("pageVisitUUID"),
+    prev_page_visit_uuid: sessionStorage.getItem("prevPageVisitUUID"),
+    href: location.origin + location.pathname,
+});
+export function initializeDomContentEvents() {
+    document.addEventListener("readystatechange", () => {
+        const timestamp = Date.now();
+        const newEvent = {
+            type: DomContentEventId,
+            data: { source: 0, info: "" },
+            timestamp,
+            ...getUrlAndStoredUuids(),
+        };
+        switch (document.readyState) {
+            case Loading:
+                newEvent.data.source = DomContentSource.loading;
+                break;
+            case Complete:
+                newEvent.data.source = DomContentSource.complete;
+                break;
+        }
+        if (newEvent.data.info)
+            cacheEvents(newEvent);
+    });
+    document.addEventListener("DOMContentLoaded", () => {
+        cacheEvents({
+            type: DomContentEventId,
+            data: { source: DomContentSource.contentLoaded },
+            timestamp: Date.now(),
+            ...getUrlAndStoredUuids(),
+        });
+    });
+    window.addEventListener("beforeunload", () => {
+        cacheEvents({
+            type: DomContentEventId,
+            data: { source: DomContentSource.beforeunload },
+            timestamp: Date.now(),
+            ...getUrlAndStoredUuids(),
+        });
+    });
+    window.addEventListener("unload", () => {
+        cacheEvents({
+            type: DomContentEventId,
+            data: { source: DomContentSource.unload },
+            timestamp: Date.now(),
+            ...getUrlAndStoredUuids(),
+        });
+    });
+}
 export function initializeConsolePlugin(consoleRecordSettings) {
     const { name, observer } = getRecordConsolePlugin(consoleRecordSettings);
     observer((payload) => cacheEvents({
@@ -52,6 +103,7 @@ backendApi, apiKey, sessionId) {
     try {
         record({
             emit(event) {
+                Object.assign(event, getUrlAndStoredUuids());
                 // Attach sessionId to each event
                 event.sessionId = sessionId;
                 cacheEvents(event);