Merge pull request #343 from HuolalaTech/main

v2.3.1

Author: wqcstrong

.github/assets/dashboard-en.png

@@ -1,4 +1,5 @@
 import { default as request } from './request';
+import demo from './demo.json?url';
 
 export const getSpyRoom = (group: string = '') => {
   return request.get<I.SpyRoomList>(`/room/list`, {
@@ -52,3 +53,15 @@ export const requestLogin = (data: { password: string }) => {
     data,
   });
 };
+
+export const requestGetLogFileContent = async (url: string) => {
+  // for OSpy demo
+  if (url === 'demo') {
+    return await (await fetch(demo)).json();
+  }
+  // for files not served by PageSpy, like S3 resource
+  if (!url.includes(request.defaultPrefix)) {
+    return await (await fetch(url)).json();
+  }
+  return request.get<any>(url);
+};

.github/assets/dashboard.png

@@ -49,7 +49,14 @@ class ApiRequest {
     const qs = new URLSearchParams(removeUndefinedValues(params))
       .toString()
       .replace(/^./, '?$&');
-    const url = prefix + path + qs;
+    let url = prefix + path + qs;
+
+    try {
+      // if path is a complete URL, use it directly
+      url = new URL(path).toString();
+    } catch (e) {
+      // do nothing
+    }
 
     const headers: Record<string, string> = {};
     const token = getAuthToken();

src/pages/OSpy/components/Replayer/demo.json renamed to src/apis/demo.json

@@ -8,7 +8,6 @@ import { HarborDataItem, useReplayStore } from '@/store/replay';
 import { RRWebPlayer } from './RRWebPlayer';
 import { PluginPanel } from './PluginPanel';
 import '@huolala-tech/react-json-view/dist/style.css';
-import request from '@/apis/request';
 import {
   ReactNode,
   RefCallback,
@@ -26,14 +25,14 @@ import { ErrorDetailDrawer } from '@/components/ErrorDetailDrawer';
 import { Meta } from './Meta';
 import { debug } from '@/utils/debug';
 import { useTranslation } from 'react-i18next';
+import { requestGetLogFileContent } from '@/apis';
 
 interface Props {
   url: string;
-  fileId?: string;
   backSlot?: ReactNode;
 }
 
-export const LogReplayer = ({ url, fileId, backSlot = null }: Props) => {
+export const LogReplayer = ({ url, backSlot = null }: Props) => {
   useEffect(() => {
     return () => {
       if (url.startsWith('blob://')) {
@@ -55,58 +54,9 @@ export const LogReplayer = ({ url, fileId, backSlot = null }: Props) => {
     async () => {
       let res: any;
       try {
-        let fetchUrl = url;
-        const headers: Record<string, string> = {};
-
-        // 处理URL可能包含的fileId
-        let extractedFileId = fileId;
-        if (
-          !extractedFileId &&
-          fetchUrl.includes('/api/v1/log/download?fileId=')
-        ) {
-          try {
-            const urlObj = new URL(fetchUrl, window.location.origin);
-            const fileIdParam = urlObj.searchParams.get('fileId');
-            if (fileIdParam) {
-              extractedFileId = fileIdParam;
-            }
-          } catch (e) {
-            console.error('URL解析错误:', e);
-          }
-        }
-
-        // 添加认证令牌到所有API请求
-        if (
-          extractedFileId ||
-          (fetchUrl && fetchUrl.includes(request.defaultPrefix))
-        ) {
-          const token = localStorage.getItem('page-spy-auth-token');
-          if (token) {
-            headers['Authorization'] = `Bearer ${token}`;
-          } else {
-            throw new Error(t('auth.login_required') || 'Login required');
-          }
-        }
-
-        // 请求日志数据
-        const response = await fetch(fetchUrl, { headers });
-
-        // 检查是否成功
-        if (!response.ok) {
-          if (response.status === 401) {
-            throw new Error(t('auth.login_required') || 'Login required');
-          }
-          throw new Error(
-            `${t('replay.fetch-error') || 'Error fetching log'}: ${
-              response.statusText
-            }`,
-          );
-        }
-
-        // 解析JSON数据
-        res = await response.json();
+        res = await requestGetLogFileContent(url);
       } catch (e: any) {
-        throw new Error(e.message || t('replay.invalid-source'));
+        throw new Error(t('replay.invalid-source')!);
       }
       // source not found, for example, the file be cleared in the server
       if (res?.success === false) {

src/apis/index.ts

@@ -1,4 +1,4 @@
-import { deleteSpyLog, getSpyLogs } from '@/apis';
+import { deleteSpyLog, getSpyLogs, requestGetLogFileContent } from '@/apis';
 import { useRequest } from 'ahooks';
 import {
   Typography,
@@ -29,7 +29,6 @@ import {
   ClearOutlined,
   ClockCircleOutlined,
   CloseCircleOutlined,
-  CopyOutlined,
   DeleteOutlined,
   DownloadOutlined,
   InfoCircleOutlined,
@@ -419,10 +418,7 @@ const LogList = () => {
                 return (
                   <Space size="small">
                     <Link
-                      to={{
-                        pathname: '/replay',
-                        search: `?fileId=${row.fileId}`,
-                      }}
+                      to={{ pathname: '/replay', search: `?url=${logUrl}` }}
                       target="_blank"
                     >
                       <Button
@@ -438,59 +434,21 @@ const LogList = () => {
                       type="text"
                       size="small"
                       icon={<DownloadOutlined />}
-                      onClick={() => {
-                        // 使用认证令牌构建下载链接
-                        const token = localStorage.getItem(
-                          'page-spy-auth-token',
-                        );
-                        if (!token) {
-                          message.error(t('auth.login_required'));
-                          return;
-                        }
-
-                        // 创建一个临时的a元素来处理下载（带Authorization头）
-                        const xhr = new XMLHttpRequest();
-                        xhr.open('GET', logUrl, true);
-                        xhr.setRequestHeader(
-                          'Authorization',
-                          `Bearer ${token}`,
-                        );
-                        xhr.responseType = 'blob';
-
-                        xhr.onload = function () {
-                          if (xhr.status === 200) {
-                            const blob = xhr.response;
-                            const url = window.URL.createObjectURL(blob);
-                            const a = document.createElement('a');
-                            a.style.display = 'none';
-                            a.href = url;
-                            // 从服务器响应中获取文件名或使用默认文件名
-                            const contentDisposition = xhr.getResponseHeader(
-                              'Content-Disposition',
-                            );
-                            let filename = 'log-file.json';
-                            if (contentDisposition) {
-                              const filenameMatch =
-                                contentDisposition.match(/filename=(.+)/);
-                              if (filenameMatch && filenameMatch[1]) {
-                                filename = filenameMatch[1];
-                              }
-                            }
-                            a.download = filename;
-                            document.body.appendChild(a);
-                            a.click();
-                            window.URL.revokeObjectURL(url);
-                            document.body.removeChild(a);
-                          } else {
-                            message.error(t('common.download_failed'));
-                          }
-                        };
-
-                        xhr.onerror = function () {
-                          message.error(t('common.download_failed'));
-                        };
+                      onClick={async () => {
+                        const json = await requestGetLogFileContent(logUrl);
+                        const blob = new Blob([JSON.stringify(json)], {
+                          type: 'application/json',
+                        });
+                        const url = URL.createObjectURL(blob);
 
-                        xhr.send();
+                        const a = document.createElement('a');
+                        a.style.display = 'none';
+                        a.href = url;
+                        a.download = row.name;
+                        document.body.appendChild(a);
+                        a.click();
+                        URL.revokeObjectURL(url);
+                        document.body.removeChild(a);
                       }}
                     >
                       {t('replay.download-file')}

src/apis/request.ts

@@ -12,4 +12,4 @@ To ensure data security and ease of use, PageSpy offers a variety of complete, o
 
 - [Deploy with Node](./deploy-with-node)
 - [Deploy with Docker](./deploy-with-docker)
-- [Install on Baota](./deploy-with-bt)
+- [Install on Baota](./deploy-with-baota)

src/components/LogReplayer/index.tsx

@@ -12,4 +12,4 @@ import ApiImg from '@/assets/image/screenshot/page-spy-api.png';
 
 - [Node.js でデプロイ](./deploy-with-node)
 - [Docker でデプロイ](./deploy-with-docker)
-- [宝塔パネルにインストール](./deploy-with-bt)
+- [宝塔パネルにインストール](./deploy-with-baota)

src/pages/LogList/index.tsx

@@ -12,4 +12,4 @@ import ApiImg from '@/assets/image/screenshot/page-spy-api.png';
 
 - [Node.js로 배포](./deploy-with-node)
 - [Docker로 배포](./deploy-with-docker)
-- [바오타 패널에 설치](./deploy-with-bt)
+- [바오타 패널에 설치](./deploy-with-baota)

src/pages/MainDocs/md/deploy-guide.en.mdx

@@ -12,4 +12,4 @@ import ApiImg from '@/assets/image/screenshot/page-spy-api.png';
 
 - [使用 Node 部署](./deploy-with-node)
 - [使用 Docker 部署](./deploy-with-docker)
-- [在宝塔面板安装](./deploy-with-bt)
+- [在宝塔面板安装](./deploy-with-baota)

src/pages/MainDocs/md/deploy-guide.ja.mdx

@@ -5,21 +5,15 @@ import { Button, Flex, Space } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 import { useSize } from 'ahooks';
-import { Link, useLocation, useNavigate } from 'react-router-dom';
-import demo from './demo.json?url';
+import { Link, useNavigate } from 'react-router-dom';
 import { SelectLogButton } from '@/components/SelectLogButton';
+import { useUrlParam } from '@/utils/useUrlParam';
 
 export const Replayer = () => {
   const { t } = useTranslation();
   const size = useSize(document.body);
   const navigate = useNavigate();
-  const { search } = useLocation();
-
-  const replayUrl = useMemo(() => {
-    const url = new URLSearchParams(search).get('url');
-    if (url === 'demo') return demo;
-    return url || '';
-  }, [search]);
+  const replayUrl = useUrlParam();
 
   const backSlot = useMemo(() => {
     return (

src/pages/MainDocs/md/deploy-guide.ko.mdx

@@ -6,36 +6,13 @@ import { Space, Button, message } from 'antd';
 import { useMemo } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import request from '@/apis/request';
+import { useUrlParam } from '@/utils/useUrlParam';
 
 const Replay = () => {
-  const { url, fileId } = useSearch();
+  const url = useUrlParam();
   const { t } = useTranslation();
   const navigate = useNavigate();
 
-  // 处理日志下载URL
-  const logUrl = useMemo(() => {
-    if (url) {
-      // 如果url是API请求，提取fileId并使用更安全的方式
-      if (url.includes('/api/v1/log/download?fileId=')) {
-        try {
-          const urlObj = new URL(url, window.location.origin);
-          const extractedFileId = urlObj.searchParams.get('fileId');
-          if (extractedFileId) {
-            return `${request.defaultPrefix}/log/download?fileId=${extractedFileId}`;
-          }
-        } catch (e) {
-          console.error('URL解析错误:', e);
-        }
-      }
-      return url;
-    }
-    if (fileId) {
-      return `${request.defaultPrefix}/log/download?fileId=${fileId}`;
-    }
-    return '';
-  }, [url, fileId]);
-
   const backSlot = useMemo(() => {
     return (
       <Space>
@@ -51,7 +28,7 @@ const Replay = () => {
     );
   }, [navigate, t]);
 
-  return <LogReplayer url={logUrl} fileId={fileId} backSlot={backSlot} />;
+  return <LogReplayer url={url} backSlot={backSlot} />;
 };
 
 export default Replay;

src/pages/MainDocs/md/deploy-guide.zh.mdx

@@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next';
 import { requestAuthStatus, requestLogin } from '@/apis';
 import { AUTH_FAILED_EVENT, TOKEN_KEY } from '@/apis/request';
 import { useEventListener } from './useEventListener';
+import { isClient, isDoc } from './constants';
 
 // 认证上下文定义
 interface AuthContextType {
@@ -26,10 +27,15 @@ export const AuthContext = createContext<AuthContextType>(
 
 export const AuthProvider = ({ children }: PropsWithChildren<unknown>) => {
   const { t } = useTranslation();
-  const [loading, setLoading] = useState<boolean>(true);
+  const [loading, setLoading] = useState<boolean>(false);
 
-  // 为 true 时存在两种可能：1. 无需密码；2. 认证通过
-  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+  // 为 true 时存在几种可能
+  // 1. 无需密码
+  // 2. 认证通过
+  // 3. 构建文档 (yarn build:doc)
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(
+    isDoc ? true : false,
+  );
   useEventListener(AUTH_FAILED_EVENT, () => setIsAuthenticated(false));
 
   const setToken = (token: string) => {
@@ -81,8 +87,10 @@ export const AuthProvider = ({ children }: PropsWithChildren<unknown>) => {
   };
 
   // 初始化时验证令牌
-  useEffect(() => {
-    checkStatus();
+  useMemo(() => {
+    if (isClient) {
+      checkStatus();
+    }
   }, []);
 
   const contextValue = useMemo<AuthContextType>(

src/pages/OSpy/components/Replayer/index.tsx

@@ -0,0 +1,12 @@
+import { useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export const useUrlParam = () => {
+  // DON'T USE useSearch OR URLSearchParams, it decodes the url value automatically
+  const { search } = useLocation();
+  const replayUrl = useMemo(() => {
+    const url = search.split('?url=')?.[1];
+    return url || '';
+  }, [search]);
+  return replayUrl;
+};