Deciphering Event Types about rrweb HOT 3 CLOSED

Good question! And I would like to answer it in two aspects.

First are some of the features you have mentioned may rely on backend analysis implementations for better performance, but it also could be done in pure client side. Anyway, these implementations will not happen in rrweb's repo very soon, but if someone is interesting to give a try I will be happy to help.

And the main question is what's the meaning of currently collected data, especially the type and source fields?
Actually, we are using typescript's enum feature to keep the collected data small but also be semantic in the code. For example, the type field is representing by the following enum:

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

So type: 0 means DomContentLoaded, type: 4 means Meta, etc. Definitely, we need a way or a tool to transform the collected data to a more readable way without referring to the enums manually. I think an online parsing tool is suitable for this.
I will start to do this later next week, you can also use the following snippets for a quick workaround.

import { EventType, eventWithTime, IncrementalSource, MouseInteractions } from '../src/types';

function format(event: eventWithTime) {
  const f: any = {
    ...event,
    data: {
      ...event.data
    }
  };
  f.type = EventType[f.type];
  if (event.type === EventType.IncrementalSnapshot) {
    f.data.source = IncrementalSource[event.data.source];
    if (event.data.source === IncrementalSource.MouseInteraction) {
      f.data.type = MouseInteractions[event.data.type];
    }
  }
  return f;
}

And you can parse the event data to something like this:

{
    "type": "IncrementalSnapshot",
    "data": {
      "source": "MouseInteraction",
      "type": "Focus",
      "id": 66
    },
    "timestamp": 1544511215047
}

from rrweb.

Yeah, I’m not sure if there is a typescript parser in php, but since the enum is really simple and seldom been updated, maybe you can just maintain the mapping manually.

from rrweb.

I see! I was planning on doing the data processing on the backend so it minimizes resources used by client side JavaScript.

For example, right now the recorder emits the event types and incrementally sends the events array back to my backend server, where a PHP file receives it and stores it. Likely, I was thinking about parsing it via PHP and building an understandable event log.

Basically, if I understood or could find a glossary to match event types and their data to a more meaningful index, developers could then use the data received to calculate these.

from rrweb.