feat: friendly way to inform user there's an error (#12)
This commit is contained in:
parent
4aff3b7a07
commit
52d86e4601
@ -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;
|
||||
}
|
||||
|
@ -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) {
|
||||
|
36
src/features/file-listing/FileError.tsx
Normal file
36
src/features/file-listing/FileError.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
@ -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} />}
|
||||
|
@ -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,
|
||||
};
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user