插件

插件 API 的设计目标是在不影响核心包正常使用的前提下，扩展 rrweb 的功能。

可用插件

• @rrweb/rrweb-plugin-console-record：用于录制 console 日志的插件。
• @rrweb/rrweb-plugin-console-replay：用于回放 console 日志的插件。
• @rrweb/rrweb-plugin-sequential-id-record：用于录制顺序 ID 的插件。
• @rrweb/rrweb-plugin-sequential-id-replay：用于回放顺序 ID 的插件。
• @rrweb/rrweb-plugin-canvas-webrtc-record：用于通过 WebRTC 流式传输 <canvas> 的插件。
• @rrweb/rrweb-plugin-canvas-webrtc-replay：用于通过 WebRTC 播放流式 <canvas> 的插件。
• @rrweb/rrweb-plugin-network-record：用于录制网络请求（xhr/fetch）的插件。
• @rrweb/rrweb-plugin-network-replay：用于回放网络请求（xhr/fetch）的插件。

接口

与 rrweb 中的其他功能一致，插件可以实现录制功能、回放功能，或两者兼有。

export type RecordPlugin<TOptions = unknown> = {
  name: string;
  observer: (cb: Function, options: TOptions) => listenerHandler;
  options: TOptions;
};

export type ReplayPlugin = {
  handler: (
    event: eventWithTime,
    isSync: boolean,
    context: { replayer: Replayer },
  ) => void;
};

录制插件和回放插件都有各自的类型接口。

示例

录制插件

import { record } from '@rrweb/record';

const exampleRecordPlugin: RecordPlugin<{ foo: string }> = {
  name: 'my-scope/example@1',
  observer(cb, options) {
    const timer = setInterval(() => {
      cb({
        foo: options.foo,
        timestamp: Date.now(),
      });
    }, 1000);
    return () => clearInterval(timer);
  },
  options: {
    foo: 'bar',
  },
};

record({
  emit(event) {},
  plugins: [exampleRecordPlugin],
});

在这个示例中，录制插件会发出如下事件：

{
  type: 6,
  data: {
    plugin: 'my-scope/example@1',
    payload: {
      foo: 'bar',
      timestamp: 1624693882345,
    },
  },
  timestamp: 1624693882345,
}

回放插件

import { Replayer } from '@rrweb/replay';

const exampleReplayPlugin: ReplayPlugin = {
  handler(event, isSync, context) {
    if (event.type === EventType.Plugin) {
      // do something with event.data.payload
      if (event.data.plugin === 'my-scope/example@1') {
        // handle example plugin data
      }
    }
  },
};

const replayer = new Replayer(events, {
  plugins: [exampleReplayPlugin],
});

回放插件可以通过 context.replayer 与回放器进行交互。

插件命名

录制插件应拥有唯一的名称，该名称会被存储在它发出的事件中。

由于 rrweb 仓库中的插件和用户自己代码库中的插件会同时存在，未来可能出现命名冲突，因此我们强烈建议用户按照以下方式命名自己的插件：

scope/name@version

例如 rrweb/console@1 或 github/pr@2。