Skip to content

Commit 8c67c0f

Browse files
committed
Merge branch 'main' into docs
2 parents 57c1ffe + f0d2927 commit 8c67c0f

File tree

16 files changed

+273
-44
lines changed

16 files changed

+273
-44
lines changed

package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"private": true,
3-
"version": "1.9.5",
3+
"version": "1.9.6",
44
"description": "All-In-One Remote Debugging Tool",
55
"homepage": "https://huolalatech.github.io/page-spy-web",
66
"repository": {
@@ -50,10 +50,10 @@
5050
},
5151
"dependencies": {
5252
"@ant-design/icons": "^4.7.0",
53-
"@huolala-tech/page-spy-browser": "^1.9.12",
54-
"@huolala-tech/page-spy-plugin-data-harbor": "^1.3.10",
53+
"@huolala-tech/page-spy-browser": "^1.9.13",
54+
"@huolala-tech/page-spy-plugin-data-harbor": "^1.3.11",
5555
"@huolala-tech/page-spy-plugin-rrweb": "^1.2.7",
56-
"@huolala-tech/page-spy-plugin-whole-bundle": "^0.0.8",
56+
"@huolala-tech/page-spy-plugin-whole-bundle": "^0.0.9",
5757
"@huolala-tech/page-spy-types": "^1.9.6",
5858
"@huolala-tech/react-json-view": "^1.2.5",
5959
"@huolala-tech/request": "^1.1.2",

src/assets/locales/en.json

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

src/assets/locales/ja.json

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

src/assets/locales/ko.json

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

src/assets/locales/zh.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@
232232
"speed": "倍速",
233233
"delete-select": "删除已选",
234234
"delete-select-desc": "确认删除所有已选择的日志吗?",
235-
"unsupport-spread": "离线模式无法展开对象"
235+
"unsupport-spread": "<0>默认无法展开对象,设置 <1><0>serializeData: true</0></1> 以启用。</0>"
236236
},
237237
"lab": {
238238
"welcome": "欢迎来到回放实验室!",

src/components/ConsoleNode/index.tsx

+19-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { LoadMore } from './LoadMore';
1010
import { useSocketMessageStore } from '@/store/socket-message';
1111
import { useConfig } from '../ConfigProvider';
1212
import { Tooltip } from 'antd';
13-
import { useTranslation } from 'react-i18next';
13+
import { Trans, useTranslation } from 'react-i18next';
1414

1515
function isAtomNode(data: SpyAtom.Overview) {
1616
return data && data.type === 'atom' && data.__atomId !== undefined;
@@ -227,7 +227,24 @@ function AtomNode({ id, value, showArrow = true }: AtomNodeProps) {
227227
disabled: offline,
228228
})}
229229
>
230-
<Tooltip title={offline && t('replay.unsupport-spread')}>
230+
<Tooltip
231+
title={
232+
offline && (
233+
<Trans i18nKey="replay.unsupport-spread">
234+
<p>
235+
Objects cannot be expanded by default. Set
236+
<a
237+
href="https://www.pagespy.org/#/docs/pagespy#constructor"
238+
target="_blank"
239+
>
240+
<code>serializeData: true</code>
241+
</a>
242+
to enable.
243+
</p>
244+
</Trans>
245+
)
246+
}
247+
>
231248
<code className="console-node atom" onClick={getAtomDetail}>
232249
{showArrow && (
233250
<CaretRightOutlined

src/components/NetworkTable/NetworkDetail/index.tsx

+14-2
Original file line numberDiff line numberDiff line change
@@ -106,12 +106,24 @@ const TABS: TabItem[] = [
106106
return !!requestPayload?.length || validEntries(getData);
107107
},
108108
content: (data) => {
109-
const { getData, requestPayload } = data;
109+
const { getData, requestPayload, requestHeader } = data;
110+
const isFormUrlencoded = requestHeader?.some(([name, value]) => {
111+
if (
112+
name.toLowerCase() === 'content-type' &&
113+
value.includes('application/x-www-form-urlencoded')
114+
)
115+
return true;
116+
return false;
117+
});
118+
110119
return (
111120
<>
112121
{/* Request Payload */}
113122
{!!requestPayload?.length && (
114-
<RequestPayloadBlock data={requestPayload} />
123+
<RequestPayloadBlock
124+
data={requestPayload}
125+
urlencoded={isFormUrlencoded}
126+
/>
115127
)}
116128

117129
{/* Query String Parametes */}

src/components/NetworkTable/RequestPayloadBlock/index.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,18 @@ import { EntriesBody } from '@/components/EntriesBody';
55

66
export const RequestPayloadBlock: React.FC<{
77
data: string | [string, string][];
8-
}> = ({ data }) => {
8+
urlencoded?: boolean;
9+
}> = ({ data, urlencoded = false }) => {
910
const content = useMemo(() => {
1011
if (isString(data)) {
12+
if (urlencoded) {
13+
const params = new URLSearchParams(data);
14+
return <EntriesBody data={[...params]} />;
15+
}
1116
return <ReactJsonView source={data} defaultExpand />;
1217
}
1318
return <EntriesBody data={data} />;
14-
}, [data]);
19+
}, [data, urlencoded]);
1520
return (
1621
<div className="detail-block">
1722
<b className="detail-block__label">Request Payload</b>

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

+3
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@
1919
2020
- [constructor()](./data-harbor#constructor)
2121
- [$harbor.onOfflineLog()](./data-harbor#onOfflineLog)
22+
- [$harbor.pause()](./data-harbor#pause)
23+
- [$harbor.resume()](./data-harbor#resume)
24+
- [$harbor.reharbor()](./data-harbor#reharbor)
2225

2326
#### RRWebPlugin#rrweb
2427

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

+3
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@
1919
2020
- [constructor()](./data-harbor#constructor)
2121
- [$harbor.onOfflineLog()](./data-harbor#onOfflineLog)
22+
- [$harbor.pause()](./data-harbor#pause)
23+
- [$harbor.resume()](./data-harbor#resume)
24+
- [$harbor.reharbor()](./data-harbor#reharbor)
2225

2326
#### RRWebPlugin#rrweb
2427

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

+9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
import offlineLogImg from '@/assets/image/screenshot/v1.9.2-offline-log-size.png';
22

3+
## v1.9.6
4+
5+
- 🆕 DataHarborPlugin added a new prototype method. See details: https://github.com/HuolalaTech/page-spy/pull/110;
6+
- `$harbor.pause()`: Pause recording;
7+
- `$harbor.resume()`: Resume recording, corresponding to `pause()`;
8+
- `$harbor.reharbor()`: Clear the recorded data and remakes it.
9+
- 🆕 Add new prompt for "Object cannot be expanded" on the replay page;
10+
- 🐛 Fixed the display of `application/x-www-form-urlencoded` payload. See details: https://github.com/HuolalaTech/page-spy-web/issues/267;
11+
312
## v1.9.5
413

514
- 🆕 Add DockerHub image: https://hub.docker.com/r/huolalatech/page-spy-web;

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

+9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
import offlineLogImg from '@/assets/image/screenshot/v1.9.2-offline-log-size.png';
22

3+
## v1.9.6
4+
5+
- 🆕 DataHarborPlugin 插件新增原型方法。查看详情:https://github.com/HuolalaTech/page-spy/pull/110
6+
- `$harbor.pause()`:暂停记录;
7+
- `$harbor.resume()`: 恢复记录,和 `pause()` 对应;
8+
- `$harbor.reharbor()`:清空已记录的数据并重新制作。
9+
- 🆕 回放页面对于「对象不可展开」新增提示;
10+
- 🐛 修复 `application/x-www-form-urlencoded` 展示的 Payload。查看详情:https://github.com/HuolalaTech/page-spy-web/issues/267
11+
312
## v1.9.5
413

514
- 🆕 新增 DockerHub 镜像: https://hub.docker.com/r/huolalatech/page-spy-web;

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

+94-10
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
// Default 10MB.
1212
maximum?: number;
1313

14-
// Specit which types of data to cache
14+
// Specify which types of data to cache
1515
caredData?: Record<DataType, boolean>;
1616

1717
// Specify the offline log filename, with the default being named according to the current time
@@ -21,39 +21,123 @@
2121
onDownload?: (data: CacheMessageItem[]) => void;
2222
}
2323

24-
delcare class DataHarborPlugin implements PageSpyPlugin {
24+
declare class DataHarborPlugin implements PageSpyPlugin {
2525
constructor(config?: DataHarborConfig);
2626
}
2727
```
2828

29+
2930
#### onOfflineLog()#onOfflineLog
3031

31-
Upload / download log manaually.
32+
Manually download / upload offline logs.
3233

3334
- Type
3435

3536
```ts
3637
declare class DataHarborPlugin {
37-
onOfflineLog(type: 'download' | 'upload'): Promise<string | null | undefined>;
38+
onOfflineLog(type: 'download' | 'upload', clearCache?: boolean): Promise<string | null | undefined>;
3839
}
3940
```
4041

41-
- Details
42-
43-
If you hide the automatically rendered floating or want to automatically trigger offline log operations at certain times, you can achieve through this method.
44-
45-
Each invocation logs the entire current session. Once the upload is complete, a replay URL will be returned.
42+
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.
4643

44+
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`.
45+
46+
After the upload is completed, the replay URL will be returned and printed to the console.
47+
4748
- Example
4849

4950
```ts
51+
- details
5052
window.$harbor = new DataHarborPlugin();
5153

52-
// upload
54+
// Upload (clear existing data and re-record)
5355
const url = await window.$harbor.onOfflineLog('upload');
5456

57+
// Upload (do not clear data)
58+
const url = await window.$harbor.onOfflineLog('upload', false);
59+
5560
// download
5661
window.$harbor.onOfflineLog('download');
5762
```
5863

5964

65+
#### pause()#pause
66+
67+
Pause recording.
68+
69+
- Type
70+
71+
```ts
72+
declare class DataHarborPlugin {
73+
pause(): void;
74+
}
75+
```
76+
77+
More flexible control of logging behavior.
78+
79+
The data generated by the program after the pause will not be recorded. Call `$harbor.resume()` to resume.
80+
81+
- Example
82+
83+
```ts
84+
window.$harbor = new DataHarborPlugin();
85+
86+
// pause
87+
window.$harbor.pause();
88+
89+
// resume
90+
window.$harbor.resume();
91+
```
92+
93+
94+
#### resume()#resume
95+
96+
97+
Resume records.
98+
99+
- Type
100+
101+
```ts
102+
declare class DataHarborPlugin {
103+
resume(): void;
104+
}
105+
```
106+
107+
More flexible control of logging behavior.
108+
109+
- Details
110+
111+
Data during &lt;Pause - Resume&gt; will not be recorded.
112+
113+
- Example
114+
115+
```ts
116+
window.$harbor = new DataHarborPlugin();
117+
118+
// pause
119+
window.$harbor.pause();
120+
121+
// resume
122+
window.$harbor.resume();
123+
```
124+
125+
#### reharbor()#reharbor
126+
127+
Clear the recorded data and continue recording. In short, remastered.
128+
129+
- Type
130+
131+
```ts
132+
declare class DataHarborPlugin {
133+
reharbor(): void;
134+
}
135+
```
136+
137+
- Example
138+
139+
```ts
140+
window.$harbor = new DataHarborPlugin();
141+
142+
window.$harbor.reharbor();
143+
```

0 commit comments

Comments
 (0)