by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    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)
    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 :)