update plugin docs

This commit is contained in:
Yanzhen Yu
2022-01-16 15:54:10 +08:00
parent a307c5c5bb
commit fb8ea8e657
7 changed files with 101 additions and 91 deletions

View File

@@ -45,7 +45,7 @@ rrweb.record({
}); });
``` ```
All recordLog options are described below: All options are described below:
| key | default | description | | key | default | description |
| ---------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ---------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| level | ['log','warn','error',...] | Default value contains names of all console functions. You can override it by setting console levels you need. | | level | ['log','warn','error',...] | Default value contains names of all console functions. You can override it by setting console levels you need. |
@@ -71,6 +71,6 @@ replayer.play();
Description of replay option is as follows: Description of replay option is as follows:
| key | default | description | | key | default | description |
| ------------ | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | ------------ | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| level | ['log','warn','error',...] | Same meaning as that option in recordLog. You can set this option to play levels of log you need. | | level | ['log','warn','error',...] | You can set this option to play levels of log you need. |
| replayLogger | a console based object that implements the interface [ReplayLogger](../../packages/rrweb/src/plugins/console/replay/index.ts#L13) | You can also set a replay logger to replay the log messages in a simulated browser console by implementing the interface `ReplayLogger` | | replayLogger | a console based object that implements the interface [ReplayLogger](../../packages/rrweb/src/plugins/console/replay/index.ts#L13) | You can also set a replay logger to replay the log messages in a simulated browser console by implementing the interface `ReplayLogger` |

View File

@@ -70,6 +70,6 @@ replayer.play();
如下是对 replay 选项的描述: 如下是对 replay 选项的描述:
| key | 默认值 | 功能 | | key | 默认值 | 功能 |
| ------------ | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | | ------------ | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| level | ['log','warn','error',...] | 与 recordLog 设置选项的含义相同,你可以只播放想要的 console 函数类型 | | level | ['log','warn','error',...] | 你可以只播放想要的 console 函数类型 |
| replayLogger | 一个基于 console 的对接口[ReplayLogger](../../packages/rrweb/src/plugins/console/replay/index.ts#L13)的实现 | 你也可以通过传入一个`ReplayLogger`接口的自己的实现,用 html 模拟一个浏览器控制台,来播放录制的 console 数据 | | replayLogger | 一个基于 console 的对接口[ReplayLogger](../../packages/rrweb/src/plugins/console/replay/index.ts#L13)的实现 | 你也可以通过传入一个`ReplayLogger`接口的自己的实现,用 html 模拟一个浏览器控制台,来播放录制的 console 数据 |

View File

@@ -2,6 +2,10 @@
The plugin API is designed to extend the function of rrweb without bump the size and complexity of rrweb's core part. The plugin API is designed to extend the function of rrweb without bump the size and complexity of rrweb's core part.
# Available plugins
- [console](./console.md)
## Interface ## Interface
Same to with other functionality in rrweb, a plugin can implement record or replay or both features. Same to with other functionality in rrweb, a plugin can implement record or replay or both features.

View File

@@ -2,6 +2,10 @@
插件 API 的设计目标是在不增加 rrweb 核心部分大小和复杂性的前提下,扩展 rrweb 的功能。 插件 API 的设计目标是在不增加 rrweb 核心部分大小和复杂性的前提下,扩展 rrweb 的功能。
# 可用插件
- [console](./console.zh_CN.md)
## 接口 ## 接口
与 rrweb 其它功能相似,插件可以包含同时包含录制、回放侧的功能,也可以只实现其中任一。 与 rrweb 其它功能相似,插件可以包含同时包含录制、回放侧的功能,也可以只实现其中任一。

View File

@@ -136,7 +136,7 @@ setInterval(save, 10 * 1000);
The parameter of `rrweb.record` accepts the following options. The parameter of `rrweb.record` accepts the following options.
| key | default | description | | key | default | description |
| -------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | -------------------- | ------------------ | ------------------------------------------------------------ |
| emit | required | the callback function to get emitted events | | emit | required | the callback function to get emitted events |
| checkoutEveryNth | - | take a full snapshot after every N events<br />refer to the [checkout](#checkout) chapter | | checkoutEveryNth | - | take a full snapshot after every N events<br />refer to the [checkout](#checkout) chapter |
| checkoutEveryNms | - | take a full snapshot after every N ms<br />refer to the [checkout](#checkout) chapter | | checkoutEveryNms | - | take a full snapshot after every N ms<br />refer to the [checkout](#checkout) chapter |
@@ -157,8 +157,8 @@ The parameter of `rrweb.record` accepts the following options.
| recordCanvas | false | whether to record the canvas element | | recordCanvas | false | whether to record the canvas element |
| inlineImages | false | whether to record the image content | | inlineImages | false | whether to record the image content |
| collectFonts | false | whether to collect fonts in the website | | collectFonts | false | whether to collect fonts in the website |
| recordLog | false | whether to record console output, refer to the [console recipe](./docs/recipes/console.md) |
| userTriggeredOnInput | false | whether to add `userTriggered` on input events that indicates if this event was triggered directly by the user or not. [What is `userTriggered`?](https://github.com/rrweb-io/rrweb/pull/495) | | userTriggeredOnInput | false | whether to add `userTriggered` on input events that indicates if this event was triggered directly by the user or not. [What is `userTriggered`?](https://github.com/rrweb-io/rrweb/pull/495) |
| plugins | [] | load plugins to provide extended record functions. [What is plugins?](./docs/recipes/plugin.md) |
#### Privacy #### Privacy
@@ -287,7 +287,7 @@ replayer.pause(5000);
The replayer accepts options as its constructor's second parameter, and it has the following options: The replayer accepts options as its constructor's second parameter, and it has the following options:
| key | default | description | | key | default | description |
| ------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ------------------- | ------------- | ------------------------------------------------------------ |
| speed | 1 | replay speed ratio | | speed | 1 | replay speed ratio |
| root | document.body | the root element of replayer | | root | document.body | the root element of replayer |
| loadTimeout | 0 | timeout of loading remote style sheet | | loadTimeout | 0 | timeout of loading remote style sheet |
@@ -302,6 +302,7 @@ The replayer accepts options as its constructor's second parameter, and it has t
| mouseTail | true | whether to show mouse tail during replay. Set to false to disable mouse tail. A complete config can be found in this [type](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) | | mouseTail | true | whether to show mouse tail during replay. Set to false to disable mouse tail. A complete config can be found in this [type](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
| unpackFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) | | unpackFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
| logConfig | - | configuration of console output playback, refer to the [console recipe](./docs/recipes/console.md) | | logConfig | - | configuration of console output playback, refer to the [console recipe](./docs/recipes/console.md) |
| plugins | [] | load plugins to provide extended replay functions. [What is plugins?](./docs/recipes/plugin.md) |
#### Use rrweb-player #### Use rrweb-player

View File

@@ -132,7 +132,7 @@ setInterval(save, 10 * 1000);
`rrweb.record(config)` 的 config 部分接受以下参数 `rrweb.record(config)` 的 config 部分接受以下参数
| key | 默认值 | 功能 | | key | 默认值 | 功能 |
| -------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | -------------------- | ------------------ | ------------------------------------------------------------ |
| emit | 必填 | 获取当前录制的数据 | | emit | 必填 | 获取当前录制的数据 |
| checkoutEveryNth | - | 每 N 次事件重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节 | | checkoutEveryNth | - | 每 N 次事件重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节 |
| checkoutEveryNms | - | 每 N 毫秒重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节 | | checkoutEveryNms | - | 每 N 毫秒重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节 |
@@ -152,8 +152,8 @@ setInterval(save, 10 * 1000);
| sampling | - | 数据抽样策略,详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) | | sampling | - | 数据抽样策略,详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
| recordCanvas | false | 是否记录 canvas 内容 | | recordCanvas | false | 是否记录 canvas 内容 |
| collectFonts | false | 是否记录页面中的字体文件 | | collectFonts | false | 是否记录页面中的字体文件 |
| recordLog | false | 是否记录 console 输出,详见[console 录制和播放](./docs/recipes/console.zh_CN.md) |
| userTriggeredOnInput | false | [什么是 `userTriggered`](https://github.com/rrweb-io/rrweb/pull/495) | | userTriggeredOnInput | false | [什么是 `userTriggered`](https://github.com/rrweb-io/rrweb/pull/495) |
| plugins | [] | 加载插件以获得额外的录制功能. [什么是插件?](./docs/recipes/plugin.zh_CN.md) |
#### 隐私 #### 隐私
@@ -282,7 +282,7 @@ replayer.pause(5000);
可以通过 `new rrweb.Replayer(events, options)` 的方式向 rrweb 传递回放时的配置参数,具体配置如下: 可以通过 `new rrweb.Replayer(events, options)` 的方式向 rrweb 传递回放时的配置参数,具体配置如下:
| key | 默认值 | 功能 | | key | 默认值 | 功能 |
| ------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ------------------- | ------------- | ------------------------------------------------------------ |
| speed | 1 | 回放倍速 | | speed | 1 | 回放倍速 |
| root | document.body | 回放时使用的 HTML 元素 | | root | document.body | 回放时使用的 HTML 元素 |
| loadTimeout | 0 | 加载异步样式表的超时时长 | | loadTimeout | 0 | 加载异步样式表的超时时长 |
@@ -297,6 +297,7 @@ replayer.pause(5000);
| mouseTail | true | 是否在回放时增加鼠标轨迹。传入 false 可关闭,传入对象可以定制轨迹持续时间、样式等,配置详见[类型](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) | | mouseTail | true | 是否在回放时增加鼠标轨迹。传入 false 可关闭,传入对象可以定制轨迹持续时间、样式等,配置详见[类型](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
| unpackFn | - | 数据解压缩函数,详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) | | unpackFn | - | 数据解压缩函数,详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
| logConfig | - | console logger 数据播放设置,详见[console 录制和播放](./docs/recipes/console.zh_CN.md) | | logConfig | - | console logger 数据播放设置,详见[console 录制和播放](./docs/recipes/console.zh_CN.md) |
| plugins | [] | 加载插件以获得额外的回放功能. [什么是插件?](./docs/recipes/plugin.zh_CN.md) |
#### 使用 rrweb-player #### 使用 rrweb-player

View File

@@ -18,7 +18,7 @@
// eslint-disable-next-line // eslint-disable-next-line
const component = new rrwebPlayer({ const component = new rrwebPlayer({
target: document.body, target: document.body,
data: { props: {
events, events,
skipInactive: true, skipInactive: true,
showDebug: false, showDebug: false,