xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: add document for console recording and playback (#435)

Browse Source 
* docs: add document for console recording and playback

* docs: adjust some sentences
This commit is contained in:
Luck Feng
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 9d2db86d5a
commit dba421d2c5
6 changed files with 151 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
docs/recipes/console.md Normal file
View File

@@ -0,0 +1,68 @@
# console recorder and replayer
Starting with a later version of v0.9.11, we add the ability to record and play back console output.
This feature aims to provide developers with more information about the bug scene. There are some options for recording and replaying console output.
### Enable recording console
You can enable the logger using default option like this:
```js
rrweb.record({
emit: emit(event) {
// you should use console.log in this way to avoid errors.
const defaultLog = console.log["__rrweb_original__"]?console.log["__rrweb_original__"]:console.log;
defaultLog(event);
},
// to use default record option
recordLog: true,
});
```
**alert**: You shouldn't call console.log(warn, error .etc) in the emit function or you would get the error: `Uncaught RangeError: Maximum call stack size exceeded`.
You should call console.log.\_\_rrweb_original__() instead.
You can also customize the behavior of logger like this:
```js
rrweb.record({
emit: emit(event) {
// you should use console.log in this way to avoid errors.
const defaultLog = console.log["__rrweb_original__"]?console.log["__rrweb_original__"]:console.log;
defaultLog(event);
},
// customized options
recordLog: {
level: ["info", "log", "warn", "error"],
lengthThreshold: 10000,
stringifyOptions: {
stringLengthLimit: 1000,
numOfKeysLimit: 100,
},
logger: window.console,
},
});
```
All recordLog 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. |
| stringifyOptions | { stringLengthLimit: undefined, numOfKeysLimit: 50 } | 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. 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. |
## replay console
If recorded events include data of console log type, we will automatically play them.
```js
const replayer = new rrweb.Replayer(events, {
logConfig: {
level: ["info", "log", "warn", "error"]
},
});
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. |
| replayLogger | a console based object that implements the interface [ReplayLogger](../../src/types.ts#L417) | You can also set a replay logger to replay the log messages in a simulated browser console by implementing the interface `ReplayLogger` |

66
docs/recipes/console.zh_CN.md Normal file
View File

@@ -0,0 +1,66 @@
# console 录制和播放
从v0.9.11的下一个版本开始，我们增加了录制和播放控制台输出的功能。这个功能旨在为开发者提供更多的bug信息。对这项功能我们还提供了一些设置选项。
### 开启录制console功能
可以通过如下代码使用默认的配置选项
```js
rrweb.record({
emit: emit(event) {
// 如果要使用console来输出信息，请使用如下的写法
const defaultLog = console.log["__rrweb_original__"]?console.log["__rrweb_original__"]:console.log;
defaultLog(event);
},
// 使用默认的配置选项
recordLog: true,
});
```
**警告**: 在emit函数中你不应该直接调用console.log等函数，否则将会得到报错：`Uncaught RangeError: Maximum call stack size exceeded`。
你应该调用console.log.\_\_rrweb_original__()来避免错误。
你也可以定制录制console的选项
```js
rrweb.record({
emit: emit(event) {
// 如果要使用console来输出信息，请使用如下的写法
const defaultLog = console.log["__rrweb_original__"]?console.log["__rrweb_original__"]:console.log;
defaultLog(event);
},
// 定制的选项
recordLog: {
level: ["info", "log", "warn", "error"],
lengthThreshold: 10000,
stringifyOptions: {
stringLengthLimit: 1000,
numOfKeysLimit: 100,
},
logger: window.console,
},
});
```
如下是配置选项的详细说明：
| key | 默认值 | 功能 |
| ---------------- | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| level | ['log','warn','error',...] | 默认值包含了console的全部函数，你也可以传入想要录制的console函数。 |
| lengthThreshold | 1000 | 录制console输出信息的最大条数。 |
| stringifyOptions | { stringLengthLimit: undefined, numOfKeysLimit: 50 } | 如果console输出包含了js对象，我们需要对其进行序列化，`stringLengthLimit` 限制了单个值能转化的最大字符串长度，`numOfKeysLimit` 限制了一个被序列化的js对象能够包含的最大数量key，如果对象的key数量超过了这个限制，我们将只保留对象的名字。你能通过这些选项来减小生成的events的体积。 |
| logger | window.console | 要录制的console对象，你也可以传入一个想要录制的其他js执行环境的console对象。 |
## 播放console数据
如果replayer传入的events中包含了console类型的数据，我们将自动播放这些数据。
```js
const replayer = new rrweb.Replayer(events, {
logConfig: {
level: ["info", "log", "warn", "error"]
},
});
replayer.play();
```
如下是对replay选项的描述：
| key | 默认值 | 功能 |
| ------------ | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| level | ['log','warn','error',...] | 与recordLog设置选项的含义相同，你可以只播放想要的console函数类型 |
| replayLogger | 一个基于console的对接口[ReplayLogger](../../src/types.ts#L417)的实现 | 你也可以通过传入一个`ReplayLogger`接口的自己的实现，用html模拟一个浏览器控制台，来播放录制的console数据 |

7
docs/recipes/index.md
View File

@@ -65,3 +65,10 @@ In some Apps, rrweb may record an unexpected amount of data. This part will help
Canvas is a special HTML element, which will not be recorded by rrweb by default. There are some options for recording and replaying Canvas.
[link](./canvas.md)
### Console Recorder and Replayer
Starting with a later version of v0.9.11, we add the ability to record and play back console output.
This feature aims to provide developers with more information about the bug scene. There are some options for recording and replaying console output.
[link](./console.md)

6
docs/recipes/index.zh_CN.md
View File

@@ -63,3 +63,9 @@ rrweb 录制的数据是一种高效、易于压缩的文本格式，可以用
Canvas 是一种特殊的 HTML 元素，默认情况下其内容不会被 rrweb 观测。我们可以通过特定的配置让 rrweb 能够录制并回放 Canvas。
[链接](./canvas.zh_CN.md)
### console录制和播放
从v0.9.11的下一个版本开始，我们增加了录制和播放控制台输出的功能。这个功能旨在为开发者提供更多的bug信息。对这项功能我们还提供了一些设置选项。
[链接](./console.zh_CN.md)