fix: session recording events to be sent on extension side (#26)

fix: session recording for live replay
steel-dev · Dec 8, 2024 · ad393a6 · ad393a6
1 parent a6b3b53
commit ad393a6
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 38 deletions.
diff --git a/api/extensions/recorder/background.js b/api/extensions/recorder/background.js
@@ -18,3 +18,42 @@ function injectScript(tabId, changeInfo, tab) {
 
 // Listen for any tab updates
 chrome.tabs.onUpdated.addListener(injectScript);
+
+const LOCAL_API_URL = "http://localhost:3000/v1/events";
+const FALLBACK_API_URL = "http://0.0.0.0:3000/v1/events"; // Need to point to 0.0.0.0 in some deploys
+let currentApiUrl = LOCAL_API_URL;
+
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  const sendEvents = () => {
+    fetch(currentApiUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      mode: "no-cors",
+      body: JSON.stringify({
+        events: message.events,
+      }),
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        sendResponse({ success: true });
+      })
+      .catch((error) => {
+        if (currentApiUrl === LOCAL_API_URL) {
+          // Retry with fallback URL
+          currentApiUrl = FALLBACK_API_URL;
+          sendEvents();
+        }
+      });
+  };
+  if (message.type === "SAVE_EVENTS") {
+    console.log("[Recorder Background] Saving events to", currentApiUrl);
+    sendEvents();
+
+    sendResponse({ success: true });
+    return true; // Required for async response
+  }
+});
diff --git a/api/extensions/recorder/inject.js b/api/extensions/recorder/inject.js
@@ -569,54 +569,30 @@ var rrwebRecord = (function () {
 
 let snapshots = [];
 
-console.log("[Recorder] Setting up rrweb...");
 rrwebRecord({
   emit: (event) => {
-    console.log("[Recorder] Event captured:", event.type);
     snapshots.push(event);
   },
 });
 
-const LOCAL_API_URL = "http://localhost:3000/v1/events";
-const FALLBACK_API_URL = "http://0.0.0.0:3000/v1/events"; // Need to point to 0.0.0.0 in some deploys
-let currentApiUrl = LOCAL_API_URL;
-
 function save() {
   if (snapshots.length > 0) {
-    console.log(`[Recorder] Attempting to save ${snapshots.length} events`);
-    const body = JSON.stringify({
-      events: snapshots,
-    });
-
-    console.log("[Recorder] Saving events to", currentApiUrl);
-    fetch(currentApiUrl, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
+    // Send events to background script
+    chrome.runtime.sendMessage(
+      {
+        type: "SAVE_EVENTS",
+        events: snapshots,
       },
-      body,
-    })
-      .then((response) => {
-        console.log("[Recorder] Save response status:", response.status);
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        console.log("[Recorder] Events saved successfully");
-        snapshots = [];
-      })
-      .catch((error) => {
-        console.error("[Recorder] Failed to save events:", error.toString());
-        if (currentApiUrl === LOCAL_API_URL) {
-          console.log("[Recorder] Switching to fallback URL");
-          currentApiUrl = FALLBACK_API_URL;
-          // Retry with the new URL
-          save();
+      (response) => {
+        if (response.success) {
+          snapshots = [];
+        } else {
+          console.error("[Recorder] Failed to save events:", response.error);
         }
-      });
+      },
+    );
   }
 }
-console.log("[Recorder] Setting up save interval...");
-setInterval(save, 1000);
-console.log("[Recorder] Adding beforeunload handler...");
+
+setInterval(save, 500);
 window.addEventListener("beforeunload", save);
-console.log("[Recorder] Initialization complete");