added invalid payload checks

Author: garrettlchow

src/app/containers/ErrorContainer.tsx

@@ -12,10 +12,31 @@ function ErrorContainer(props: ErrorContainerProps): JSX.Element {
 
   // function that launches the main app and refreshes the page
   function launch(): void {
-    dispatch(launchContentScript(tabs[currentTab]));
+    // Add validation to ensure we have valid data
+    if (!currentTab) {
+      console.warn('No current tab available');
+      return;
+    }
+
+    if (!tabs || !tabs[currentTab]) {
+      // If no tab data exists, create a minimal valid payload
+      const defaultPayload = {
+        status: {
+          contentScriptLaunched: false,
+          reactDevToolsInstalled: false,
+          targetPageisaReactApp: false,
+        },
+      };
+      dispatch(launchContentScript(defaultPayload));
+    } else {
+      dispatch(launchContentScript(tabs[currentTab]));
+    }
+
     // Allow the dispatch to complete before refreshing
     setTimeout(() => {
-      chrome.tabs.reload(currentTab);
+      if (currentTab) {
+        chrome.tabs.reload(currentTab);
+      }
     }, 100);
   }
 

src/app/styles/components/_ax.scss

@@ -20,7 +20,7 @@
   padding: 8px 16px;
   font-size: 14px;
   font-weight: 500;
-  color: var(--button-primary-text);
+  color: var(--bg-primary);
   background-color: var(--color-primary);
   border-radius: 6px;
   cursor: pointer;

src/app/styles/layout/_stateContainer.scss

@@ -160,7 +160,7 @@
   overflow: auto;
   list-style: none;
   padding: 16px;
-  margin: 0 0 50px;
+  margin: 0;
 }
 
 .tree-component {

src/extension/background.js

@@ -391,6 +391,10 @@ chrome.runtime.onConnect.addListener(async (port) => {
   // (i.e. they're all related to the button actions on Reactime)
   port.onMessage.addListener(async (msg) => {
     const { action, payload, tabId } = msg;
+    console.log(`Received message - Action: ${action}, Payload:`, payload);
+    if (!payload && ['import', 'setPause', 'jumpToSnap'].includes(action)) {
+      console.error(`Invalid payload received for action: ${action}`, new Error().stack);
+    }
 
     switch (action) {
       // import action comes through when the user uses the "upload" button on the front end to import an existing snapshot tree
@@ -708,7 +712,6 @@ chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
               payload: tabsObj,
               sourceTab,
             });
-            console.log(`Sent snapshots to port at index ${index}`);
           } catch (error) {
             console.warn(`Failed to send snapshots to port at index ${index}:`, error);
           }