feat: #270 Improve error view

Comfy-Org · Nov 20, 2024 · 337763f · 337763f
1 parent 600b7f9
commit 337763f
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 3 deletions.
diff --git a/src/i18n.ts b/src/i18n.ts
@@ -53,6 +53,13 @@ const messages = {
         }
       }
     },
+    serverStartView: {
+      errorTitle: 'Error',
+      errorDescription: 'An error while setting up Python.',
+      reinstall: 'Reinstall',
+      reportIssue: 'Report Issue',
+      openLogs: 'Open Logs'
+    },
     firstTimeUIMessage:
       'This is the first time you use the new UI. Choose "Menu > Use New Menu > Disabled" to restore the old UI.',
     download: 'Download',

diff --git a/src/views/ServerStartView.vue b/src/views/ServerStartView.vue
@@ -2,23 +2,56 @@
   <div
     class="font-sans flex flex-col justify-center items-center h-screen m-0 text-neutral-300 bg-neutral-900 dark-theme pointer-events-auto"
   >
-    <h2 class="text-2xl font-bold">{{ ProgressMessages[status] }}</h2>
+    <div
+      v-if="status == ProgressStatus.ERROR"
+      class="flex flex-col items-center my-[60px]"
+    >
+      <h1 class="text-[60px] my-0">{{ $t('serverStartView.errorTitle') }}</h1>
+      <h2 class="my-[30px]">{{ $t('serverStartView.errorDescription') }}</h2>
+      <Button
+        class="bg-[#059669] border-[#059669] text-white"
+        icon="pi pi-refresh"
+        :label="t('serverStartView.reinstall')"
+        @click="reinstall"
+      />
+
+      <div class="flex gap-[30px] pt-[10px]">
+        <Button
+          variant="text"
+          class="bg-transparent border-[#64748B] text-white"
+          icon="pi pi-flag"
+          :label="t('serverStartView.reportIssue')"
+          @click="reportIssue"
+        />
+        <Button
+          variant="text"
+          class="bg-transparent border-[#64748B] text-white"
+          :label="t('serverStartView.openLogs')"
+          @click="openLogs"
+        />
+      </div>
+    </div>
+
     <LogTerminal :fetch-logs="fetchLogs" :fetch-interval="500" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import Button from 'primevue/button'
 import LogTerminal from '@/components/common/LogTerminal.vue'
 import {
   ProgressStatus,
   ProgressMessages
 } from '@comfyorg/comfyui-electron-types'
-import { electronAPI } from '@/utils/envUtil'
+import { electronAPI, isElectron } from '@/utils/envUtil'
+import { useI18n } from 'vue-i18n'
+import { shell } from 'electron'
 
 const electron = electronAPI()
+const { t } = useI18n()
 
-const status = ref<ProgressStatus>(ProgressStatus.INITIAL_STATE)
+const status = ref<ProgressStatus>(ProgressStatus.ERROR)
 const logs = ref<string[]>([])
 
 const updateProgress = ({ status: newStatus }: { status: ProgressStatus }) => {
@@ -34,6 +67,12 @@ const fetchLogs = async () => {
   return logs.value.join('\n')
 }
 
+const reinstall = () => electron.openDevTools()
+const reportIssue = async () => electron.sendErrorToSentry(await fetchLogs())
+const openLogs = () => electron.openLogsFolder()
+
+console.info({ electron })
+
 onMounted(() => {
   electron.sendReady()
   electron.onProgressUpdate(updateProgress)