chore: download progress

src/hooks/use-chunk-fetch.ts

@@ -13,6 +13,7 @@ type HandlerFunction = (data: any, options?: HandlerOptions) => any;
 interface RequestConfig {
   url: string;
   handler: HandlerFunction;
+  errorHandler?: (error: any) => void;
   beforeReconnect?: () => void;
   params?: object;
   watch?: boolean;
@@ -59,7 +60,7 @@ const useSetChunkFetch = () => {
           currentBuffer.forEach((item, i) => {
             const isComplete = i === currentBuffer.length - 1 && done;
             callback(item, {
-              isComplete,
+              isComplete: isComplete || this.percent === 100,
               percent: this.percent,
               progress: this.progress,
               contentLength: this.contentLength
@@ -110,6 +111,7 @@ const useSetChunkFetch = () => {
   const fetchChunkRequest = async ({
     url,
     handler,
+    errorHandler,
     watch,
     params = {}
   }: RequestConfig) => {
@@ -133,7 +135,11 @@ const useSetChunkFetch = () => {
 
       if (!response.ok) {
         const error = await response.json();
-        handler(error?.message);
+        if (errorHandler) {
+          errorHandler(error);
+        } else {
+          handler(error?.message);
+        }
         return;
       }
 
@@ -141,8 +147,7 @@ const useSetChunkFetch = () => {
 
       console.log('chunkDataRef.current===1', chunkDataRef.current);
     } catch (error) {
-      // handle error
-      console.log('error============', error);
+      // handle error: catched in request interceptor
     }
 
     return axiosToken.current;

src/hooks/use-download-stream.ts

@@ -1,5 +1,5 @@
 import useSetChunkFetch, { HandlerOptions } from '@/hooks/use-chunk-fetch';
-import dayjs from 'dayjs';
+import { message } from 'antd';
 import { useEffect, useRef } from 'react';
 
 export default function useDownloadStream() {
@@ -7,18 +7,17 @@ export default function useDownloadStream() {
   const logParseWorker = useRef<any>(null);
   const clearScreen = useRef(false);
   const filename = useRef('log');
+  const downloadNotificationRef = useRef<any>(null);
+
   const { setChunkFetch } = useSetChunkFetch();
 
   const downloadFile = (content: string) => {
-    const timestamp = dayjs().format('YYYY-MM-DD_HH-mm-ss');
-    const fileName = `${filename.current}_${timestamp}.txt`;
-
     const blob = new Blob([content], { type: 'text/plain' });
     const url = URL.createObjectURL(blob);
 
     const a = document.createElement('a');
     a.href = url;
-    a.download = fileName;
+    a.download = filename.current;
     document.body.appendChild(a);
     a.click();
     document.body.removeChild(a);
@@ -28,6 +27,13 @@ export default function useDownloadStream() {
 
   const updateContent = (data: string, options?: HandlerOptions) => {
     const { isComplete } = options || {};
+
+    downloadNotificationRef.current?.({
+      ...options,
+      duration: isComplete ? 1 : null,
+      filename: filename.current
+    });
+
     logParseWorker.current?.postMessage({
       inputStr: data,
       page: 1,
@@ -38,6 +44,18 @@ export default function useDownloadStream() {
     clearScreen.current = false;
   };
 
+  const handleError = (error: any) => {
+    const errorMsg = error?.message || error;
+    const msg =
+      typeof errorMsg === 'string' ? errorMsg : JSON.stringify(errorMsg);
+    message.error(msg);
+    downloadNotificationRef.current?.({
+      duration: 1,
+      percent: 0,
+      filename: filename.current
+    });
+  };
+
   const downloadStream = async (props: {
     data?: any;
     url: string;
@@ -46,20 +64,36 @@ export default function useDownloadStream() {
     method?: string;
     headers?: any;
     filename?: string;
+    downloadNotification?: (data: any) => void;
   }) => {
-    clearScreen.current = true;
-    filename.current = props.filename || 'log';
-    const { params, url } = props;
+    try {
+      clearScreen.current = true;
+      filename.current = props.filename || 'log';
+      downloadNotificationRef.current = props.downloadNotification;
+      const { params, url } = props;
 
-    chunkRequedtRef.current?.current?.abort?.();
+      downloadNotificationRef.current?.({
+        filename: filename.current
+      });
 
-    chunkRequedtRef.current = setChunkFetch({
-      url,
-      params,
-      watch: false,
-      contentType: 'text',
-      handler: updateContent
-    });
+      chunkRequedtRef.current?.current?.abort?.();
+
+      chunkRequedtRef.current = setChunkFetch({
+        url,
+        params,
+        watch: false,
+        contentType: 'text',
+        errorHandler: handleError,
+        handler: updateContent
+      });
+    } catch (error) {
+      //
+      downloadNotificationRef.current?.({
+        duration: 1,
+        percent: 0,
+        filename: filename.current
+      });
+    }
   };
 
   useEffect(() => {