Comments (3)
Good question! And I would like to answer it in two aspects.
First are some of the features you have mentioned may rely on backend analysis implementations for better performance, but it also could be done in pure client side. Anyway, these implementations will not happen in rrweb's repo very soon, but if someone is interesting to give a try I will be happy to help.
And the main question is what's the meaning of currently collected data, especially the type
and source
fields?
Actually, we are using typescript's enum feature to keep the collected data small but also be semantic in the code. For example, the type
field is representing by the following enum:
enum EventType {
DomContentLoaded,
Load,
FullSnapshot,
IncrementalSnapshot,
Meta,
}
So type: 0
means DomContentLoaded, type: 4
means Meta, etc. Definitely, we need a way or a tool to transform the collected data to a more readable way without referring to the enums manually. I think an online parsing tool is suitable for this.
I will start to do this later next week, you can also use the following snippets for a quick workaround.
import { EventType, eventWithTime, IncrementalSource, MouseInteractions } from '../src/types';
function format(event: eventWithTime) {
const f: any = {
...event,
data: {
...event.data
}
};
f.type = EventType[f.type];
if (event.type === EventType.IncrementalSnapshot) {
f.data.source = IncrementalSource[event.data.source];
if (event.data.source === IncrementalSource.MouseInteraction) {
f.data.type = MouseInteractions[event.data.type];
}
}
return f;
}
And you can parse the event data to something like this:
{
"type": "IncrementalSnapshot",
"data": {
"source": "MouseInteraction",
"type": "Focus",
"id": 66
},
"timestamp": 1544511215047
}
from rrweb.
Yeah, I’m not sure if there is a typescript parser in php, but since the enum is really simple and seldom been updated, maybe you can just maintain the mapping manually.
from rrweb.
I see! I was planning on doing the data processing on the backend so it minimizes resources used by client side JavaScript.
For example, right now the recorder emits the event types and incrementally sends the events array back to my backend server, where a PHP file receives it and stores it. Likely, I was thinking about parsing it via PHP and building an understandable event log.
Basically, if I understood or could find a glossary to match event types and their data to a more meaningful index, developers could then use the data received to calculate these.
from rrweb.
Related Issues (20)
- [Bug]: Unable to capture the website onhover screens using rrweb.
- [Bug]: Uncaught SyntaxError: Regular expression too large HOT 7
- [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
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.