跳到主要内容

rxdb-plugin-replay-react

@aiao/rxdb-plugin-replay 的 React 集成层。提供 Replayer 组件，把核心包的 mountReplayer 包成 props 与 ref 句柄。

安装​

pnpm add @aiao/rxdb @aiao/rxdb-plugin-replay @aiao/rxdb-plugin-replay-react react rxjs

用法​

import type { ReplayManager } from '@aiao/rxdb-plugin-replay';
import {
  Replayer,
  replayRestoreHint,
  type ReplayerCommitRestoreEvent,
  type ReplayerRef
} from '@aiao/rxdb-plugin-replay-react';
import { useRef, useState } from 'react';

const restoreMessage = ({ result }: ReplayerCommitRestoreEvent): string | null => {
  if (result.ok) return null;
  return result.reason === 'error' ? result.error.message : replayRestoreHint(result.reason);
};

export function SessionPlayer({ replay, sessionId }: { readonly replay: ReplayManager; readonly sessionId: string }) {
  const replayer = useRef<ReplayerRef>(null);
  const [time, setTime] = useState(0);
  const [hint, setHint] = useState<string | null>(null);

  return (
    <section>
      <Replayer
        ref={replayer}
        replay={replay}
        sessionId={sessionId}
        initialTime={0}
        onTimeChange={setTime}
        onCommitRestore={event => setHint(restoreMessage(event))}
      />
      <button onClick={() => replayer.current?.play()} type="button">
        播放
      </button>
      <button onClick={() => replayer.current?.pause()} type="button">
        暂停
      </button>
      <p>{time} ms</p>
      `{hint && <p role="alert">{hint}</p>}`
    </section>
  );
}

replay 传 db.replay。录制插件要先装进连接纪元（db.use(rxDBPluginReplay, …) 之后 await db.connect()），否则组件加载会话时拿到 not_installed。

成员说明
replay（必填）ReplayManager；换成别的门面会重新加载
sessionId（必填）要回放的会话
initialTime加载完成后落到的时刻（相对会话起点的 ms，默认 0）；之后再改等价于 seek()
onTimeChange播放 / 拖动时间轴时收到当前时刻（ms）
onCommitRestore点 commit 标记恢复工作树后的结果，被拒绝时用 replayRestoreHint(reason) 取提示；reason 为 'error' 时看 error
play() / pause() / seek(ms)经 ref（ReplayerRef）调用；加载完成前调用是空操作（seek 会记下目标时刻）

组件卸载时自动释放回放器。rrweb 回放端在组件首次加载会话时才按需 import('rrweb')。

三框架同功能对称：Angular 用 ao-replayer（@aiao/rxdb-plugin-replay-angular），Vue 用 Replayer（@aiao/rxdb-plugin-replay-vue）。

文档​

License​

MIT

rxdb-plugin-replay-react - React 会话回放组件

提供 Replayer，把 @aiao/rxdb-plugin-replay 的 mountReplayer 包成 props / ref 句柄的组件。 与 Angular ao-replayer、Vue Replayer 同一组输入 / 输出 / 命令（contracts/replayer-component.md §3）。

Interfaces​

InterfaceDescription
ReplayerCommitRestoreEvent点 commit 标记恢复的结果；restoreToCommit() 抛错时 reason 为 'error'。
ReplayerPropsReplayer 的 props：输入与 mountReplayer 同名，两个回调对应核心视图的 onTimeChange / onCommitRestore。

Type Aliases​

Type AliasDescription
ReplayerRef经 ref 拿到的命令句柄；加载完成前调用是空操作（seek 会记下目标时刻）。

Variables​

VariableDescription
Replayer会话回放组件：在一个 div 里挂核心的 mountReplayer，输入变化走 update()，卸载时 destroy()。
replayRestoreHintrestoreToCommit() 被拒时给用户看的一句英文提示（git show 2e820521:specs/005-us-909-session-replay/research.md D8）。