@sailfish-ai/recorder 1.0.0-beta-2 → 1.0.2

package/README.md

@@ -0,0 +1,3 @@
+# JS/TS Record-Only Package
+
+## TODO - Rename all Sailfish to GrepLion

package/dist/deviceInfo.js

@@ -0,0 +1,42 @@
+// deviceInfo.tsx
+import { sendMessage } from "./websocket";
+export async function gatherAndCacheDeviceInfo() {
+    // Gather device information asynchronously
+    // TODO - Sibyl v3 - get additional information from the device
+    // const connection = navigator.connection || {};
+    const geolocation = await getGeolocation();
+    const info = {
+        // connection: {
+        //   downlink: connection.downlink,
+        //   downlinkMax: connection.downlinkMax,
+        //   effectiveType: connection.effectiveType,
+        //   rtt: connection.rtt,
+        // },
+        // deviceMemory: navigator.deviceMemory,
+        language: navigator.language,
+        userAgent: navigator.userAgent,
+        geolocation,
+    };
+    // Immediately add the device info to the event cache
+    sendMessage({ type: "deviceInfo", data: { deviceInfo: info } });
+}
+// Geolocation handling
+function getGeolocation() {
+    return new Promise((resolve) => {
+        if ("geolocation" in navigator) {
+            navigator.geolocation.getCurrentPosition((position) => {
+                resolve({
+                    latitude: position.coords.latitude,
+                    longitude: position.coords.longitude,
+                });
+            }, (error) => {
+                console.error("Error getting geolocation:", error);
+                resolve(undefined);
+            });
+        }
+        else {
+            console.warn("Geolocation is not supported by this browser.");
+            resolve(undefined);
+        }
+    });
+}

package/dist/eventCache.js

@@ -2,23 +2,18 @@ let eventCache = [];
 export function cacheEvents(event) {
     eventCache.push(event);
 }
-// export function sendCachedEvents(webSocket: ReconnectingWebSocket): void {
-//   if (eventCache.length > 0 && webSocket.readyState === WebSocket.OPEN) {
-//     const message = {
-//       type: "events",
-//       events: eventCache,
-//     };
-//     webSocket.send(JSON.stringify(message));
-//     eventCache = [];
-//   }
-// }
-export function sendRecordingEvents(webSocket, sessionId) {
-    if (eventCache.length > 0) {
-        const message = {
-            type: "events",
-            events: eventCache,
-        };
-        webSocket.send(JSON.stringify(message));
-        eventCache = [];
+export function sendRecordingEvents(webSocket) {
+    if (webSocket && webSocket.readyState === WebSocket.OPEN) {
+        if (eventCache.length > 0) {
+            const message = {
+                type: "events",
+                events: eventCache,
+            };
+            webSocket.send(JSON.stringify(message));
+            eventCache = [];
+        }
+    }
+    else {
+        eventCache.push(...eventCache);
     }
 }

package/dist/exponentialBackoff.js

@@ -0,0 +1,38 @@
+const DEBUG = import.meta.env.VITE_DEBUG ? import.meta.env.VITE_DEBUG : false;
+export function silentFetch(input, init) {
+    return new Promise((resolve, reject) => {
+        fetch(input, init)
+            .then(resolve)
+            .catch((error) => {
+            if (error.message.includes("ERR_CONNECTION_REFUSED")) {
+                // Suppress the error but still reject for handling in retry logic
+                resolve(new Response(null, { status: 502, statusText: "Bad Gateway" })); // Return a 502 to trigger retry without logging
+            }
+            else {
+                reject(error); // Reject other errors normally
+            }
+        });
+    });
+}
+export function exponentialBackoff(fn, action, retries = 5, // Max retry attempts
+initialDelay = 2000, // Initial delay in ms
+backoffFactor = 2) {
+    let attempt = 0;
+    const attemptRequest = async () => {
+        try {
+            return await fn(); // Attempt to call the provided function
+        }
+        catch (error) {
+            attempt++;
+            if (attempt > retries) {
+                throw error; // Throw the error if max retries are exceeded
+            }
+            const delay = initialDelay * Math.pow(backoffFactor, attempt - 1); // Calculate exponential delay
+            if (DEBUG)
+                console.log(`Attempt ${attempt} failed: ${action}; Retrying in ${delay}ms...`);
+            await new Promise((resolve) => setTimeout(resolve, delay)); // Wait for delay
+            return attemptRequest(); // Recursively retry
+        }
+    };
+    return attemptRequest(); // Start the initial attempt
+}

package/dist/graphql.js

@@ -1,11 +1,27 @@
-export function sendGraphQLRequest(operationName, query, variables) {
-    return fetch(`${variables["backendApi"]}/graphql/?apiKey=${variables["apiKey"]}`, {
+import { exponentialBackoff } from "./exponentialBackoff"; // Import your custom backoff function
+const DEBUG = import.meta.env.VITE_DEBUG ? import.meta.env.VITE_DEBUG : false;
+export function sendGraphQLRequest(operationName, query, variables, retries = 5, // Number of retries before giving up
+initialBackoff = 2000, // Initial backoff in milliseconds
+backoffFactor = 2) {
+    const apiEndpoint = `${variables["backendApi"]}/graphql/?apiKey=${variables["apiKey"]}`;
+    const action = "Sending GraphQL request to Sailfish AI";
+    if (DEBUG)
+        console.log(`Initial GraphQL request for ${operationName} at ${apiEndpoint}`);
+    // Use the custom exponentialBackoff function
+    return exponentialBackoff(() => fetch(apiEndpoint, {
         method: "POST",
         headers: {
             "Content-Type": "application/json",
         },
         body: JSON.stringify({ operationName, query, variables }),
-    }).then((response) => response.json());
+    }).then((response) => {
+        if (DEBUG)
+            console.log(`Received response with status: ${response.status}`);
+        if (!response.ok) {
+            throw new Error(`GraphQL request failed with status ${response.status}`);
+        }
+        return response.json();
+    }), action, retries, initialBackoff, backoffFactor);
 }
 export function fetchCaptureSettings(apiKey, backendApi) {
     return sendGraphQLRequest("GetCaptureSettingsFromApiKey", `

package/dist/index.js

@@ -1,8 +1,8 @@
 import { v4 as uuidv4 } from "uuid";
+import { gatherAndCacheDeviceInfo } from "./deviceInfo";
 import { sendRecordingEvents } from "./eventCache";
 import { fetchCaptureSettings, startRecordingSession } from "./graphql";
 import { initializeRecording } from "./recording";
-import { initializeWebSocket } from "./websocket";
 // Default Settings
 export const DEFAULT_DOMAINS_TO_IGNORE = [];
 export const DEFAULT_CAPTURE_SETTINGS = {
@@ -46,17 +46,81 @@ export const DEFAULT_NETWORK_CAPTURE_SETTINGS = {
     recordInitialRequests: false,
 };
 // Functions
+// Function to get the current sessionId from sessionStorage
+function getOrSetSessionId(forceNew = false) {
+    let sessionId = sessionStorage.getItem("sailfishSessionId");
+    if (!sessionId || forceNew) {
+        sessionId = uuidv4();
+        sessionStorage.setItem("sailfishSessionId", sessionId);
+    }
+    return sessionId;
+}
+// Function to reset the sessionId when the page becomes visible again
+function handleVisibilityChange() {
+    if (document.visibilityState === "visible") {
+        getOrSetSessionId(true); // Force a new sessionId when the user returns to the page
+    }
+}
+// Initialize event listeners for visibility change and page unload
+document.addEventListener("visibilitychange", handleVisibilityChange);
+window.addEventListener("beforeunload", () => {
+    sessionStorage.removeItem("sailfishSessionId");
+});
+function storeCredentialsAndConnection({ apiKey, backendApi, }) {
+    sessionStorage.setItem("sailfishApiKey", apiKey);
+    sessionStorage.setItem("sailfishBackendApi", backendApi);
+}
+// Intercepting XMLHttpRequest
+(function () {
+    const originalOpen = XMLHttpRequest.prototype.open;
+    const originalSend = XMLHttpRequest.prototype.send;
+    const sessionId = getOrSetSessionId();
+    XMLHttpRequest.prototype.open = function (...args) {
+        this._url = args[1]; // Store the request URL
+        originalOpen.apply(this, args);
+    };
+    XMLHttpRequest.prototype.send = function (...args) {
+        if (sessionId) {
+            this.setRequestHeader("X-Sf3-Rid", sessionId);
+        }
+        originalSend.apply(this, args);
+    };
+})();
+// Intercepting fetch API
+(function () {
+    const originalFetch = window.fetch;
+    const sessionId = getOrSetSessionId();
+    window.fetch = async function (input, init = {}) {
+        if (sessionId) {
+            init.headers = {
+                ...init.headers,
+                "X-Sf3-Rid": sessionId,
+            };
+        }
+        return originalFetch(input, init);
+    };
+})();
+// Main Recording Function
 export async function startRecording({ apiKey, backendApi, }) {
-    const sessionId = uuidv4(); // Use the same value for recordingId and sessionId
+    let sessionId = getOrSetSessionId();
+    storeCredentialsAndConnection({ apiKey, backendApi });
+    gatherAndCacheDeviceInfo();
     try {
         const captureSettingsResponse = await fetchCaptureSettings(apiKey, backendApi);
         const captureSettings = captureSettingsResponse.data?.captureSettingsFromApiKey ||
             DEFAULT_CAPTURE_SETTINGS;
         const sessionResponse = await startRecordingSession(apiKey, sessionId, backendApi);
         if (sessionResponse.data?.startRecordingSession) {
-            const webSocket = initializeWebSocket(backendApi, apiKey, sessionId);
-            initializeRecording(captureSettings, DEFAULT_CONSOLE_RECORDING_SETTINGS, DEFAULT_NETWORK_CAPTURE_SETTINGS, backendApi, apiKey, sessionId);
-            setInterval(() => sendRecordingEvents(webSocket, sessionId), 10000);
+            // Initialize recording
+            const websocket = await initializeRecording(captureSettings, DEFAULT_CONSOLE_RECORDING_SETTINGS, DEFAULT_NETWORK_CAPTURE_SETTINGS, backendApi, apiKey, sessionId);
+            // Set up an interval to send recording events
+            setInterval(() => {
+                if (websocket && websocket.readyState === WebSocket.OPEN) {
+                    sendRecordingEvents(websocket);
+                }
+                else {
+                }
+            }, 10000);
         }
         else {
             console.error("Failed to start recording session:", sessionResponse.errors || sessionResponse);
@@ -72,14 +136,10 @@ function extractHostname(url) {
     hostname = hostname.split("?")[0];
     return hostname;
 }
-function getWebSocketHost(url) {
-    const parser = document.createElement("a");
-    parser.href = url;
-    return `${parser.hostname}${parser.port ? `:${parser.port}` : ""}`;
-}
 // Re-export from other modules
 export * from "./eventCache";
 export * from "./graphql";
 export * from "./recording";
+export * from "./sendSailfishMessages";
 export * from "./types";
 export * from "./websocket";

package/dist/recording.js

@@ -1,16 +1,45 @@
 import { record } from "@sailfish-rrweb/record";
 import { getRecordConsolePlugin, } from "@sailfish-rrweb/rrweb-plugin-console-record";
-import { getRecordNetworkPlugin, } from "@sailfish-rrweb/rrweb-plugin-network-record";
 import { cacheEvents, sendRecordingEvents } from "./eventCache";
 import { initializeWebSocket } from "./websocket";
 const MASK_CLASS = "sailfishSanitize";
 const DEFAULT_DOMAINS_TO_IGNORE = [];
 function maskInputFn(text, node) {
-    // The maskInputFn logic here
-    return text; // Placeholder return
+    // Exclude input[type=hidden] fields
+    if (node.type === "hidden") {
+        return "";
+    }
+    const patterns = {
+        creditCard: /\b(?:\d[ -]*?){13,16}\b/,
+        ssn: /\b\d{3}-\d{2}-\d{4}\b/,
+    };
+    const MASK_CLASS = "mask"; // Assume this is a known constant
+    // Check for data attributes indicating sensitive information
+    // Check if element or parents have MASK_CLASS in their className
+    if (node.closest(`.${MASK_CLASS}`)) {
+        // Mask the input and retain the length of the input
+        return "*".repeat(text.length);
+    }
+    else if (node.hasAttribute("data-cc") ||
+        (node.getAttribute("autocomplete")?.startsWith("cc-") ?? false) ||
+        patterns.creditCard.test(text)) {
+        // Mask all but the last 4 digits of a credit card number
+        return "**** **** **** " + text.slice(-4);
+    }
+    else if (node.hasAttribute("data-ssn") || patterns.ssn.test(text)) {
+        // Mask the first 5 digits of an SSN
+        return "***-**-" + text.slice(-4);
+    }
+    else if (node.hasAttribute("data-dob")) {
+        // Mask the day and month of a date of birth, revealing only the year
+        return "**/**/" + text.slice(-4);
+    }
+    // Default to returning the original text
+    return text;
 }
-export async function initializeRecording(captureSettings, // TODO - Sibyl launch - replace type
+export async function initializeRecording(captureSettings, // TODO - Sibyl post-launch - replace type
 consoleRecordSettings, networkRecordSettings, backendApi, apiKey, sessionId) {
+    const webSocket = initializeWebSocket(backendApi, apiKey, sessionId);
     try {
         record({
             emit(event) {
@@ -18,17 +47,17 @@ consoleRecordSettings, networkRecordSettings, backendApi, apiKey, sessionId) {
             },
             plugins: [
                 getRecordConsolePlugin(consoleRecordSettings),
-                getRecordNetworkPlugin(networkRecordSettings),
+                // getRecordNetworkPlugin(networkRecordSettings),
             ],
             maskInputOptions: { text: true }, // Fix the incorrect property name
             maskInputFn,
             maskTextClass: MASK_CLASS,
             ...captureSettings,
         });
-        const webSocket = initializeWebSocket(backendApi, apiKey, sessionId);
-        setInterval(() => sendRecordingEvents(webSocket, sessionId), 10000);
+        setInterval(() => sendRecordingEvents(webSocket), 10000);
     }
     catch (error) {
         console.error("Error importing plugins!", error);
     }
+    return webSocket;
 }