fix: duplicate textContent for style element cause incremental style mutation invalid #1417

YunFeng0817 · 2024-02-23T13:56:22Z

Background

There are two interesting facts about style elements.

When we change the content of a style element using the StyleSheet API, its textContent is not updated.
If we change its content by directly modifying textContent, its style changes made through the StyleSheet API will be overwritten.

Currently, we have two different methods to serialise style content for style element.

We can get the content through its stylesheet attribute and store the result as _cssText.
we create or replace the textContent with the value we get from its stylesheet attribute.

These two methods are used in different cases:

For <style></style> // empty textContent styles content is inserted through CSSStyleSheet API, we can use the first method.
For <style>div { color: 'red'}</style> // whose style content may be mutated through CSSStyleSheet API, we can use the second method.
If the style element has multiple text children, we just keep these texts without replacement.

To avoid the collision or duplicate serialisation with both two methods, we check if the textContent is empty or not.

Issue

In the textContent check for the first method, the textContent is trimmed.

rrweb/packages/rrweb-snapshot/src/snapshot.ts

Lines 671 to 682 in 47b0fbb

    
           if ( 
        
             tagName === 'style' && 
        
             (n as HTMLStyleElement).sheet && 
        
             // TODO: Currently we only try to get dynamic stylesheet when it is an empty style element 
        
             !(n.innerText || n.textContent || '').trim().length 
        
           ) { 
        
             const cssText = stringifyStylesheet( 
        
               (n as HTMLStyleElement).sheet as CSSStyleSheet, 
        
             ); 
        
             if (cssText) { 
        
               attributes._cssText = absoluteToStylesheet(cssText, getHref(doc)); 
        
             }

In the textContent check for the second method, the textContent is not trimmed.

rrweb/packages/rrweb-snapshot/src/snapshot.ts

Lines 568 to 587 in 47b0fbb

    
           if (isStyle && textContent) { 
        
             try { 
        
               // try to read style sheet 
        
               if (n.nextSibling || n.previousSibling) { 
        
                 // This is not the only child of the stylesheet. 
        
                 // We can't read all of the sheet's .cssRules and expect them 
        
                 // to _only_ include the current rule(s) added by the text node. 
        
                 // So we'll be conservative and keep textContent as-is. 
        
               } else if ((n.parentNode as HTMLStyleElement).sheet?.cssRules) { 
        
                 textContent = stringifyStylesheet( 
        
                   (n.parentNode as HTMLStyleElement).sheet!, 
        
                 ); 
        
               } 
        
             } catch (err) { 
        
               console.warn( 
        
                 `Cannot get CSS styles from text's parentNode. Error: ${err as string}`, 
        
                 n, 
        
               ); 
        
             } 
        
             textContent = absoluteToStylesheet(textContent, getHref(options.doc));

If we have this <style> \n </style>, its style content is serialised by both methods. Then in the replayer, it have two child texts with exact the same content. While applying further style mutations, they usually don't have effect.

Fix

The reason for this issue is complicated and hard to reproduce. To keep the test case clear for the reproduction, in this pull request, I'm planning to fix the issue on the replayer side only. Cause there are lots of exist problematic events that needs this fix.
I can create a seperate PR to fix this on the recording side.

One interesting thing is that this issue has been partially fixed by #1351
I found this issue when I was trying to record this page https://us-west-1.console.aws.amazon.com/console/home?region=us-west-1#

style element's rules can be changed both by textContent and sheet API duplicate textContent can cause make dynamic rule mutation invalid

changeset-bot · 2024-02-23T13:56:26Z

🦋 Changeset detected

Latest commit: 02a50bc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 18 packages

Name	Type
rrweb-snapshot	Patch
rrweb	Patch
rrdom	Patch
rrdom-nodejs	Patch
rrweb-player	Patch
@rrweb/all	Patch
@rrweb/replay	Patch
@rrweb/record	Patch
@rrweb/types	Patch
@rrweb/packer	Patch
@rrweb/web-extension	Patch
rrvideo	Patch
@rrweb/rrweb-plugin-console-record	Patch
@rrweb/rrweb-plugin-console-replay	Patch
@rrweb/rrweb-plugin-sequential-id-record	Patch
@rrweb/rrweb-plugin-sequential-id-replay	Patch
@rrweb/rrweb-plugin-canvas-webrtc-record	Patch
@rrweb/rrweb-plugin-canvas-webrtc-replay	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

eoghanmurray · 2024-03-22T17:26:21Z

I think I need a little more explanation or a test case to review this properly

packages/rrweb/src/replay/index.ts

eoghanmurray · 2024-04-05T13:06:11Z

I'm working on similar stuff and am working on a test case

See #1437

…rweb-io#1417

eoghanmurray · 2024-04-05T17:07:11Z

The new integration test in #1437 doesn't do much as-is as it passes both before and after the changesets in this PR, but maybe we could use it to demonstrate the problem you are fixing in this PR...

see comment
// TODO: we could get a lot more elaborate here with mixed textContent and insertRule mutations there

…rweb-io#1417

eoghanmurray · 2024-06-11T09:40:25Z

After conversation with @YunFeng0817
We need a test to demonstrate exactly what is going wrong and I think I'll be able to solve it on top of the other PRs I've been working on recently e.g. #1437

eoghanmurray · 2024-06-11T09:40:47Z

Sorry I hit the wrong button, didn't mean to close

…play-bug

…rweb-io#1417

.changeset/cuddly-bikes-fail.md

packages/rrweb/src/replay/index.ts

packages/rrweb/test/integration.test.ts

Juice10 · 2024-07-03T07:50:37Z

packages/rrweb/src/replay/index.ts

+              cssText.nodeType === parent.TEXT_NODE &&
+              !mirror.hasNode(cssText)
+            ) {
+              target.textContent = cssText.textContent;


Isn't this always going to be the same?

Maybe we should raise a warning instead in case these are not the same?

It should be the same, but I’m not entirely sure if there might be any corner cases that could cause issues. I believe that _cssText should always contain the most accurate style content, so I use that value to avoid any potential problems.

I've tweaked the color in d778c77 to show which one we intend to use.
I don't think a warning is worth it; this fixup is for 'historic' bad data and the only case we know is that they are both the same

YunFeng0817 · 2024-07-03T09:01:15Z

@Juice10 I've applied review suggestions. Can you please confirm again?

eoghanmurray · 2024-07-03T15:27:53Z

Looks like Justin has gone ahead an cherry picked the new test from this PR on top of #1437

Would that indicate that the PR covers the problem, and that this PR is unneeded?

…rweb-io#1417

packages/rrweb/src/replay/index.ts

… replay them correctly' test into a dedicated 'backwards compatibility' version to ensure older recordings can still be replayed correctly even when the duplicate data generated is fixed in #1437

eoghanmurray

A few tweaks if you could accept them

eoghanmurray · 2024-07-08T15:33:09Z

packages/rrweb/src/replay/index.ts

+           * If both _cssText and textContent are present for a style element due to some existing bugs, the element will have two child text nodes.
+           * We need to remove the textNode created by _cssText to avoid issue.
+           */
+          for (const cssText of childNodeArray as (Node & RRNode)[]) {


given childNodeArray is of length 1, couldn't we go directly to
const cssText = childNodeArray[0] as (Node & RRNode) without the for loop?

But maybe I should be asking why you are checking that the length is only one?

is it a proxy for '_cssText attribute was present'?

Ok I see that the !mirror.hasNode(cssText) check makes sure it's not a previously legitimately added text content

packages/rrweb/src/replay/index.ts

…rweb-io#1417

…mutation invalid (rrweb-io#1417) fix style element corner case - historically we have recorded duplicated css content in certain cases (demonstrated by the attached replayer test). This fix ensures that the replayer doesn't doubly add the content, which can cause problems when further mutations occur --------- Review and further tests contributed by: Eoghan Murray <[email protected]>

…rweb-io#1417

…mutation invalid (rrweb-io#1417) fix style element corner case - historically we have recorded duplicated css content in certain cases (demonstrated by the attached replayer test). This fix ensures that the replayer doesn't doubly add the content, which can cause problems when further mutations occur --------- Review and further tests contributed by: Eoghan Murray <[email protected]>

@Paulhejia

* Skip mask check on leaf elements (rrweb-io#1512) * Minor fixup for rrweb-io#1349; the 'we can avoid the check on leaf elements' optimisation wasn't being applied as `n.childNodes` was always truthy even when there were no childNodes. Changing it to `n.childNodes.length` directly there (see rrweb-io#1402) actually caused a bug as during a mutation, we serialize the text node directly, and need to jump to the parentElement to do the check. This is why I've reimplemented this optimisation inside `needMaskingText` where we are already had an `isElement` test Thanks to @Paulhejia (https://github.com/Paulhejia/rrweb/) for spotting that `Boolean(n.childNodes)` is aways true. * Assuming all jest should have been removed in rrweb-io#1033 (rrweb-io#1511) * all references to jest should have been removed in rrweb-io#1033 * clarify that `cross-env` is used to ensure that environmental variables get applied on Windows (previous usage of cross-env was removed in rrweb-io#1033) * Fix async assertions in test files (rrweb-io#1510) * fix: await assertSnapshot in test files for async assertions * Fix maskInputFn is ignored during the creation of the full snapshot (rrweb-io#1386) Fix that the optional `maskInputFn` was being accidentally ignored during the creation of the full snapshot * Improve development tooling (rrweb-io#1516) - Running `yarn build` in a `packages/*/` directory will trigger build of all dependencies too, and cache them if possible. - Fix for `yarn dev` breaking for `rrweb` package whenever changing files in `rrweb` package - Update typescript, turbo, vite and vite-plugin-dts - Require `workspaces-to-typescript-project-references` from `prepublish` * Version Packages (alpha) (rrweb-io#1513) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * Keep all packages in sync * feat: add new css parser - postcss (rrweb-io#1458) * feat: add new css parser * make selectors change * selectors and tests * media changes * remove old css references * better variable name * use postcss and port tests * fix media test * inline plugins * fix failing multiline selector * correct test result * move tests to correct file * cleanup all tests * remove unused css-tree * update bundle * cleanup dependencies * revert config files to master * remove d.ts files * update snapshot * reset rebuilt test * apply fuzzy css matching * remove extra test * Fix imports * Newer versions of nswapi break rrdom-nodejs tests. Example: FAIL test/document-nodejs.test.ts > RRDocument for nodejs environment > RRDocument API > querySelectorAll TypeError: e[api] is not a function ❯ byTag ../../node_modules/nwsapi/src/nwsapi.js:390:37 ❯ Array.<anonymous> ../../node_modules/nwsapi/src/nwsapi.js:327:113 ❯ collect ../../node_modules/nwsapi/src/nwsapi.js:1578:32 ❯ Object._querySelectorAll [as select] ../../node_modules/nwsapi/src/nwsapi.js:1533:36 ❯ RRDocument.querySelectorAll src/document-nodejs.ts:96:24 * Migrate from jest to vitest * Order of selectors has changed with postcss * Remove unused eslint --------- Co-authored-by: Justin Halsall <[email protected]> * fix: console assert only logs when arg 0 is falsy (rrweb-io#1530) * fix: console assert only logs when arg 0 is falsy * [Feature] Include takeFullSnapshot function in rrweb (rrweb-io#1527) * export takeFullSnapshot function in rrweb * chore: reduce flakey test due to '[vite] connected' message (rrweb-io#1525) * fix: duplicate textContent for style element cause incremental style mutation invalid (rrweb-io#1417) fix style element corner case - historically we have recorded duplicated css content in certain cases (demonstrated by the attached replayer test). This fix ensures that the replayer doesn't doubly add the content, which can cause problems when further mutations occur --------- Review and further tests contributed by: Eoghan Murray <[email protected]> * Added support for deprecated addRule & removeRule methods (rrweb-io#1515) * Added support for deprecated addRule & removeRule methods * Respect addRule default value * fix: nested stylesheets should have absolute URLs (rrweb-io#1533) * Replace relative URLs with absolute URLs when stringifying stylesheets * Add test to show desired behavior for imported stylesheets from seperate directory * Rename `absoluteToStylesheet` to `absolutifyURLs` and call it once after stringifying imported stylesheet * Don't create the intermediary array of the spread operator * Formalize that `stringifyRule` should expect a sheet href * Ensure a <style> element can also import and gets it's url absolutized * Handle case where non imported stylesheet has relative urls that need to be absolutified * Clarify in test files where jpegs are expected to appear in absolutified urls * Move absolutifyURLs call for import rules out of trycatch * Add a benchmarking test for stringifyStylesheet * Avoid the duplication on how to fall back --------- Co-authored-by: Eoghan Murray <[email protected]> Co-authored-by: eoghanmurray <[email protected]> * Support top-layer <dialog> recording & replay (rrweb-io#1503) * chore: its important to run `yarn build:all` before running `yarn dev` * feat: trigger showModal from rrdom and rrweb * feat: Add support for replaying modal and non modal dialog elements * chore: Update dev script to remove CLEAR_DIST_DIR flag * Get modal recording and replay working * DRY up dialog test and dedupe snapshot images * feat: Refactor dialog test to use updated attribute name * feat: Update dialog test to include rr_open attribute * chore: Add npm dependency [email protected] * Add more test cases for dialog * Clean up naming * Refactor dialog open code * Revert changed code that doesn't do anything * Add documentation for unimplemented type * chore: Remove unnecessary comments in dialog.test.ts * rename rr_open to rr_openMode * Replace todo with a skipped test * Add better logging for CI * Rename rr_openMode to rr_open_mode rrdom downcases all attribute names which made `rr_openMode` tricky to deal with * Remove unused images * Move after iframe append based on @YunFeng0817's comment rrweb-io#1503 (comment) * Remove redundant dialog handling from rrdom. rrdom already handles dialog element creation it's self * Rename variables for dialog handling in rrweb replay module * Update packages/rrdom/src/document.ts --------- Co-authored-by: Eoghan Murray <[email protected]> * Added session downloader for chrome extension (rrweb-io#1522) * Added session downloader for chrome extension - The session list now has a button to download sessions as .json files for use with rrweb-player - Improved styling for the delete and download buttons * Reverse monkey patch built in methods to support LWC (rrweb-io#1509) * Get around monkey patched Nodes * inlineImages: Setting of `image.crossOrigin` is not always necessary (rrweb-io#1468) Setting of the `crossorigin` attribute is not necessary for same-origin images, and causes an immediate image reload (albeit from cache) necessitating the use of a load event listener which subsequently mutates the snapshot. This change allows us to avoid the mutation of the snapshot for the same-origin case. * Modify inlineImages test to remove delay and show that we can inline images without mutation * Add an explicit test for when the `image.crossOrigin = 'anonymous';` method is necessary. Uses a combination of about:blank and our test server to simulate a cross-origin context * Other test changes: there were some spurious rrweb mutations being generated by the addition of the crossorigin attribute that are now elimnated from the rrweb/__snapshots__/integration.test.ts.snap after this PR - this is good * Move `childNodes` to @rrweb/utils * Use non-monkey patched versions of the `childNodes`, `parentNode` `parentElement` `textContent` accessors * Add getRootNode and contains, and add comprehensive todo list * chore: Update turbo.json tasks for better build process * Update caniuse-lite * chore: Update eslint-plugin-compat to version 5.0.0 * chore: Bump @rrweb/utils version to 2.0.0-alpha.15 * delete unused yarn.lock files * Set correct @rrweb/utils version in package.json * Migrate over some accessors to reverse-monkey-patched version * Add missing functions * Fix illegal invocation error * Revert closer to what it was. This feels incorrect to me (Justin Halsall), but some of the tests break without it so I'm restoring this to be closer to its original here: https://github.com/rrweb-io/rrweb/blame/cfd686d488a9b88dba6b6f8880b5e4375dd8062c/packages/rrweb-snapshot/src/snapshot.ts#L1011 * Reverse monkey patch all methods LWC hijacks * Make tests more stable * Safely handle rrdom nodes in hasShadowRoot * Remove duplicated test * Use variable `serverURL` in test * Use monorepo default browserlist * Fix typing issue for new typescript * Remove unused package * Remove unused code * Add prefix to reverse-monkey-patched methods to make them more explicit * Add default exports to @rrweb/utils --------- Co-authored-by: Eoghan Murray <[email protected]> * Version Packages (alpha) (rrweb-io#1526) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * Single style capture (rrweb-io#1437) Support a contrived/rare case where a <style> element has multiple text node children (this is usually only possible to recreate via javascript append) ... this PR fixes cases where there are subsequent text mutations to these nodes; previously these would have been lost * In this scenario, a new CSS comment may now be inserted into the captured `_cssText` for a <style> element to show where it should be broken up into text elements upon replay: `/* rr_split */` * The new 'can record and replay style mutations' test is the principal way to the problematic scenarios, and is a detailed 'catch-all' test with many checks to cover most of the ways things can fail * There are new tests for splitting/rebuilding the css using the rr_split marker * The prior 'dynamic stylesheet' route is now the main route for serializing a stylesheet; dynamic stylesheet were missed out in rrweb-io#1533 but that case is now covered with this PR This PR was originally extracted from rrweb-io#1475 so the initial motivation was to change the approach on stringifying <style> elements to do so in a single place. This is also the motivating factor for always serializing <style> elements via the `_cssText` attribute rather than in it's childNodes; in rrweb-io#1475 we will be delaying populating `_cssText` for performance and instead recorrding them as assets. Thanks for the detailed review to Justin Halsall <[email protected]> & Yun Feng <https://github.com/YunFeng0817> * Simplify the hover replacement function (rrweb-io#1535) Simplify the hover replacement function, which has been borrowed from postcss-pseudo-classes Note: 'parses nested commas in selectors correctly' was failing after this PR, however I don't think that the previous behaviour was desirable, so have added a new test to formalize this expectation * fix some typos in optimize-storage.md (rrweb-io#1565) * fix some typos in optimize-storage.md * Update docs/recipes/optimize-storage.md * Create metal-mugs-mate.md --------- Co-authored-by: Justin Halsall <[email protected]> * fix(rrdom): Ignore invalid DOM attributes when diffing (rrweb-io#1561) * fix(rrdom): Ignore invalid DOM attributes when diffing (rrweb-io#213) We encountered an issue where replays with invalid attributes (e.g. `@click`) would break rendering the replay after seeking. The exception bubbles up to [here](https://github.com/rrweb-io/rrweb/blob/62093d4385a09eb0980c2ac02d97eea5ce2882be/packages/rrweb/src/replay/index.ts#L270-L279), which means the replay will continue to play, but the replay mirror will be incomplete. Closes https://github.com/getsentry/team-replay/issues/458 * add changeset * fix(snapshot): dimensions for blocked element not being applied (rrweb-io#1331) fix for replay of a blocked element when using 'fast forward' (rrdom) - Dimensions were not being properly applied when you seek to a position in the replay. Need to use `setProperty` rather than trying to set the width/height directly * ref: isParentRemoved to cache subtree (rrweb-io#1543) * ref: isParentRemoved to cache subtree * ref: cache at insertion too * ref: remove wrapper function --------- Co-authored-by: Justin Halsall <[email protected]> * changeset to 2.0.13 * fix snapshot build --------- Co-authored-by: Eoghan Murray <[email protected]> Co-authored-by: Justin Halsall <[email protected]> Co-authored-by: Alexey Babik <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: David Newell <[email protected]> Co-authored-by: Paul D'Ambra <[email protected]> Co-authored-by: Christopher Arredondo <[email protected]> Co-authored-by: Yun Feng <[email protected]> Co-authored-by: minja malešević <[email protected]> Co-authored-by: Jeff Nguyen <[email protected]> Co-authored-by: eoghanmurray <[email protected]> Co-authored-by: Arun Kunigiri <[email protected]> Co-authored-by: Riadh Mouamnia <[email protected]> Co-authored-by: Billy Vong <[email protected]> Co-authored-by: Jonas <[email protected]> Co-authored-by: Shay Malchi <[email protected]>

fix: style element corner case

4272390

style element's rules can be changed both by textContent and sheet API duplicate textContent can cause make dynamic rule mutation invalid

eoghanmurray reviewed Apr 5, 2024

View reviewed changes

packages/rrweb/src/replay/index.ts Show resolved Hide resolved

eoghanmurray added a commit to eoghanmurray/rrweb that referenced this pull request Apr 5, 2024

Add motivating test which can be used against this PR as well as in r…

6a13cc8

…rweb-io#1417

eoghanmurray mentioned this pull request Apr 5, 2024

Single style capture #1437

Merged

eoghanmurray added a commit to eoghanmurray/rrweb that referenced this pull request Apr 9, 2024

Add motivating test which can be used against this PR as well as in r…

f66262b

…rweb-io#1417

eoghanmurray added a commit to eoghanmurray/rrweb that referenced this pull request Apr 12, 2024

Add motivating test which can be used against this PR as well as in r…

4041fc5

…rweb-io#1417

eoghanmurray added a commit to eoghanmurray/rrweb that referenced this pull request May 7, 2024

Add motivating test which can be used against this PR as well as in r…

65aa2a4

…rweb-io#1417

eoghanmurray added a commit to eoghanmurray/rrweb that referenced this pull request May 8, 2024

Add motivating test which can be used against this PR as well as in r…

e3dd642

…rweb-io#1417

eoghanmurray added a commit to eoghanmurray/rrweb that referenced this pull request May 14, 2024

Add motivating test which can be used against this PR as well as in r…

bef87ba

…rweb-io#1417

eoghanmurray added a commit to eoghanmurray/rrweb that referenced this pull request May 22, 2024

Add motivating test which can be used against this PR as well as in r…

2f84ec1

…rweb-io#1417

eoghanmurray added a commit to eoghanmurray/rrweb that referenced this pull request May 22, 2024

Add motivating test which can be used against this PR as well as in r…

aeaacc8

…rweb-io#1417

eoghanmurray added a commit to eoghanmurray/rrweb that referenced this pull request May 23, 2024

Add motivating test which can be used against this PR as well as in r…

0fef82c

…rweb-io#1417

eoghanmurray added a commit to eoghanmurray/rrweb that referenced this pull request May 23, 2024

Add motivating test which can be used against this PR as well as in r…

4a3bd11

…rweb-io#1417

eoghanmurray added a commit to eoghanmurray/rrweb that referenced this pull request Jun 11, 2024

Add motivating test which can be used against this PR as well as in r…

5fa09f6

…rweb-io#1417

eoghanmurray closed this Jun 11, 2024

eoghanmurray reopened this Jun 11, 2024

YunFeng0817 and others added 8 commits June 11, 2024 23:59

Merge branch 'master' into fix-styleelement-replay-bug

0c90863

Apply formatting changes

8c5a69f

fix: extension doesn't work after vite bump

c294538

Merge remote-tracking branch 'origin/master' into fix-styleelement-re…

5d18b46

…play-bug

create an integration test to reproduce the issue

8825d53

remove duplicate fix

3e00f09

improve test case and improve fix

a83dc52

Merge remote-tracking branch 'origin/master' into fix-styleelement-re…

9331f17

…play-bug

eoghanmurray added a commit to eoghanmurray/rrweb that referenced this pull request Jun 26, 2024

Add motivating test which can be used against this PR as well as in r…

1ef6c3b

…rweb-io#1417

eoghanmurray added a commit to eoghanmurray/rrweb that referenced this pull request Jun 26, 2024

Add motivating test which can be used against this PR as well as in r…

496d897

…rweb-io#1417

YunFeng0817 added 2 commits July 3, 2024 00:53

Merge branch 'master' into fix-styleelement-replay-bug

55dbb38

remove redundant text nodes for script node

71245d7

Juice10 reviewed Jul 3, 2024

View reviewed changes

apply review suggestions

d1fba35

eoghanmurray added a commit to eoghanmurray/rrweb that referenced this pull request Jul 6, 2024

Add motivating test which can be used against this PR as well as in r…

31f6e6a

…rweb-io#1417

eoghanmurray reviewed Jul 8, 2024

View reviewed changes

packages/rrweb/src/replay/index.ts Outdated Show resolved Hide resolved

eoghanmurray added 3 commits July 8, 2024 16:21

Copy the bad data generated by the 'should record style mutations and…

1e8a670

… replay them correctly' test into a dedicated 'backwards compatibility' version to ensure older recordings can still be replayed correctly even when the duplicate data generated is fixed in #1437

Rename for clarity

5211578

Tweak color to be explicit about which one we intend to keep

d778c77

eoghanmurray approved these changes Jul 8, 2024

View reviewed changes

eoghanmurray and others added 2 commits July 8, 2024 17:58

Eoghan's tweaks to comments

2a91f6f

Apply formatting changes

02a50bc

YunFeng0817 merged commit 40bbc25 into master Jul 8, 2024

YunFeng0817 deleted the fix-styleelement-replay-bug branch July 8, 2024 21:27

This was referenced Jul 5, 2024

Version Packages (alpha) #1526

Merged

Version Packages (alpha) NinjaSlayerSang/rrweb#1

Open

eoghanmurray added a commit to eoghanmurray/rrweb that referenced this pull request Jul 8, 2024

Add motivating test which can be used against this PR as well as in r…

5942532

…rweb-io#1417

eoghanmurray added a commit to eoghanmurray/rrweb that referenced this pull request Jul 9, 2024

Add motivating test which can be used against this PR as well as in r…

18b0906

…rweb-io#1417

This was referenced Jun 24, 2024

Version Packages (alpha) pendo-io/rrweb#10

Open

Version Packages (alpha) getsentry/rrweb#136

Closed

eoghanmurray added a commit to eoghanmurray/rrweb that referenced this pull request Jul 26, 2024

Add motivating test which can be used against this PR as well as in r…

666e29a

…rweb-io#1417

eoghanmurray added a commit to eoghanmurray/rrweb that referenced this pull request Aug 2, 2024

Add motivating test which can be used against this PR as well as in r…

945bde3

…rweb-io#1417

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: duplicate textContent for style element cause incremental style mutation invalid #1417

fix: duplicate textContent for style element cause incremental style mutation invalid #1417

YunFeng0817 commented Feb 23, 2024 •

edited

Loading

changeset-bot bot commented Feb 23, 2024 •

edited

Loading

eoghanmurray commented Mar 22, 2024

eoghanmurray commented Apr 5, 2024 •

edited

Loading

eoghanmurray commented Apr 5, 2024

eoghanmurray commented Jun 11, 2024

eoghanmurray commented Jun 11, 2024

Juice10 Jul 3, 2024

Juice10 Jul 3, 2024

YunFeng0817 Jul 3, 2024

eoghanmurray Jul 8, 2024

YunFeng0817 commented Jul 3, 2024

eoghanmurray commented Jul 3, 2024 •

edited

Loading

eoghanmurray left a comment

eoghanmurray Jul 8, 2024

eoghanmurray Jul 8, 2024

eoghanmurray Jul 8, 2024

eoghanmurray Jul 8, 2024

	if (
	tagName === 'style' &&
	(n as HTMLStyleElement).sheet &&
	// TODO: Currently we only try to get dynamic stylesheet when it is an empty style element
	!(n.innerText \|\| n.textContent \|\| '').trim().length
	) {
	const cssText = stringifyStylesheet(
	(n as HTMLStyleElement).sheet as CSSStyleSheet,
	);
	if (cssText) {
	attributes._cssText = absoluteToStylesheet(cssText, getHref(doc));
	}

	if (isStyle && textContent) {
	try {
	// try to read style sheet
	if (n.nextSibling \|\| n.previousSibling) {
	// This is not the only child of the stylesheet.
	// We can't read all of the sheet's .cssRules and expect them
	// to _only_ include the current rule(s) added by the text node.
	// So we'll be conservative and keep textContent as-is.
	} else if ((n.parentNode as HTMLStyleElement).sheet?.cssRules) {
	textContent = stringifyStylesheet(
	(n.parentNode as HTMLStyleElement).sheet!,
	);
	}
	} catch (err) {
	console.warn(
	`Cannot get CSS styles from text's parentNode. Error: ${err as string}`,
	n,
	);
	}
	textContent = absoluteToStylesheet(textContent, getHref(options.doc));

fix: duplicate textContent for style element cause incremental style mutation invalid #1417

fix: duplicate textContent for style element cause incremental style mutation invalid #1417

Conversation

YunFeng0817 commented Feb 23, 2024 • edited Loading

Background

Issue

Fix

changeset-bot bot commented Feb 23, 2024 • edited Loading

🦋 Changeset detected

eoghanmurray commented Mar 22, 2024

eoghanmurray commented Apr 5, 2024 • edited Loading

eoghanmurray commented Apr 5, 2024

eoghanmurray commented Jun 11, 2024

eoghanmurray commented Jun 11, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

YunFeng0817 commented Jul 3, 2024

eoghanmurray commented Jul 3, 2024 • edited Loading

eoghanmurray left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

YunFeng0817 commented Feb 23, 2024 •

edited

Loading

changeset-bot bot commented Feb 23, 2024 •

edited

Loading

eoghanmurray commented Apr 5, 2024 •

edited

Loading

eoghanmurray commented Jul 3, 2024 •

edited

Loading