feat: migrate entire app to proper logger system

- use tauri-plugin-log-api for logging, push frontend logs to the backend - setup log-to-file system
EyeTrackVR · May 7, 2023 · b2f154e · b2f154e
1 parent 64dbec0
commit b2f154e
Show file tree

Hide file tree

Showing 24 changed files with 306 additions and 176 deletions.
diff --git a/ETVR.code-workspace b/ETVR.code-workspace
@@ -68,8 +68,10 @@
       "hashset",
       "hookable",
       "Iinternal",
+      "improv",
       "iocp",
       "kobalte",
+      "manifestfile",
       "nanos",
       "notif",
       "notififcation",
@@ -82,6 +84,7 @@
       "soundfile",
       "tamasfe",
       "undici",
+      "Unlisten",
       "vorbis",
       "webserial",
       "Xmark"

diff --git a/GUI/ETVR/src/app.tsx b/GUI/ETVR/src/app.tsx
@@ -1,5 +1,5 @@
 import { lazy, onMount, Suspense } from 'solid-js'
-import { handleAppBoot, handleTitlebar } from '@src/utils/hooks/app'
+import { useAppContextMain } from './store/context/main'
 import { AppProvider } from '@store/context/app'
 
 const AppRoutes = lazy(() => import('@routes/Routes'))
@@ -8,6 +8,8 @@ const ExampleMenu = lazy(() => import('@components/NewMenu/DevTools'))
 const ToastNotificationWindow = lazy(() => import('@components/Notifications'))
 
 const App = () => {
+    const { handleTitlebar, handleAppBoot } = useAppContextMain()
+
     const ref = document.getElementById('titlebar')
     onMount(() => {
         handleTitlebar(true)

diff --git a/GUI/ETVR/src/components/Button/EraseButton/index.tsx b/GUI/ETVR/src/components/Button/EraseButton/index.tsx
@@ -1,6 +1,7 @@
 import { ask } from '@tauri-apps/api/dialog'
 import { removeFile } from '@tauri-apps/api/fs'
 import { appConfigDir, join } from '@tauri-apps/api/path'
+import { error, debug } from 'tauri-plugin-log-api'
 import Button from '..'
 import { ENotificationType } from '@src/static/types/enums'
 import { useAppNotificationsContext } from '@store/context/notifications'
@@ -29,7 +30,7 @@ export const EraseButton = () => {
                     if (res) {
                         erase()
                             .then(() => {
-                                console.log('[Erasing Firmware Assets]: Erased')
+                                debug('[Erasing Firmware Assets]: Erased')
                                 addNotification({
                                     title: 'ETVR Firmware Assets Erased',
                                     message:
@@ -38,7 +39,7 @@ export const EraseButton = () => {
                                 })
                             })
                             .catch((err) => {
-                                console.error(err)
+                                error(err)
                                 addNotification({
                                     title: 'ETVR Firmware Assets Erase Failed',
                                     message:

diff --git a/GUI/ETVR/src/components/Button/OpenDocs/index.tsx b/GUI/ETVR/src/components/Button/OpenDocs/index.tsx
@@ -1,11 +1,12 @@
 import { WebviewWindow, getCurrent } from '@tauri-apps/api/window'
+import { debug } from 'tauri-plugin-log-api'
 import Button from '..'
 
 export const OpenDocs = () => {
     const openDocs = () => {
         const currentMainWindow = getCurrent()
         currentMainWindow.innerPosition().then((position) => {
-            console.log(position)
+            debug(`[OpenDocs]: Window Position${position.x}, ${position.y}`)
             const webview = new WebviewWindow('eyetrack-docs', {
                 url: 'src/windows/docs/index.html',
                 resizable: true,
@@ -19,7 +20,7 @@ export const OpenDocs = () => {
                 transparent: true,
             })
             webview.once('tauri://created', () => {
-                console.log('WebView Window Created')
+                debug('WebView Window Created')
                 webview.show()
             })
         })

diff --git a/GUI/ETVR/src/components/Button/WebSerial/index.tsx b/GUI/ETVR/src/components/Button/WebSerial/index.tsx
@@ -1,11 +1,12 @@
 import { WebviewWindow, getCurrent } from '@tauri-apps/api/window'
+import { debug } from 'tauri-plugin-log-api'
 import Button from '..'
 
 export const WebSerial = () => {
     const openWebSerial = () => {
         const currentMainWindow = getCurrent()
         currentMainWindow.innerPosition().then((position) => {
-            console.log(position)
+            debug(`[]: ${position.x}, ${position.y}`)
             const webview = new WebviewWindow('eyetrack-webserial', {
                 url: 'src/windows/webserial/index.html',
                 resizable: true,
@@ -19,7 +20,7 @@ export const WebSerial = () => {
                 transparent: true,
             })
             webview.once('tauri://created', () => {
-                console.log('WebView Window Created')
+                debug('WebView Window Created')
                 webview.show()
             })
         })

diff --git a/GUI/ETVR/src/components/Form/index.tsx b/GUI/ETVR/src/components/Form/index.tsx
@@ -1,8 +1,10 @@
+import { debug } from 'tauri-plugin-log-api'
 import Input from '@components/Input'
 
+
 const Form = () => {
     const handleChange = (value: string) => {
-        console.log(value)
+        debug(`[Form - HandleChange]: ${value}`)
     }
 
     /* // TODO: call api to download firmware assets

diff --git a/GUI/ETVR/src/components/NewMenu/DevTools/index.tsx b/GUI/ETVR/src/components/NewMenu/DevTools/index.tsx
@@ -1,5 +1,5 @@
 //import { Button, Switch } from '@kobalte/core'
-
+import { debug } from 'tauri-plugin-log-api'
 import CustomButton from '@components/CustomButton'
 import DebugMode from '@components/Selection/Debug'
 
@@ -21,7 +21,7 @@ const ExampleMenu = () => {
                 name="test-button"
                 img="Test Button"
                 onClick={() => {
-                    console.log('Test Button Clicked')
+                    debug('Test Button Clicked')
                 }}
             />
             <hr class="divider" />

diff --git a/GUI/ETVR/src/components/NewMenu/index.tsx b/GUI/ETVR/src/components/NewMenu/index.tsx
@@ -1,6 +1,7 @@
 import { createSignal, createEffect, Show, onMount, onCleanup, type Component } from 'solid-js'
 import { Portal } from 'solid-js/web'
 import { onClickOutside, useEventListener } from 'solidjs-use'
+import { debug } from 'tauri-plugin-log-api'
 import type { NewMenu } from '@static/types/interfaces'
 import { useAppUIContext } from '@src/store/context/ui'
 import './styles.css'
@@ -14,8 +15,8 @@ const NewContextMenu: Component<NewMenu> = (props) => {
             useEventListener(props.ref, 'contextmenu', (e) => {
                 e.preventDefault()
                 setMenu({ x: e['x'], y: e['y'] })
-                console.log('[Context Window]: opening menu')
-                //console.log('[Context Window]: ', e)
+                debug('[Context Window]: opening menu')
+                //debug('[Context Window]: ', e)
             })
         }
     })
@@ -29,7 +30,7 @@ const NewContextMenu: Component<NewMenu> = (props) => {
         })
 
         onCleanup(() => {
-            console.log('[Context Window]: cleaning up')
+            debug('[Context Window]: cleaning up')
             cleanup()
         })
     })

diff --git a/GUI/ETVR/src/components/Notifications/index.tsx b/GUI/ETVR/src/components/Notifications/index.tsx
@@ -1,39 +1,35 @@
 import { Toaster, ToasterStore, Transition, useToaster } from 'solid-headless'
 import { createEffect, createSignal, For, onCleanup } from 'solid-js'
+import { debug } from 'tauri-plugin-log-api'
 import CustomToast from './CustomToast'
 import { useAppNotificationsContext } from '@src/store/context/notifications'
 import { Notifications } from '@static/types/interfaces'
 
 const ToastNotificationWindow = () => {
     const { getNotifications, getEnableNotifications } = useAppNotificationsContext()
-
     const notifs = useToaster(getNotifications() as ToasterStore<Notifications>)
-
     const [isOpen, setIsOpen] = createSignal(false)
     const closeNotifs = () => {
         setIsOpen(false)
     }
-
     const clearNotifs = () => {
         getNotifications()?.clear()
     }
-
     createEffect(() => {
         if (getEnableNotifications()) {
             if (notifs().length > 0) {
-                console.log('[Notifications]: Notifications Added', notifs().length)
+                debug(`[Notifications]: Notifications Added - ${notifs().length}`)
                 setIsOpen(true)
             }
             const timeout = setTimeout(() => {
                 closeNotifs()
-                console.log('[Notifications] Closed - Cleaned up')
+                debug('[Notifications] Closed - Cleaned up')
             }, 5000)
             onCleanup(() => {
                 clearTimeout(timeout)
             })
         }
     })
-
     return (
         <Toaster class="absolute p-2 fixed-0 right-0 bottom-0 z-10">
             <Transition
@@ -49,7 +45,7 @@ const ToastNotificationWindow = () => {
                 <div class="flex-1 flex flex-col-reverse space-y-reverse space-y-1 overflow-y-hidden overflow-x-hidden rounded-lg">
                     <For each={notifs().slice(0).reverse()}>
                         {(item) => {
-                            console.log('[Notifications]: Rendering', item)
+                            debug(`[Notifications]: Rendering - ${item.id}`)
                             return <CustomToast id={item.id} notif={item.data} />
                         }}
                     </For>

diff --git a/GUI/ETVR/src/components/RangeInput/index.tsx b/GUI/ETVR/src/components/RangeInput/index.tsx
@@ -1,12 +1,12 @@
 import { createEffect, createSignal, onCleanup } from 'solid-js'
 import { useEventListener } from 'solidjs-use'
+import { debug } from 'tauri-plugin-log-api'
 import { BULLET_POSITION_ADJUSTMENT, getBulletPosition } from '@src/utils'
 import './styles.css'
 
 export interface IProps {
     onChange: (format: string, value: number) => void
     format: string
-
     disablePercent?: boolean
 }
 
@@ -38,12 +38,11 @@ const RangeInput = (props: IProps) => {
             })
 
             return () => {
-                console.log('[RangeInput - range input]: cleaning up')
+                debug('[RangeInput - range input]: cleaning up')
                 cleanup()
             }
         })
     })
-
     createEffect(() => {
         const cleanup = useEventListener(window, 'resize', () => {
             setTimeout(() => {
@@ -66,7 +65,7 @@ const RangeInput = (props: IProps) => {
             })
         })
         onCleanup(() => {
-            console.log('[RangeInput - window resize]: cleaning up')
+            debug('[RangeInput - window resize]: cleaning up')
             cleanup()
         })
     })

diff --git a/GUI/ETVR/src/components/Selection/Debug/index.tsx b/GUI/ETVR/src/components/Selection/Debug/index.tsx
@@ -1,4 +1,5 @@
 import { type Component } from 'solid-js'
+import { debug } from 'tauri-plugin-log-api'
 import type { DebugMode } from '@src/static/types'
 import Selection from '@components/Selection'
 import { useAppContext } from '@src/store/context/app'
@@ -17,7 +18,7 @@ const DebugModeMenu: Component = () => {
             defaultValue={defaultValue}
             description={`Current Debug Mode: ${getDebugMode()}`}
             onValueChange={(value) => {
-                console.log(value)
+                debug(value)
                 setDebugMode(value as DebugMode)
             }}
         />

diff --git a/GUI/ETVR/src/components/WebSerial/index.tsx b/GUI/ETVR/src/components/WebSerial/index.tsx
@@ -1,6 +1,7 @@
 import { appDataDir, join } from '@tauri-apps/api/path'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
 import { createEffect, createSignal } from 'solid-js'
+import { debug } from 'tauri-plugin-log-api'
 
 declare module 'solid-js' {
     // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -14,14 +15,13 @@ declare module 'solid-js' {
 
 const WebSerial = () => {
     const [manifest, setManifest] = createSignal<string>('')
-
     createEffect(() => {
         appDataDir().then((appDataDirPath) => {
-            //console.log('[WebSerial]: appDataDirPath', appDataDirPath)
+            debug(`[WebSerial]: appDataDirPath ${appDataDirPath}`)
             join(appDataDirPath, 'manifest.json').then((manifestfilePath) => {
-                //console.log('[WebSerial]: manifestfilePath', manifestfilePath)
+                debug(`[WebSerial]: manifestfilePath ${manifestfilePath}`)
                 const url = convertFileSrc(manifestfilePath)
-                //console.log('[WebSerial]: url', url)
+                debug(`[WebSerial]: url ${url}`)
                 setManifest(url)
             })
         })
@@ -31,7 +31,6 @@ const WebSerial = () => {
         const deviceFirmware = improvInfo.firmware.toLowerCase()
         return manifestFirmware.includes(deviceFirmware)
     }
-
     return (
         <div>
             <esp-web-install-button overrides={checkSameFirmware} manifest={manifest()}>

diff --git a/GUI/ETVR/src/main.tsx b/GUI/ETVR/src/main.tsx
@@ -3,11 +3,14 @@ import { Router } from '@solidjs/router'
 import { render } from 'solid-js/web'
 import '@styles/imports.css'
 import App from './app'
+import { AppContextMainProvider } from './store/context/main'
 
 render(
     () => (
         <Router>
-            <App />
+            <AppContextMainProvider>
+                <App />
+            </AppContextMainProvider>
         </Router>
     ),
     document.getElementById('root') as HTMLElement,

diff --git a/GUI/ETVR/src/pages/AppSettings/index.tsx b/GUI/ETVR/src/pages/AppSettings/index.tsx
@@ -1,8 +1,9 @@
+import { debug } from 'tauri-plugin-log-api'
 import { EraseButton } from '@components/Button/EraseButton'
 import { OpenDocs } from '@components/Button/OpenDocs'
 import { WebSerial } from '@components/Button/WebSerial'
-import FirmwareList from '@components/Selection/FirmwareList'
 import Form from '@components/Form'
+import FirmwareList from '@components/Selection/FirmwareList'
 import { useAppAPIContext } from '@src/store/context/api'
 import { useAppNotificationsContext } from '@src/store/context/notifications'
 import AppSettings from '@src/views/AppSettings'
@@ -19,54 +20,54 @@ const AppSettingsPage = () => {
     return (
         <div class="flex justify-center items-center content-center flex-col pt-[100px] text-white">
             <AppSettings
-                onClickFlipLeftXAxis={() => console.log('onClickFlipLeftXAxis')}
+                onClickFlipLeftXAxis={() => debug('[AppSettings]: onClickFlipLeftXAxis')}
                 onClickFlipRightXAxis={() => {
-                    console.log('onClickFlipRightXAxis')
+                    debug('[AppSettings]: onClickFlipRightXAxis')
                 }}
                 onClickFlipYAxis={() => {
-                    console.log('onClickFlipYAxis')
+                    debug('[AppSettings]: onClickFlipYAxis')
                 }}
                 onClickDualEyeFalloff={() => {
-                    console.log('onClickDualEyeFalloff')
+                    debug('[AppSettings]: onClickDualEyeFalloff')
                 }}
                 onClickSyncBlinks={() => {
-                    console.log('onClickSyncBlinks')
+                    debug('[AppSettings]: onClickSyncBlinks')
                 }}
                 onClickBlobFallback={() => {
-                    console.log('onClickBlobFallback')
+                    debug('[AppSettings]: onClickBlobFallback')
                 }}
                 onChange={(format, value) => {
-                    console.log(format, value)
+                    debug(`[AppSettings]: ${format} ${value}`)
                 }}
                 onChangeAddress={() => {
-                    console.log('onChangeAddress')
+                    debug('[AppSettings]: onChangeAddress')
                 }}
                 onChangeOSCPort={() => {
-                    console.log('onChangeOSCPort')
+                    debug('[AppSettings]: onChangeOSCPort')
                 }}
                 onChangeOSCReceiverPort={() => {
-                    console.log('onChangeOSCReceiverPort')
+                    debug('[AppSettings]: onChangeOSCReceiverPort')
                 }}
                 onChangeOSCRecenterPort={() => {
-                    console.log('onChangeOSCRecenterPort')
+                    debug('[AppSettings]: onChangeOSCRecenterPort')
                 }}
                 onChangeOSCRecalibrateAddress={() => {
-                    console.log('onChangeOSCRecalibrateAddress')
+                    debug('[AppSettings]: onChangeOSCRecalibrateAddress')
                 }}
             />
             <button
                 class="rounded-[8px] bg-blue-700 p-2 text-white mt-1 hover:bg-blue-600 focus:bg-blue-500"
                 onClick={() => {
                     download('esp32AIThinker')
-                    console.log('[Download Asset]: Downloading...')
+                    debug('[Download Asset]: Downloading...')
                 }}>
                 Download Release Asset
             </button>
             <button
                 class="rounded-[8px] bg-blue-700 p-2 text-white mt-1 hover:bg-blue-600 focus:bg-blue-500"
                 onClick={() => {
                     handleSound('EyeTrackApp_Audio_start.wav')
-                    console.log('[Audio Handler]: Sound Played')
+                    debug('[Audio Handler]: Sound Played')
                 }}>
                 Play Sound
             </button>