fix conflicts

.gitignore

@@ -39,3 +39,7 @@ public/*
 *.njsproj
 *.sln
 *.sw*
+
+# page-spy-api
+/data
+/log

backend/go.mod

@@ -2,9 +2,10 @@ module github.com/HuolalaTech/page-spy-web/backend
 
 go 1.21
 
-require github.com/HuolalaTech/page-spy-api v1.6.0
+require github.com/HuolalaTech/page-spy-api v1.7.0
 
 require (
+	github.com/aws/aws-sdk-go v1.54.8 // indirect
 	github.com/dustin/go-humanize v1.0.1 // indirect
 	github.com/glebarez/go-sqlite v1.21.2 // indirect
 	github.com/glebarez/sqlite v1.11.0 // indirect
@@ -18,6 +19,7 @@ require (
 	github.com/imroc/req/v2 v2.1.0 // indirect
 	github.com/jinzhu/inflection v1.0.0 // indirect
 	github.com/jinzhu/now v1.1.5 // indirect
+	github.com/jmespath/go-jmespath v0.4.0 // indirect
 	github.com/labstack/echo/v4 v4.9.1 // indirect
 	github.com/labstack/gommon v0.4.0 // indirect
 	github.com/mattn/go-colorable v0.1.11 // indirect

backend/go.sum

@@ -1,5 +1,7 @@
-github.com/HuolalaTech/page-spy-api v1.6.0 h1:jtwHyvXys2Oo1jeXDD2YTUi7vtY/okoWv4LdDWFsf7A=
-github.com/HuolalaTech/page-spy-api v1.6.0/go.mod h1:hRcABtSAQ6pGPYmst+0HfzMWxZ0qOtpVGO+Awq/MkEg=
+github.com/HuolalaTech/page-spy-api v1.7.0 h1:DRzljo9V7j6r0lnGMp04KUs5wGSFdR9nt64PYyh3aTc=
+github.com/HuolalaTech/page-spy-api v1.7.0/go.mod h1:ea28Ve14wtUsw+/BmUQ4PUqBzCRAC1PX5hXiVe1a45o=
+github.com/aws/aws-sdk-go v1.54.8 h1:+soIjaRsuXfEJ9ts9poJD2fIIzSSRwfx+T69DrTtL2M=
+github.com/aws/aws-sdk-go v1.54.8/go.mod h1:eRwEWoyTWFMVYVQzKMNHWP5/RV4xIUGMQfXQHfHkpNU=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
@@ -32,6 +34,10 @@ github.com/jinzhu/inflection v1.0.0 h1:K317FqzuhWc8YvSVlFMCCUb36O/S9MCKRDI7QkRKD
 github.com/jinzhu/inflection v1.0.0/go.mod h1:h+uFLlag+Qp1Va5pdKtLDYj+kHp5pxUVkryuEj+Srlc=
 github.com/jinzhu/now v1.1.5 h1:/o9tlHleP7gOFmsnYNz3RGnqzefHA47wQpKrrdTIwXQ=
 github.com/jinzhu/now v1.1.5/go.mod h1:d3SSVoowX0Lcu0IBviAWJpolVfI5UJVZZ7cO71lE/z8=
+github.com/jmespath/go-jmespath v0.4.0 h1:BEgLn5cpjn8UN1mAw4NjwDrS35OdebyEtFe+9YPoQUg=
+github.com/jmespath/go-jmespath v0.4.0/go.mod h1:T8mJZnbsbmF+m6zOOFylbeCJqk5+pHWvzYPziyZiYoo=
+github.com/jmespath/go-jmespath/internal/testify v1.5.1 h1:shLQSRRSCCPj3f2gpwzGwWFoC7ycTf1rcQZHOlsJ6N8=
+github.com/jmespath/go-jmespath/internal/testify v1.5.1/go.mod h1:L3OGu8Wl2/fWfCI6z80xFu9LTZmf1ZRjMHUOPmWr69U=
 github.com/labstack/echo/v4 v4.9.1 h1:GliPYSpzGKlyOhqIbG8nmHBo3i1saKWFOgh41AN3b+Y=
 github.com/labstack/echo/v4 v4.9.1/go.mod h1:Pop5HLc+xoc4qhTZ1ip6C0RtP7Z+4VzRLWZZFKqbbjo=
 github.com/labstack/gommon v0.4.0 h1:y7cvthEAEbU0yHOf4axH8ZG2NH8knB9iNSoTO8dyIk8=
@@ -81,6 +87,8 @@ golang.org/x/time v0.0.0-20201208040808-7e3f01d25324 h1:Hir2P/De0WpUhtrKGGjvSb2Y
 golang.org/x/time v0.0.0-20201208040808-7e3f01d25324/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v2 v2.2.8 h1:obN1ZagJSUGI0Ek/LBmuj4SNLPfIny3KsKFopxRdj10=
+gopkg.in/yaml.v2 v2.2.8/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=

package.json

@@ -1,8 +1,12 @@
 {
   "private": true,
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "All-In-One Remote Debugging Tool",
   "homepage": "https://huolalatech.github.io/page-spy-web",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/HuolalaTech/page-spy-web.git"
+  },
   "license": "MIT",
   "scripts": {
     "postinstall": "bash scripts/public-files.sh",
@@ -16,7 +20,7 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",
-    "@mdx-js/rollup": "^2.3.0",
+    "@mdx-js/rollup": "^3.0.1",
     "@rrweb/types": "^2.0.0-alpha.11",
     "@types/lodash-es": "^4.17.7",
     "@types/mdx": "^2.0.4",
@@ -37,6 +41,7 @@
     "less": "^4.1.2",
     "lint-staged": "^12.3.3",
     "prettier": "^2.5.1",
+    "remark-gfm": "^4.0.0",
     "typescript": "^5.3.3",
     "vite": "^4.0.0",
     "vite-plugin-ejs": "^1.6.4",
@@ -45,12 +50,13 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@huolala-tech/page-spy-browser": "^1.9.0",
-    "@huolala-tech/page-spy-plugin-data-harbor": "^1.3.0",
-    "@huolala-tech/page-spy-plugin-rrweb": "^1.2.0",
-    "@huolala-tech/page-spy-types": "^1.9.0",
-    "@huolala-tech/react-json-view": "^1.2.4",
+    "@huolala-tech/page-spy-browser": "^1.9.3",
+    "@huolala-tech/page-spy-plugin-data-harbor": "^1.3.3",
+    "@huolala-tech/page-spy-plugin-rrweb": "^1.2.3",
+    "@huolala-tech/page-spy-types": "^1.9.2",
+    "@huolala-tech/react-json-view": "^1.2.5",
     "@huolala-tech/request": "^1.1.2",
+    "@mdx-js/mdx": "^3.0.1",
     "acorn": "^8.11.3",
     "ahooks": "^3.1.9",
     "antd": "^5.18.3",
@@ -70,12 +76,13 @@
     "react-resizable": "^3.0.5",
     "react-router-dom": "^6.2.1",
     "react-transition-group": "^4.4.5",
-    "rehype-parse": "^8.0.4",
-    "rehype-stringify": "^9.0.3",
+    "rehype-parse": "^9.0.0",
+    "rehype-stringify": "^10.0.0",
+    "remark-rehype": "^11.1.0",
     "rrweb-player": "^1.0.0-alpha.4",
     "shiki": "^0.14.3",
     "source-map": "^0.7.4",
-    "unified": "^10.1.2",
+    "unified": "^11.0.5",
     "unist-util-visit": "^4.1.2",
     "zustand": "^4.5.2"
   },
@@ -96,6 +103,6 @@
     "last 2 safari version"
   ],
   "optionalDependencies": {
-    "@huolala-tech/page-spy-api": "^1.2.2"
+    "@huolala-tech/page-spy-api": "^1.9.0"
   }
 }

src/apis/index.ts

@@ -15,19 +15,21 @@ export const getSpyLogs = (params: {
   title?: string;
   roomId?: string;
   page: number;
+  size: number;
 }) => {
   return request.get<I.SpyLogList>(`/log/list`, {
     params: {
-      size: 10,
       ...params,
     },
   });
 };
 
-export const deleteSpyLog = (params: { fileId: string }) => {
-  return request.delete<I.SpyLogList>(`/log/delete`, {
-    params,
-  });
+export const deleteSpyLog = (fileIds: string[]) => {
+  const params = Object.values(fileIds).reduce((acc, cur) => {
+    acc.append('fileId', cur);
+    return acc;
+  }, new URLSearchParams());
+  return request.delete<I.SpyLogList>(`/log/delete?${params.toString()}`);
 };
 
 export const checkRoomSecret = (params: {

src/assets/locales/en.json

@@ -105,8 +105,8 @@
     "browser": "Browser",
     "platform": "Platform",
     "version": "Version",
-    "eval-plugin-required": "If you need to dynamically execute code in mini program, please use @huolala-tech/page-spy-mp-eval-plugin in client SDK.",
-    "mp-warning": "When submitting the mini program for review, DO REMEMBER to delete the mp-eval-plugin in the code, otherwise the review will fail.",
+    "eval-plugin-required": "If you need to dynamically execute code in mini program, please use @huolala-tech/page-spy-plugin-mp-eval in client SDK.",
+    "mp-warning": "When submitting the mini program for review, DO REMEMBER to delete the plugin-mp-eval in the code, otherwise the review will fail.",
     "menu": {
       "Console": "Console",
       "Network": "Network",
@@ -146,7 +146,8 @@
       "failed-advice": "Here are some suggestions to fix and improve the situation:",
       "fix-suggestion-1": "<0>1. Ensure file existence: When locating the source code for each error stack, two files need to be requested - the compressed file and the sourcemap file. The rule for obtaining the sourcemap file is based on the address indicated by</0> <1>//# sourceMappingURL=*</1> <2>in the contents of the compressed file;</2>",
       "fix-suggestion-2": "2. Troubleshoot network issues: If there are access restrictions on the server where your source files are located, it may lead to failed requests when trying to access the resources. You can open the devtool to check if the network is working properly."
-    }
+    },
+    "non-serializable": "<non-serializable>"
   },
   "network": {
     "open-in-new-tab": "Open in new tab",
@@ -226,6 +227,8 @@
     "client": "Client Information",
     "download-file": "Download Log",
     "update-layout": "Update Layout",
-    "speed": "Speed"
+    "speed": "Speed",
+    "delete-select": "Delete Selected",
+    "delete-select-desc": "Are you sure you want to delete selected logs?"
   }
 }

src/assets/locales/ja.json

@@ -104,8 +104,8 @@
     "browser": "ブラウザ",
     "platform": "プラットフォーム",
     "version": "バージョン",
-    "eval-plugin-required": "小プログラム環境で動的にコードを実行する必要がある場合、クライアント側で SDK プラグイン @huolala-tech/page-spy-mp-eval-plugin を使用してください",
-    "mp-warning": "レビューのためにミニ プログラムを送信するときは、必ずコード内の mp-eval-plugin を削除してください。削除しないと、レビューが失敗します。",
+    "eval-plugin-required": "小プログラム環境で動的にコードを実行する必要がある場合、クライアント側で SDK プラグイン @huolala-tech/page-spy-plugin-mp-eval を使用してください",
+    "mp-warning": "レビューのためにミニ プログラムを送信するときは、必ずコード内の plugin-mp-eval を削除してください。削除しないと、レビューが失敗します。",
     "menu": {
       "Console": "コンソール",
       "Network": "ネットワーク",
@@ -145,7 +145,8 @@
       "failed-advice": "以下は修正と改善の提案です：",
       "fix-suggestion-1": "<0>1. ファイルの存在を確認：各エラースタックでソースコードを特定するためには、2つのファイル（圧縮ファイルとソースマップファイル）が要求されます。ソースマップファイルの取得規則は圧縮ファイル内の</0><1>//# sourceMappingURL=*</1><2>に指定されたアドレスに従います；</2>",
       "fix-suggestion-2": "2. ネットワークの問題を除外：ソースファイルが存在するサーバーにアクセス制限がある場合、リソースの取得に失敗する可能性があるため、ネットワークリクエストが正常かどうかをコンソールで確認できます。"
-    }
+    },
+    "non-serializable": "<non-serializable>"
   },
   "network": {
     "open-in-new-tab": "新しいタブで開く",
@@ -225,6 +226,8 @@
     "client": "クライアント情報",
     "download-file": "ログのダウンロード",
     "update-layout": "レイアウトの更新",
-    "speed": "倍速"
+    "speed": "倍速",
+    "delete-select": "選択されたものを削除",
+    "delete-select-desc": "選択したログを削除してもよろしいですか？"
   }
 }

src/assets/locales/ko.json

@@ -104,8 +104,8 @@
     "browser": "브라우저",
     "platform": "플랫폼",
     "version": "버전",
-    "eval-plugin-required": "미니 프로그램 환경에서 동적으로 코드를 실행해야 하는 경우 클라이언트에서 SDK 플러그인 @huolala-tech/page-spy-mp-eval-plugin을 사용하십시오.",
-    "mp-warning": "검토를 위해 미니 프로그램을 제출할 때 코드에서 mp-eval-plugin를 삭제해야 합니다. 그렇지 않으면 검토가 실패합니다.",
+    "eval-plugin-required": "미니 프로그램 환경에서 동적으로 코드를 실행해야 하는 경우 클라이언트에서 SDK 플러그인 @huolala-tech/page-spy-plugin-mp-eval 을 사용하십시오.",
+    "mp-warning": "검토를 위해 미니 프로그램을 제출할 때 코드에서 plugin-mp-eval 를 삭제해야 합니다. 그렇지 않으면 검토가 실패합니다.",
     "menu": {
       "Console": "콘솔",
       "Network": "네트워크",
@@ -145,7 +145,8 @@
       "failed-advice": "다음은 수정 및 개선 제안입니다:",
       "fix-suggestion-1": "<0>1. 파일이 존재하는지 확인하십시오. 각 오류 스택은 소스 코드를 확인하기 위해 2 개의 파일 (압축 파일 및 소스 맵 파일)을 요청합니다. 소스 맵 파일 가져오기 규칙은 압축 파일 내</0><1>//# sourceMappingURL=*</1><2>에 지정된 주소를 기준으로합니다.</2>",
       "fix-suggestion-2": "2. 네트워크 문제 제외: 원본 파일이있는 서버에 액세스 제한이있는 경우 리소스 가져오기 실패가 발생할 수 있으므로 네트워크 요청이 정상적인지 확인하려면 콘솔을 열 수 있습니다."
-    }
+    },
+    "non-serializable": "<non-serializable>"
   },
   "network": {
     "open-in-new-tab": "새 탭에서 열기",
@@ -225,6 +226,8 @@
     "client": "클라이언트 정보",
     "download-file": "로그 다운로드",
     "update-layout": "레이아웃 업데이트",
-    "speed": "속도"
+    "speed": "속도",
+    "delete-select": "선택 항목 삭제",
+    "delete-select-desc": "선택한 로그를 삭제하시겠습니까?"
   }
 }

src/assets/locales/zh.json

@@ -104,8 +104,8 @@
     "browser": "浏览器",
     "platform": "平台",
     "version": "版本",
-    "eval-plugin-required": "若需在小程序环境动态执行代码，请在客户端安装 @huolala-tech/page-spy-mp-eval-plugin",
-    "mp-warning": "小程序提交审核时请务必删除代码中的 mp-eval-plugin，否则会导致审核失败。",
+    "eval-plugin-required": "若需在小程序环境动态执行代码，请在客户端安装 @huolala-tech/page-spy-plugin-mp-eval",
+    "mp-warning": "小程序提交审核时请务必删除代码中的 plugin-mp-eval，否则会导致审核失败。",
     "menu": {
       "Console": "输出",
       "Network": "网络",
@@ -145,7 +145,8 @@
       "failed-advice": "以下是修复和改进的建议：",
       "fix-suggestion-1": "<0>1. 确保文件存在：每个错误栈定位源码时都需要请求两个文件，分别是压缩文件和 sourcemap 文件，sourcemap 文件的获取规则是根据压缩文件内容中的</0><1>//# sourceMappingURL=*</1><2>所指向的地址；</2>",
       "fix-suggestion-2": "2. 排除网络故障：如果你的源文件所在服务器有限制访问规则，则可能导致请求资源时出现失败，你可以打开控制台查看网络请求是否正常。"
-    }
+    },
+    "non-serializable": "<数据序列化失败>"
   },
   "network": {
     "open-in-new-tab": "新窗口打开",
@@ -225,6 +226,8 @@
     "client": "客户端信息",
     "download-file": "下载日志",
     "update-layout": "调整布局",
-    "speed": "倍速"
+    "speed": "倍速",
+    "delete-select": "删除已选",
+    "delete-select-desc": "确认删除所有已选择的日志吗？"
   }
 }

src/components/ConsoleItem/index.less

@@ -43,4 +43,17 @@
       color: #000;
     }
   }
+  .rjv {
+    font-size: 12px;
+    svg {
+      &.rjv-ref-arrow {
+        width: 8px;
+        height: 8px;
+      }
+    }
+  }
+  .non-serializable {
+    font-size: 12px;
+    color: #aaa;
+  }
 }

src/components/ConsoleItem/index.tsx

@@ -15,12 +15,15 @@ import { getLogUrl } from '@/utils';
 import './index.less';
 import Timestamp from '../Timestamp';
 import { useMemo } from 'react';
+import ReactJsonView from '@huolala-tech/react-json-view';
+import { useTranslation } from 'react-i18next';
 
 interface Props {
   data: SpyConsole.DataItem;
 }
 
 export const ConsoleItem = ({ data }: Props) => {
+  const { t } = useTranslation();
   const content = useMemo(() => {
     if (isPlaceholderNode(data)) {
       return <PlaceholderNode data={data.logs} />;
@@ -34,9 +37,19 @@ export const ConsoleItem = ({ data }: Props) => {
       if (framesOfErrorConsole) {
         return <ErrorTraceNode data={framesOfErrorConsole} key={log.id} />;
       }
+      if (log.type === 'json') {
+        if (log.value === null) {
+          return (
+            <code key={log.id} className="non-serializable">
+              {t('console.non-serializable')}
+            </code>
+          );
+        }
+        return <ReactJsonView source={JSON.parse(log.value)} key={log.id} />;
+      }
       return <ConsoleNode data={log} key={log.id} />;
     });
-  }, [data]);
+  }, [data, t]);
   return (
     <div className={`console-item ${data.logType}`} key={data.id}>
       <div className="console-item__title">
@@ -47,7 +60,9 @@ export const ConsoleItem = ({ data }: Props) => {
           <Col style={{ flexShrink: 0 }}>
             <Timestamp time={data.time} />
           </Col>
-          <Col flex={1}>{content}</Col>
+          <Col flex={1} style={{ display: 'flex', flexWrap: 'wrap' }}>
+            {content}
+          </Col>
         </Row>
       </div>
       <div className="console-item__url" title={data.url}>