fix: inserted styles lost when moving elements by billyvg · Pull Request #233 · getsentry/rrweb

billyvg · 2024-12-17T19:57:00Z

fix code for nodejs tests
change fix direction to avoid issues with duplicate styles
format issues
swap waitForTimeout for waitForRAF in test that flaked
Add unit tests for new functions
Fix broken test causes by file formatting removing spaced

Co-authored-by: jaj1014 ajax@pendo.io
Co-authored-by: jaj1014 jaj1014@users.noreply.github.com

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

billyvg · 2024-12-17T19:59:07Z

Applying rrweb-io#1357 to our fork

chargome · 2024-12-18T09:40:56Z

+ if (!elementCssRules || !elementCssRules.length) return;
+ // style sheet w/ innerText styles to diff with actual and get only inserted styles
+ const tempStyleSheet = new CSSStyleSheet();
+ tempStyleSheet.replaceSync(styleElement.innerText);


This could be an issue for some safari users: https://caniuse.com/mdn-api_cssstylesheet_replacesync but I'd leave it in.

Good callout - I think this is OK for us since rrdom is only used on playback

We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

…83016) We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

…83016) We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

Includes the following: - getsentry/rrweb#239 - getsentry/rrweb#237 - getsentry/rrweb#238 - getsentry/rrweb#234 - rrweb-io/rrweb#1501 - rrweb-io/rrweb#1500 - rrweb-io/rrweb#1033 - getsentry/rrweb#233 - getsentry/rrweb#229

billyvg · 2024-12-17T19:57:00Z

fix code for nodejs tests
change fix direction to avoid issues with duplicate styles
format issues
swap waitForTimeout for waitForRAF in test that flaked
Add unit tests for new functions
Fix broken test causes by file formatting removing spaced

Co-authored-by: jaj1014 ajax@pendo.io
Co-authored-by: jaj1014 jaj1014@users.noreply.github.com

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

billyvg · 2024-12-17T19:59:07Z

Applying rrweb-io#1357 to our fork

chargome · 2024-12-18T09:40:56Z

+ if (!elementCssRules || !elementCssRules.length) return;
+ // style sheet w/ innerText styles to diff with actual and get only inserted styles
+ const tempStyleSheet = new CSSStyleSheet();
+ tempStyleSheet.replaceSync(styleElement.innerText);


This could be an issue for some safari users: https://caniuse.com/mdn-api_cssstylesheet_replacesync but I'd leave it in.

Good callout - I think this is OK for us since rrdom is only used on playback

We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

…83016) We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

…83016) We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

Includes the following: - getsentry/rrweb#239 - getsentry/rrweb#237 - getsentry/rrweb#238 - getsentry/rrweb#234 - rrweb-io/rrweb#1501 - rrweb-io/rrweb#1500 - rrweb-io/rrweb#1033 - getsentry/rrweb#233 - getsentry/rrweb#229

billyvg · 2024-12-17T19:57:00Z

fix code for nodejs tests
change fix direction to avoid issues with duplicate styles
format issues
swap waitForTimeout for waitForRAF in test that flaked
Add unit tests for new functions
Fix broken test causes by file formatting removing spaced

Co-authored-by: jaj1014 ajax@pendo.io
Co-authored-by: jaj1014 jaj1014@users.noreply.github.com

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

billyvg · 2024-12-17T19:59:07Z

Applying rrweb-io#1357 to our fork

chargome · 2024-12-18T09:40:56Z

+ if (!elementCssRules || !elementCssRules.length) return;
+ // style sheet w/ innerText styles to diff with actual and get only inserted styles
+ const tempStyleSheet = new CSSStyleSheet();
+ tempStyleSheet.replaceSync(styleElement.innerText);


This could be an issue for some safari users: https://caniuse.com/mdn-api_cssstylesheet_replacesync but I'd leave it in.

Good callout - I think this is OK for us since rrdom is only used on playback

We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

…83016) We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

…83016) We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

Includes the following: - getsentry/rrweb#239 - getsentry/rrweb#237 - getsentry/rrweb#238 - getsentry/rrweb#234 - rrweb-io/rrweb#1501 - rrweb-io/rrweb#1500 - rrweb-io/rrweb#1033 - getsentry/rrweb#233 - getsentry/rrweb#229

billyvg · 2024-12-17T19:57:00Z

fix code for nodejs tests
change fix direction to avoid issues with duplicate styles
format issues
swap waitForTimeout for waitForRAF in test that flaked
Add unit tests for new functions
Fix broken test causes by file formatting removing spaced

Co-authored-by: jaj1014 ajax@pendo.io
Co-authored-by: jaj1014 jaj1014@users.noreply.github.com

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

billyvg · 2024-12-17T19:59:07Z

Applying rrweb-io#1357 to our fork

chargome · 2024-12-18T09:40:56Z

+ if (!elementCssRules || !elementCssRules.length) return;
+ // style sheet w/ innerText styles to diff with actual and get only inserted styles
+ const tempStyleSheet = new CSSStyleSheet();
+ tempStyleSheet.replaceSync(styleElement.innerText);


This could be an issue for some safari users: https://caniuse.com/mdn-api_cssstylesheet_replacesync but I'd leave it in.

Good callout - I think this is OK for us since rrdom is only used on playback

We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

…83016) We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

…83016) We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

Includes the following: - getsentry/rrweb#239 - getsentry/rrweb#237 - getsentry/rrweb#238 - getsentry/rrweb#234 - rrweb-io/rrweb#1501 - rrweb-io/rrweb#1500 - rrweb-io/rrweb#1033 - getsentry/rrweb#233 - getsentry/rrweb#229

billyvg · 2024-12-17T19:57:00Z

fix code for nodejs tests
change fix direction to avoid issues with duplicate styles
format issues
swap waitForTimeout for waitForRAF in test that flaked
Add unit tests for new functions
Fix broken test causes by file formatting removing spaced

Co-authored-by: jaj1014 ajax@pendo.io
Co-authored-by: jaj1014 jaj1014@users.noreply.github.com

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

billyvg · 2024-12-17T19:59:07Z

Applying rrweb-io#1357 to our fork

chargome · 2024-12-18T09:40:56Z

+ if (!elementCssRules || !elementCssRules.length) return;
+ // style sheet w/ innerText styles to diff with actual and get only inserted styles
+ const tempStyleSheet = new CSSStyleSheet();
+ tempStyleSheet.replaceSync(styleElement.innerText);


This could be an issue for some safari users: https://caniuse.com/mdn-api_cssstylesheet_replacesync but I'd leave it in.

Good callout - I think this is OK for us since rrdom is only used on playback

We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

…83016) We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

…83016) We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

Includes the following: - getsentry/rrweb#239 - getsentry/rrweb#237 - getsentry/rrweb#238 - getsentry/rrweb#234 - rrweb-io/rrweb#1501 - rrweb-io/rrweb#1500 - rrweb-io/rrweb#1033 - getsentry/rrweb#233 - getsentry/rrweb#229

billyvg · 2024-12-17T19:57:00Z

fix code for nodejs tests
change fix direction to avoid issues with duplicate styles
format issues
swap waitForTimeout for waitForRAF in test that flaked
Add unit tests for new functions
Fix broken test causes by file formatting removing spaced

Co-authored-by: jaj1014 ajax@pendo.io
Co-authored-by: jaj1014 jaj1014@users.noreply.github.com

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

billyvg · 2024-12-17T19:59:07Z

Applying rrweb-io#1357 to our fork

chargome · 2024-12-18T09:40:56Z

+ if (!elementCssRules || !elementCssRules.length) return;
+ // style sheet w/ innerText styles to diff with actual and get only inserted styles
+ const tempStyleSheet = new CSSStyleSheet();
+ tempStyleSheet.replaceSync(styleElement.innerText);


This could be an issue for some safari users: https://caniuse.com/mdn-api_cssstylesheet_replacesync but I'd leave it in.

Good callout - I think this is OK for us since rrdom is only used on playback

We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

…83016) We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

…83016) We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

Includes the following: - getsentry/rrweb#239 - getsentry/rrweb#237 - getsentry/rrweb#238 - getsentry/rrweb#234 - rrweb-io/rrweb#1501 - rrweb-io/rrweb#1500 - rrweb-io/rrweb#1033 - getsentry/rrweb#233 - getsentry/rrweb#229

billyvg · 2024-12-17T19:57:00Z

fix code for nodejs tests
change fix direction to avoid issues with duplicate styles
format issues
swap waitForTimeout for waitForRAF in test that flaked
Add unit tests for new functions
Fix broken test causes by file formatting removing spaced

Co-authored-by: jaj1014 ajax@pendo.io
Co-authored-by: jaj1014 jaj1014@users.noreply.github.com

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

billyvg · 2024-12-17T19:59:07Z

Applying rrweb-io#1357 to our fork

chargome · 2024-12-18T09:40:56Z

+ if (!elementCssRules || !elementCssRules.length) return;
+ // style sheet w/ innerText styles to diff with actual and get only inserted styles
+ const tempStyleSheet = new CSSStyleSheet();
+ tempStyleSheet.replaceSync(styleElement.innerText);


This could be an issue for some safari users: https://caniuse.com/mdn-api_cssstylesheet_replacesync but I'd leave it in.

Good callout - I think this is OK for us since rrdom is only used on playback

We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

…83016) We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

…83016) We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

Includes the following: - getsentry/rrweb#239 - getsentry/rrweb#237 - getsentry/rrweb#238 - getsentry/rrweb#234 - rrweb-io/rrweb#1501 - rrweb-io/rrweb#1500 - rrweb-io/rrweb#1033 - getsentry/rrweb#233 - getsentry/rrweb#229

billyvg · 2024-12-17T19:57:00Z

fix code for nodejs tests
change fix direction to avoid issues with duplicate styles
format issues
swap waitForTimeout for waitForRAF in test that flaked
Add unit tests for new functions
Fix broken test causes by file formatting removing spaced

Co-authored-by: jaj1014 ajax@pendo.io
Co-authored-by: jaj1014 jaj1014@users.noreply.github.com

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

billyvg · 2024-12-17T19:59:07Z

Applying rrweb-io#1357 to our fork

chargome · 2024-12-18T09:40:56Z

+ if (!elementCssRules || !elementCssRules.length) return;
+ // style sheet w/ innerText styles to diff with actual and get only inserted styles
+ const tempStyleSheet = new CSSStyleSheet();
+ tempStyleSheet.replaceSync(styleElement.innerText);


This could be an issue for some safari users: https://caniuse.com/mdn-api_cssstylesheet_replacesync but I'd leave it in.

Good callout - I think this is OK for us since rrdom is only used on playback

We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

…83016) We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

…83016) We have an org that has a small handful of replays where the replayStepper causes massive perf issues to the extent that it freezes the browser. I narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream PR (getsentry/rrweb#233) seems to have exacerbated the problem. I have not been able to figure out the root cause for the perf issues, but it seems to be related to CSS and the mutations that add `style` elements. We will want to try to identify what exactly in these replays are causing the perf issues. In the meantime we can filter out these mutations. Since we are only interested in generating and extracting the HTML for certain breadcrumb events, the styles should have no affect on the data we are interested in using. Closes#82221

fix code for nodejs tests change fix direction to avoid issues with duplicate styles format issues swap waitForTimeout for waitForRAF in test that flaked Add unit tests for new functions Fix broken test causes by file formatting removing spaced --------- Co-authored-by: jaj1014 <ajax@pendo.io> Co-authored-by: jaj1014 <jaj1014@users.noreply.github.com>

Includes the following: - getsentry/rrweb#239 - getsentry/rrweb#237 - getsentry/rrweb#238 - getsentry/rrweb#234 - rrweb-io/rrweb#1501 - rrweb-io/rrweb#1500 - rrweb-io/rrweb#1033 - getsentry/rrweb#233 - getsentry/rrweb#229

billyvgand others added 2 commits December 17, 2024 14:56

update rrweb/types import
ed9f888

billyvg changed the title ~~fix: inserted styles lost when moving elements (#232)~~fix: inserted styles lost when moving elementsDec 17, 2024

billyvg marked this pull request as ready for review December 17, 2024 20:31

billyvg requested review from a team and chargome December 17, 2024 20:32

chargome approved these changes Dec 18, 2024
View reviewed changes

billyvg merged commit 8e9b645 into sentry-v2Dec 18, 2024

billyvg deleted the feat-merge-upstream-2891c362a3933b81175d8ea250432ff84535176b branch December 18, 2024 16:26

billyvg mentioned this pull request Jan 7, 2025
feat(replay): Filter out style mutations when extracting DOM nodes getsentry/sentry#83016
Merged

c298lee mentioned this pull request Feb 18, 2025
feat(replay): Update rrweb packages to 2.32.0 getsentry/sentry-javascript#15443
Merged

billyvgand others added 2 commits December 17, 2024 14:56

update rrweb/types import
ed9f888

billyvg changed the title ~~fix: inserted styles lost when moving elements (#232)~~fix: inserted styles lost when moving elementsDec 17, 2024

billyvg marked this pull request as ready for review December 17, 2024 20:31

billyvg requested review from a team and chargome December 17, 2024 20:32

chargome approved these changes Dec 18, 2024
View reviewed changes

billyvg merged commit 8e9b645 into sentry-v2Dec 18, 2024

billyvg deleted the feat-merge-upstream-2891c362a3933b81175d8ea250432ff84535176b branch December 18, 2024 16:26

billyvg mentioned this pull request Jan 7, 2025
feat(replay): Filter out style mutations when extracting DOM nodes getsentry/sentry#83016
Merged

c298lee mentioned this pull request Feb 18, 2025
feat(replay): Update rrweb packages to 2.32.0 getsentry/sentry-javascript#15443
Merged

billyvgand others added 2 commits December 17, 2024 14:56

update rrweb/types import
ed9f888

billyvg changed the title ~~fix: inserted styles lost when moving elements (#232)~~fix: inserted styles lost when moving elementsDec 17, 2024

billyvg marked this pull request as ready for review December 17, 2024 20:31

billyvg requested review from a team and chargome December 17, 2024 20:32

chargome approved these changes Dec 18, 2024
View reviewed changes

billyvg merged commit 8e9b645 into sentry-v2Dec 18, 2024

billyvg deleted the feat-merge-upstream-2891c362a3933b81175d8ea250432ff84535176b branch December 18, 2024 16:26

billyvg mentioned this pull request Jan 7, 2025
feat(replay): Filter out style mutations when extracting DOM nodes getsentry/sentry#83016
Merged

c298lee mentioned this pull request Feb 18, 2025
feat(replay): Update rrweb packages to 2.32.0 getsentry/sentry-javascript#15443
Merged

billyvgand others added 2 commits December 17, 2024 14:56

update rrweb/types import
ed9f888

billyvg changed the title ~~fix: inserted styles lost when moving elements (#232)~~fix: inserted styles lost when moving elementsDec 17, 2024

billyvg marked this pull request as ready for review December 17, 2024 20:31

billyvg requested review from a team and chargome December 17, 2024 20:32

chargome approved these changes Dec 18, 2024
View reviewed changes

billyvg merged commit 8e9b645 into sentry-v2Dec 18, 2024

billyvg deleted the feat-merge-upstream-2891c362a3933b81175d8ea250432ff84535176b branch December 18, 2024 16:26

billyvg mentioned this pull request Jan 7, 2025
feat(replay): Filter out style mutations when extracting DOM nodes getsentry/sentry#83016
Merged

c298lee mentioned this pull request Feb 18, 2025
feat(replay): Update rrweb packages to 2.32.0 getsentry/sentry-javascript#15443
Merged

billyvgand others added 2 commits December 17, 2024 14:56

update rrweb/types import
ed9f888

billyvg changed the title ~~fix: inserted styles lost when moving elements (#232)~~fix: inserted styles lost when moving elementsDec 17, 2024

billyvg marked this pull request as ready for review December 17, 2024 20:31

billyvg requested review from a team and chargome December 17, 2024 20:32

chargome approved these changes Dec 18, 2024
View reviewed changes

billyvg merged commit 8e9b645 into sentry-v2Dec 18, 2024

billyvg deleted the feat-merge-upstream-2891c362a3933b81175d8ea250432ff84535176b branch December 18, 2024 16:26

billyvg mentioned this pull request Jan 7, 2025
feat(replay): Filter out style mutations when extracting DOM nodes getsentry/sentry#83016
Merged

c298lee mentioned this pull request Feb 18, 2025
feat(replay): Update rrweb packages to 2.32.0 getsentry/sentry-javascript#15443
Merged

billyvgand others added 2 commits December 17, 2024 14:56

update rrweb/types import
ed9f888

billyvg changed the title ~~fix: inserted styles lost when moving elements (#232)~~fix: inserted styles lost when moving elementsDec 17, 2024

billyvg marked this pull request as ready for review December 17, 2024 20:31

billyvg requested review from a team and chargome December 17, 2024 20:32

chargome approved these changes Dec 18, 2024
View reviewed changes

billyvg merged commit 8e9b645 into sentry-v2Dec 18, 2024

billyvg deleted the feat-merge-upstream-2891c362a3933b81175d8ea250432ff84535176b branch December 18, 2024 16:26

billyvg mentioned this pull request Jan 7, 2025
feat(replay): Filter out style mutations when extracting DOM nodes getsentry/sentry#83016
Merged

c298lee mentioned this pull request Feb 18, 2025
feat(replay): Update rrweb packages to 2.32.0 getsentry/sentry-javascript#15443
Merged

billyvgand others added 2 commits December 17, 2024 14:56

update rrweb/types import
ed9f888

billyvg changed the title ~~fix: inserted styles lost when moving elements (#232)~~fix: inserted styles lost when moving elementsDec 17, 2024

billyvg marked this pull request as ready for review December 17, 2024 20:31

billyvg requested review from a team and chargome December 17, 2024 20:32

chargome approved these changes Dec 18, 2024
View reviewed changes

billyvg merged commit 8e9b645 into sentry-v2Dec 18, 2024

billyvg deleted the feat-merge-upstream-2891c362a3933b81175d8ea250432ff84535176b branch December 18, 2024 16:26

billyvg mentioned this pull request Jan 7, 2025
feat(replay): Filter out style mutations when extracting DOM nodes getsentry/sentry#83016
Merged

c298lee mentioned this pull request Feb 18, 2025
feat(replay): Update rrweb packages to 2.32.0 getsentry/sentry-javascript#15443
Merged

billyvgand others added 2 commits December 17, 2024 14:56

update rrweb/types import
ed9f888

billyvg changed the title ~~fix: inserted styles lost when moving elements (#232)~~fix: inserted styles lost when moving elementsDec 17, 2024

billyvg marked this pull request as ready for review December 17, 2024 20:31

billyvg requested review from a team and chargome December 17, 2024 20:32

chargome approved these changes Dec 18, 2024
View reviewed changes

billyvg merged commit 8e9b645 into sentry-v2Dec 18, 2024

billyvg deleted the feat-merge-upstream-2891c362a3933b81175d8ea250432ff84535176b branch December 18, 2024 16:26

billyvg mentioned this pull request Jan 7, 2025
feat(replay): Filter out style mutations when extracting DOM nodes getsentry/sentry#83016
Merged

c298lee mentioned this pull request Feb 18, 2025
feat(replay): Update rrweb packages to 2.32.0 getsentry/sentry-javascript#15443
Merged

Uh oh!

Conversation

billyvg commented Dec 17, 2024

Uh oh!

billyvg commented Dec 17, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

billyvg commented Dec 17, 2024

Uh oh!

billyvg commented Dec 17, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

billyvg commented Dec 17, 2024

Uh oh!

billyvg commented Dec 17, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

billyvg commented Dec 17, 2024

Uh oh!

billyvg commented Dec 17, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

billyvg commented Dec 17, 2024

Uh oh!

billyvg commented Dec 17, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!