feat: toggleable debug console on mobile in local/dev/stage (#1371)

* feat: toggleable debug log on mobile in local/dev/stage * fix: handle terminal logging of objects via json encode
hotosm · Mar 22, 2024 · 5e6e245 · 5e6e245
1 parent 4125867
commit 5e6e245
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 2 deletions.
diff --git a/docker-compose.main.yml b/docker-compose.main.yml
@@ -105,6 +105,7 @@ services:
       args:
         APP_VERSION: main
         VITE_API_URL: https://${FMTM_API_DOMAIN:-api.${FMTM_DOMAIN}}
+        NODE_ENV: production
     volumes:
       - fmtm_frontend:/frontend
     network_mode: none

diff --git a/src/frontend/prod.dockerfile b/src/frontend/prod.dockerfile
@@ -10,7 +10,7 @@ ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
 RUN pnpm install
 
-ARG NODE_ENV=production
+ARG NODE_ENV
 ENV NODE_ENV ${NODE_ENV}
 COPY . .
 RUN pnpm run build --mode ${NODE_ENV}

diff --git a/src/frontend/src/utilities/CustomDrawer.jsx b/src/frontend/src/utilities/CustomDrawer.jsx
@@ -1,5 +1,7 @@
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
 import SwipeableDrawer from '@mui/material/SwipeableDrawer';
+import Button from '@/components/common/Button';
+import { Modal } from '@/components/common/Modal';
 import CoreModules from '@/shared/CoreModules';
 import AssetModules from '@/shared/AssetModules';
 import { NavLink } from 'react-router-dom';
@@ -9,6 +11,30 @@ import { LoginActions } from '@/store/slices/LoginSlice';
 import { ProjectActions } from '@/store/slices/ProjectSlice';
 
 export default function CustomDrawer({ open, placement, size, type, onClose, onSignOut, setOpen }) {
+  const [showDebugConsole, setShowDebugConsole] = useState(false);
+  const [logs, setLogs] = useState([]);
+  useEffect(() => {
+    if (import.meta.env.MODE === 'development') {
+      // Override console.log to capture logs
+      const originalConsoleLog = console.log;
+      console.log = (...args) => {
+        originalConsoleLog.apply(console, args);
+        setLogs((prevLogs) => [
+          ...prevLogs,
+          args.map((arg) => (typeof arg === 'object' ? JSON.stringify(arg) : arg)).join(' '),
+        ]);
+      };
+
+      // Restore original console.log when component unmounts
+      return () => {
+        console.log = originalConsoleLog;
+      };
+    }
+  }, []);
+  const toggleDebugConsole = () => {
+    setShowDebugConsole((prev) => !prev);
+  };
+
   const defaultTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme);
   const dispatch = CoreModules.useAppDispatch();
 
@@ -106,6 +132,33 @@ export default function CustomDrawer({ open, placement, size, type, onClose, onS
 
   return (
     <div>
+      {import.meta.env.MODE === 'development' && (
+        <div>
+          <div
+            style={{
+              position: 'fixed',
+              bottom: 0,
+              width: '100%',
+              height: '33vh',
+              backgroundColor: 'white',
+              border: '1px solid',
+              padding: '16px 32px',
+              display: showDebugConsole ? 'flex' : 'none',
+              flexDirection: 'column',
+              zIndex: 10000,
+              overflowY: 'auto',
+            }}
+          >
+            <button style={{ alignSelf: 'flex-end', marginBottom: '10px' }} onClick={toggleDebugConsole}>
+              Close
+            </button>
+            {/* Display console logs */}
+            {logs.map((log, index) => (
+              <p key={index}>{log}</p>
+            ))}
+          </div>
+        </div>
+      )}
       <React.Fragment>
         <SwipeableDrawer swipeAreaWidth={0} onOpen={onClose} anchor={'right'} open={open} onClose={onClose}>
           <CoreModules.Stack sx={{ display: 'flex', flexDirection: 'column', padding: 3 }}>
@@ -199,6 +252,9 @@ export default function CustomDrawer({ open, placement, size, type, onClose, onS
                   </NavLink>
                 ),
               )}
+              {import.meta.env.MODE === 'development' && (
+                <Button onClick={() => setShowDebugConsole(true)} btnText="Open Console" btnType="secondary" />
+              )}
               <div className="fmtm-ml-4 fmtm-mt-2 lg:fmtm-hidden">
                 {token != null ? (
                   <div