# @huolala-tech/page-spy-plugin-rrweb > Record the DOM mutation within PageSpy. Latest version **2.2.7** (published 2026-08-04) · MIT license · 0 weekly downloads ## Install ```sh npm install @huolala-tech/page-spy-plugin-rrweb pnpm add @huolala-tech/page-spy-plugin-rrweb yarn add @huolala-tech/page-spy-plugin-rrweb bun add @huolala-tech/page-spy-plugin-rrweb ``` ## Health **Score 65/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 2.2.7 | | Published | 2026-08-04 | | First published | 2024-01-25 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 4 | | Unpacked size | 2.8 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 349 | | Maintainers | wangdashuai, zhiyang-deng, huolala-fe, yanagieiichi, qikang.yuan, blucass | ## Links - npm: https://www.npmjs.com/package/@huolala-tech/page-spy-plugin-rrweb - Repository: https://github.com/HuolalaTech/page-spy - Homepage: https://github.com/HuolalaTech/page-spy/tree/main/packages/page-spy-plugin-rrweb - Issues: https://github.com/HuolalaTech/page-spy/issues - npm.io page: https://npm.io/package/@huolala-tech/page-spy-plugin-rrweb ## Dependencies (4) - [rrweb](https://npm.io/package/rrweb.md) ^2.0.0-alpha.20 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.13.0 - [@huolala-tech/page-spy-base](https://npm.io/package/@huolala-tech/page-spy-base.md) ^2.2.6 - [@huolala-tech/page-spy-types](https://npm.io/package/@huolala-tech/page-spy-types.md) ^2.2.6 ## Recent versions - 2.2.7 (latest) — 2026-08-04 - 2.0.0-beta.3 (beta) — 2024-11-27 - 2.2.6 — 2026-05-26 - 2.2.5 — 2026-02-04 - 2.2.4 — 2026-01-06 - 2.2.3 — 2025-07-15 - 2.2.2 — 2025-05-12 - 2.2.1 — 2025-04-08 - 2.2.0 — 2025-04-08 - 2.1.3 — 2025-03-04 - 2.1.2 — 2025-02-25 - 2.1.1 — 2025-02-13 - 2.1.0 — 2025-01-16 - 2.0.0 — 2024-11-29 - 2.0.0-beta.2 — 2024-11-22 - … 29 more at https://npm.io/package/@huolala-tech/page-spy-plugin-rrweb/versions ## README [npm-image]: https://img.shields.io/npm/v/@huolala-tech/page-spy-plugin-rrweb?logo=npm&label=version [npm-url]: https://www.npmjs.com/package/@huolala-tech/page-spy-plugin-rrweb [minified-image]: https://img.shields.io/bundlephobia/min/@huolala-tech/page-spy-plugin-rrweb [minified-url]: https://unpkg.com/browse/@huolala-tech/page-spy-plugin-rrweb/dist/iife/index.min.js [rrweb-repo]: https://github.com/rrweb-io/rrweb [rrweb-record-options]: https://github.com/rrweb-io/rrweb/blob/master/guide.md#options English | [中文](./README_ZH.md) # `@huolala-tech/page-spy-plugin-rrweb` [![SDK version][npm-image]][npm-url] [![SDK size][minified-image]][minified-url] > Use `rrweb` under the hood, record the DOM mutation within PageSpy, only be available in browser environment. ## Definition ```ts import { PageSpyPlugin } from '@huolala-tech/page-spy-types'; import type { recordOptions } from 'rrweb/typings/types'; import type { eventWithTime } from '@rrweb/types'; interface Options extends recordOptions {} declare class RRWebPlugin implements PageSpyPlugin { constructor(options?: Options); } export default RRWebPlugin; ``` `RRWebPlugin` use [`rrweb-record`][rrweb-repo] under the hood, the instantiate options reference [record options][rrweb-record-options]. ## Usage ### Load plugin - Options 1: Load with script ```html ``` - Option 2: Import within ESM ```ts // In your entry file like "main.ts" import PageSpy from '@huolala-tech/page-spy-browser'; import RRWebPlugin from '@huolala-tech/page-spy-plugin-rrweb'; // Register plugin PageSpy.registerPlugin(new RRWebPlugin(options)); // Init PageSpy window.$pageSpy = new PageSpy(); ``` ### Replay The data from 'rrweb-event' is typically larger (more interactions and complex webpage structures result in larger data). When developers debug, real-time transmission can impose a burden on network overhead, and page interactions are not always critical information. Considering these factors, this plugin only dispatch the 'public-data' event ([what's the `public-data` event?](../../docs/plugin.md#behavioral-conventions)) for statistical plugins to collect. --- _Source: https://npm.io/package/@huolala-tech/page-spy-plugin-rrweb · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._