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.

Sign up for GitHub

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

Jump to bottom

replayer.play makes page stop working #29

Closed
liswift opened this issue Jan 2, 2019 · 8 comments
Closed

replayer.play makes page stop working #29

liswift opened this issue Jan 2, 2019 · 8 comments

Comments

@liswift
Copy link

liswift commented Jan 2, 2019 •
edited by Yuyz0112
Loading

image

code like this:

mounted() {
        const self = this;

        this.events = [];
        this.record = rrweb.record({
            emit(event) {
                console.log(1);
                self.events.push(event);
            }
        });
    },
    methods: {
        stopRecord() {
            this.record();
            setTimeout(()=> {
                const replayer = new rrweb.Replayer(this.events);

                replayer.play();
            }, 2000);
        }
    }

I do some actions, then stop recording and use replayer.play. Then the page stops working,as the picture shows. no console errors
@Yuyz0112
Copy link
Member

Yuyz0112 commented Jan 2, 2019

Looks like you are trying to use rrweb with vue, and I write a simple example based on your code and it works as expected.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Debug</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ count }}</p>
      <button @click="stopRecord">replay</button>
    </div>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          count: 0,
        },
        mounted() {
          const self = this;
          this.events = [];
          this.stopper = rrweb.record({
            emit(event) {
              self.events.push(event);
            },
          });
          // do some thing to update the view
          this.timer = setInterval(() => {
            this.count++;
          }, 1000);
        },
        methods: {
          stopRecord() {
            this.stopper();
            clearInterval(this.timer);
            const replayer = new rrweb.Replayer(this.events);
            replayer.play();
          },
        },
      });
    </script>
  </body>
</html>

Do you mind providing more details about what do you mean 'page stop working'?

@liswift
Copy link
Author

liswift commented Jan 2, 2019

@Yuyz0112
Your code doesn't work on my page.
The page stops response. It looks like there's something endless-loop.
image

I debug the code, 'replayer.play' works, but when I step next, this problem occurs.

@Yuyz0112
Copy link
Member

Yuyz0112 commented Jan 2, 2019

Sounds weird. It will be appreciated if you can provide your OS info and Chrome version and I will try to reproduce the problem.
And personally, I doubt there is a conflict with some chrome extensions.

@Yuyz0112
Copy link
Member

Yuyz0112 commented Jan 2, 2019

@liswift
BTW, does the DEMOs in http://www.rrweb.io works for you?

@liswift
Copy link
Author

liswift commented Jan 2, 2019

You are right, I disable all chrome extensions and it works!

@Yuyz0112
Copy link
Member

Yuyz0112 commented Jan 2, 2019

@liswift
Good news! If you are interested in dig into which extension has a conflict, it will be nice to contribute the information to an FAQ doc.

@Yuyz0112 Yuyz0112 closed this as completed Jan 2, 2019
@liswift
Copy link
Author

liswift commented Jan 2, 2019

@Yuyz0112 AlloyDesigner.

@dohuyhung
Copy link

@Yuyz0112 I encounter the same issue. When I use my own rrweb extension, I cannot use the rrweb.Replayer package on a VueJS website. The error is : TypeError: Failed to fetch dynamically imported module.
( I dont have this problem with rrweb-player)

If i disable my own rrweb extension, then the website is okay.

@liswift How you dealt with it ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Yuyz0112 @liswift @dohuyhung