Comments (8)
@Yuyz0112 AlloyDesigner.
from rrweb.
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/[email protected]/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'?
from rrweb.
@Yuyz0112
Your code doesn't work on my page.
The page stops response. It looks like there's something endless-loop.
I debug the code, 'replayer.play' works, but when I step next, this problem occurs.
from rrweb.
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.
from rrweb.
@liswift
BTW, does the DEMOs in http://www.rrweb.io works for you?
from rrweb.
You are right, I disable all chrome extensions and it works!
from rrweb.
@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.
from rrweb.
@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 ?
from rrweb.
Related Issues (20)
- [Bug]: Injected styles are cleared when node is added to a `<style>` element HOT 1
- [Bug]: Duplicate player window
- [Bug]: Seeking within player doesn't correctly handle scrolling HOT 2
- [Bug]: 前端每十秒save的event发送到controller, data要怎样正确拼接才可以正确回放, 现在我只能播放前十秒, 之后因为拼接出错, 一直播放失败
- [Bug]: The player shows canvas in the wrong way HOT 1
- [Bug]: use blockSelector to mask img record will throw error: e.matches is not a function HOT 3
- publish well-formulated and concise types HOT 1
- [Bug]: maskInputFn is not called on inputs
- [feature request]: Record/replay css animation's `currentTime` HOT 6
- [Bug]: progress bar not updating when adding event asynchronously using addEvent
- [Bug]: Added nodes not showing up HOT 1
- Changes the you made may not be saved HOT 1
- [Bug]: CSS `all: unset` incorrectly expands in `events.json` recording HOT 1
- [Bug]: Repeat menu
- [Bug]: Stopping recording causes all insertRule hooks added after record start to drop
- [Bug]: how i can record iframe content HOT 4
- Sanitization/Renaming for Security in Snapshot vs Replay reconstruction HOT 1
- [Bug]: Failed to rebuildFullSnapshot HOT 3
- [Bug]: Firefox Addon causes "This page is asking you to confirm that you want to leave" on all navigation HOT 1
- [Bug]: isParentRemoved lags by 1 to 3 seconds on pages with lots of nodes
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rrweb.