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

update console recipes

Browse Source
This commit is contained in:
Yanzhen Yu
2026-04-01 12:00:00 +08:00
parent 789533382b
commit 35c6f20164
2 changed files with 58 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
docs/recipes/console.md
View File

@@ -1,35 +1,38 @@
# console recorder and replayer
Starting with a later version of v0.9.11, we add the ability to record and play back console output.
Starting from v1.0.0, we add the plugin 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;
const defaultLog = console.log["__rrweb_original__"] ? console.log["__rrweb_original__"] : console.log;
defaultLog(event);
},
// to use default record option
recordLog: true,
plugins: [rrweb.getRecordConsolePlugin()],
});
```
**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 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;
const defaultLog = console.log["__rrweb_original__"] ? console.log["__rrweb_original__"] : console.log;
defaultLog(event);
},
// customized options
recordLog: {
plugins: [rrweb.getRecordConsolePlugin({
level: ["info", "log", "warn", "error"],
lengthThreshold: 10000,
stringifyOptions: {
@@ -37,25 +40,29 @@ rrweb.record({
numOfKeysLimit: 100,
},
logger: window.console,
},
})],
});
```
All recordLog 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. |
| 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. |
| 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"]
},
plugins: [
rrweb.getReplayConsolePlugin({
level: ['info', 'log', 'warn', 'error'],
}),
],
});
replayer.play();
```
@@ -65,4 +72,4 @@ 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` |
| 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` |

62
docs/recipes/console.zh_CN.md
View File

@@ -1,34 +1,37 @@
# console 录制和播放
从v0.9.11的下一个版本开始，我们增加了录制和播放控制台输出的功能。这个功能旨在为开发者提供更多的bug信息。对这项功能我们还提供了一些设置选项。
从 v1.0.0 版本开始，我们以插件的形式增加了录制和播放控制台输出的功能。这个功能旨在为开发者提供更多的 bug 信息。对这项功能我们还提供了一些设置选项。
### 开启录制 console 功能
### 开启录制console功能
可以通过如下代码使用默认的配置选项
```js
rrweb.record({
emit: emit(event) {
// 如果要使用console来输出信息，请使用如下的写法
const defaultLog = console.log["__rrweb_original__"]?console.log["__rrweb_original__"]:console.log;
const defaultLog = console.log["__rrweb_original__"] ? console.log["__rrweb_original__"] : console.log;
defaultLog(event);
},
// 使用默认的配置选项
recordLog: true,
plugins: [rrweb.getRecordConsolePlugin()],
});
```
**警告**: 在emit函数中你不应该直接调用console.log等函数，否则将会得到报错：`Uncaught RangeError: Maximum call stack size exceeded`。
你应该调用console.log.\_\_rrweb_original__()来避免错误。
**警告**: 在 emit 函数中你不应该直接调用 console.log 等函数，否则将会得到报错：`Uncaught RangeError: Maximum call stack size exceeded`。
你应该调用 console.log.\_\_rrweb_original\_\_()来避免错误。
你也可以定制录制 console 的选项
你也可以定制录制console的选项
```js
rrweb.record({
emit: emit(event) {
// 如果要使用console来输出信息，请使用如下的写法
const defaultLog = console.log["__rrweb_original__"]?console.log["__rrweb_original__"]:console.log;
const defaultLog = console.log["__rrweb_original__"] ? console.log["__rrweb_original__"] : console.log;
defaultLog(event);
},
// 定制的选项
recordLog: {
plugins: [rrweb.getRecordConsolePlugin({
level: ["info", "log", "warn", "error"],
lengthThreshold: 10000,
stringifyOptions: {
@@ -36,31 +39,36 @@ rrweb.record({
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类型的数据，我们将自动播放这些数据。
如下是配置选项的详细说明：
| 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"]
},
plugins: [
rrweb.getReplayConsolePlugin({
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数据 |
如下是对 replay 选项的描述：
| key | 默认值 | 功能 |
| ------------ | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| level | ['log','warn','error',...] | 与 recordLog 设置选项的含义相同，你可以只播放想要的 console 函数类型 |
| replayLogger | 一个基于 console 的对接口[ReplayLogger](../../src/types.ts#L417)的实现 | 你也可以通过传入一个`ReplayLogger`接口的自己的实现，用 html 模拟一个浏览器控制台，来播放录制的 console 数据 |