Merge branch 'main' into docs

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "1.9.5",
+  "version": "1.9.6",
   "description": "All-In-One Remote Debugging Tool",
   "homepage": "https://huolalatech.github.io/page-spy-web",
   "repository": {
@@ -50,10 +50,10 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@huolala-tech/page-spy-browser": "^1.9.12",
-    "@huolala-tech/page-spy-plugin-data-harbor": "^1.3.10",
+    "@huolala-tech/page-spy-browser": "^1.9.13",
+    "@huolala-tech/page-spy-plugin-data-harbor": "^1.3.11",
     "@huolala-tech/page-spy-plugin-rrweb": "^1.2.7",
-    "@huolala-tech/page-spy-plugin-whole-bundle": "^0.0.8",
+    "@huolala-tech/page-spy-plugin-whole-bundle": "^0.0.9",
     "@huolala-tech/page-spy-types": "^1.9.6",
     "@huolala-tech/react-json-view": "^1.2.5",
     "@huolala-tech/request": "^1.1.2",

src/assets/locales/en.json

@@ -233,7 +233,7 @@
     "speed": "Speed",
     "delete-select": "Delete Selected",
     "delete-select-desc": "Are you sure you want to delete selected logs?",
-    "unsupport-spread": "Cannot spread object in offline mode"
+    "unsupport-spread": "<0>Objects cannot be expanded by default. Set <1><0>serializeData: true</0></1> to enable.</0>"
   },
   "lab": {
     "welcome": "Welcome to the Replay Lab!",

src/assets/locales/ja.json

@@ -232,7 +232,7 @@
     "speed": "倍速",
     "delete-select": "選択されたものを削除",
     "delete-select-desc": "選択したログを削除してもよろしいですか？",
-    "unsupport-spread": "オフラインモードではオブジェクトを展開できません"
+    "unsupport-spread": "<0>デフォルトではオブジェクトを展開できません。<1><0>serializeData: true</0></1> を設定して有効にします。</0>"
   },
   "lab": {
     "welcome": "リプレイラボへようこそ！",

src/assets/locales/ko.json

@@ -232,7 +232,7 @@
     "speed": "속도",
     "delete-select": "선택 항목 삭제",
     "delete-select-desc": "선택한 로그를 삭제하시겠습니까?",
-    "unsupport-spread": "오프라인 모드에서는 객체를 펼칠 수 없습니다"
+    "unsupport-spread": "<0>기본적으로 객체를 확장할 수 없습니다. <1><0>serializeData: true</0></1> 을 설정하여 활성화하십시오.</0>"
   },
   "lab": {
     "welcome": "리플레이 실험실에 오신 것을 환영합니다!",

src/assets/locales/zh.json

@@ -232,7 +232,7 @@
     "speed": "倍速",
     "delete-select": "删除已选",
     "delete-select-desc": "确认删除所有已选择的日志吗？",
-    "unsupport-spread": "离线模式无法展开对象"
+    "unsupport-spread": "<0>默认无法展开对象，设置 <1><0>serializeData: true</0></1> 以启用。</0>"
   },
   "lab": {
     "welcome": "欢迎来到回放实验室！",

src/components/ConsoleNode/index.tsx

@@ -10,7 +10,7 @@ import { LoadMore } from './LoadMore';
 import { useSocketMessageStore } from '@/store/socket-message';
 import { useConfig } from '../ConfigProvider';
 import { Tooltip } from 'antd';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 function isAtomNode(data: SpyAtom.Overview) {
   return data && data.type === 'atom' && data.__atomId !== undefined;
@@ -227,7 +227,24 @@ function AtomNode({ id, value, showArrow = true }: AtomNodeProps) {
         disabled: offline,
       })}
     >
-      <Tooltip title={offline && t('replay.unsupport-spread')}>
+      <Tooltip
+        title={
+          offline && (
+            <Trans i18nKey="replay.unsupport-spread">
+              <p>
+                Objects cannot be expanded by default. Set
+                <a
+                  href="https://www.pagespy.org/#/docs/pagespy#constructor"
+                  target="_blank"
+                >
+                  <code>serializeData: true</code>
+                </a>
+                to enable.
+              </p>
+            </Trans>
+          )
+        }
+      >
         <code className="console-node atom" onClick={getAtomDetail}>
           {showArrow && (
             <CaretRightOutlined

src/components/NetworkTable/NetworkDetail/index.tsx

@@ -106,12 +106,24 @@ const TABS: TabItem[] = [
       return !!requestPayload?.length || validEntries(getData);
     },
     content: (data) => {
-      const { getData, requestPayload } = data;
+      const { getData, requestPayload, requestHeader } = data;
+      const isFormUrlencoded = requestHeader?.some(([name, value]) => {
+        if (
+          name.toLowerCase() === 'content-type' &&
+          value.includes('application/x-www-form-urlencoded')
+        )
+          return true;
+        return false;
+      });
+
       return (
         <>
           {/* Request Payload */}
           {!!requestPayload?.length && (
-            <RequestPayloadBlock data={requestPayload} />
+            <RequestPayloadBlock
+              data={requestPayload}
+              urlencoded={isFormUrlencoded}
+            />
           )}
 
           {/* Query String Parametes */}

src/components/NetworkTable/RequestPayloadBlock/index.tsx

@@ -5,13 +5,18 @@ import { EntriesBody } from '@/components/EntriesBody';
 
 export const RequestPayloadBlock: React.FC<{
   data: string | [string, string][];
-}> = ({ data }) => {
+  urlencoded?: boolean;
+}> = ({ data, urlencoded = false }) => {
   const content = useMemo(() => {
     if (isString(data)) {
+      if (urlencoded) {
+        const params = new URLSearchParams(data);
+        return <EntriesBody data={[...params]} />;
+      }
       return <ReactJsonView source={data} defaultExpand />;
     }
     return <EntriesBody data={data} />;
-  }, [data]);
+  }, [data, urlencoded]);
   return (
     <div className="detail-block">
       <b className="detail-block__label">Request Payload</b>

src/pages/Docs/md/api.en.mdx

@@ -19,6 +19,9 @@
 
 - [constructor()](./data-harbor#constructor)
 - [$harbor.onOfflineLog()](./data-harbor#onOfflineLog)
+- [$harbor.pause()](./data-harbor#pause)
+- [$harbor.resume()](./data-harbor#resume)
+- [$harbor.reharbor()](./data-harbor#reharbor)
 
 #### RRWebPlugin#rrweb
 

src/pages/Docs/md/api.zh.mdx

@@ -19,6 +19,9 @@
 
 - [constructor()](./data-harbor#constructor)
 - [$harbor.onOfflineLog()](./data-harbor#onOfflineLog)
+- [$harbor.pause()](./data-harbor#pause)
+- [$harbor.resume()](./data-harbor#resume)
+- [$harbor.reharbor()](./data-harbor#reharbor)
 
 #### RRWebPlugin#rrweb
 

src/pages/Docs/md/changelog.en.mdx

@@ -1,5 +1,14 @@
 import offlineLogImg from '@/assets/image/screenshot/v1.9.2-offline-log-size.png';
 
+## v1.9.6
+
+- 🆕 DataHarborPlugin added a new prototype method. See details: https://github.com/HuolalaTech/page-spy/pull/110;
+  - `$harbor.pause()`: Pause recording;
+  - `$harbor.resume()`: Resume recording, corresponding to `pause()`;
+  - `$harbor.reharbor()`: Clear the recorded data and remakes it.
+- 🆕 Add new prompt for "Object cannot be expanded" on the replay page;
+- 🐛 Fixed the display of `application/x-www-form-urlencoded` payload. See details: https://github.com/HuolalaTech/page-spy-web/issues/267;
+
 ## v1.9.5
 
 - 🆕 Add DockerHub image: https://hub.docker.com/r/huolalatech/page-spy-web;

src/pages/Docs/md/changelog.zh.mdx

@@ -1,5 +1,14 @@
 import offlineLogImg from '@/assets/image/screenshot/v1.9.2-offline-log-size.png';
 
+## v1.9.6
+
+- 🆕 DataHarborPlugin 插件新增原型方法。查看详情：https://github.com/HuolalaTech/page-spy/pull/110 ；
+  - `$harbor.pause()`：暂停记录；
+  - `$harbor.resume()`: 恢复记录，和 `pause()` 对应；
+  - `$harbor.reharbor()`：清空已记录的数据并重新制作。
+- 🆕 回放页面对于「对象不可展开」新增提示；
+- 🐛 修复 `application/x-www-form-urlencoded` 展示的 Payload。查看详情：https://github.com/HuolalaTech/page-spy-web/issues/267 ；
+
 ## v1.9.5
 
 - 🆕 新增 DockerHub 镜像: https://hub.docker.com/r/huolalatech/page-spy-web;

src/pages/Docs/md/data-harbor.en.mdx

@@ -11,7 +11,7 @@
     // Default 10MB.
     maximum?: number;
 
-    // Specit which types of data to cache
+    // Specify which types of data to cache
     caredData?: Record<DataType, boolean>;
 
     // Specify the offline log filename, with the default being named according to the current time
@@ -21,39 +21,123 @@
     onDownload?: (data: CacheMessageItem[]) => void;
   }
 
-  delcare class DataHarborPlugin implements PageSpyPlugin {
+  declare class DataHarborPlugin implements PageSpyPlugin {
     constructor(config?: DataHarborConfig);
   }
   ```
 
+
 #### onOfflineLog()#onOfflineLog
 
-Upload / download log manaually.
+Manually download / upload offline logs.
 
 - Type
 
   ```ts
   declare class DataHarborPlugin {
-    onOfflineLog(type: 'download' | 'upload'): Promise<string | null | undefined>;
+    onOfflineLog(type: 'download' | 'upload', clearCache?: boolean): Promise<string | null | undefined>;
   }
   ```
 
-- Details
-
-  If you hide the automatically rendered floating or want to automatically trigger offline log operations at certain times, you can achieve through this method.
-
-  Each invocation logs the entire current session. Once the upload is complete, a replay URL will be returned.
+  If you hide the automatically rendered UI controls by `autoRender: false`, or you want to automatically trigger the offline log operation at certain times, you can use this method.
 
+  After each call, the recorded log data will be cleared by default and recording will be restarted; on the contrary, if the user upload / download the log multiple times through the buttons on the UI dialog, it will be a complete log from beginning to end of the current session. You can also control it yourself through the second parameter `clearCache: boolean`.
+
+  After the upload is completed, the replay URL will be returned and printed to the console.
+
 - Example
 
   ```ts
+  - details
   window.$harbor = new DataHarborPlugin();
 
-  // upload
+  // Upload (clear existing data and re-record)
   const url = await window.$harbor.onOfflineLog('upload');
 
+  // Upload (do not clear data)
+  const url = await window.$harbor.onOfflineLog('upload', false);
+
   // download
   window.$harbor.onOfflineLog('download');
   ```
 
 
+#### pause()#pause
+
+Pause recording.
+
+- Type
+
+  ```ts
+  declare class DataHarborPlugin {
+    pause(): void;
+  }
+  ```
+
+  More flexible control of logging behavior.
+
+  The data generated by the program after the pause will not be recorded. Call `$harbor.resume()` to resume.
+
+- Example
+
+  ```ts
+  window.$harbor = new DataHarborPlugin();
+  
+  // pause
+  window.$harbor.pause();
+  
+  // resume
+  window.$harbor.resume();
+  ```
+
+
+#### resume()#resume
+
+
+Resume records.
+
+- Type
+
+  ```ts
+  declare class DataHarborPlugin {
+    resume(): void;
+  }
+  ```
+
+  More flexible control of logging behavior.
+
+- Details
+
+  Data during &lt;Pause - Resume&gt; will not be recorded.
+
+- Example
+
+  ```ts
+  window.$harbor = new DataHarborPlugin();
+  
+  // pause
+  window.$harbor.pause();
+  
+  // resume
+  window.$harbor.resume();
+  ```
+
+#### reharbor()#reharbor
+
+Clear the recorded data and continue recording. In short, remastered.
+
+- Type
+
+  ```ts
+  declare class DataHarborPlugin {
+    reharbor(): void;
+  }
+  ```
+
+- Example
+
+  ```ts
+  window.$harbor = new DataHarborPlugin();
+
+  window.$harbor.reharbor();
+  ```