@shekharsom_twitter Since you are using the replayer, do you have an idea how to resize it? i want to display the record in a custom div
I couldn't resize it easily. I am currently resorting to
transform:scale(0.8);
Could you please show me code sample?? i'm really stcuk on that, and i'm not an expert with css
i think that is it, could you please tell more about the resizing? @shekharsom_twitter
I am using width: 100%; height: 100%; transform:scale(0.8); in CSS for the player wrapper. This reduces the size well.
Hi everyone,
what is the best way to record events and replay them, considering i use ajax and php?
I currently send an ajax request during registration to php page, which appends the contents of the events of the last 10 seconds to the json file. During registration the page is ok, and there are no particular anomalies.
The json at the end of the session is about 200 / 300MB, but today it also reached 700MB ...
In the replay phase, I don't know how to read the events a little at a time and load the next ones dynamically without having to load all the internal JSON when loading the page.
I also noticed that the page is always the same, but the length of the json for the same duration in minutes of the session varies from 50MB to 600MB, why? Can it depend on the browser version used?
If you look at Hotjar when they play the record, they don't load all the events one time, they use several ajax requests during the replay to get the events. For exalmple: at the intial state they send ajasx request to get first x events, then they load second x events ... etc
You can achieve that by using WebSockets, all you need is to open 1 connection between the client and the server and kepp send events in realtime.
I hope that helped you.
right! in fact the problem is not the generation of the json file.
But its reading, as some sessions take up even 800MB
Why do you read all the JSON file at once? you can load batches
<?php
/**** other previous code not relevant ***/
$json = file_get_contents('records/'.$file_name, false, stream_context_create($arrContextOptions));
$json = str_replace('],[', ',', $json);
?>
const data = [{ events: <?php echo $json; ?> }];
function player(data){
const events = data.reduce((prev, cur) => prev.concat(cur.events), []);
new rrwebPlayer({
target: document.body,
props: {
events
},
});
}
player(data);I've not implemented that yer, I'm going to do so in the near future. But I think the way to do this is very similar to the pagination principle. So in pagination, we don't load all records from the server at once, instead, we do load 10 records per request or x records per request based on parameter. .
in rrweb, you can the same as well, let's say you have a record that includes 1000 events, first things first you need to sort the events based on the timestamp, just in case. Second thing, you need to divide the whole record (1000 events) into multiple records, let's for example 10 records each one has 100 events (patch), 3rd, since you can know the total amount of time (in seconds) of the all record, and also, you know when each patch start/end time, with some calculation you would be able to know when to load a specifc patch.
I;m going to make POC very soon.
rrwebStopRecording = rrwebRecord({
emit(event) {
chrome.runtime.sendMessage({ event, type: 'event' }, () => {
});
},
recordLog: true,
packFn: rrwebPack,
sampling: {
// do not record mouse movement
mousemove: 250,
// do not record mouse interaction
mouseInteraction: 250,
// set the interval of scrolling event
scroll: 250, // do not emit twice in 150ms
},
}); this.player = new rrwebPlayer({
target: this.$refs.playerTarget,
props: {
events: events,
},
unpackFn: rrwebUnpack,
});
Ref There is a way to add events to the player.
const replayer = new rrweb.Replayer(events)
for (const newEvent of newEvents) {
replayer.addEvent(newEvent)
}for future ref.
