Skip to content

Commit 2275af8

Browse files
wqcstrongwqcstrong
committed
update docs
1 parent f0457ca commit 2275af8

File tree

6 files changed

+66
-16
lines changed

6 files changed

+66
-16
lines changed

‎src/assets/image/screenshot/plugins.png

39.5 KB
Loading

‎src/pages/Docs/index.less

+6
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,10 @@
55
background-color: #1a1a1a;
66
color: #c4c4c4;
77
letter-spacing: 0.8px;
8+
pre {
9+
letter-spacing: 0px;
10+
.line {
11+
line-height: 1.5em;
12+
}
13+
}
814
}

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

+24
Original file line numberDiff line numberDiff line change
@@ -80,3 +80,27 @@ Go to the debugger, click the top menu "Debugging - Log Replay" to enter the rep
8080
DataHarborPlugin mainly collects and handles data. Additionally, PageSpy provides:
8181

8282
- [RRWebPlugin]({VITE_PLUGIN_RRWEB}): Uses `rrweb` to record DOM mutations. In the "Log Replay" panel on the left side of the debugger, devepler can see the user interaction traces.
83+
84+
### FAQ
85+
86+
1. How to upload / download logs manually?
87+
88+
```ts
89+
window.$harbor = new DataHarborPlugin();
90+
91+
// Upload
92+
window.$harbor.onOfflineLog('upload');
93+
94+
// Download
95+
window.$harbor.onOfflineLog('download');
96+
```
97+
98+
2. Where is offline log data stored?
99+
100+
After `DataHarborPlugin` receives the data, it first places it in an array in memory. When the data volume in the array reaches a threshold, it writes the data to a temporary file. By default, this threshold is 10MB. You can also configure it yourself:
101+
102+
```ts
103+
new DataHarborPlugin({
104+
maximum: 1 * 1024 * 1024, // Write to a temporary file when the data in memory reaches 1MB
105+
})
106+
```

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

+30-8
Original file line numberDiff line numberDiff line change
@@ -42,13 +42,11 @@ import replayGif from '@/assets/image/screenshot/replay-page.gif';
4242
<html>
4343
<head>
4444
<!-- 1. 加载 PageSpy -->
45-
<script src="https://<your-pagespy-host>/page-spy/index.min.js"></script>
46-
47-
<!-- 2. 加载 DataHarbor 插件，实现缓存离线数据，下载或上传日志数据 -->
48-
<script src="https://<your-pagespy-host>/plugin/data-harbor/index.min.js"></script>
49-
50-
<!-- 3. 同时可以加载 RRWeb 插件，实现将用户操作轨迹记录到离线日志中 -->
51-
<script src="https://<your-pagespy-host>/plugin/rrweb/index.min.js"></script>
45+
<script src="{deployUrl}/page-spy/index.min.js"></script>
46+
<!-- 2. 加载 DataHarbor 插件：缓存离线日志数据，提供下载 / 上传日志功能 -->
47+
<script src="{deployUrl}/plugin/data-harbor/index.min.js"></script>
48+
<!-- 3. 同时可以加载 RRWeb 插件，将用户操作轨迹记录到离线日志中 -->
49+
<script src="{deployUrl}/plugin/rrweb/index.min.js"></script>
5250

5351
<script>
5452
// 4. 注册插件，config 信息查看：https://github.com/HuolalaTech/page-spy/blob/main/packages/page-spy-plugin-data-harbor
@@ -79,4 +77,28 @@ import replayGif from '@/assets/image/screenshot/replay-page.gif';
7977

8078
DataHarborPlugin 本身只收集数据、提供数据处理的功能，PageSpy 另外还提供了：
8179

82-
- [RRWebPlugin]({VITE_PLUGIN_RRWEB}): 使用 `rrweb` 记录 DOM 更新，在调试端的「日志回放」面板左侧用户可以看到页面的操作轨迹；
80+
- [RRWebPlugin]({VITE_PLUGIN_RRWEB}): 使用 `rrweb` 记录 DOM 更新，在调试端的「日志回放」面板左侧用户可以看到页面的操作轨迹；
81+
82+
### FAQ
83+
84+
1. 如何手动操作上传 / 下载日志？
85+
86+
```ts
87+
window.$harbor = new DataHarborPlugin();
88+
89+
// 上传
90+
window.$harbor.onOfflineLog('upload');
91+
92+
// 下载
93+
window.$harbor.onOfflineLog('download');
94+
```
95+
96+
2. 离线日志存储在哪里？
97+
98+
`DataHarborPlugin` 收到数据后，会先放入内存的数组中，当数组里存储的数据体积达到临界值时会将数据写入临时文件，这个临界值默认情况下是 10M。你也可以自行配置:
99+
100+
```ts
101+
new DataHarborPlugin({
102+
maximum: 1 * 1024 * 1024, // 内存中的数据记录达到 1M 时写入临时文件
103+
})
104+
```

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
2-
1+
import pluginsImg from '@/assets/image/screenshot/plugins.png';
32

43
### Type Definitions #definition
54

@@ -57,6 +56,8 @@ export interface OnMountedParams {
5756

5857
If a plugin collects (or want to publicly expose) certain platform "data", in addition to broadcasting data via `socketStore`, it is conventionally required to dispatch an `"public-data"` internal event on the `socketStore` instance. This allows plugins with statistical or persistence requirements to uniformly collect data from this event. Plugins that think certain data should not be "public" are not required to dispatch the `"public-data"` event.
5958

59+
<img src={pluginsImg} />
60+
6061
### Example Implementation of Plugins #demo
6162

6263
Reference implementations can be found in [DataHarborPlugin]({VITE_PLUGIN_DATA_HARBOR}) and [RRWebPlugin]({VITE_PLUGIN_RRWEB}).

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

+3-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
1-
2-
1+
import pluginsImg from '@/assets/image/screenshot/plugins.png';
32

43
### 类型定义#definition
54

65
```ts
7-
import { SocketStoreType } from '@huolala-tech/page-spy-types/lib/base';
8-
import { PluginOrder } from '@huolala-tech/page-spy-types';
9-
import { InitConfig } from 'types';
10-
116
export abstract class PageSpyPlugin {
127
/**
138
* 每个插件都要求指定 name，会作为当前插件的 "身份标识"。
@@ -57,6 +52,8 @@ export interface OnMountedParams {
5752

5853
如果当前插件会收集（或者希望对外公开）平台的某种行为「数据」，那么除了在 `socketStore` 广播数据外，我们约定插件在 `socketStore` 实例上额外派发一个 `"public-data"` 内部事件（Internal Event）。此举的目的是为了满足有统计需求或者持久化需求的插件能够从这个事件中统一收集数据，插件如果觉得某类数据不应该被 “公开”，则无需派发 `"public-data"` 事件。
5954

55+
<img src={pluginsImg} />
56+
6057
### 插件实现案例#demo
6158

6259
参考 [DataHarborPlugin]({VITE_PLUGIN_DATA_HARBOR}) 和 [RRWebPlugin]({VITE_PLUGIN_RRWEB})。

0 commit comments

Comments
 (0)