Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

rrweb-player is not faithfully reproducing web app - showing certain elements duplicated many times #702

Open
Atrus619 opened this issue Sep 14, 2021 · 9 comments

Comments

@Atrus619
Copy link

Atrus619 commented Sep 14, 2021

I'm trying to use rrweb to record user sessions and replay them back at a later time. Unfortunately, when replaying the application, certain elements are repeated an enormous number of times, covering the screen and making it hard to watch the video and understand what the user is doing.

Here is an image example of the issue:
Screenshot from 2021-09-14 10-18-02

Here is another example:
Screenshot from 2021-09-14 10-18-46

I can provide the events upon request (I'm currently packing them, not sure the best way you would like them provided to you).

Bit of background on my application:

  1. Using nextjs / react / antdesign
  2. Using the built-in rrweb.pack / unpack methods
  3. I'm using scroll: 150 and input: 'last' options in sampling
  4. Sending 1_000 events at a time to the backend
  5. The backend is storing the packed events in mongoDB by gzipping all 1_000 events into a single document, along with relevant metadata for retrieval
  6. I'm using the rrweb-player for the enhanced UI

I've tried removing the packing / sampling / gzipping, and still get the same issue, so I don't think these are related.

Is this something you have seen before / are there tricks I can do to resolve this?

I really love this library, and am really hoping I can make it work with my app!

EDIT: fwiw, I'm also seeing TONS of warnings like this when I play the recording:

[replayer] Node with id '308' not found.
{
    "source": 0,
    "texts": [],
    "attributes": [
        {
            "id": 3,
            "attributes": {
                "class": " "
            }
        },
        {
            "id": 515,
            "attributes": {
                "class": "loading-bar-container"
            }
        }
    ],
    "removes": [
        {
            "parentId": 515,
            "id": 603
        }
    ],
    "adds": []
}

as well as several errors like so:

Blocked script execution in '<URL>' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
@Yuyz0112
Copy link
Member

@Atrus619 Thanks for the report.

What's the version of rrweb are you using?

@Atrus619
Copy link
Author

"rrweb": "^1.0.5",
"rrweb-player": "^0.7.7",

@omairnabiel
Copy link
Contributor

omairnabiel commented Sep 23, 2021

Yea I'm also facing this. Used to work fine till version
"rrweb": "^1.0.3", "rrweb-player": "^0.7.5"

@Yuyz0112
Copy link
Member

@Atrus619 @omairnabiel Could you share the events for debugging?

@Atrus619
Copy link
Author

Atrus619 commented Sep 23, 2021

@Yuyz0112 Here you go:

events_2EYgM5Ax6C3GWu6RKb0X0ypRddvPI7lE.zip

Let me know if you have any issues working with this!

@Atrus619
Copy link
Author

any progress on this? looking forward to hearing about it, and let me know if I can provide any more information, thanks!

@Atrus619
Copy link
Author

any updates? thanks!

@galdolber
Copy link

Having the same problem, many duplicated inputs.
Any update?

@zerofirework
Copy link

Same issue with 2.0.0-alpha.4.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants