fix: display specific error message when previewing file error #868 (#869)

### What problem does this PR solve?

fix: display specific error message when previewing file error  #868


### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/document-viewer/docx/index.tsx

@@ -5,7 +5,7 @@ import { useFetchDocx } from '../hooks';
 import styles from './index.less';
 
 const Docx = ({ filePath }: { filePath: string }) => {
-  const { succeed, containerRef } = useFetchDocx(filePath);
+  const { succeed, containerRef, error } = useFetchDocx(filePath);
 
   return (
     <>
@@ -16,7 +16,7 @@ const Docx = ({ filePath }: { filePath: string }) => {
           </div>
         </section>
       ) : (
-        <FileError></FileError>
+        <FileError>{error}</FileError>
       )}
     </>
   );

web/src/pages/document-viewer/excel/index.tsx

@@ -3,7 +3,7 @@ import FileError from '../file-error';
 import { useFetchExcel } from '../hooks';
 
 const Excel = ({ filePath }: { filePath: string }) => {
-  const { status, containerRef } = useFetchExcel(filePath);
+  const { status, containerRef, error } = useFetchExcel(filePath);
 
   return (
     <div
@@ -11,7 +11,7 @@ const Excel = ({ filePath }: { filePath: string }) => {
       ref={containerRef}
       style={{ height: '100%', width: '100%' }}
     >
-      {status || <FileError></FileError>}
+      {status || <FileError>{error}</FileError>}
     </div>
   );
 };

web/src/pages/document-viewer/hooks.ts

@@ -3,18 +3,38 @@ import axios from 'axios';
 import mammoth from 'mammoth';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-const useFetchDocument = () => {
-  const fetchDocument = useCallback((api: string) => {
-    return axios.get(api, { responseType: 'arraybuffer' });
+export const useCatchError = (api: string) => {
+  const [error, setError] = useState('');
+  const fetchDocument = useCallback(async () => {
+    const ret = await axios.get(api);
+    const { data } = ret;
+    if (!(data instanceof ArrayBuffer) && data.retcode !== 0) {
+      setError(data.retmsg);
+    }
+    return ret;
+  }, [api]);
+
+  useEffect(() => {
+    fetchDocument();
+  }, [fetchDocument]);
+
+  return { fetchDocument, error };
+};
+
+export const useFetchDocument = () => {
+  const fetchDocument = useCallback(async (api: string) => {
+    const ret = await axios.get(api, { responseType: 'arraybuffer' });
+    return ret;
   }, []);
 
-  return fetchDocument;
+  return { fetchDocument };
 };
 
 export const useFetchExcel = (filePath: string) => {
   const [status, setStatus] = useState(true);
-  const fetchDocument = useFetchDocument();
+  const { fetchDocument } = useFetchDocument();
   const containerRef = useRef<HTMLDivElement>(null);
+  const { error } = useCatchError(filePath);
 
   const fetchDocumentAsync = useCallback(async () => {
     let myExcelPreviewer;
@@ -39,13 +59,14 @@ export const useFetchExcel = (filePath: string) => {
     fetchDocumentAsync();
   }, [fetchDocumentAsync]);
 
-  return { status, containerRef };
+  return { status, containerRef, error };
 };
 
 export const useFetchDocx = (filePath: string) => {
   const [succeed, setSucceed] = useState(true);
-  const fetchDocument = useFetchDocument();
+  const { fetchDocument } = useFetchDocument();
   const containerRef = useRef<HTMLDivElement>(null);
+  const { error } = useCatchError(filePath);
 
   const fetchDocumentAsync = useCallback(async () => {
     const jsonFile = await fetchDocument(filePath);
@@ -64,9 +85,8 @@ export const useFetchDocx = (filePath: string) => {
           container.innerHTML = docEl.outerHTML;
         }
       })
-      .catch((a) => {
+      .catch(() => {
         setSucceed(false);
-        console.warn('alexei: something went wrong', a);
       });
   }, [filePath, fetchDocument]);
 
@@ -74,5 +94,5 @@ export const useFetchDocx = (filePath: string) => {
     fetchDocumentAsync();
   }, [fetchDocumentAsync]);
 
-  return { succeed, containerRef };
+  return { succeed, containerRef, error };
 };

web/src/pages/document-viewer/pdf/index.tsx

@@ -1,12 +1,14 @@
 import { Skeleton } from 'antd';
 import { PdfHighlighter, PdfLoader } from 'react-pdf-highlighter';
 import FileError from '../file-error';
+import { useCatchError } from '../hooks';
 
 interface IProps {
   url: string;
 }
 
-const DocumentPreviewer = ({ url }: IProps) => {
+const PdfPreviewer = ({ url }: IProps) => {
+  const { error } = useCatchError(url);
   const resetHash = () => {};
 
   return (
@@ -15,7 +17,7 @@ const DocumentPreviewer = ({ url }: IProps) => {
         url={url}
         beforeLoad={<Skeleton active />}
         workerSrc="/pdfjs-dist/pdf.worker.min.js"
-        errorMessage={<FileError></FileError>}
+        errorMessage={<FileError>{error}</FileError>}
         onError={(e) => {
           console.warn(e);
         }}
@@ -40,4 +42,4 @@ const DocumentPreviewer = ({ url }: IProps) => {
   );
 };
 
-export default DocumentPreviewer;
+export default PdfPreviewer;