Console 录制器与回放器

从 v1.0.0 开始，我们新增了用于录制和回放控制台输出的插件。 该功能旨在为开发者提供关于 bug 现场的更多信息。录制和回放控制台输出均提供了一些选项。

启用 Console 录制

你可以像这样使用默认选项启用日志记录器：

import { record } from '@rrweb/record';
import { getRecordConsolePlugin } from '@rrweb/rrweb-plugin-console-record';

record({
  emit: function 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
  plugins: [getRecordConsolePlugin()],
});

警告：你不应在 emit 函数中调用 console.log（warn、error 等），否则会得到错误：Uncaught RangeError: Maximum call stack size exceeded。 你应该改为调用 console.log.__rrweb_original__()。

你也可以像这样自定义日志记录器的行为：

import { record } from '@rrweb/record';
import { getRecordConsolePlugin } from '@rrweb/rrweb-plugin-console-record';

record({
  emit: function 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
  plugins: [
    getRecordConsolePlugin({
      level: ['info', 'log', 'warn', 'error'],
      lengthThreshold: 10000,
      stringifyOptions: {
        stringLengthLimit: 1000,
        numOfKeysLimit: 100,
        depthOfLimit: 1,
      },
      logger: window.console,
    }),
  ],
});

所有选项说明如下：

键	默认值	描述
level	['log','warn','error',...]	默认值包含所有 console 函数的名称。你可以通过设置所需的 console 级别来覆盖它。
lengthThreshold	1000	控制台输出记录的最大条数。
stringifyOptions	{ stringLengthLimit: undefined, numOfKeysLimit: 50, depthOfLimit: 4 }	如果 console 输出中包含 js 对象，我们需要将其字符串化。stringLengthLimit 限制单个值的字符串长度。numOfKeysLimit 限制对象中键的数量。depthOfLimit 限制对象的深度。如果对象包含的键超过该限制，我们只会保存对象的名称。你可以通过设置这些选项来减小事件的体积。
logger	window.console	我们要录制的 console 对象。你可以设置为另一个执行环境中的 console 对象，以录制该环境的输出。

回放 Console

如果录制的事件中包含 console 日志类型的数据，我们会在回放时自动播放它们。

import { Replayer } from '@rrweb/replay';
import { getReplayConsolePlugin } from '@rrweb/rrweb-plugin-console-replay';

const replayer = new Replayer(events, {
  plugins: [
    getReplayConsolePlugin({
      level: ['info', 'log', 'warn', 'error'],
    }),
  ],
});
replayer.play();

回放选项说明如下：

键	默认值	描述
level	['log','warn','error',...]	你可以设置该选项，只播放所需的日志级别。
replayLogger	一个基于 console 的对象，实现了 ReplayLogger 接口	你也可以通过实现 ReplayLogger 接口来设置一个回放日志记录器，在模拟的浏览器控制台中回放日志消息。