Merge branch 'plugin-error' into preview

packages/plugin/background/background.ts

@@ -43,10 +43,17 @@ async function appendAuthHeader(options?: RequestInit) {
 }
 
 /* global RequestInit */
-export async function request(url: string, options?: RequestInit | undefined) {
+export async function request(url: string, options?: (RequestInit & { timeout?: number }) | undefined) {
   const { serverUrl } = await Browser.storage.local.get('serverUrl')
+  const abortController = new AbortController()
+  if (options?.timeout) {
+    setTimeout(() => {
+      abortController.abort('upload timeout')
+    }, options.timeout)
+  }
   const res = await fetch(`${serverUrl}/api${url}`, {
     credentials: 'same-origin',
+    signal: abortController.signal,
     ...await appendAuthHeader(options),
   })
   if (res.ok) {

packages/plugin/background/keepAlive.ts

@@ -0,0 +1,16 @@
+import Browser from 'webextension-polyfill'
+
+let endTimeStamp: number
+let keepAliveInterval: NodeJS.Timeout
+export function keepAlive(ms: number) {
+  endTimeStamp = Date.now() + ms
+  clearInterval(keepAliveInterval)
+  keepAliveInterval = setInterval(() => {
+    if (Date.now() > endTimeStamp) {
+      clearInterval(keepAliveInterval)
+    }
+    else {
+      Browser.runtime.getPlatformInfo()
+    }
+  }, 20 * 1000)
+}

packages/plugin/background/processor.ts

@@ -1,6 +1,7 @@
 import { sendMessage } from 'webext-bridge/background'
 import Browser from 'webextension-polyfill'
 import { request } from './background'
+import { keepAlive } from './keepAlive'
 import type { SingleFileSetting } from '~/utils/singleFile'
 import { base64ToBlob } from '~/utils/file'
 
@@ -26,15 +27,19 @@ async function markUnfinishedTasksAsFailed() {
     if (task.status !== 'done' && task.status !== 'failed') {
       task.status = 'failed'
       task.endTimeStamp = Date.now()
-      task.errorMessage = 'browser unexpected shutdown'
+      task.errorMessage = 'Failed because of service worker restart'
     }
   })
   await saveTaskList(tasks)
 }
 
-Browser.runtime.onStartup.addListener(async () => {
-  console.log('onStartup')
-  await markUnfinishedTasksAsFailed()
+let isInit = false
+Browser.runtime.onConnect.addListener(() => {
+  console.log('connect', isInit)
+  if (!isInit) {
+    isInit = true
+    markUnfinishedTasksAsFailed()
+  }
 })
 
 async function getTaskList(): Promise<SeriableSingleFileTask[]> {
@@ -62,7 +67,7 @@ async function saveTask(task: SeriableSingleFileTask) {
 async function clearFinishedTaskList() {
   const tasks = await getTaskList()
 
-  const newTasks = tasks.filter(task => task.status !== 'done')
+  const newTasks = tasks.filter(task => task.status !== 'done' && task.status !== 'failed')
   await saveTaskList(newTasks)
 }
 
@@ -103,9 +108,12 @@ async function uploadPageData(pageForm: CreateTaskOptions['pageForm'] & { conten
   if (screenshot) {
     form.append('screenshot', base64ToBlob(screenshot, 'image/webp'))
   }
+  const timeout = 5 * 60 * 1000
+  keepAlive(timeout)
   await request('/pages/upload_new_page', {
     method: 'POST',
     body: form,
+    timeout,
   })
 }
 

packages/plugin/popup/components/HistoryTaskList.tsx

@@ -12,7 +12,7 @@ function HistoryTaskList({ setActivePage }: { setActivePage: (tab: PageType) =>
   const { data: taskList } = useRequest(
     async () => {
       const { taskList } = await sendMessage('get-page-task-list', {})
-      return taskList
+      return taskList.reverse()
     },
     {
       pollingInterval: 1000,
@@ -30,7 +30,7 @@ function HistoryTaskList({ setActivePage }: { setActivePage: (tab: PageType) =>
         <ClearHistoryTaskListButton></ClearHistoryTaskListButton>
       </div>
       <ScrollArea>
-        <div className="max-h-64">
+        <div className="max-h-96 space-y-2">
           {taskList && taskList.map(task => (
             <TaskListItem key={task.uuid} task={task}></TaskListItem>
           ))}
@@ -72,16 +72,44 @@ function TaskListItem({ task }: { task: SeriableSingleFileTask }) {
     })
   }
 
+  const bgColor = task.status === 'done' ? 'bg-primary/20' : task.status === 'failed' ? 'bg-destructive/20' : 'bg-secondary'
+
+  return (
+    <div className={`h-14 w-full space-y-0.5 rounded p-2 ${bgColor}`}>
+      <div className="font-bold cursor-pointer overflow-hidden text-ellipsis text-nowrap underline" onClick={openOriginalPage}>{task.title}</div>
+      <TaskDetailText task={task}></TaskDetailText>
+    </div>
+  )
+}
+
+const statusTextMap = {
+  init: 'Init',
+  scraping: 'Scraping page',
+  uploading: 'Uploading to server',
+  done: 'Done',
+  failed: 'Failed',
+}
+function TaskDetailText({ task }: { task: SeriableSingleFileTask }) {
   const taskRunningTime = Date.now() - task.startTimeStamp
   const shouldShowRunningTimeText = task.status !== 'done' && task.status !== 'failed'
   const runningTimeText = shouldShowRunningTimeText ? `(${(taskRunningTime / 1000).toFixed(0)}s)` : ''
 
+  const statusText = statusTextMap[task.status]
+  const errorText = task.errorMessage ? `${task.errorMessage}` : 'Uknown error'
+
+  let renderText = statusText
+  if (task.status === 'failed') {
+    renderText += `: ${errorText}`
+  }
+
   return (
-    <div className="flex justify-between items-center h-6 w-full space-x-1">
-      <div className="font-bold cursor-pointer overflow-hidden text-ellipsis text-nowrap" onClick={openOriginalPage}>{task.title}</div>
+    <div className="flex justify-between items-center">
+      <div className="flex-1 overflow-hidden text-ellipsis text-nowrap">
+        {renderText}
+      </div>
       <div className="flex">
-        <div>{runningTimeText}</div>
-        <div className="flex mt-0.5">
+        <div className="text-gray-500 text-xs">{runningTimeText}</div>
+        <div className="mt-0.5">
           <TaskStatusIcon status={task.status} errorMessage={task.errorMessage}></TaskStatusIcon>
         </div>
       </div>