[Feature Request]: Is there a way to merge events within a specified period of time?

[wqcstrong]

Preflight Checklist

• I have searched the issue tracker for a feature request that matches the one I want to file, without success.

What package is this feature request for?

rrweb

Problem Description

Proposed Solution

/

Alternatives Considered

/

Additional Information

No response

[wfk007]

@wqcstrong I have the idea to solve it, but In what scenarios would this be used?

[wfk007]

@wqcstrong
I have published a npm package named rrweb-events-merge powered by rrweb and rrweb-snapshot.

You can try it with:

1. install dependencies

npm install rrweb-events-merge

2. import and generate merged events

import { mergeEvents } from "rrweb-events-merge";

const mergedEvents = mergeEvents({
  events: events,
  startTimeStamp: startTimeStamp,
  endTimeStamp: endTimeStamp,
  iframe: iframe,
  snapshotOptions: {
    mirror,
  },
  onError: (error: string) => {
    console.error(error);
  },
});

Here is the repo: https://github.com/wfk007/rrweb-events-merge

[wqcstrong]

@wfk007 Thx, I will take a look ❤️

but In what scenarios would this be used?

This repository https://github.com/HuolalaTech/page-spy-web/ provides the ability to replay runtime information on browser applications through log files. It now also supports log trimming, but now is achieved by manipulating time information, meaning the file size of rrweb remains unchanged. If events could be merged, it would be a significant breakthrough.

[wfk007]

@wqcstrong I opened a PR: #1616. Please help to confirm if this PR can solve your problem at your convenience.

[wqcstrong]

@wqcstrong I opened a PR: #1616. Please help to confirm if this PR can solve your problem at your convenience.

Your implementation converts the complete events into mergedEvents in replay and pass it to Replayer. What I am hoping for is the ability to manipulate them after the recording is finished, before upload / download events and there is no iframe. The data flow is:

1. User open the page: start recording;
2. User finish some actions and click "Stop recording" button, let's say the size of total events is 10Mb;
3. User select the start time and end time and click upload / download, the size of result events is 5Mb;

Then developer open the recording log, which is ready to replay and size is 5Mb. Perhaps I didn't express clearly, leading to your misunderstanding. If that's the case, I'm sorry!

[wfk007]

I think that you can try this approach to deal with the events(10MB) based on client replay before uploading or do it with jsdom in server.

[eoghanmurray]

@wqcstrong is this a multi page session or just a single page? If just one pageload + changes, then most of that 10Mb will be taken up by the initial FullSnapshot event, which records the DOM. You can manipulate the events such that mutations to that full snapshot get applied to the full snapshot prior to upload, however that is not trivial as the code to do so currently exists at the replay side of things.