前端可观测性开发工具【免费下载链接】rrwebrecord and replay the web项目地址https://gitcode.com/gh_mirrors/rr/rrweb点击查看免费下载rrwebrecord and replay the web是开源社区中用于 Web 会话录制与回放的核心库。packages/rrweb/CHANGELOG.md完整记录了 rrweb 从 1.0 到 2.1.5 的演进轨迹其中 2.0.0 是里程碑式的大版本插件体系拆分、构建产物重构、类型系统迁移、Mirror机制取代INode随后 2.1.x 系列聚焦录制/回放热路径的性能优化与大量边界 bug 修复。读完本文你将完整掌握 rrweb 2.x 的架构变化脉络、录制端与回放端新增的全部核心配置项及其源码级实现原理并能够据此升级自己的接入代码、定位录制异常。一、2.0.0一次彻底的架构重组1. 插件体系拆分为独立包2.0.0 最重要的变化PR #1497是把原先内置在 rrweb 中的插件全部拆出独立发布rrweb/packer事件打包/解包rrweb/rrweb-plugin-canvas-webrtc-record/rrweb/rrweb-plugin-canvas-webrtc-replaycanvas 内容 WebRTC 实时直播rrweb/rrweb-plugin-sequential-id-record/rrweb/rrweb-plugin-sequential-id-replay为事件附加递增 IDrrweb/rrweb-plugin-console-record/rrweb/rrweb-plugin-console-replayconsole 日志录制与回放这些插件在仓库中均有独立目录与 README例如 rrweb-plugin-console-record、rrweb-plugin-network-record。同时原先rrweb-all.js、rrweb-record.js、rrweb-replay.js三个打包文件被移除改用rrweb/all、rrweb/record、rrweb/replay三个包对应的入口文件见 packages/rrweb/src/entries/record.ts 与 packages/rrweb/src/entries/replay.ts。2. 构建产物与发布格式重构2.0.0 起分布式文件的文件名、路径与扩展名全部变化这是升级时最容易踩坑的点所有.js文件改为 ES Modules可在现代浏览器、Node.js 与支持 ESM 的打包器中直接使用每个 npm 包同时提供.cjs旧 Node.js 环境的 CommonJS与.umd.cjs浏览器单文件等价于旧版.js若直接引用rrweb/typings/...或rrdom/es之类的路径需要更新为新的包路径而import rrweb from rrweb这类常规用法无感知随后PR #1704又新增了/umd/输出目录用于以.js扩展名提供 UMD 文件避免与package.json中dist 下所有 .js 均为模块的约定冲突。以当前仓库 packages/rrweb/package.json 为例可以清楚看到main指向./dist/rrweb.umd.cjs、module指向./dist/rrweb.js、unpkg/jsdelivr指向 UMD 产物exports字段则分别声明了import与require两种入口及其类型文件。3. 类型系统与数据模型重构类型迁移共享的事件与录制器类型被移入新的rrweb/types包PR #1031NodeType枚举以及documentNode、serializedNodeWithId、IMirror、INode、mediaAttributes、DataURLOptions等一批类型从rrweb-snapshot迁入rrweb/typesPR #1593。若你的代码从rrweb/dist/types导入ReplayPlugin现在可以直接import type { ReplayPlugin } from rrwebPR #1033。Mirror取代INode移除了INode/node.__sn用法改为以Mirror作为节点映射的唯一事实来源PR #868同时废弃了rrweb.mirror的用法改用record.mirror与replayer.getMirror()。浏览器专用特性下沉到rrdomPR #913rrdom 成为独立的虚拟 DOM 包负责回放端的 diff/重建。4. 其他破坏性变化类型PlayerMachineState、SpeedMachineState改从rrweb/replay导出新增了takeFullSnapshot导出PR #1527源码见 packages/rrweb/src/record/index.tsrecord.takeFullSnapshot(isCheckout)会先检查recordDOM开关全项目 TypeScript 升级到 4.9.5PR #1287CommonJS 后缀统一由js改为cjsPR #1126。二、录制端record新增能力与配置项1. 隐私屏蔽体系增强maskInputFn/maskTextFn签名升级PR #1188 / #1310现在会向决定函数传入对应的HTMLElement使屏蔽策略可以从按值判断升级为按元素判断。maskInputFn全快照修复PR #1386此前创建全量快照时会意外忽略可选的maskInputFn2.0 已修复。密码输入切换保持屏蔽PR #1170当 input 的 type 在 password 与其他类型间切换时仍保持 masked。textarea 屏蔽补全PR #1599对textarea的innerText变更也施加 masking同时避免对已预填内容的 textarea 双重记录PR #1351。屏蔽性能优化PR #1349 / #1512遍历 DOM 时避免对叶子元素重复调用closest并跳过叶子节点的 mask 检查。2. 元素忽略与区块控制新增ignoreSelectorPR #1262与ignoreClass类似但接受任意 CSS 选择器例如ignoreSelector: .cookie-banner, [data-ignore]。该选项在 recordOptions 类型 中声明并在 observer 参数 中与ignoreClass一同下发。新增ignoreCSSAttributesPR #894类型为Setstring用于指定在录制时忽略的 CSS 属性如ignoreCSSAttributes: new Set([scrollbar-color])。blockSelector一致性PR #894blockSelector的检查现在在录制器的各 observer 中统一生效。解除屏蔽的边界修复PR #867修复了元素 class 先被 block 后又取消时 mutation 的边界情况。3. 复杂页面与媒体录制跨域 iframe 录制PR #1035recordCrossOriginIframes: true开启。在 record/index.ts 中该选项决定inEmittingFramerecordCrossOriginIframes ? window.parent window : true并配套 cross-origin-iframe-mirror.ts 维护跨文档镜像。后续还修复了嵌套跨域 iframe 无法录制PR #1353、iframe 变跨域后停止录制抛错PR #1695、iframe 出现后 Resize/MediaInteraction 事件重复PR #1251等问题。可构造adoptedStyleSheetsPR #989支持录制/回放可构造样式表包括replace/replaceSync变更、shadow root、iframe、live mode 与虚拟 DOM 回放。配套修复了initAdoptedStyleSheetObserver中patchTarget的检查PR #1327。top-layerdialog支持PR #1503修复 #1381录制并回放show()/showModal()打开的顶层对话框。文本选区selection录制与回放PR #936新增 selection 事件源同时修复了快进回放时 selection 事件报错的问题PR #952。canvas 按 FPS 快照PR #859sampling.canvas可配置为数字每秒帧数。在 canvas-manager.ts 中sampling all走 mutation 观察数字则走initCanvasFPSObserver。配套修复包括创建 canvas 时强制preserveDrawingBuffer: true、回放 canvas 闪烁、WebGL 背景被清空PR #1273、blockClass为正则时 FPS 录制失效PR #966、createImageBitmap遇 0 宽高抛DOMExceptionPR #1422。dataURLOptionsPR #967控制 canvas 快照的图片格式与质量如{ type: image/jpeg, quality: 0.6 }。canvas WebRTC 插件PR #976新增 record/replay 两个插件用于 canvas 内容实时直播代码见 packages/plugins/rrweb-plugin-canvas-webrtc-record。媒体元素全面增强PR #1432video/audio 播放逻辑整体重写修复暂停/播放/跳转/静音/playbackRate相关大量 bug同时开始录制loop属性、支持playbackRate变化PR #1000还忽略video/audio上autoplay属性的 mutation不论标签大小写PR #1921。样式表捕获补全捕获relpreload的样式表PR #1374、捕获link[relmodulepreload]PR #1614、远程link内联 CSS 的对象引用突变修复PR #1618、晚加载样式表的内联化PR #909、对大型style的splitCssText性能优化PR #1615/#1640以及 postcss 处理被任意切分 CSS 时崩溃的修复PR #1600。4. 录制模式与生命周期recordDOM: falsePR #1311关闭 DOM 录制录制将不可回放专用于 heatmap 点击/滚动等轻量场景。errorHandlerPR #1107作为 record 选项传入。其实现见 error-handler.ts通过callbackWrapper包裹所有回调捕获异常后交给errorHandler(error)若返回true则吞掉异常否则重新抛出。recordAfter: DOMContentLoadedPR #1109可配置在DOMContentLoaded而非load时开始录制。slimDOM增强PR #760slimDOM: all时额外阻断title标签上的动画。iframe 专项修复使用 iframe document 自己的 window 原型安装 input hooksPR #991、wujie 框架 monkey-patchownerDocument的兼容PR #1763、iframe reload 时负 id/未序列化 id 处理PR #927、iframe 中 shadow root 注册使用正确 documentPR #1037。三、回放端replay新增能力1. 虚拟 DOM 快进与重建fast-forward 虚拟 DOM 优化PR #895默认开启useVirtualDom: true见 packages/rrweb/src/replay/index.ts快进时通过虚拟 DOM 差分加速重建。重建前切回真实 DOMPR #1139重建全量快照前先由虚拟 DOM 切回真实 DOM修复了快进回放时 iframe 内 canvas 图像数据丢失的问题PR #944。destroy()方法PR #953彻底移除 replayer 实例并发出 destroy 事件。replay 插件onBuild钩子PR #1012保证对新追加的 mutation 节点与顶层重建文档节点同样触发插件钩子。2. 交互与事件回放pointerType区分PR #1129click 事件新增pointerType属性区分pen、mouse、touchPointerEvent.pointerTypepen 的按下/抬起可通过 MouseDown/MouseUp pointerTypepen判断。:hover语义完善PR #1431即使规则藏在 media query 之后也保证 hover 生效并尊重max-device-width/min-device-width的意图同时修复 iframe/shadow DOM 中过期:hover样式无法移除的问题PR #1121。自定义事件跳转发射PR #1769seek 到特定时间跳过事件时也会发出被跳过的 custom events。暂停态交互PR #1191调用replayer.pause(...)时用 mouseup/mousedown 触发鼠标移动与 hover并在 flush 时才应用 touch-active 样式。媒体回放video/audio 全面重写PR #1432getCurrentTime()在 liveMode 中事件耗尽后不再卡住PR #1864。3. 安全沙箱受保护的 rebuildPR #1834 引入回放安全机制默认要求浏览器端rebuild()的目标 document 必须由rebuildIntoSandboxedIframe()或createSandboxedIframe()创建处理不可信回放数据时应使用这些沙箱辅助函数只有明确接受脚本执行风险时才传UNSAFE_allowUnprotectedRebuild: true。同时UNSAFE_replayCanvas重建被标记为显式不安全路径canvas 回放会给回放 iframe 添加脚本权限。相关设计可参考 docs/superpowers/plans/2026-05-18-sandboxed-rebuild.md 与其 spec。4. 其他回放修复使用 replayer 配置中传入的 logger 而非直接console.warnPR #1712自定义 loggerPR #1111goto直接调用时正确重置 finished 标志PR #1198元素scrollTop与scrollLeft同时设置时正确回放滚动位置PR #1029mouse move 事件位置为空/缺失时的回放时序修复PR #998Safari 16 下 CSS 解析器负向 lookbehind 正则替换PR #1493复杂 Tailwind CSS 回放修复PR #1481、背景裁剪background-clip多处替换修复PR #1476。四、性能与健壮性2.x 的持续主题1. 录制/回放热路径性能优化childNodes 从数组改为链表PR #1127contains复杂度由 O(n) 降至 O(logn)官方在超大型 benchmark 用例中测得约 80% 性能提升该条目来自 CHANGELOG 原文。isParentRemoved迭代化PR #1489由递归改为迭代过程避免深树递归栈溢出。mutation 处理优化PR #1214 / #1343 / #1220processMutation阶段性能优化、属性游标查找改用 WeakMap、DoubleLinkedList 的 get 优化。事件发射减负PR #1441 / #1340避免事件发射时多余的函数调用与对象克隆。dom 访问器 untainted 化PR #1509 / #1652为绕开第三方库对el.parentNode等访问器的修改改用dom.parentNode(el)等封装2.1.5 进一步避免每次调用的字符串分配这些访问器处于所有热路径上并重新调整 mutation 排序以提升回放速度。mask 检查跳过叶子节点PR #1512、样式规则迭代避免中间数组PR #1272。2. 与第三方库共存monkey-patch 兼容这是 2.x 反复打磨的领域CHANGELOG 中有密集记录反转被 monkey-patch 的内置方法以支持 LWC、Angular 等框架PR #1509防范 MooTools/Prototype.js 修改内置Array.fromPR #1464防范第三方库重定义Date.now()PR #1196修复 Webkit/Safari 下第三方库 monkey-patch 导致 MutationObserver 失效PR #1854修复页面中某些库 polyfillclassList抛错导致快照失败PR #1163通过dom.parentNode(el)封装规避访问器篡改PR #1652。3. 数据体积与录制质量丢弃冗余 mutationPR #1269刚添加的节点不再附带冗余的 text/attribute mutation。仅应用最新排队文本 mutationPR #885提升回放行为与性能。text 与 attribute mutation 修复style 元素多文本节点支持PR #1437、style 元素重复 textContent 导致增量样式失效PR #1417、textarea 预填内容避免重复记录PR #1351、null属性值显式处理PR #1157。内联图片/样式表inlineImages快照期间不再为同源图片添加异步监听器PR #1468inlineImages与inlineStylesheet在 2.0 文档与公开类型中被标记为 deprecatedPR #1829。mousemoveWait迁移旧选项自动映射到sampling.mousemove见 record/index.ts 的兼容逻辑。五、从 2.0.0 到 2.1.5版本节奏与升级建议1. 版本节奏2.0.0-alpha.x20 个预发布版集中承载全部破坏性变更与新功能多数条目随后合入 2.0.0 正式版2.0.0 / 2.0.1正式发布修复 Webkit 下被 monkey-patch 的 MutationObserver2.1.x 系列纯 Patch聚焦热路径性能untainted dom 访问器、mutation 排序、媒体autoplay属性忽略、seek 时自定义事件发射、logger 传递等。2. 升级检查清单基于 CHANGELOG 可验证确认是否引用了rrweb/typings/...或rrdom/es等旧路径——需要改为新包导出如import type { ReplayPlugin } from rrweb若用script直引更新为.umd.cjs文件将rrweb-all.js/rrweb-record.js/rrweb-replay.js换成rrweb/all/rrweb/record/rrweb/replay将内置 console 录制/回放选项迁移到独立 console 插件1.0.0 起已废弃见 docs/recipes/console.md使用record.mirror/replayer.getMirror()替代已废弃的rrweb.mirror回放不可信数据时使用rebuildIntoSandboxedIframe()/createSandboxedIframe()仅在可接受脚本风险时才传UNSAFE_allowUnprotectedRebuild。3. 阅读源码的建议起点录制配置解析packages/rrweb/src/record/index.ts含默认值如blockClassrr-block、maskInputOptions默认{password: true}、sampling{}、recordDOMtrue、recordCanvasfalse等录制选项类型packages/rrweb/src/types.ts含 deprecated 标注与类型说明回放配置默认值packages/rrweb/src/replay/index.tscanvas 采样与dataURLOptionspackages/rrweb/src/record/observers/canvas/canvas-manager.ts错误处理packages/rrweb/src/record/error-handler.ts事件协议与全部事件类型packages/rrweb-snapshot/src/types.ts快照/增量事件结构。结语从 2.0.0 的架构重组到 2.1.5 的细粒度性能优化rrweb 的演进始终围绕三条主线插件化与包拆分降低体积、按需加载、录制质量与隐私安全mask 体系、沙箱 rebuild、性能与兼容性链表化、monkey-patch 共存。对于接入方而言理解 CHANGELOG 背后这些配置项与实现细节不仅有助于平滑升级也能在遇到录制缺失、回放闪烁、性能劣化等问题时快速定位到对应的模块与修复版本。赞分享前端可观测性开发工具【免费下载链接】rrwebrecord and replay the web项目地址https://gitcode.com/gh_mirrors/rr/rrweb点击查看免费下载相关推荐Litestar 2.x 版本演进全解析从 2.0 大重构到 2.7 的稳定化之路Litestar 2.x 版本演进全解析从 2.0 大重构到 2.7 的稳定化之路 本文聚焦 Litestar https://link.gitcode.co后端Web框架Rollup 2.x 版本演进全解析从 2.0 到 2.79 的核心功能、Tree-shaking 精进与架构升级Rollup 2.x 版本演进全解析从 2.0 到 2.79 的核心功能、Tree shaking 精进与架构升级 本文基于 Rollup 官方 CHANGE前端构建构建工具开发工具CLIMLflow 2.x 版本演进全解析从 2.0 到 2.22 的 GenAI、Tracing 与 MLOps 能力跃迁MLflow 2.x 版本演进全解析从 2.0 到 2.22 的 GenAI、Tracing 与 MLOps 能力跃迁 MLflow 2.x 系列是 MLfl人工智能大模型MLOpsLLMOps模型评测可观测性LLM 网关创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
