From 52d86e4601698c7a5f897d308ca42a82ddb70694 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=B2=81=E6=A0=91=E4=BA=BA?= <lu.shuren@um-react.app>
Date: Mon, 22 May 2023 22:24:41 +0100
Subject: [PATCH] feat: friendly way to inform user there's an error (#12)

---
 src/decrypt-worker/util/DecryptError.ts       | 18 +++++++++-
 src/decrypt-worker/worker/handler/decrypt.ts  |  2 +-
 src/features/file-listing/FileError.tsx       | 36 +++++++++++++++++++
 src/features/file-listing/FileRow.tsx         |  6 +++-
 .../__tests__/__fixture__/file-list.ts        |  5 ++-
 src/features/file-listing/fileListingSlice.ts | 30 +++++++++++-----
 src/util/ConcurrentQueue.ts                   | 10 +++---
 src/util/WorkerEventBus.ts                    | 11 ++++--
 8 files changed, 99 insertions(+), 19 deletions(-)
 create mode 100644 src/features/file-listing/FileError.tsx

diff --git a/src/decrypt-worker/util/DecryptError.ts b/src/decrypt-worker/util/DecryptError.ts
index 205f1dd..d141191 100644
--- a/src/decrypt-worker/util/DecryptError.ts
+++ b/src/decrypt-worker/util/DecryptError.ts
@@ -1 +1,17 @@
-export class UnsupportedSourceFile extends Error {}
+export enum DecryptErrorType {
+  UNSUPPORTED_FILE = 'UNSUPPORTED_FILE',
+  UNKNOWN = 'UNKNOWN',
+}
+
+export class DecryptError extends Error {
+  code = DecryptErrorType.UNKNOWN;
+
+  toJSON() {
+    const { name, message, stack, code } = this;
+    return { name, message, stack, code };
+  }
+}
+
+export class UnsupportedSourceFile extends DecryptError {
+  code = DecryptErrorType.UNSUPPORTED_FILE;
+}
diff --git a/src/decrypt-worker/worker/handler/decrypt.ts b/src/decrypt-worker/worker/handler/decrypt.ts
index 851e978..1fc6cf4 100644
--- a/src/decrypt-worker/worker/handler/decrypt.ts
+++ b/src/decrypt-worker/worker/handler/decrypt.ts
@@ -38,7 +38,7 @@ class DecryptCommandHandler {
       }
     }
 
-    throw new Error('could not decrypt file: no working decryptor found');
+    throw new UnsupportedSourceFile('could not decrypt file: no working decryptor found');
   }
 
   async decryptFile(crypto: CryptoBase) {
diff --git a/src/features/file-listing/FileError.tsx b/src/features/file-listing/FileError.tsx
new file mode 100644
index 0000000..1369eba
--- /dev/null
+++ b/src/features/file-listing/FileError.tsx
@@ -0,0 +1,36 @@
+import { chakra, Box, Button, Collapse, Text, useDisclosure } from '@chakra-ui/react';
+import { DecryptErrorType } from '~/decrypt-worker/util/DecryptError';
+
+export interface FileErrorProps {
+  error: null | string;
+  code: null | string;
+}
+
+const errorMap = new Map<string | null | DecryptErrorType, string>([
+  [DecryptErrorType.UNSUPPORTED_FILE, '尚未支持的文件格式'],
+]);
+
+export function FileError({ error, code }: FileErrorProps) {
+  const { isOpen, onToggle } = useDisclosure();
+  const errorSummary = errorMap.get(code) ?? '未知错误';
+
+  return (
+    <Box>
+      <Text>
+        <chakra.span>解密错误：{errorSummary}</chakra.span>
+        {error && (
+          <Button ml="2" onClick={onToggle} type="button">
+            详细
+          </Button>
+        )}
+      </Text>
+      {error && (
+        <Collapse in={isOpen} animateOpacity>
+          <Box as="pre" display="inline-block" mt="2" px="4" py="2" bg="red.300" rounded="md">
+            {error}
+          </Box>
+        </Collapse>
+      )}
+    </Box>
+  );
+}
diff --git a/src/features/file-listing/FileRow.tsx b/src/features/file-listing/FileRow.tsx
index 91d60d4..c33764e 100644
--- a/src/features/file-listing/FileRow.tsx
+++ b/src/features/file-listing/FileRow.tsx
@@ -18,6 +18,7 @@ import { useAppDispatch } from '~/hooks';
 import { AnimationDefinition } from 'framer-motion';
 import { AlbumImage } from './AlbumImage';
 import { SongMetadata } from './SongMetadata';
+import { FileError } from './FileError';
 
 interface FileRowProps {
   id: string;
@@ -73,7 +74,10 @@ export function FileRow({ id, file }: FileRowProps) {
                 <span data-testid="audio-meta-song-name">{metadata?.name ?? nameWithoutExt}</span>
               </Box>
             </GridItem>
-            <GridItem area="meta">{isDecrypted && metadata && <SongMetadata metadata={metadata} />}</GridItem>
+            <GridItem area="meta">
+              {isDecrypted && metadata && <SongMetadata metadata={metadata} />}
+              {file.state === ProcessState.ERROR && <FileError error={file.errorMessage} code={file.errorCode} />}
+            </GridItem>
             <GridItem area="action" alignSelf="center">
               <VStack>
                 {file.decrypted && <audio controls autoPlay={false} src={file.decrypted} ref={audioPlayerRef} />}
diff --git a/src/features/file-listing/__tests__/__fixture__/file-list.ts b/src/features/file-listing/__tests__/__fixture__/file-list.ts
index 89669b7..4bdfdab 100644
--- a/src/features/file-listing/__tests__/__fixture__/file-list.ts
+++ b/src/features/file-listing/__tests__/__fixture__/file-list.ts
@@ -5,8 +5,9 @@ export const untouchedFile: DecryptedAudioFile = {
   raw: 'blob://localhost/file-a',
   decrypted: '',
   ext: '',
-  state: ProcessState.UNTOUCHED,
+  state: ProcessState.QUEUED,
   errorMessage: null,
+  errorCode: null,
   metadata: null,
 };
 
@@ -17,6 +18,7 @@ export const completedFile: DecryptedAudioFile = {
   ext: 'flac',
   state: ProcessState.COMPLETE,
   errorMessage: null,
+  errorCode: null,
   metadata: {
     name: 'Für Alice',
     artist: 'Jixun',
@@ -33,6 +35,7 @@ export const fileWithError: DecryptedAudioFile = {
   ext: 'flac',
   state: ProcessState.ERROR,
   errorMessage: 'Could not decrypt blah blah',
+  errorCode: null,
   metadata: null,
 };
 
diff --git a/src/features/file-listing/fileListingSlice.ts b/src/features/file-listing/fileListingSlice.ts
index 73faf5f..1a65793 100644
--- a/src/features/file-listing/fileListingSlice.ts
+++ b/src/features/file-listing/fileListingSlice.ts
@@ -4,9 +4,11 @@ import type { RootState } from '~/store';
 import { decryptionQueue } from '~/decrypt-worker/client';
 
 import type { DecryptionResult } from '~/decrypt-worker/constants';
+import { DecryptErrorType } from '~/decrypt-worker/util/DecryptError';
 
 export enum ProcessState {
-  UNTOUCHED = 'UNTOUCHED',
+  QUEUED = 'QUEUED',
+  PROCESSING = 'PROCESSING',
   COMPLETE = 'COMPLETE',
   ERROR = 'ERROR',
 }
@@ -31,6 +33,7 @@ export interface DecryptedAudioFile {
   decrypted: string; // blob uri
   state: ProcessState;
   errorMessage: null | string;
+  errorCode: null | DecryptErrorType | string;
   metadata: null | AudioMetadata;
 }
 
@@ -54,7 +57,11 @@ export const processFile = createAsyncThunk<
     return thunkAPI.rejectWithValue({ message, stack });
   }
 
-  return decryptionQueue.add({ id: fileId, blobURI: file.raw });
+  const onPreProcess = () => {
+    thunkAPI.dispatch(setFileAsProcessing({ id: fileId }));
+  };
+
+  return decryptionQueue.add({ id: fileId, blobURI: file.raw }, onPreProcess);
 });
 
 export const fileListingSlice = createSlice({
@@ -67,8 +74,9 @@ export const fileListingSlice = createSlice({
         raw: payload.blobURI,
         decrypted: '',
         ext: '',
-        state: ProcessState.UNTOUCHED,
+        state: ProcessState.QUEUED,
         errorMessage: null,
+        errorCode: null,
         metadata: null,
       };
     },
@@ -78,6 +86,12 @@ export const fileListingSlice = createSlice({
         file.decrypted = payload.decryptedBlobURI;
       }
     },
+    setFileAsProcessing: (state, { payload }: PayloadAction<{ id: string }>) => {
+      const file = state.files[payload.id];
+      if (file) {
+        file.state = ProcessState.PROCESSING;
+      }
+    },
     deleteFile: (state, { payload }: PayloadAction<{ id: string }>) => {
       if (state.files[payload.id]) {
         const file = state.files[payload.id];
@@ -108,16 +122,14 @@ export const fileListingSlice = createSlice({
       const file = state.files[fileId];
       if (!file) return;
 
-      if (action.payload) {
-        file.errorMessage = action.payload.message;
-      } else {
-        file.errorMessage = action.error.message || 'unknown error';
-      }
+      file.errorMessage = action.error.message ?? 'unknown error';
+      file.errorCode = action.error.code ?? null;
+      file.state = ProcessState.ERROR;
     });
   },
 });
 
-export const { addNewFile, setDecryptedContent, deleteFile } = fileListingSlice.actions;
+export const { addNewFile, setFileAsProcessing, setDecryptedContent, deleteFile } = fileListingSlice.actions;
 
 export const selectFileCount = (state: RootState) => state.fileListing.files.length;
 export const selectFiles = (state: RootState) => state.fileListing.files;
diff --git a/src/util/ConcurrentQueue.ts b/src/util/ConcurrentQueue.ts
index 896043b..dd8e339 100644
--- a/src/util/ConcurrentQueue.ts
+++ b/src/util/ConcurrentQueue.ts
@@ -1,15 +1,15 @@
 import { nextTickAsync } from './nextTick';
 
 export abstract class ConcurrentQueue<T, R = unknown> {
-  protected items: [T, (result: R) => void, (error: unknown) => void][] = [];
+  protected items: [T, (result: R) => void, (error: unknown) => void, void | (() => void)][] = [];
 
   constructor(protected maxConcurrent = 5) {}
 
   abstract handler(item: T): Promise<R>;
 
-  public async add(item: T): Promise<R> {
+  public async add(item: T, onPreProcess?: () => void): Promise<R> {
     return new Promise((resolve, reject) => {
-      this.items.push([item, resolve, reject]);
+      this.items.push([item, resolve, reject, onPreProcess]);
       this.runWorkerIfFree();
     });
   }
@@ -32,9 +32,11 @@ export abstract class ConcurrentQueue<T, R = unknown> {
   private async processQueue() {
     let item: (typeof this.items)[0] | void;
     while ((item = this.items.shift())) {
-      const [payload, resolve, reject] = item;
+      const [payload, resolve, reject, onPreProcess] = item;
 
       try {
+        onPreProcess?.();
+
         resolve(await this.handler(payload));
       } catch (error: unknown) {
         reject(error);
diff --git a/src/util/WorkerEventBus.ts b/src/util/WorkerEventBus.ts
index 368990b..54ad649 100644
--- a/src/util/WorkerEventBus.ts
+++ b/src/util/WorkerEventBus.ts
@@ -1,10 +1,12 @@
 import { nanoid } from 'nanoid';
+import { DecryptError } from '~/decrypt-worker/util/DecryptError';
 
 type WorkerServerHandler<P, R> = (payload: P) => R | Promise<R>;
 
 interface SerializedError {
   message: string;
   stack?: string;
+  code?: string;
 }
 
 interface WorkerClientRequestPayload<P = unknown> {
@@ -39,6 +41,7 @@ export class WorkerClientBus<T = string> {
     if (error) {
       const wrappedError = new Error(error.message, { cause: error });
       wrappedError.stack = error.stack;
+      Object.assign(wrappedError, { code: error.code ?? null });
       reject(wrappedError);
     } else {
       resolve(result as never);
@@ -77,8 +80,12 @@ export class WorkerServerBus {
     } else {
       try {
         result = await handler(payload);
-      } catch (e: unknown) {
-        error = e;
+      } catch (err: unknown) {
+        if (err instanceof DecryptError) {
+          error = err.toJSON();
+        } else {
+          error = err;
+        }
       }
     }