Skip to content

Commit f822066

Browse files
qkang07qkang07
committed
update docs
1 parent 63e3c1f commit f822066

File tree

5 files changed

+267
-86
lines changed

5 files changed

+267
-86
lines changed

‎src/pages/Docs/md/miniprogram.en.mdx

+10
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { Tooltip } from 'antd'
2+
import mpPanelImg from '@/assets/image/screenshot/mp-panel.png'
3+
24

35
#### Step 1#step-1
46

@@ -39,6 +41,14 @@ new PageSpy({
3941
})
4042
```
4143

44+
#### Debugging panel
45+
46+
Call the `showPanel()` method on the created PageSpy instance to pop up a debugging menu for assistance with debugging:
47+
48+
<img src={mpPanelImg} />
49+
50+
<br/>
51+
4252
That's the complete process to integrate PageSpy into a mini-program project.
4353

4454
Once integrated, click on the top menu <Tooltip title="Menu is hidden by default and will be visible after deployment." color="purple"><a href="javascript:void(0)">Debugging</a></Tooltip> to use it!

‎src/pages/Docs/md/miniprogram.zh.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,6 @@ const $pageSpy = new PageSpy({
5151
<img src={mpPanelImg} />
5252

5353

54-
54+
<br/>
5555

5656
以上就是在小程序项目中接入 PageSpy 的全部流程，接入完成后点击顶部菜单 <Tooltip title="菜单默认隐藏，部署后可见" color="purple"><a href="javascript:void(0)">开始调试</a></Tooltip> 使用！

‎src/pages/Docs/md/offline-log.en.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
import modalImg from '@/assets/image/screenshot/modal.png';
55
import replayImg from '@/assets/image/screenshot/replay-page.png';
66
import replayGif from '@/assets/image/screenshot/replay-page.gif';
7+
import mpDataHarborImg from '@/assets/image/screenshot/mp-data-harbor.png';
8+
79

810
**Log Replay**, as the name suggests, is about replaying previously generated logs. But why replay history logs? Where do these logs come from? How do we replay them? Let's explore each of these questions.
911

‎src/pages/Docs/md/pagespy.en.mdx

+251-80
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,240 @@
1+
import mpPanelImg from '@/assets/image/screenshot/mp-panel.png';
2+
import mpDataHarborImg from '@/assets/image/screenshot/mp-data-harbor.png';
3+
import { LinkOutlined } from '@ant-design/icons';
4+
import PlatformTag from '../components/PlatformTag'
5+
16
## PageSpy API#api
27

8+
> - The tag on the right of each API title indicate the exclusive env for this API, for example:
9+
>
10+
> <LinkOutlined/> **config.clientOrigin <PlatformTag type="browser" />**
11+
>
12+
> This tag indicates the API can only be used in the browser environment。
13+
> - The tags in the details below the API title indicate the platform differences of the API.
14+
15+
16+
317
#### constructor()#constructor
418

5-
- Details
19+
Create a PageSpy instance.
620

7-
```js
8-
window.$pageSpy = new PageSpy({
9-
// SDK will automatically determine server address (api) and client origin
10-
// (clientOrigin) from the imported path. For example, if you import SDK
11-
// via <script src="https://example.com/page-spy/index.min.js">, SDK will
12-
// internally set:
13-
// - api: "example.com"
14-
// - clientOrigin: "https://example.com"
15-
// If your service is deployed elsewhere, you need to manually specify to override.
16-
api: "",
17-
clientOrigin: "", // Only applicable for browser environment
18-
19-
// Project serves as an aggregation of information, searchable in the room list
20-
project: "default",
21-
22-
// Title allows users to provide custom parameters for distinguishing the current client
23-
// Corresponding information appears below the "device id" in each connection panel
24-
title: "--",
25-
26-
// Manually specify PageSpy service scheme.
27-
// This can be used if SDK cannot correctly analyze the scheme, such as
28-
// PageSpy's browser plugin is imported via chrome-extension://xxx/sdk/index.min.js,
29-
// which SDK interprets as invalid "chrome-extension://" and falls back
30-
// to ["http://", "ws://"].
31-
// - (Default) Pass undefined or null: SDK will analyze automatically;
32-
// - Pass boolean value:
33-
// - true: SDK will access PageSpy service via ["https://", "wss://"]
34-
// - false: SDK will access PageSpy service via ["http://", "ws://"]
35-
enableSSL: null,
36-
37-
// All internal plugins are carried with PageSpy by default out of the box.
38-
// You can disable some plugins as needed.
39-
disabledPlugins: [],
40-
41-
// Specify whether the SDK is allowed to serialize non-primitive data types
42-
// when collecting offline data.
43-
serializeData: false,
44-
45-
// Indicate whether authorization is required. If enabled, PageSpy generates a 6-digit
46-
// random number (below "secret") as a password for the debug room, which is required
47-
// for developers to access the debug room
48-
useSecret: false,
49-
50-
// Specify how many messages to cache. The data is primarily used to configure
51-
// the maximum number of historical data the SDK can send after the debugging
52-
// terminal goes online.
53-
messageCapacity: 1000,
54-
55-
// Data processing, users can customize, modify, or ignore data through this property.
56-
// View details: https://www.pagespy.org/#/docs/changelog#v1_9_2
57-
dataProcessor: {},
58-
59-
// Disable on production environment
60-
disabledOnProd: true, // Only applicable for miniprogram
61-
62-
// Indicates whether SDK initializes and automatically renders "circular white
63-
// logo on a white background" control in the lower left corner of the client
64-
// If set to false, you can call window.$pageSpy.render() to render manually.
65-
autoRender: true, // Only applicable for browser environment
66-
67-
// After [email protected] supports offline playback function, SDK integrated into the client
68-
// can collect data, export offline logs, and become a new usage mode.
69-
// Default value is false. When set to other values, it enters "offline mode",
70-
// where PageSpy does not create rooms or establish WebSocket connections.
71-
offline: false, // Only applicable for browser environment
72-
73-
// Custom control rendering logo
74-
logo: '', // Only applicable for browser environment
75-
76-
// Set the theme color, which is used in modals and toasts.
77-
primaryColor: '#8434e9'; // Only applicable for browser environment
78-
79-
// Set the logo and title in the modal.
80-
// Only applicable for browser environment
81-
modal: {
82-
logo: '',
83-
title: 'PageSpy',
84-
}
85-
})
21+
- Type:
22+
23+
```ts
24+
declare class PageSpy {
25+
constructor(config: InitConfig)
26+
}
8627
```
8728

29+
- Details:
30+
31+
The constructor accepts an `config` object as the initialization parameter.
32+
33+
Before the initialization, the SDK will not hack any native API.
34+
35+
#### config.api
36+
37+
The address of PageSpy service.
38+
39+
- Type: `string`
40+
41+
- **<PlatformTag type="browser" />**
42+
43+
SDK will automatically determine server address (api) and client origin (clientOrigin) from the imported path. For example, if you import SDK `<script src="https://example.com/page-spy/index.min.js">`, SDK will internally set:
44+
- api: `"example.com"`
45+
- clientOrigin: `"https://example.com"`
46+
47+
If your service is deployed elsewhere, you need to manually specify to override.
48+
49+
- **<PlatformTag type="mp" /> <PlatformTag type="rn" /> <PlatformTag type="harmony" />**
50+
51+
This option is mandatory.
52+
53+
#### config.clientOrigin <PlatformTag type="browser" />
54+
55+
The origin of the debug panel.
56+
57+
- Type: `string`
58+
59+
- Details:
60+
61+
The value will be used when copy the debug url on the
62+
63+
There could be a "Copy the debug url" button on the PageSpy popup, by default, the url uses the same origin as `api` option. By setting this option, you can specify the origin of the debug panel.
64+
65+
Only applicable for browser environment.
66+
67+
68+
#### config.project
69+
70+
Project serves as an aggregation of information, searchable in the room list.
71+
72+
- Type: `string`
73+
- Default: `default`
74+
75+
76+
77+
#### config.title
78+
79+
Title allows users to provide custom parameters for distinguishing the current client. It will appears below the "device id" in each connection panel.
80+
81+
- Type: `string`
82+
- Default: `--`
83+
84+
85+
#### config.enableSSL
86+
87+
Manually specify PageSpy service scheme.
88+
89+
- Type: `boolean`
90+
91+
- Details:
92+
93+
Pass boolean value:
94+
- true: SDK will access PageSpy service via ["https://", "wss://"]
95+
- false: SDK will access PageSpy service via ["http://", "ws://"]
96+
97+
- **<PlatformTag type="browser" />**
98+
99+
If not set, SDK will analyze automatically according to the page's protocol.
100+
101+
This can be used if SDK cannot correctly analyze the scheme, such as PageSpy's browser plugin is imported via chrome-extension://xxx/sdk/index.min.js, which SDK interprets as invalid "chrome-extension://" and falls back
102+
103+
- **<PlatformTag type="mp" /> <PlatformTag type="rn" /> <PlatformTag type="harmony" />**
104+
105+
These platform normally require https mandatorily, so the default value is `true`. You may need to manually set to `false` in dev env.
106+
107+
108+
109+
#### config.disabledPlugins
110+
111+
All internal plugins are carried with PageSpy by default out of the box. You can disable some plugins as needed.
112+
113+
- Type: `string[]`
114+
115+
116+
#### config.serializeData
117+
118+
Specify whether the SDK is allowed to serialize non-primitive data types when collecting offline data.
119+
120+
- Type: `boolean`
121+
- Default: `false`
122+
123+
124+
#### config.useSecret
125+
126+
Indicate whether authorization is required.
127+
128+
- Type: `boolean`
129+
- Default: `false`
130+
- Details:
131+
132+
If enabled, PageSpy generates a 6-digit random number (below "secret") as a password for the debug room, which is required for developers to access the debug room.
133+
134+
#### config.messageCapacity
135+
136+
Specify how many messages to cache.
137+
138+
- Type: `number`
139+
- Default: `1000`
140+
- Details:
141+
142+
The data is primarily used to configure the maximum number of historical data the SDK can send after the debugging terminal goes online.
143+
144+
145+
#### config.dataProcessor
146+
147+
User can process the data to be collected.
148+
149+
- Type:
150+
```ts
151+
declare interface DataProcessor {
152+
console?: (data: ConsoleData) => boolean;
153+
network?: (data: RequestItem) => boolean;
154+
storage?: (data: StorageData) => boolean;
155+
database?: (data: DatabaseData) => boolean;
156+
page?: (data: PageData) => boolean;
157+
system?: (data: SystemData) => boolean;
158+
}
159+
```
160+
161+
- Details:
162+
163+
Each processing method corresponds to an internal plugin, each log will be passed to the process method defined by user, and user can customize, modify, or ignore it. If the function returns false, PageSpy will ignore the log, then the log will not in neither the online debug panel nor offline data replay.
164+
165+
View details: https://www.pagespy.org/#/docs/changelog#v1_9_2
166+
167+
168+
#### config.disabledOnProd <PlatformTag type="mp" />
169+
170+
Disable the PageSpy in production env of miniprogram。
171+
172+
- Type: `boolean`
173+
- Default: `true`
174+
- Details:
175+
176+
As a debug tool, PageSpy is mainly for dev and debug phase, and is not recommended in production. Moreover, miniprogram platforms usually have strict audit rules.
177+
178+
179+
#### config.offline <PlatformTag type="browser" />
180+
181+
- Type: `boolean`
182+
183+
- Default: `false`
184+
185+
- Details:
186+
187+
After [email protected] supports offline playback function, SDK integrated into the client can collect data, export offline logs, and become a new usage mode.
188+
Default value is false. When set to other values, it enters "offline mode", where PageSpy does not create rooms or establish WebSocket connections.
189+
190+
Currently only support browser SDK。
191+
192+
193+
#### config.autoRender <PlatformTag type="browser" />
194+
195+
Indicates whether SDK initializes and automatically renders "circular white logo on a white background" control in the lower left corner of the client.
196+
197+
- Type: `boolean`
198+
199+
- Default: `true`
200+
201+
- Details:
202+
203+
If set to false, you can call window.$pageSpy.render() to render manually.
204+
205+
206+
#### config.logo <PlatformTag type="browser" />
207+
208+
Custom control rendering logo.
209+
210+
- Type: `string`
211+
212+
#### config.primaryColor <PlatformTag type="browser" />
213+
214+
Set the theme color, which is used in modals and toasts.
215+
216+
- Type: `string`
217+
218+
#### config.modal <PlatformTag type="browser" />
219+
220+
Set the logo and title in the modal.
221+
222+
- Type:
223+
224+
```ts
225+
declare interface ModalConfig {
226+
logo?: string;
227+
title?: string;
228+
}
229+
```
230+
- Default:
231+
```ts
232+
{
233+
logo: "",
234+
title: "PageSpy"
235+
}
236+
```
237+
88238
#### registerPlugin()#registerPlugin
89239

90240
Static method, register a plugin.
@@ -277,3 +427,24 @@ Encapsulates the WebSocket instance, provides message event listeners, triggers
277427
}
278428
}
279429
```
430+
431+
432+
#### showPanel() <PlatformTag type="mp" />
433+
434+
Show the debugging panel in miniprogram.
435+
436+
- Type:
437+
```ts
438+
declare class PageSpy {
439+
showPanel(): void;
440+
}
441+
```
442+
- Details:
443+
444+
<img src={mpPanelImg} style={{width: 375}} />
445+
446+
This panel supports plugin registration of custom buttons, for example, if the [DataHarborPlugin](./offline-log#mp) is registered, a button of「Upload Offline Log」will appear in the panel:
447+
448+
<img src={mpDataHarborImg} style={{width: 375}} />
449+
450+

0 commit comments

Comments
 (0)