Skip to content

Latest commit

 

History

History

page-spy-plugin-rrweb

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
README_ZH.md
README_ZH.md
 
 
package.json
package.json
 
 
rollup.config.mjs
rollup.config.mjs
 
 
tsconfig.json
tsconfig.json
 
 

README.md

English | 中文

@huolala-tech/page-spy-plugin-rrweb

SDK version SDK size

Use rrweb under the hood, record the DOM mutation within PageSpy, only be available in browser environment.

Definition

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.

Usage

Load plugin

  • 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();

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?) for statistical plugins to collect.