[Bug]: Replay is not smooth

[skodafir]

Preflight Checklist

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

What package is this bug report for?

rrweb

Version

v2.0.0-alpha.5

Expected Behavior

The recorded sessions must play smoothly.

Actual Behavior

The replay is not smooth/responsive. Is it something you can fix? Is it related to the rrweb-player or the recorded sessions itself, and how can we improve it so it can play like a video?
Sometimes the replay stops working even if the player is not paused.

Steps to Reproduce

Try the demo on rrweb.io, the replay is not smooth.

Testcase Gist URL

No response

Additional Information

No response

[YunFeng0817]

Could you please provide a video to show how the replayer is not smooth?

[snopcoff]

Hello @YunFeng0817
I am facing similar issue.

1. On speed 1x, 2x, 4x the replay is smooth. (Expected)
2. On speed 8x, the replay stopped in the middle of the session. (Expected: the replay should continue to the end of session)
3. On speed 1x, 2x, 4x, 8x, when jumping to a time, the replay also stopped. (Expected: the replay should continue to the end of session)

Events data:

record_events.zip

Replay video:

video1712891573.zip

Record code:

rrweb.record({ emit(event) { events.push({ ...event, recordTime: moment().format("yyyy-MM-DD HH:mm:ss.SSSZZ") }); }, packFn: rrweb.pack, sampling: { mousemove: true, mouseInteraction: { MouseUp: false, MouseDown: false, Click: true, ContextMenu: true, DblClick: true, Focus: false, Blur: false, TouchStart: false, TouchEnd: false, }, scroll: 150, media: 600, input: 'all', }, });

Replay code:

setReplayer(new rrwebPlayer({ target: document.getElementById('replay-wrapper'), props: { events: events, showController: true, autoPlay: false, mouseTail: true, skipInactive: false, unpackFn: rrwebPlayer.unpackFn, useVirtualDom: true }, }));

Error log:

[YunFeng0817]

Hello @YunFeng0817 I am facing similar issue.

1. On speed 1x, 2x, 4x the replay is smooth. (Expected)
2. On speed 8x, the replay stopped in the middle of the session. (Expected: the replay should continue to the end of session)
3. On speed 1x, 2x, 4x, 8x, when jumping to a time, the replay also stopped. (Expected: the replay should continue to the end of session)

Events data:

record_events.zip

Replay video:

video1712891573.zip

Record code:

rrweb.record({ emit(event) { events.push({ ...event, recordTime: moment().format("yyyy-MM-DD HH:mm:ss.SSSZZ") }); }, packFn: rrweb.pack, sampling: { mousemove: true, mouseInteraction: { MouseUp: false, MouseDown: false, Click: true, ContextMenu: true, DblClick: true, Focus: false, Blur: false, TouchStart: false, TouchEnd: false, }, scroll: 150, media: 600, input: 'all', }, });

Replay code:

setReplayer(new rrwebPlayer({ target: document.getElementById('replay-wrapper'), props: { events: events, showController: true, autoPlay: false, mouseTail: true, skipInactive: false, unpackFn: rrwebPlayer.unpackFn, useVirtualDom: true }, }));

Error log:

I think this pull request can fix your errors.
#1139