by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Prince jujunuri
    @PJujunuri_twitter
    Is there any video in youtube for understanding rrweb code, Its not about just using rrweb its about how code flow in rrweb
    For my case i need to store only click events
    yz-yu
    @Yuyz0112
    @PJujunuri_twitter Maybe you can start with the internal design docs: https://github.com/rrweb-io/rrweb#internal-design
    Prince jujunuri
    @PJujunuri_twitter
    @Yuyz0112 thanks for your response, i will go through this
    Praneet Nadkar
    @praneetnadkar
    Is there anyway to mask a particular element when recording?
    yz-yu
    @Yuyz0112
    @praneetnadkar yes, you can add a .rr-block class name to the element
    Grohs Fabian
    @grohsfabian_twitter
    Hey @Yuyz0112 I just tested out the following simple code https://pastebin.com/Vd3VBv1H which should stop emitting after getting the first 2 events but it simply keeps on going. Is there anything that I am missing on how it should behave?
    David Cramer
    @dcramer
    :wave:
    @Yuyz0112 whats your process for new versions? I'm hoping to test out the style sheet stuff in our prototype, but I couldn't figure out a clean way to get an npm dep to run from the git repo (at least not without changing our compilation processes)
    coudl even just be a beta version if its easy
    i can also take a stab at patching the insertRule observer to be setTimeout, tho it looks like its technically not breaking anything at the moment (just wasted data)
    yz-yu
    @Yuyz0112
    @grohsfabian_twitter I see the bug.
    It happens because we stop too 'fast', and some observers started after the stop calling. If you change threshold of events to 5+, it will works.
    I would like to fix it in the following weekend.
    @dcramer just released 0.7.28
    David Cramer
    @dcramer
    getsentry/sentry#17316 will let you know :)
    Grohs Fabian
    @grohsfabian_twitter
    @Yuyz0112 Thank you for the answer! Also, how would I go about to simply create a snapshot of the full page only? Without any extra events. Currently, I have to do this hack that I sent you via pastebin to stop on the second event and send that snapshot. Hope you understand what I mean. Looking forward for new updates when you got the time, what you did is really nice, but has some bugs and missing "features". Again, great job!
    Also, to add a bit more to this. There is a highly recurring problem that even happens on the presentation website of yours rrweb.io. The iframe loading doesnt have a timeout to stop the loading after some time and if some resources cant be loaded, the page will look like it is constantly loading and loading without ever ending
    David Cramer
    @dcramer
    Looks like there might be an issue with the StyleSheetRule behavior, or it doesnt actually solve the case I’m seeing. Going to do some more debugging
    yz-yu
    @Yuyz0112
    @grohsfabian_twitter I think what you need is rrweb-snapshot https://github.com/rrweb-io/rrweb-snapshot
    Grohs Fabian
    @grohsfabian_twitter
    @Yuyz0112 Yeah, but there is no documentation on how to actually use the code and there is no compiled javascript
    swimminginlove
    @swimminginlove
    This is a really cool tool that I'm having a ton of fun playing around with! Thanks!! I was just curious. Why do we send events every 10 seconds instead of sending every minute or sending when something happens like componentWillUnmount in React?
    Javier EAW
    @javiereaw
    Hi everyone
    Gael Flores
    @gflores
    This project is incredible. I'm still trying to understand how it works... Basically the recorder captures the state of the HTML and CSS, and the Replay just reconstruct the HTML and CSS. Is it correct ?
    As opposed to recording an actual video (or series of .jpg) and then playing the video
    yz-yu
    @Yuyz0112
    Yes. If you are interested in the design, you can take a look at the design docs.
    https://github.com/rrweb-io/rrweb/tree/master/docs
    swimminginlove
    @swimminginlove
    @Yuyz0112 I love the project Thanks! I'm only recording events on a single page. Is there a way to reduce the size of the events if all the recordings have the same initial snapshot?
    m-poghosyan
    @m-poghosyan
    @Yuyz0112 Hi. Is there any way to solve this error: https://prnt.sc/rc1poi
    I get this error when trying to replay the recorded data
    noptanit12
    @noptanit12
    Hello, anyone knows the way to record the specific area on the web?
    Lucas rodrigues araujo
    @lucked
    is possible record only movements , and use original web page for replay? for continue using the page after finish the replay?
    Juan Cruz Gardey
    @juancruzgardey
    @Yuyz0112 thank you for the project. It works perfectly but in some pages during the replay the trace of the mouse pointer has an offset compared to the original trace. Is that a common issue?
    saqing
    @saqing
    i got an error node id xxx not found while replay the events, anynoe knows why? rrweb-io/rrweb#166
    Prince jujunuri
    @PJujunuri_twitter
    autoPlay : false Not working for my project, Is there another way of stop auto play
    Ellonet
    @Ellonet
    Hey, @khaled-developer - i have the same problem with the empty back screen. how did you fix it?
    @Yuyz0112 how did you help to fix the empty back screen problem?
    yz-yu
    @Yuyz0112
    @Ellonet Could you post your events log for debugging? You can send it to me via DM of course
    Ellonet
    @Ellonet
    @Yuyz0112
    they look like this:
    {"events":[{"type":3,"data":{"source":1,"positions":[{"x":770,"y":275,"id":5264,"timeOffset":-451},{"x":768,"y":274,"id":5271,"timeOffset":-313},{"x":767,"y":274,"id":5271,"timeOffset":-224},{"x":764,"y":271,"id":5271,"timeOffset":-165},{"x":763,"y":268,"id":5271,"timeOffset":-69}]},"timestamp":1584617569798},{"type":3,"data":{"source":1,"positions":[{"x":761,"y":268,"id":5271,"timeOffset":-260},{"x":757,"y":274,"id":5271,"timeOffset":-208}]},"timestamp":1584617570299},{"type":3,"data":{"source":1,"positions":[{"x":754,"y":278,"id":5264,"timeOffset":0}]},"timestamp":1584617571532},{"type":3,"data":{"source":1,"positions":[{"x":751,"y":290,"id":5264,"timeOffset":-460},{"x":748,"y":305,"id":5430,"timeOffset":-408},{"x":744,"y":323,"id":5437,"timeOffset":-343},{"x":742,"y":341,"id":5430,"timeOffset":-286},{"x":742,"y":361,"id":5596,"timeOffset":-227},{"x":744,"y":403,"id":5762,"timeOffset":-169},{"x":745,"y":430,"id":5769,"timeOffset":-105},{"x":758,"y":525,"id":6101,"timeOffset":0}]},"timestamp":1584617572042},{"type":3,"data":{"source":1,"positions":[{"x":761,"y":555,"id":6094,"timeOffset":-444},{"x":765,"y":578,"id":6267,"timeOffset":-374},{"x":768,"y":605,"id":6260,"timeOffset":-306},{"x":773,"y":624,"id":6426,"timeOffset":-243},{"x":780,"y":642,"id":6426,"timeOffset":-177},{"x":788,"y":664,"id":6592,"timeOffset":-125},{"x":796,"y":679,"id":6599,"timeOffset":-60}]},"timestamp":1584617572542},{"type":3,"data":{"source":1,"positions":[{"x":811,"y":698,"id":6592,"timeOffset":-496},{"x":824,"y":710,"id":6592,"timeOffset":-445},{"x":843,"y":720,"id":6761,"timeOffset":-375},{"x":877,"y":725,"id":6770,"timeOffset":-308},{"x":902,"y":717,"id":6770,"timeOffset":-247},{"x":917,"y":707,"id":6601,"timeOffset":-196},{"x":932,"y":694,"id":6601,"timeOffset":-146},{"x":942,"y":684,"id":6608,"timeOffset":-96},{"x":956,"y":669,"id":6601,"timeOffset":-44}]},"timestamp":1584617573045},{"type":3,"data":{"source":1,"positions":[{"x":965,"y":655,"id":6435,"timeOffset":-500},{"x":973,"y":624,"id":6435,"timeOffset":-436},{"x":970,"y":599,"id":6269,"timeOffset":-384},{"x":960,"y":558,"id":6269,"timeOffset":-319},{"x":952,"y":526,"id":6110,"timeOffset":-266},{"x":942,"y":497,"id":5937,"timeOffset":-192},{"x":935,"y":462,"id":5937,"timeOffset":-136},{"x":930,"y":450,"id":5771,"timeOffset":-77},{"x":919,"y":423,"id":5778,"timeOffset":-19}]},"timestamp":1584617573552},{"type":3,"data":{"source":1,"positions":[{"x":902,"y":357,"id":5605,"timeOffset":-457},{"x":892,"y":295,"id":5439,"timeOffset":-406},{"x":886,"y":257,"id":5273,"timeOffset":-352},{"x":882,"y":238,"id":5107,"timeOffset":-299},{"x":876,"y":218,"id":5107,"timeOffset":-249},{"x":861,"y":214,"id":5107,"timeOffset":-187},{"x":826,"y":208,"id":5098,"timeOffset":-136},{"x":765,"y":212,"id":5105,"timeOffset":-71},{"x":731,"y":228,"id":5098,"timeOffset":-20}]},"timestamp":1584617574052},{"type":3,"data":{"source":1,"positions":[{"x":714,"y":244,"id":5264,"timeOffset":-472},{"x":691,"y":305,"id":5430,"timeOffset":-418},{"x":677,"y":400,"id":5744,"timeOffset":-335},{"x":671,"y":467,"id":5910,"timeOffset":-268},{"x":668,"y":527,"id":6087,"timeOffset":-206},{"x":669,"y":556,"id":6242,"timeOffset":-154},{"x":674,"y":581,"id":6253,"timeOffset":-94},{"x":677,"y":595,"id":6242,"timeOffset":-40}]},"timestamp":1584617574559},{"type":3,"data":{"source":1,"positions":[{"x":685,"y":615,"id":6408,"timeOffset":-479},{"x":694,"y":632,"id":6426,"timeOffset":-426},{"x":705,"y":652,"id":6426,"timeOffset":-363},{"x":717,"y":665,"id":6592,"timeOffset":-311},{"x":728,"y":681,"id":6599,"timeOffset":-261},{"x":757,"y":698,"id":6592,"timeOffset":-211},{"x":788,"y":710,"id":6592,"timeOffset":-161},{"x":817,"y":714,"id":6761,"timeOffset":-108},{"x":836,"y":711,"id":6592,"timeOffset":-56}]},"timestamp":1584617575060},{"type":3,"data":{"source":1,"positions":[{"x":854,"y":704,"id":6592,"timeOffset":-507},{"x":871,"y":695,"id":6601,"timeOffset":-455},{"x":914,"y":677,"id":6601,"timeOffset":-405},{"x":962,"y":651,"id":6435,"timeOffset":-352},{"x":1000,"y":618,"id":6444,"timeOffset":-288},{"x":1041,"y":522,"id":6119,"timeOffs
    yz-yu
    @Yuyz0112
    I think you have some missing events in your log.
    Users usually get this because their storage backend reject on large size payload. Could you check your storage backend(like DB, file?) to see if they only have these events. If so, maybe you need to check some logs like nginx gateway to find whether they have logged errors when you are sending data to the storage.
    Ellonet
    @Ellonet
    res = r'{"events":[{"type":3,"data":{"source":5,"text":"day","isChecked":false,"id":211},"timestamp":1584628560956},{"type":3,"data":{"source":0,"texts":[{"id":684,"value":"bindings={\n \"ng-reflect-ng-for-of\": \"Medical Device,IoMT,IoT,User E\"\n}"},{"id":686,"value":"bindings={\n \"ng-reflect-ng-if\": \"[object Object]\"\n}"},{"id":821,"value":"Medical Device"},{"id":819,"value":" 337 "},{"id":830,"value":"IoMT"},{"id":828,"value":" 71 "},{"id":839,"value":"IoT"},{"id":837,"value":" 122 "},{"id":848,"value":"User Endpoint"},{"id":846,"value":" 290 "},{"id":857,"value":"Server"},{"id":855,"value":" 7 "},{"id":866,"value":"Network Device"},{"id":864,"value":" 222 "},{"id":875,"value":"Unclassified"},{"id":873,"value":" 71 "},{"id":884,"value":"bindings={\n \"ng-reflect-ng-if\": \"[object Object],[object Object\"\n}"},{"id":900,"value":"bindings={\n \"ng-reflect-ng-if\": \"false\"\n}"},{"id":901,"value":"bindings={}"},{"id":892,"value":"Assets"},{"id":899,"value":"VLANs"},{"id":890,"value":" 1120 "},{"id":897,"value":" 97 "},{"id":883,"value":" [object Object] "},{"id":681,"value":" 1120 "},{"id":693,"value":" 0 "},{"id":699,"value":" 360 "},{"id":705,"value":" 165 "},{"id":711,"value":" 595 "},{"id":721,"value":"bindings={\n \"ng-reflect-ng-for-of\": \"[object Object],[object Object\"\n}"},{"id":921,"value":" Generic User Endpoint "},{"id":918,"value":" 290 "},{"id":935,"value":" Pump Controller "},{"id":932,"value":" 257 "},{"id":949,"value":" Switch "},{"id":946,"value":" 202 "},{"id":963,"value":" Unclassified "},{"id":960,"value":" 71 "},{"id":977,"value":" Docking Station "},{"id":974,"value":" 65 "},{"id":991,"value":" Patient Monitor "},{"id":988,"value":" 61 "},{"id":1005,"value":" Camera "},{"id":1002,"value":" 54 "},{"id":1019,"value":" UPS "},{"id":1016,"value":" 45 "},{"id":1033,"value":" Printer "},{"id":1030,"value":" 21 "},{"id":1047,"value":" Generic Network Device "},{"id":1044,"value":" 14 "},{"id":1061,"value":" Chart Recorder "},{"id":1058,"value":" 8 "},{"id":1075,"value":" Terminal Server "},{"id":1072,"value":" 6 "},{"id":1089,"value":" Generic Medical Device "},{"id":1086,"value":" 4 "},{"id":1103,"value":" Generic Server "},{"id":1100,"value":" 4 "},{"id":1117,"value":" Ventilator "},{"id":1114,"value":" 3 "},{"id":1131,"value":" Glucometer "},{"id":1128,"value":" 3 "},{"id":1145,"value":" Integration Server "},{"id":1142,"value":" 3 "},{"id":1159,"value":" Tracking Tag Receiver "},{"id":1156,"value":" 2 "},{"id":1173,"value":" Generic IoT "},{"id":1170,"value":" 2 "},{"id":1187,"value":" Infusion Pump "},{"id":1184,"value":" 1 "},{"id":737,"value":"bindings={\n \"ng-reflect-ng-for-of\": \"[object Object],[object Object\"\n}"},{"id":1193,"value":"bindings={}"},{"id":1195,"value":"HP"},{"id":1200,"value":" 286 "},{"id":1206,"value":" 0 "},{"id":1212,"value":" 252 "},{"id":1218,"value":" 15 "},{"id":1222,"value":"bindings={}"},{"id":1224,"value":"Vcs"},{"id":1229,"value":" 47 "},{"id":1235,"value":" 0 "},{"id":1241,"value":" 47 "},{"id":1247,"value":" 0 "},{"id":1251,"value":"bindings={}"},{"id":1253,"value":"Cisco"},{"id":1258,"value":" 215 "},{"id":1264,"value":" 0 "},{"id":1270,"value":" 0 "},{"id":1276,"value":" 72 "},{"id":1280,"value":"bindings={}"},{"id":1282,"value":"APC"},{"id":1287,"value":" 45 "},{"id":1293,"value":" 0 "},{"id":1299,"value":" 0 "},{"id":1305,"value":" 45 "},{"id":1309,"value":"bindings={}"},{"id":1311,"value":"Xerox"},{"id":1316,"value":" 21 "},{"id":1322,"value":" 0 "},{"id":1328,"value":" 9 "},{"id":1334,"value":" 12 "},{"id":745,"value":"bindings={\n \"ng-reflect-ng-for-of\": \"[object Object],[object Object\"\n}"},{"id":1338,"value":"bindings={\n \"ng-reflect-ng-if\": \"icon-generic-user-endpoint\"\n}"},{"id":1344,"value":"Generic User Endpoint"},{"id":1349,"value":" 290 "},{"id":1355,"value":" 0 "},{"id":1361,"value":" 252 "},{"id":1367,"value":" 16 "},{"id":1371,"value":"bindings={\n \"ng-reflect-ng-if\": \"icon-unclassified\"\n}"},{"id":1377,"value":"Unclassified"},{"id":1382,"value":" 71 "},{"id":1388,"value":" 0 "},{"id":1394,"value":" 51 "},{"id":1400,"value":
    ?
    Ellonet
    @Ellonet
    @Yuyz0112 is the above log the correct one? with all the fields?
    yz-yu
    @Yuyz0112
    @Ellonet nope, the correct one should have a event with { "type": 2 }
    Ellonet
    @Ellonet
    @Yuyz0112
    i just got another example which does have type-2:
    res = r'{"events":[{"type":3,"data":{"source":1,"positions":[{"x":239,"y":18,"id":314,"timeOffset":0}]},"timestamp":1585130671906},{"type":3,"data":{"source":1,"positions":[{"x":252,"y":262,"id":1002,"timeOffset":-434}]},"timestamp":1585130672406},{"type":3,"data":{"source":2,"type":6,"id":1},"timestamp":1585130672553},{"type":3,"data":{"source":2,"type":5,"id":1},"timestamp":1585130674393},{"type":3,"data":{"source":1,"positions":[{"x":219,"y":26,"id":524,"timeOffset":0}]},"timestamp":1585130674554},{"type":3,"data":{"source":1,"positions":[{"x":214,"y":92,"id":321,"timeOffset":-461},{"x":230,"y":243,"id":334,"timeOffset":-395},{"x":265,"y":345,"id":329,"timeOffset":-343},{"x":385,"y":446,"id":316,"timeOffset":-245},{"x":477,"y":360,"id":329,"timeOffset":-178},{"x":483,"y":310,"id":333,"timeOffset":-128},{"x":446,"y":304,"id":1052,"timeOffset":-62},{"x":392,"y":353,"id":1050,"timeOffset":0}]},"timestamp":1585130675064},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":1072,"attributes":{"style":"opacity: 1; position: absolute; left: 43px; top: 141px;","hidden":null}},{"id":1051,"attributes":{"class":"pie-chart-container full-width-height cursor-pointer"}}],"removes":[],"adds":[{"parentId":1073,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"\n ","id":3449}},{"parentId":1073,"previousId":3449,"nextId":-1,"node":{"type":2,"tagName":"div","attributes":{"class":"tooltip-label-container"},"childNodes":[],"id":3450}},{"parentId":3450,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"User Endpoint","id":3451}},{"parentId":1073,"previousId":3450,"nextId":-1,"node":{"type":3,"textContent":"\n ","id":3452}},{"parentId":1073,"previousId":3452,"nextId":-1,"node":{"type":2,"tagName":"div","attributes":{"class":"triangle"},"childNodes":[],"id":3453}},{"parentId":1073,"previousId":3453,"nextId":-1,"node":{"type":3,"textContent":"\n ","id":3454}},{"parentId":1073,"previousId":3454,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"tooltip-text-container"},"childNodes":[],"id":3455}},{"parentId":3455,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"\n ","id":3456}},{"parentId":3455,"previousId":3456,"nextId":-1,"node":{"type":2,"tagName":"div","attributes":{"class":"tooltip-text-bg"},"childNodes":[],"id":3457}},{"parentId":3457,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"290","id":3458}},{"parentId":3455,"previousId":3457,"nextId":null,"node":{"type":3,"textContent":"\n ","id":3459}}]},"timestamp":1585130675230},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":1072,"attributes":{"style":"opacity: 0; position: absolute; left: 43px; top: 141px;","hidden":""}},{"id":1051,"attributes":{"class":"pie-chart-container full-width-height"}}],"removes":[{"parentId":1073,"id":3449},{"parentId":1073,"id":3450},{"parentId":1073,"id":3452},{"parentId":1073,"id":3453},{"parentId":1073,"id":3454},{"parentId":1073,"id":3455}],"adds":[]},"timestamp":1585130675254},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":1072,"attributes":{"style":"opacity: 1; position: absolute; left: 146px; top: 120px;","hidden":null}},{"id":1051,"attributes":{"class":"pie-chart-container full-width-height cursor-pointer"}}],"removes":[],"adds":[{"parentId":1073,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"\n ","id":3460}},{"parentId":1073,"previousId":3460,"nextId":-1,"node":{"type":2,"tagName":"div","attributes":{"class":"tooltip-label-container"},"childNodes":[],"id":3461}},{"parentId":3461,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"IoMT","id":3462}},{"parentId":1073,"previousId":3461,"nextId":-1,"node":{"type":3,"textContent":"\n ","id":3463}},{"parentId":1073,"previousId":3463,"nextId":-1,"node":{"type":2,"tagName":"div","attributes":{"class":"triangle"},"childNodes":[],"id":3464}},{"parentId":1073,"previousId":3464,"nextId":-1,"node":{"type":3,"textContent":"\n ","id":3465}},{"parentId":1073,"previousId":3465,"nextId":null,"node":{"type":2,"tagName":"div","attribu
    Ellonet
    @Ellonet
    image.png
    @Yuyz0112 also - i have no errors logged.
    it looks like this (above)
    msouce
    @msouce
    Correct me if I'm wrong, there's no way to resize the recorded session to replay at a different size, right?
    I'm recording at a screen width of e.g. 992px, but would love for the replay to scale up or down based on the width of the user's browser. that doesn't seem to be possible currently
    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.