diff --git a/docs/recipes/console.md b/docs/recipes/console.md
index ec1d06ec..c035271d 100644
--- a/docs/recipes/console.md
+++ b/docs/recipes/console.md
@@ -45,13 +45,13 @@ rrweb.record({
});
```
-All recordLog options are described below:
-| key | default | description |
+All options are described below:
+| 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. |
-| lengthThreshold | 1000 | Maximum number of records of console output. |
+| level | ['log','warn','error',...] | Default value contains names of all console functions. You can override it by setting console levels you need. |
+| lengthThreshold | 1000 | Maximum number of records of console output. |
| stringifyOptions | { stringLengthLimit: undefined, numOfKeysLimit: 50, depthOfLimit: 4 } | If console output includes js objects, we need to stringify them. `stringLengthLimit` limits the string length of single value. `numOfKeysLimit` limits the number of keys in an object. `depthOfLimit` limits the depth of object. If an object contains more keys than this limit, we would only save object's name. You can reduce the size of events by setting these options. |
-| logger | window.console | the console object we would record.You can set a console object from another execution environment where you would like to record. |
+| logger | window.console | the console object we would record.You can set a console object from another execution environment where you would like to record. |
## replay console
@@ -70,7 +70,7 @@ replayer.play();
Description of replay option is as follows:
-| 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. |
+| key | default | description |
+| ------------ | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| 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` |
diff --git a/docs/recipes/console.zh_CN.md b/docs/recipes/console.zh_CN.md
index ab3d19b9..5b63611a 100644
--- a/docs/recipes/console.zh_CN.md
+++ b/docs/recipes/console.zh_CN.md
@@ -45,12 +45,12 @@ rrweb.record({
```
如下是配置选项的详细说明：
-| key | 默认值 | 功能 |
+| key | 默认值 | 功能 |
| ---------------- | --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| level | ['log','warn','error',...] | 默认值包含了 console 的全部函数，你也可以传入想要录制的 console 函数。 |
-| lengthThreshold | 1000 | 录制 console 输出信息的最大条数。 |
+| level | ['log','warn','error',...] | 默认值包含了 console 的全部函数，你也可以传入想要录制的 console 函数。 |
+| lengthThreshold | 1000 | 录制 console 输出信息的最大条数。 |
| stringifyOptions | { stringLengthLimit: undefined, numOfKeysLimit: 50, depthOfLimit: 4 } | 如果 console 输出包含了 js 对象，我们需要对其进行序列化，`stringLengthLimit` 限制了单个值能转化的最大字符串长度，`numOfKeysLimit` 限制了一个被序列化的 js 对象能够包含的最大数量 key，`depthOfLimit` 限制了一个被序列化的 js 对象能够拥有的对象深度（层数），如果对象的 key 数量超过了这个限制，我们将只保留对象的名字。你能通过这些选项来减小生成的 events 的体积。 |
-| logger | window.console | 要录制的 console 对象，你也可以传入一个想要录制的其他 js 执行环境的 console 对象。 |
+| logger | window.console | 要录制的 console 对象，你也可以传入一个想要录制的其他 js 执行环境的 console 对象。 |
## 播放 console 数据
@@ -69,7 +69,7 @@ replayer.play();
如下是对 replay 选项的描述：
-| key | 默认值 | 功能 |
-| ------------ | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
-| level | ['log','warn','error',...] | 与 recordLog 设置选项的含义相同，你可以只播放想要的 console 函数类型 |
+| key | 默认值 | 功能 |
+| ------------ | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| level | ['log','warn','error',...] | 你可以只播放想要的 console 函数类型 |
| replayLogger | 一个基于 console 的对接口[ReplayLogger](../../packages/rrweb/src/plugins/console/replay/index.ts#L13)的实现 | 你也可以通过传入一个`ReplayLogger`接口的自己的实现，用 html 模拟一个浏览器控制台，来播放录制的 console 数据 |
diff --git a/docs/recipes/plugin.md b/docs/recipes/plugin.md
index b3fea119..e4c6bfca 100644
--- a/docs/recipes/plugin.md
+++ b/docs/recipes/plugin.md
@@ -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.
+# Available plugins
+
+- [console](./console.md)
+
## Interface
Same to with other functionality in rrweb, a plugin can implement record or replay or both features.
diff --git a/docs/recipes/plugin.zh_CN.md b/docs/recipes/plugin.zh_CN.md
index 6918ab71..530f48bc 100644
--- a/docs/recipes/plugin.zh_CN.md
+++ b/docs/recipes/plugin.zh_CN.md
@@ -2,6 +2,10 @@
插件 API 的设计目标是在不增加 rrweb 核心部分大小和复杂性的前提下，扩展 rrweb 的功能。
+# 可用插件
+
+- [console](./console.zh_CN.md)
+
## 接口
与 rrweb 其它功能相似，插件可以包含同时包含录制、回放侧的功能，也可以只实现其中任一。
diff --git a/guide.md b/guide.md
index 3c6ed36f..1ad42a23 100644
--- a/guide.md
+++ b/guide.md
@@ -135,30 +135,30 @@ setInterval(save, 10 * 1000);
The parameter of `rrweb.record` accepts the following options.
-| key | default | description |
-| -------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| emit | required | the callback function to get emitted events |
-| checkoutEveryNth | - | take a full snapshot after every N events
refer to the [checkout](#checkout) chapter |
-| checkoutEveryNms | - | take a full snapshot after every N ms
refer to the [checkout](#checkout) chapter |
-| blockClass | 'rr-block' | Use a string or RegExp to configure which elements should be blocked, refer to the [privacy](#privacy) chapter |
-| blockSelector | null | Use a string to configure which selector should be blocked, refer to the [privacy](#privacy) chapter |
-| ignoreClass | 'rr-ignore' | Use a string or RegExp to configure which elements should be ignored, refer to the [privacy](#privacy) chapter |
-| maskTextClass | 'rr-mask' | Use a string or RegExp to configure which elements should be masked, refer to the [privacy](#privacy) chapter |
-| maskTextSelector | null | Use a string to configure which selector should be masked, refer to the [privacy](#privacy) chapter |
-| maskAllInputs | false | mask all input content as \* |
-| maskInputOptions | { password: true } | mask some kinds of input \*
refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L77-L95) |
-| maskInputFn | - | customize mask input content recording logic |
-| maskTextFn | - | customize mask text content recording logic |
-| slimDOMOptions | {} | remove unnecessary parts of the DOM
refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L97-L108) |
-| inlineStylesheet | true | whether to inline the stylesheet in the events |
-| hooks | {} | hooks for events
refer to the [list](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207) |
-| packFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
-| sampling | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
-| recordCanvas | false | whether to record the canvas element |
-| inlineImages | false | whether to record the image content |
-| 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) |
+| key | default | description |
+| -------------------- | ------------------ | ------------------------------------------------------------ |
+| emit | required | the callback function to get emitted events |
+| checkoutEveryNth | - | take a full snapshot after every N events
refer to the [checkout](#checkout) chapter |
+| checkoutEveryNms | - | take a full snapshot after every N ms
refer to the [checkout](#checkout) chapter |
+| blockClass | 'rr-block' | Use a string or RegExp to configure which elements should be blocked, refer to the [privacy](#privacy) chapter |
+| blockSelector | null | Use a string to configure which selector should be blocked, refer to the [privacy](#privacy) chapter |
+| ignoreClass | 'rr-ignore' | Use a string or RegExp to configure which elements should be ignored, refer to the [privacy](#privacy) chapter |
+| maskTextClass | 'rr-mask' | Use a string or RegExp to configure which elements should be masked, refer to the [privacy](#privacy) chapter |
+| maskTextSelector | null | Use a string to configure which selector should be masked, refer to the [privacy](#privacy) chapter |
+| maskAllInputs | false | mask all input content as \* |
+| maskInputOptions | { password: true } | mask some kinds of input \*
refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L77-L95) |
+| maskInputFn | - | customize mask input content recording logic |
+| maskTextFn | - | customize mask text content recording logic |
+| slimDOMOptions | {} | remove unnecessary parts of the DOM
refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L97-L108) |
+| inlineStylesheet | true | whether to inline the stylesheet in the events |
+| hooks | {} | hooks for events
refer to the [list](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207) |
+| packFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
+| sampling | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
+| recordCanvas | false | whether to record the canvas element |
+| inlineImages | false | whether to record the image content |
+| collectFonts | false | whether to collect fonts in the website |
| 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
@@ -286,22 +286,23 @@ replayer.pause(5000);
The replayer accepts options as its constructor's second parameter, and it has the following options:
-| key | default | description |
-| ------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| speed | 1 | replay speed ratio |
-| root | document.body | the root element of replayer |
-| loadTimeout | 0 | timeout of loading remote style sheet |
-| skipInactive | false | whether to skip inactive time |
-| showWarning | true | whether to print warning messages during replay |
-| showDebug | false | whether to print debug messages during replay |
-| blockClass | 'rr-block' | element with the class name will display as a blocked area |
-| liveMode | false | whether to enable live mode |
-| insertStyleRules | [] | accepts multiple CSS rule string, which will be injected into the replay iframe |
-| triggerFocus | true | whether to trigger focus during replay |
-| UNSAFE_replayCanvas | false | whether to replay the canvas element. **Enable this will remove the sandbox, which is unsafe.** |
+| key | default | description |
+| ------------------- | ------------- | ------------------------------------------------------------ |
+| speed | 1 | replay speed ratio |
+| root | document.body | the root element of replayer |
+| loadTimeout | 0 | timeout of loading remote style sheet |
+| skipInactive | false | whether to skip inactive time |
+| showWarning | true | whether to print warning messages during replay |
+| showDebug | false | whether to print debug messages during replay |
+| blockClass | 'rr-block' | element with the class name will display as a blocked area |
+| liveMode | false | whether to enable live mode |
+| insertStyleRules | [] | accepts multiple CSS rule string, which will be injected into the replay iframe |
+| triggerFocus | true | whether to trigger focus during replay |
+| UNSAFE_replayCanvas | false | whether to replay the canvas element. **Enable this will remove the sandbox, which is unsafe.** |
| 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) |
-| logConfig | - | configuration of console output playback, refer to the [console recipe](./docs/recipes/console.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) |
+| plugins | [] | load plugins to provide extended replay functions. [What is plugins?](./docs/recipes/plugin.md) |
#### Use rrweb-player
diff --git a/guide.zh_CN.md b/guide.zh_CN.md
index 4478a295..ab3fd668 100644
--- a/guide.zh_CN.md
+++ b/guide.zh_CN.md
@@ -131,29 +131,29 @@ setInterval(save, 10 * 1000);
`rrweb.record(config)` 的 config 部分接受以下参数
-| key | 默认值 | 功能 |
-| -------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| emit | 必填 | 获取当前录制的数据 |
-| checkoutEveryNth | - | 每 N 次事件重新制作一次全量快照
详见[“重新制作快照”](#重新制作快照)章节 |
-| checkoutEveryNms | - | 每 N 毫秒重新制作一次全量快照
详见[“重新制作快照”](#重新制作快照)章节 |
-| blockClass | 'rr-block' | 字符串或正则表达式，可用于自定义屏蔽元素的类名，详见[“隐私”](#隐私)章节 |
-| blockSelector | null | 所有 element.matches(blockSelector)为 true 的元素都不会被录制，回放时取而代之的是一个同等宽高的占位元素 |
-| ignoreClass | 'rr-ignore' | 字符串或正则表达式，可用于自定义忽略元素的类名，详见[“隐私”](#隐私)章节 |
-| maskTextClass | 'rr-mask' | 字符串或正则表达式，可用于自定义忽略元素 text 内容的类名，详见[“隐私”](#隐私)章节 |
-| maskTextSelector | null | 所有 element.matches(maskTextSelector)为 true 的元素及其子元素的 text 内容将会被屏蔽 |
-| maskAllInputs | false | 将所有输入内容记录为 \* |
+| key | 默认值 | 功能 |
+| -------------------- | ------------------ | ------------------------------------------------------------ |
+| emit | 必填 | 获取当前录制的数据 |
+| checkoutEveryNth | - | 每 N 次事件重新制作一次全量快照
详见[“重新制作快照”](#重新制作快照)章节 |
+| checkoutEveryNms | - | 每 N 毫秒重新制作一次全量快照
详见[“重新制作快照”](#重新制作快照)章节 |
+| blockClass | 'rr-block' | 字符串或正则表达式，可用于自定义屏蔽元素的类名，详见[“隐私”](#隐私)章节 |
+| blockSelector | null | 所有 element.matches(blockSelector)为 true 的元素都不会被录制，回放时取而代之的是一个同等宽高的占位元素 |
+| ignoreClass | 'rr-ignore' | 字符串或正则表达式，可用于自定义忽略元素的类名，详见[“隐私”](#隐私)章节 |
+| maskTextClass | 'rr-mask' | 字符串或正则表达式，可用于自定义忽略元素 text 内容的类名，详见[“隐私”](#隐私)章节 |
+| maskTextSelector | null | 所有 element.matches(maskTextSelector)为 true 的元素及其子元素的 text 内容将会被屏蔽 |
+| maskAllInputs | false | 将所有输入内容记录为 \* |
| maskInputOptions | { password: true } | 选择将特定类型的输入框内容记录为 \*
类型详见[列表](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L77-L95) |
-| maskInputFn | - | 自定义特定类型的输入框内容记录逻辑 |
-| maskTextFn | - | 自定义文字内容的记录逻辑 |
-| slimDOMOptions | {} | 去除 DOM 中不必要的部分
类型详见[列表](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L97-L108) |
-| inlineStylesheet | true | 是否将样式表内联 |
-| hooks | {} | 各类事件的回调
类型详见[列表](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207) |
-| packFn | - | 数据压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
-| sampling | - | 数据抽样策略，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
-| recordCanvas | false | 是否记录 canvas 内容 |
-| collectFonts | false | 是否记录页面中的字体文件 |
-| recordLog | false | 是否记录 console 输出，详见[console 录制和播放](./docs/recipes/console.zh_CN.md) |
-| userTriggeredOnInput | false | [什么是 `userTriggered`](https://github.com/rrweb-io/rrweb/pull/495) |
+| maskInputFn | - | 自定义特定类型的输入框内容记录逻辑 |
+| maskTextFn | - | 自定义文字内容的记录逻辑 |
+| slimDOMOptions | {} | 去除 DOM 中不必要的部分
类型详见[列表](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L97-L108) |
+| inlineStylesheet | true | 是否将样式表内联 |
+| hooks | {} | 各类事件的回调
类型详见[列表](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207) |
+| packFn | - | 数据压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
+| sampling | - | 数据抽样策略，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
+| recordCanvas | false | 是否记录 canvas 内容 |
+| collectFonts | false | 是否记录页面中的字体文件 |
+| userTriggeredOnInput | false | [什么是 `userTriggered`](https://github.com/rrweb-io/rrweb/pull/495) |
+| plugins | [] | 加载插件以获得额外的录制功能. [什么是插件？](./docs/recipes/plugin.zh_CN.md) |
#### 隐私
@@ -281,22 +281,23 @@ replayer.pause(5000);
可以通过 `new rrweb.Replayer(events, options)` 的方式向 rrweb 传递回放时的配置参数，具体配置如下：
-| key | 默认值 | 功能 |
-| ------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| speed | 1 | 回放倍速 |
-| root | document.body | 回放时使用的 HTML 元素 |
-| loadTimeout | 0 | 加载异步样式表的超时时长 |
-| skipInactive | false | 是否快速跳过无用户操作的阶段 |
-| showWarning | true | 是否在回放过程中打印警告信息 |
-| showDebug | false | 是否在回放过程中打印 debug 信息 |
-| blockClass | 'rr-block' | 需要在回放时展示为隐藏区域的元素类名 |
-| liveMode | false | 是否开启直播模式 |
-| insertStyleRules | [] | 可以传入多个 CSS rule string，用于自定义回放时 iframe 内的样式 |
-| triggerFocus | true | 回放时是否回放 focus 交互 |
-| UNSAFE_replayCanvas | false | 回放时是否回放 canvas 内容，**开启后将会关闭沙盒策略，导致一定风险** |
+| key | 默认值 | 功能 |
+| ------------------- | ------------- | ------------------------------------------------------------ |
+| speed | 1 | 回放倍速 |
+| root | document.body | 回放时使用的 HTML 元素 |
+| loadTimeout | 0 | 加载异步样式表的超时时长 |
+| skipInactive | false | 是否快速跳过无用户操作的阶段 |
+| showWarning | true | 是否在回放过程中打印警告信息 |
+| showDebug | false | 是否在回放过程中打印 debug 信息 |
+| blockClass | 'rr-block' | 需要在回放时展示为隐藏区域的元素类名 |
+| liveMode | false | 是否开启直播模式 |
+| insertStyleRules | [] | 可以传入多个 CSS rule string，用于自定义回放时 iframe 内的样式 |
+| triggerFocus | true | 回放时是否回放 focus 交互 |
+| UNSAFE_replayCanvas | false | 回放时是否回放 canvas 内容，**开启后将会关闭沙盒策略，导致一定风险** |
| mouseTail | true | 是否在回放时增加鼠标轨迹。传入 false 可关闭，传入对象可以定制轨迹持续时间、样式等，配置详见[类型](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
-| unpackFn | - | 数据解压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
-| logConfig | - | console logger 数据播放设置，详见[console 录制和播放](./docs/recipes/console.zh_CN.md) |
+| unpackFn | - | 数据解压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
+| logConfig | - | console logger 数据播放设置，详见[console 录制和播放](./docs/recipes/console.zh_CN.md) |
+| plugins | [] | 加载插件以获得额外的回放功能. [什么是插件？](./docs/recipes/plugin.zh_CN.md) |
#### 使用 rrweb-player
diff --git a/packages/rrweb-player/public/index.html b/packages/rrweb-player/public/index.html
index 032a9068..37766746 100644
--- a/packages/rrweb-player/public/index.html
+++ b/packages/rrweb-player/public/index.html
@@ -18,7 +18,7 @@
// eslint-disable-next-line
const component = new rrwebPlayer({
target: document.body,
- data: {
+ props: {
events,
skipInactive: true,
showDebug: false,