by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Gael Flores
    @gflores
    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.
    @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 .
    yz-yu
    @Yuyz0112
    http://lab.myriptide.com/rrweb-debug/reproduce.html
    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
    Amin Pial
    @aminPial
    can anyone please answer my question here https://stackoverflow.com/questions/61233866/how-to-receive-and-send-rrweb-record-event-data-in-flask.
    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)