事件

rrweb 录制的事件是一组严格类型化的 JSON 数据。当你熟悉其中的细节后，可能会发现一些灵活的使用方式。

数据类型

每个事件都有一个 timestamp 属性，用于记录它发出的时间。

此外还有一个 type 属性表示事件的类型，事件类型的语义如下：

type -> EventType.DomContentLoaded
event -> domContentLoadedEvent

type = EventType.Load
event -> loadedEvent

type -> EventType.FullSnapshot
event -> fullSnapshotEvent

type -> EventType.IncrementalSnapshot
event -> incrementalSnapshotEvent

type -> EventType.Meta
event -> metaEvent

type -> EventType.Custom
event -> customEvent

EventType 是 TypeScript 的数值枚举，在运行时是从 0 开始自增的数字。你可以在这个列表中找到它的定义。

在这些事件中，incrementalSnapshotEvent 是包含增量数据的事件。你可以通过 event.data.source 判断它属于哪一种增量数据：

source -> IncrementalSource.Mutation
data -> mutationData

source -> IncrementalSource.MouseMove
data -> mousemoveData

source -> IncrementalSource.MouseInteraction
data -> mouseInteractionData

source -> IncrementalSource.Scroll
data -> scrollData

source -> IncrementalSource.ViewportResize
data -> viewportResizeData

source -> IncrementalSource.Input
data -> inputData

source -> IncrementalSource.TouchMove
data -> mouseInteractionData

source -> IncrementalSource.MediaInteraction
data -> mediaInteractionData

source -> IncrementalSource.StyleSheetRule
data -> styleSheetRuleData

source -> IncrementalSource.CanvasMutation
data -> canvasMutationData

source -> IncrementalSource.Font
data -> fontData

枚举 IncrementalSource 的定义可以在这个列表中找到。

录制

一段可回放的录制通常应以一个 Meta 事件开始，其中包含页面的 URL 和屏幕尺寸；紧随其后的是一个 FullSnapshot 事件，用于重建 HTML 状态。用户操作和页面状态变化都通过后续的 IncrementalSnapshot 事件传入，其中状态变化对应 source: IncrementalSource.Mutation。这类事件被称为“变更事件”，它们一个接一个地递进构建，这意味着必须按正确的顺序回放；如果丢弃了其中某一个，后续变更可能会失败（例如，一个变更新增了一个导航元素，而下一个变更包含了表示该导航菜单中某个菜单项悬停状态的属性变化）。关于如何调试事件顺序问题，请参见 Sequential ID 插件。

当用户导航到网站上的另一个页面时，这一过程会以另一对 Meta + FullSnapshot 事件重新开始。之后的每个变更事件都基于本次页面加载的第一个 FullSnapshot 增量构建。只要变更与正确的全量快照相关联，事件流就可以线性组合成单个“会话回放”（Session Replay）。请注意，rrweb Cloud 提供了额外的机制来正确还原多标签页浏览会话；概述请参见 Cloud 的回放指南，关于如何组合或合并多段录制，请参见 Get replay 端点。

事件 ​

数据类型 ​

录制 ​

事件

数据类型

录制