Custom events (tags)

To mark special events in the recording it would be good to have the ability to add custom events. I think the type for this should be “tags”. Similar to Google gtag events: https://developers.google.com/gtagjs/reference/event

In the data field there should be fields like:

• name (e.q. ‘add_to_card’, ‘checkout’) -> string
• params (e.q. products added) -> JS Object

To add an tag an function can be added:

rrwebTag('add_to_card', {
    product: '12123',
    qty: 1,
    price: 20
})

This tags can then be displayed during the playback as custom colored marker. The color can be defined when initializing the player as an JS Object:

const events = YOUR_EVENTS;

const replayer = new rrweb.Replayer(events, {
    tags: {
        'add_to_card': '#453222',
        'checkout': '#885942'
    }
});
replayer.play();

[Yuyz0112]

@heathdutton Yep, it’s stable now.

[Yuyz0112]

@s-jakob

Does something like this look good to you?

The data structure:

enum EventType {
  DomContentLoaded,
  Load,
  FullSnapshot,
  IncrementalSnapshot,
  Meta,
+ Custom,
}

+type customEvent<T = unknown> = {
+  type: EventType.Custom;
+  data: {
+    tag: string;
+    payload: T;
+  };
+};

type event =
  | domContentLoadedEvent
  | loadedEvent
  | fullSnapshotEvent
  | incrementalSnapshotEvent
  | metaEvent
+ | customEvent;

and the API:

function addEvent<T>(tag: string, payload: T) {
  emit({
    type: EventType.Custom,
    data: {
      tag,
      payload
    }
  })
}