chore: log system information for debugging (#2453)

electron/main.ts

@@ -28,6 +28,7 @@ import { cleanLogs } from './utils/log'
 
 import { registerShortcut } from './utils/selectedText'
 import { trayManager } from './managers/tray'
+import { logSystemInfo } from './utils/system'
 
 const preloadPath = join(__dirname, 'preload.js')
 const rendererPath = join(__dirname, '..', 'renderer')
@@ -65,9 +66,7 @@ app
     }
   })
   .then(() => process.env.CI !== 'e2e' && trayManager.createSystemTray())
-  .then(() => {
+  .then(logSystemInfo)
-    log(`Version: ${app.getVersion()}`)
-  })
   .then(() => {
     app.on('activate', () => {
       if (!BrowserWindow.getAllWindows().length) {

electron/utils/system.ts

@@ -0,0 +1,16 @@
+import { log } from '@janhq/core/node'
+import { app } from 'electron'
+import os from 'os'
+
+export const logSystemInfo = (): void => {
+  log(`[SPECS]::Version: ${app.getVersion()}`)
+  log(`[SPECS]::CPUs: ${JSON.stringify(os.cpus())}`)
+  log(`[SPECS]::Machine: ${os.machine()}`)
+  log(`[SPECS]::Endianness: ${os.endianness()}`)
+  log(`[SPECS]::Parallelism: ${os.availableParallelism()}`)
+  log(`[SPECS]::Free Mem: ${os.freemem()}`)
+  log(`[SPECS]::Total Mem: ${os.totalmem()}`)
+  log(`[SPECS]::OS Version: ${os.version()}`)
+  log(`[SPECS]::OS Platform: ${os.platform()}`)
+  log(`[SPECS]::OS Release: ${os.release()}`)
+}

extensions/monitoring-extension/src/node/index.ts

@@ -232,7 +232,7 @@ const updateGpuInfo = async () =>
         'nvidia-smi --query-gpu=index,memory.total,name --format=csv,noheader,nounits',
         (error, stdout) => {
           if (!error) {
-            log(stdout)
+            log(`[SPECS]::${stdout}`)
             // Get GPU info and gpu has higher memory first
             let highestVram = 0
             let highestVramId = '0'

web/containers/ModalTroubleShoot/AppLogs.tsx

@@ -9,7 +9,7 @@ import { useLogs } from '@/hooks/useLogs'
 
 const AppLogs = () => {
   const { getLogs } = useLogs()
-  const [logs, setLogs] = useState([])
+  const [logs, setLogs] = useState<string[]>([])
 
   useEffect(() => {
     getLogs('app').then((log) => {

web/containers/ModalTroubleShoot/DeviceSpecs.tsx

@@ -1,14 +1,28 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { Button } from '@janhq/uikit'
 
 import { CopyIcon, CheckIcon } from 'lucide-react'
 
 import { useClipboard } from '@/hooks/useClipboard'
+import { useLogs } from '@/hooks/useLogs'
 
 // TODO @Louis help add missing information device specs
 const DeviceSpecs = () => {
-  const userAgent = window.navigator.userAgent
+  const { getLogs } = useLogs()
+  const [logs, setLogs] = useState<string[]>([])
+
+  useEffect(() => {
+    getLogs('app').then((log) => {
+      if (typeof log?.split === 'function') {
+        setLogs(
+          log.split(/\r?\n|\r|\n/g).filter((e) => e.includes('[SPECS]::'))
+        )
+      }
+    })
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
   const clipboard = useClipboard({ timeout: 1000 })
 
   return (
@@ -18,7 +32,7 @@ const DeviceSpecs = () => {
           themes="outline"
           className="bg-white dark:bg-secondary/50"
           onClick={() => {
-            clipboard.copy(userAgent ?? '')
+            clipboard.copy(logs ?? '')
           }}
         >
           <div className="flex items-center space-x-2">
@@ -37,7 +51,17 @@ const DeviceSpecs = () => {
         </Button>
       </div>
       <div>
-        <p className="leading-relaxed">{userAgent}</p>
+        <div className="h-full overflow-auto">
+          <code className="inline-block whitespace-pre-line text-xs">
+            {logs.map((log, i) => {
+              return (
+                <p key={i} className="my-2 leading-relaxed">
+                  {log}
+                </p>
+              )
+            })}
+          </code>
+        </div>
       </div>
     </>
   )

web/containers/ServerLogs/index.tsx

@@ -19,7 +19,7 @@ const ServerLogs = (props: ServerLogsProps) => {
   const { limit = 0 } = props
   const { getLogs } = useLogs()
   const serverEnabled = useAtomValue(serverEnabledAtom)
-  const [logs, setLogs] = useState([])
+  const [logs, setLogs] = useState<string[]>([])
 
   const clipboard = useClipboard({ timeout: 1000 })
 

web/hooks/useLogs.tsx

@@ -9,7 +9,7 @@ export const useLogs = () => {
   const janDataFolderPath = useAtomValue(janDataFolderPathAtom)
 
   const getLogs = useCallback(
-    async (file: string) => {
+    async (file: string): Promise<string> => {
       const path = await joinPath(['file://logs', `${file}.log`])
       if (!(await fs.existsSync(path))) return ''
       const logs = await fs.readFileSync(path, 'utf-8')