English | 中文
Use
rrwebunder the hood, record the DOM mutation within PageSpy, only be available in browser environment.
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<eventWithTime> {}
declare class RRWebPlugin implements PageSpyPlugin {
constructor(options?: Options);
}
export default RRWebPlugin;RRWebPlugin use rrweb-record under the hood, the instantiate options reference record options.
-
Options 1: Load with script
<html> <head> <!-- 1. Load PageSpy --> <script src="https://<your-host>/page-spy/index.min.js"></script> <!-- 2. Load the DataHarborPlugin plugin --> <script src="https://<your-host>/plugin/data-harbor/index.min.js"></script> <!-- 3. Load the RRWebPlugin plugin --> <script src="https://<your-host>/plugin/rrweb/index.min.js"></script> <!-- 4. Register plugin && Init PageSpy --> <script> // 1. Register DataHarborPlugin plugin PageSpy.registerPlugin(new DataHarborPlugin(config)); // 2. Register RRWebPlugin plugin PageSpy.registerPlugin(new RRWebPlugin(options)); // 3. Init PageSpy window.$pageSpy = new PageSpy(); </script> </head> </html>
-
Option 2: Import within ESM
// 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();
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?) for statistical plugins to collect.