by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Ellonet
    @Ellonet

    @Yuyz0112 Hey!
    I managed to record and replay. however - when navigating through pages - there are no new type (2,4) events sent, unless the user hits 'refresh'.

    is there a way to force sending the full snapshot event upon navigating to new page?

    Mahesh
    @MaheshCasiraghi
    @Yuyz0112 I am trying to render the replay of a session relative to the whole html height and width, rather than relative to the viewport. Is there a built in way to do it in rrweb as of now? If not (I was not able to find it through the code), how do you think you would go about it? Thank you!
    Gomathi Meena
    @gomathimeena_gitlab

    Hi all ,
    Im trying to record and replay the sessions using rrweb script.I installed it and collected the events :
    My events are like this :
    events = [{'events': [{'type': 0, 'data': {}, 'timestamp': 1586525806542}, {'type': 1, 'data': {}, 'timestamp': 1586525809409}, {'type': 4, 'data': {'href': 'http://192.168.1.102/sample.html', 'width': 1533, 'height': 801}, 'timestamp': 1586525809409}, {'type': 2, 'data': {'node': {'type': 0, 'childNodes': [{'type': 2, 'tagName': 'html', 'attributes': {'style': '', 'class': ' js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths'},},.......,{'events':[]}]

    const replayer = new rrweb.Replayer(events);
    replayer.play();

    I have included this js code in my script,when i run my html file it throws an error : Uncaught TypeError: Cannot read property 'appendChild' of null

    What will be the reason ??

    yz-yu
    @Yuyz0112
    @MaheshCasiraghi Maybe you can take a look at rrweb-player's fullscreen implementation, which calculate the scale.
    @gomathimeena_gitlab Could you provide your events for debugging?
    Gomathi Meena
    @gomathimeena_gitlab
    @Yuyz0112 events list file : https://pastebin.com/sdNBzL4K
    yz-yu
    @Yuyz0112
    const events = data.reduce((prev, cur) => prev.concat(cur.events), []);
    const replayer = new rrweb.Replayer(events);
    replayer.play();
    I can successfully replay your events with this sample code
    Gomathi Meena
    @gomathimeena_gitlab
    @Yuyz0112 what is prev and cur here ?
    yz-yu
    @Yuyz0112
    just flatten the events in your data
    Gomathi Meena
    @gomathimeena_gitlab
    @Yuyz0112 can you say how did you initialize the events from the file ?
    yz-yu
    @Yuyz0112
    The file contains two array, each item looks like { events: [...] }
    The data variable in the sample code just point to the array in the file.
    Gomathi Meena
    @gomathimeena_gitlab
    @Yuyz0112 Thanks but still im getting the same error :
    data = [array of events]; const events = data.reduce((prev, cur) => prev.concat(cur.events), []); const replayer = new rrweb.Replayer(events); replayer.play();
    Im using the latest version itself !
    yz-yu
    @Yuyz0112
    Could try this JS file https://cdn.jsdelivr.net/npm/rrweb@0.7.33/dist/rrweb.min.js
    And which browser are you using?
    Gomathi Meena
    @gomathimeena_gitlab
    @Yuyz0112 Im using chrome , and used the js provided by you results in same error .
    Does this page played right in your browser?
    Gomathi Meena
    @gomathimeena_gitlab
    @Yuyz0112 Yes the page was played right
    yz-yu
    @Yuyz0112
    Maybe you can track what's the difference between it and your code?
    view-source:http://lab.myriptide.com/rrweb-debug/reproduce.html
    Gomathi Meena
    @gomathimeena_gitlab
    @Yuyz0112 ,yes i'm doing that ..Much thanks to you
    i am trying to connect rrweb with flask
    having some issue with sending and receiving events data
    how do i send the events data from flask to html and render it in replay script?
    Amin Pial
    @aminPial
    @Yuyz0112 ?
    Dac Hai
    @haicaodac
    Hi everybody.
    I see a pull request closed and it seems to be increasing record iframe in a website's iframe. I am seeing "rrweb" doesn't work with iframes. I don't know if that pull request will make iframe writable if it attaches a certain class.
    https://github.com/rrweb-io/rrweb/pull/68/files
    Vincent Acard
    @VincentAcard_twitter
    @Yuyz0112 Hi, first thank you for you app, its awsome ! I got always one concern, an error that freeze the recording when i replay it, i take screenshot of google console to show you here : https://ibb.co/NT2qCd2 have an idea ? ( its always the same error for most of recording, but for some, all is ok, no error)
    Ellonet
    @Ellonet

    @Yuyz0112 Hey Yuyz and all,
    I'm having the following problems:
    1) for complicated pages - the entire browser gets stuck and crashes.
    did anyone else encounter this problem?

    2) I want to record an entire session with different pages. the rr-web did not serialize all the different pages, and i was forced to do stopRecord() and startRecord() for every page navigation.
    Is this the correct practice? is there a way to make it more efficient?

    yz-yu
    @Yuyz0112
    @VincentAcard_twitter @Ellonet
    Reproducible URLs will be helpful for debugging.
    Ellonet
    @Ellonet

    @Yuyz0112 Sadly I cant.
    I am working in angular 8 framework.
    The problem is that on navigating to a heavy page - the recorded starts adding emitting thousands of events to the "events" array.

    if I call stopRecordingFunction() after 6000 events in the array - the UI is OK,
    These 6000 were sent to the backend - however while replaying them - they show nothing..

    any idea?

    Ellonet
    @Ellonet
    @Yuyz0112
    we figured out the problem. apperently the rrweb and ngbtooltip can not live together.
    once we hovered over the tooltip - the record function got over 10000 events in like 5 seconds and it never stoped until the UI crashed.
    it happaned in some other cases too - but we didn't have the time to investigate that too
    yz-yu
    @Yuyz0112
    Thanks for the investigating! Not familiar with angular, does ngbtooltip means the tooltip component in this lib?https://github.com/ng-bootstrap/ng-bootstrap
    Ellonet
    @Ellonet
    @Yuyz0112
    yes that's right, the tooltip container is the body.
    Ellonet
    @Ellonet
    @Yuyz0112
    Will there be a fix to this issue?
    I want to use this amazing feature with angular - without concern of other unknown libraries that might make the whole UI crash.
    Is there a way the rrweb record can recognize it and prevent the crash?
    yz-yu
    @Yuyz0112
    Yep. I've just implement a better live mode support in rrweb.
    And I think I will have time in the following days to fix this issue.
    Ellonet
    @Ellonet
    @Yuyz0112 Amazing! let us know :)
    Juan Cruz Gardey
    @juancruzgardey
    @Yuyz0112 I'm observing that non-standard html tags are replaced with divs, which may cause that in some websites the CSS is broken. How can I fix this? Thanks!
    yz-yu
    @Yuyz0112
    @juancruzgardey
    I believe it happens here: https://github.com/rrweb-io/rrweb-snapshot/blob/master/src/snapshot.ts#L17
    We need this because document.createElement will failed if the tag name is invalid. Maybe we need find another way to create element with invalid tag name?
    Grohs Fabian
    @grohsfabian_twitter

    Hey there @Yuyz0112 , I hope you and all the community members have a great day first of all!

    I am just messaging to ask regarding the https://github.com/rrweb-io/rrweb-snapshot code. Could you please, give us an example of how we could use the snapshot code alone to simply take a snapshot of a page on demand via javascript?

    Vincent Acard
    @VincentAcard_twitter

    @Yuyz0112 If a page contain this kind of code : <!--[if lt IE 9]>

    <script src="//cdnj... html5shiv.min.js" type="text/javascript"></script>
    <![endif]--> rrwebPlayer will crash with that error ( I think it's because it's a type 5 (comment) and when rrwebplayer read this part and found this caractere "<" it crash

    z1.PNG
    z2.PNG
    Vincent Acard
    @VincentAcard_twitter
    aaaa.PNG
    Burak Emre Kabakc─▒
    @buremba
    Does anyone use rrweb for interactive app demos?
    I mean for something like this: https://cl.ly/760fe9607ea4
    Vipul Wairagade
    @vipulwairagade
    Hi Everyone, Does anyone know how to record user interactions inside of Iframe window. Iframe part is coming blank grey in replay event. Thanks in advance
    Vipul Wairagade
    @vipulwairagade
    @Yuyz0112 I had an issue of iframe which I couldn't solve. So I decided to put rrweb into code of iframe. But I am redering a pdf in that code using a pdf library so it gets loaded as canvas. Is there any way I can record that canvas events with other part of page ?
    Timothy-Barron
    @Timothy-Barron
    When I have multiple batches of events being sent to my server, is there a particular event type to look for that identifies the beginning of a recording?
    Yogendra
    @yogendra3236
    Hi, does anyone know how to rebuild the snapshot using rrweb-snapshot?
    Stefano Kaefer
    @StefanoMat
    Hi, anyone have a doc to implement rrweb with details?
    Rifaudeen
    @rifaideen
    Hi Guys, I'm trying to add new css class name in the rrweb-player repository and I am facing strange issue that the compiled output doesn't include the css.