feat: show error message in plugin task list

Ray-D-Song · Oct 30, 2024 · 4e46259 · 4e46259
1 parent b8ccb5b
commit 4e46259
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/packages/plugin/background/processor.ts b/packages/plugin/background/processor.ts
@@ -15,6 +15,7 @@ export interface SeriableSingleFileTask {
   folderId: string
   startTimeStamp: number
   endTimeStamp?: number
+  errorMessage?: string
 }
 
 const taskList: SeriableSingleFileTask[] = []
@@ -31,6 +32,7 @@ async function initTask() {
       if (task.status !== 'done' && task.status !== 'failed') {
         task.status = 'failed'
         task.endTimeStamp = Date.now()
+        task.errorMessage = 'unexpected shutdown'
       }
     })
     taskList.splice(0, taskList.length, ...tasks)
@@ -39,6 +41,7 @@ async function initTask() {
 }
 
 Browser.runtime.onStartup.addListener(async () => {
+  console.log('onStartup')
   await initTask()
 })
 
@@ -133,9 +136,11 @@ async function createAndRunTask(options: CreateTaskOptions) {
   try {
     await run()
   }
-  catch (e) {
+  catch (e: any) {
     task.status = 'failed'
     task.endTimeStamp = Date.now()
+    console.error('tsak failed', e, task)
+    task.errorMessage = typeof e === 'string' ? e : e.message
     await saveTaskList()
   }
 }

diff --git a/packages/plugin/popup/components/HistoryTaskList.tsx b/packages/plugin/popup/components/HistoryTaskList.tsx
@@ -80,13 +80,13 @@ function TaskListItem({ task }: { task: SeriableSingleFileTask }) {
       <div className="font-bold cursor-pointer overflow-hidden text-ellipsis text-nowrap" onClick={openOriginalPage}>{task.title}</div>
       <div>{runningTimeText}</div>
       <div className="flex mt-0.5">
-        <TaskStatusIcon status={task.status}></TaskStatusIcon>
+        <TaskStatusIcon status={task.status} errorMessage={task.errorMessage}></TaskStatusIcon>
       </div>
     </div>
   )
 }
 
-function TaskStatusIcon({ status }: { status: 'init' | 'scraping' | 'uploading' | 'done' | 'failed' }) {
+function TaskStatusIcon({ status, errorMessage }: { status: 'init' | 'scraping' | 'uploading' | 'done' | 'failed', errorMessage?: string }) {
   if (status === 'init' || status === 'scraping' || status === 'uploading') {
     return (
       <LoaderCircle
@@ -107,10 +107,20 @@ function TaskStatusIcon({ status }: { status: 'init' | 'scraping' | 'uploading'
 
   if (status === 'failed') {
     return (
-      <ClockAlert
-        size={14}
-        className="text-destructive"
-      />
+      <TooltipProvider delayDuration={200}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <ClockAlert
+              size={14}
+              className="text-destructive"
+            />
+          </TooltipTrigger>
+          <TooltipContent side="top" className="max-w-60">
+            {errorMessage}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
     )
   }
   return (