replayer modal rendering inconsistencies

[omairnabiel]

I'm facing this issue where the same set of events when replayed, sometimes render the modals perfectly, and sometimes completely skips or renders it weirdly. The same events played twice and one time it renders everything perfectly and then when I replayed it again it played the same events with different result where modal isn't visible at all

[Juice10]

When you inspect the html of the replay can you see if the html for the modal was added? There is a chance that the html is rendered but your styles aren't applied in which case it's probably related to #529

Could you share a gist of your events so we can investigate?

[omairnabiel]

Yea the html get's rendered. It's the issue with the styling. The styling for the main page is also off as you can see, not just in case of modal. Sometimes everything works fine, sometimes either one doesn't or both as in the images

Couldn't copy all the events here are a some, the last one might not have it braces right.
Events

 [{"type":4,"data":{"href":"https://bookthief.atlassian.net/secure/RapidBoard.jspa?rapidView=1&projectKey=BT","width":1440,"height":769},"timestamp":1625549595415,"sessionId":"udSisFxTZgo1tuyzGUZTa","id":4875},{"type":2,"data":{"node":{"type":0,"childNodes":[{"type":1,"name":"html","publicId":"","systemId":"","id":2},{"type":2,"tagName":"html","attributes":{"lang":"en","class":"webkit chrome","style":"--topNavigationHeight:56px; --leftSidebarWidth:240px; --leftSidebarFlyoutWidth:240px;"},"childNodes":[{"type":2,"tagName":"head","attributes":{},"childNodes":[{"type":2,"tagName":"meta","attributes":{"name":"ghx-user-bento-enabled","content":"true"},"childNodes":[],"id":5},{"type":2,"tagName":"meta","attributes":{"name":"decorator","content":"atl.general"},"childNodes":[],"id":6},{"type":2,"tagName":"meta","attributes":{"name":"ajs-sidebar-enabled","content":"true"},"childNodes":[],"id":7},{"type":3,"textContent":"\n    ","id":8},{"type":2,"tagName":"meta","attributes":{"charset":"utf-8"},"childNodes":[],"id":9},{"type":3,"textContent":"\n    ","id":10},{"type":2,"tagName":"meta","attributes":{"http-equiv":"X-UA-Compatible","content":"IE=Edge"},"childNodes":[],"id":11},{"type":3,"textContent":"\n    ","id":12},{"type":2,"tagName":"meta","attributes":{"name":"referrer","content":"same-origin"},"childNodes":[],"id":13},{"type":3,"textContent":"\n\n    \n        ","id":14},{"type":2,"tagName":"meta","attributes":{"name":"apple-itunes-app","content":"app-id=1006972087,ct=web_smart_banner"},"childNodes":[],"id":15},{"type":3,"textContent":"\n    \n\n    \n\n\n    \n","id":16},{"type":2,"tagName":"meta","attributes":{"id":"atlassian-token","name":"atlassian-token","content":"ac3f3afc-8441-427d-adf7-caeb136cab5d_795cc750c883470796b1a185a130862e614af783_lin"},"childNodes":[],"id":17},{"type":3,"textContent":"\n\n\n    ","id":18},{"type":2,"tagName":"link","attributes":{"rel":"shortcut icon","href":"https://bookthief.atlassian.net/s/sb53l8/b/2/b6b48b2829824b869586ac216d119363/_/favicon-software.ico"},"childNodes":[],"id":19},{"type":3,"textContent":"\n    \n    ","id":20},{"type":2,"tagName":"link","attributes":{"rel":"mask-icon","sizes":"any","href":"https://bookthief.atlassian.net/images/jira-safari-pintab-icon.svg","color":"#2684FF"},"childNodes":[],"id":21},{"type":3,"textContent":"\n\n    ","id":22},{"type":5,"textContent":"[if IE]><![endif]","id":23},{"type":3,"textContent":"\n    ","id":24},{"type":2,"tagName":"script","attributes":{"type":"text/javascript","data-defer-start":""},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":26}],"id":25},{"type":3,"textContent":"\n\n    \n\n    \n\n\n\n\n\n    ","id":27},{"type":2,"tagName":"title","attributes":{},"childNodes":[{"type":3,"textContent":"BT board - Agile Board - Jira","id":29}],"id":28},{"type":3,"textContent":"\n    ","id":30},{"type":2,"tagName":"link","attributes":{"rel":"search","type":"application/opensearchdescription+xml","href":"https://bookthief.atlassian.net/osd.jsp","title":"Agile Board - Jira"},"childNodes":[],"id":31},{"type":3,"textContent":"\n    ","id":32},{"type":2,"tagName":"style","attributes":{"type":"text/css"},"childNodes":[{"type":3,"textContent":"\n        body.deferred div[id^=\"aui-\"] {\n            display: none;\n        }\n    ","isStyle":true,"id":34}],"id":33},{"type":3,"textContent":"\n","id":35},{"type":2,"tagName":"style","attributes":{"type":"text/css"},"childNodes":[],"id":36},{"type":2,"tagName":"style","attributes":{"type":"text/css"},"childNodes":[],"id":37},{"type":2,"tagName":"style","attributes":{"type":"text/css"},"childNodes":[{"type":3,"textContent":"body,div,dl,fieldset,form,h1,h2,h3,h4,h5,h6,html,img,ol,p,pre,ul{margin:0;padding:0}fieldset,img{border:0}body,html{height:100%;width:100%}body{background-color:#fff;color:#172b4d;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:1.42857142857143;-ms-overflow-style:-ms-autohiding-scrollbar;text-decoration-skip-ink:auto}blockquote,dl,form,h1,h2,h3,h4,h5,h6,ol,p,pre,table,ul{margin:12px 0 0}a{color:#0052cc;text-decoration:none}a:hover{color:#0065ff;text-decoration:underline}a:active{color:#0747a6}a:focus{outline:2px solid #4c9aff;outline-offset:2px}h1{font-size:2.0714285714285716em;line-height:1.103448275862069;font-weight:600}h1,h2{font-style:inherit;color:#172b4d;letter-spacing:-.01em;margin-top:40px}h2{font-size:1.7142857142857142em;line-height:1.1666666666666667;font-weight:500}h3{font-size:1.4285714285714286em;line-height:1.2;font-weight:500;letter-spacing:-.008em;margin-top:28px}h3,h4{font-style:inherit;color:#172b4d}h4{font-size:1.1428571428571428em;line-height:1.25;font-weight:600;letter-spacing:-.006em;margin-top:24px}h5{font-size:1em;line-height:1.1428571428571428;letter-spacing:-.003em;margin-top:16px}}}]

[omairnabiel]

Events JSON.stringify-ed (it's not complete but will help). It produced around 1.4mb of events for a video of worth of 16 seconds. 😮

jira-rrweb-events.js.zip

[Juice10]

I'm going to spend some time on #529 today, and I'll see if that fix also solves your use case.

[Juice10]

@omairnabiel any chance I can get the full events.json? It seems cut off in the middle of an event unfortunately.
(happy to email with you if you don't want to share the full video with the whole internet).

[omairnabiel]

There you go. I generated this once again, has the same issues, although it's 6 seconds long

jira-data.json.zip

[Juice10]

@omairnabiel this is missing the first couple events. Any chance you could give me the whole 1.4mb, 16 second file?

[omairnabiel]

I don't have that now, I can record a longer session and email you

[omairnabiel]

Although after 1.0.2 styling is much more consistent and things have improved drastically 🥇 , but it still misses the rendering of modal at times

[Code-Crash]

Hi @Juice10,

I can see this is closed, still, there is an issue, sometimes I can see the class name is there, and the class definition is also there in the <head><style> still it does not apply to dom while rendering, do we have any issues like this? I tried but did not found, mostly it happens when we have huge CSS in <head><style>

Example:

In this image, we can see, that the class name ekDOGk exists in the tag div.

In this image, we can see the style is there for this class,

however while rendering, we can see in the below image, that it is not applied.

Please let me know if you know about this issue.

Note: Also, in replayer, I have enabled the interaction, and I deleted the style from the head tag and added the style back in the head tag, it's applying the CSS class and it's working.

Thanks

[Code-Crash]

Hi @Juice10 ,

Do you have any idea in which scenario this can happen?

[Juice10]

@Code-Crash I've come across this before. Basically what is happening is the css rules have been removed through CSSStyleSheet.deleteRule. rrweb records this behaviour as well, but I have found (and solved) some bugs related to this in the past. Are you running rrweb 2.0.0-alpha.1?

Edit: congratulations on getting this far debugging, this was a real head scratcher first time I found this

[Code-Crash]

Hi @Juice10

Thanks for the reply, I'm using 1.1.3

Yes, it's tricky to debug it. 😅

Edit:

As of now, I did not try with 2.0.0-alpha.1