bcf93ca926
* docs: revamp installation docs for esm and umd Document recommended install paths across the main guides and package READMEs for rrweb, @rrweb/all, @rrweb/record, @rrweb/replay, and rrweb-player. Clarify three usage modes: bundler/npm, browser no-build with import maps and +esm, and legacy UMD fallback. * Apply suggestions from code review Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Apply formatting changes * Apply suggestion from @eoghanmurray Co-authored-by: Eoghan Murray <eoghan@getthere.ie> * Apply formatting changes * docs(all): streamline README usage section Move the guide link next to the import example and remove the duplicated Usage section to keep docs concise and easier to scan. * docs(readme): update gzip size badges in zh-cn readme * docs(plugins): update readme imports to scoped esm packages Replace `rrweb` default imports and `rrweb.Replayer` usage with `@rrweb/record` `record` and `@rrweb/replay` `Replayer` in plugin usage examples. Also update canvas WebRTC plugin imports to scoped `@rrweb/*` package names to keep docs aligned with current package structure. * docs: update docs to prefer scoped esm packages replace `rrweb` default import examples with `@rrweb/record` and `@rrweb/replay` across recipes and guides in en/zh-CN. clarify package selection for new integrations, add `@rrweb/all` convenience guidance, and refresh CDN/style import snippets for ESM and legacy UMD compatibility. --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
1.2 KiB
1.2 KiB
Custom Event
You may need to record some custom events along with the rrweb events, and let them be played as other events. The custom event API was designed for this.
After starting the recording, we can call the record.addCustomEvent API to add a custom event.
import { record } from '@rrweb/record';
// start recording
record({
emit(event) {
...
}
})
// record some custom events at any time
record.addCustomEvent('submit-form', {
name: 'Adam',
age: 18
})
record.addCustomEvent('some-error', {
error
})
addCustomEvent accepts two parameters. The first one is a string-type tag, while the second one is an any-type payload.
During the replay, we can add an event listener to custom events, or configure the style of custom events in rrweb-player's timeline.
Listen to custom events
import { Replayer } from '@rrweb/replay';
const replayer = new Replayer(events);
replayer.on('custom-event', (event) => {
console.log(event.tag, event.payload);
});
Display in rrweb-player
new rrwebPlayer({
target: document.body,
props: {
events,
// configure the color of tag which will be displayed on the timeline
tags: {
'submit-form': '#21e676',
'some-error': 'red',
},
},
});