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/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 };
 };