added MORE console logs and made them more semantic

Author: jrosengrant

src/app/components/App.tsx

@@ -15,6 +15,7 @@ function App(): JSX.Element {
     <ThemeProvider theme={theme}>
       <Router>
         {/* we wrap our application with the <Router> tag so that all components that are nested will have the react-router context */}
+        {console.log('App reloaded')}
         <MainContainer />
       </Router>
     </ThemeProvider>

src/app/containers/ErrorContainer.tsx

@@ -49,7 +49,8 @@ function ErrorContainer(): JSX.Element {
 
   // hook that sets timer while waiting for a snapshot from the background script, resets if the tab changes/reloads
   useEffect(() => {
-    if (tabs[currentTab]) console.log('ErrorContainer useEffect fired, ', tabs[currentTab].status);
+    if (tabs[currentTab])
+      console.log('ErrorContainer useEffect fired, ', JSON.stringify(tabs[currentTab]?.status));
     // We declare a function
     function setLoadingArray(i: number, value: boolean) {
       // 'setLoadingArray' checks an element in our 'loadingArray' local state and compares it with passed in boolean argument. If they don't match, we update our local state replacing the selected element with the boolean argument

src/app/containers/MainContainer.tsx

@@ -39,7 +39,9 @@ function MainContainer(): JSX.Element {
   );
   //JR: check connection status
   const { connectionStatus }: MainState = useSelector((state: RootState) => state.main);
-  console.log('MainContainer connectionStatus at initialization: ', connectionStatus);
+
+  // JR 12.22.23: so far this log always returns true
+  //console.log('MainContainer connectionStatus at initialization: ', connectionStatus);
 
   const [actionView, setActionView] = useState(true); // We create a local state 'actionView' and set it to true
 
@@ -70,18 +72,24 @@ function MainContainer(): JSX.Element {
   };
 
   // Function to listen for a message containing snapshots from the /extension/build/background.js service worker
-  const messageListener = (message: {
+  const messageListener = ({
+    action,
+    payload,
+    sourceTab,
+  }: {
     action: string;
     payload: Record<string, unknown>;
     sourceTab: number;
   }) => {
-    const { action, payload, sourceTab } = message;
+    // const { action, payload, sourceTab } = message;
     let maxTab: number;
+
     console.log(
-      'MainContainer messageListener message. action: ',
+      'MainContainer received message inside of the port messageListener. action: ',
       action,
       'payload: ',
-      JSON.stringify(payload.status),
+      // @ts-ignore
+      JSON.stringify(payload[Object.keys(payload)[0]]?.status),
       payload,
       'sourceTab: ',
       sourceTab,
@@ -109,7 +117,10 @@ function MainContainer(): JSX.Element {
         break;
       }
       case 'changeTab': {
-        console.log('MainContainer changeTab payload: ', payload);
+        console.log(
+          'MainContainer is dispatching this payload to the mainSlice setTab reducer: ',
+          payload,
+        );
         dispatch(setTab(payload));
         break;
       }
@@ -139,11 +150,11 @@ function MainContainer(): JSX.Element {
     const currentPort = chrome.runtime.connect({ name: 'uiPort1' });
 
     // JR: why are we removing the listener just to readd it? logging here
-    console.log('messageListener before removing: ', messageListener);
-    console.log(
-      'currentPort hasListener? before removing: ',
-      currentPort.onMessage.hasListener(messageListener),
-    );
+    // console.log('messageListener before removing: ', messageListener);
+    // console.log(
+    //   'currentPort hasListener? before removing: ',
+    //   currentPort.onMessage.hasListener(messageListener),
+    // );
     // If messageListener exists on currentPort, remove it
     while (currentPort.onMessage.hasListener(messageListener))
       currentPort.onMessage.removeListener(messageListener);

src/app/slices/mainSlice.ts

@@ -103,7 +103,9 @@ export const mainSlice = createSlice({
         tabs[currentTab] || {};
       const { payload } = action;
 
-      console.log('mainSlice initialConnect reducer fired, ', payload);
+      console.log('mainSlice initialConnect reducer fired, ', payload),
+        'time: ',
+        new Date().toLocaleString();
       Object.keys(payload).forEach((tab) => {
         // check if tab exists in memory
         // add new tab
@@ -136,15 +138,33 @@ export const mainSlice = createSlice({
     setTab: (state, action) => {
       const { tabs, currentTab } = state;
       const { mode } = tabs[currentTab] || {};
-      console.log('mainSlice setTab, mode: ', JSON.stringify(mode), 'payload: ', action.payload);
+      // console.log(
+      //   'mode test. mode exists? ',
+      //   !!mode,
+      //   'optional chained mode return value: ',
+      //   mode?.paused,
+      // );
+      console.log(
+        'mainSlice setTab reducer received a payload. mode: ',
+        JSON.stringify(mode),
+        'payload: ',
+        action.payload,
+      );
       if (!mode?.paused) {
         if (typeof action.payload === 'number') {
           state.currentTab = action.payload;
           return;
         } else if (typeof action.payload === 'object') {
           state.currentTab = action.payload.tabId;
           if (action.payload?.title) state.currentTitle = action.payload.title;
-          console.log('mainSlice setTab successful! currentTitle: ', state.currentTitle);
+          console.log(
+            'mainSlice setTab successful! state.currentTab: ',
+            state.currentTab,
+            'state.currentTitle: ',
+            state.currentTitle,
+            'state.tabs[currentTab].status: ',
+            JSON.stringify(state.tabs[currentTab]?.status),
+          );
           return;
         }
       }

src/extension/background.js

@@ -162,15 +162,23 @@ chrome.runtime.onConnect.addListener((port) => {
   
     Again, this port object is used for communication within your extension, not for communication with external ports or tabs in the Chrome browser. If you need to interact with specific tabs or external ports, you would use other APIs or methods, such as chrome.tabs or other Chrome Extension APIs.
   */
-  console.log('tabsObj onConnect: ', JSON.stringify(tabsObj));
+  console.log(
+    'tabsObj onConnect: ',
+    JSON.stringify(tabsObj[0]?.status),
+    'time: ',
+    new Date().toLocaleString(),
+  );
   portsArr.push(port); // push each Reactime communication channel object to the portsArr
   console.log('portsArr onConnect: ', Object.keys(portsArr));
 
-  // JR: CONSIDER DELETING
+  // JR: CONSIDER DELETING?
   // 12.20.23 commenting out, possible culprit of many in no target bug
   if (portsArr.length > 0) {
     portsArr.forEach((bg, index) => {
-      console.log('background onConnect. Send changeTab for port ', index);
+      console.log(
+        'background onConnect is sending a changeTab message to frontend for port ',
+        index,
+      );
       // go through each port object (each Reactime instance)
       bg.postMessage({
         // send passed in action object as a message to the current port
@@ -180,12 +188,16 @@ chrome.runtime.onConnect.addListener((port) => {
     });
   }
 
-  // JR: CONSIDER DELETING
+  // JR: CONSIDER DELETING?
   if (Object.keys(tabsObj).length > 0) {
-    port.postMessage({
-      action: 'initialConnectSnapshots',
-      payload: tabsObj,
-    });
+    console.log(
+      'background onConnect is sending a initialConnectSnapshots message to frontend. Time: ',
+      new Date().toLocaleString(),
+    ),
+      port.postMessage({
+        action: 'initialConnectSnapshots',
+        payload: tabsObj,
+      });
   }
 
   // every time devtool is closed, remove the port from portsArr
@@ -277,7 +289,16 @@ chrome.runtime.onConnect.addListener((port) => {
 // INCOMING MESSAGE FROM CONTENT SCRIPT TO BACKGROUND.JS
 // background.js listening for a message from contentScript.js
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-  console.log('background.js received message with action: ', request.action, request);
+  console.log(
+    'background.js received message from content script with type: ',
+    request.type,
+    'action: ',
+    request.action,
+    'request body: ',
+    request,
+    'time: ',
+    new Date().toLocaleString(),
+  );
   // AUTOMATIC MESSAGE SENT BY CHROME WHEN CONTENT SCRIPT IS FIRST LOADED: set Content
   if (request.type === 'SIGN_CONNECT') {
     return true;
@@ -307,7 +328,13 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   // everytime we get a new tabId, add it to the object
   if (isReactTimeTravel && !(tabId in tabsObj)) {
     tabsObj[tabId] = createTabObj(tabTitle);
-    console.log('tabsObj after createTabObj function call: ', tabsObj);
+
+    console.log(
+      'tabsObj after createTabObj function call: ',
+      JSON.stringify(tabsObj[0]?.status),
+      'time: ',
+      new Date().toLocaleString(),
+    );
   }
 
   switch (action) {
@@ -375,6 +402,11 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
         function: injectScript,
         args: [chrome.runtime.getURL('bundles/backend.bundle.js'), tabId],
       });
+
+      console.log(
+        'background injected the backend bundle into the webpage. Time: ',
+        new Date().toLocaleString(),
+      );
       break;
     }
     case 'recordSnap': {
@@ -486,9 +518,11 @@ chrome.tabs.onActivated.addListener((info) => {
     // never set a reactime instance to the active tab
     if (!tab.pendingUrl?.match('^chrome-extension')) {
       activeTab = tab;
-      console.log('tabs.onActivated info: ', info);
-      console.log('activeTab: ', activeTab);
-      console.log('tabs.onActivated portsArr: ', portsArr);
+      console.log('background tabs.onActivated has fired. activeTab: ', JSON.stringify(activeTab));
+      console.log(
+        'background tabs.onActivated will send changeTab message to frontend if portsArr is > 0: ',
+        Object.keys(portsArr),
+      );
       if (portsArr.length > 0) {
         portsArr.forEach((bg) =>
           bg.postMessage({