Fix serialization and mutation of <textarea> elements #1351

eoghanmurray · 2023-11-09T13:42:44Z

Bug report: #1301

Fix serialization and mutation of <textarea> elements, taking account the duality that the value can be set in either the child node, or in the value parameter (not attribute)

This was prompted by the #1326 PR but goes much further by adding tests and clarifying that textarea values should always be serialized in the 'value' attribute in the snapshot, and rebuilt as a childNode (textareas are unusual compared with where the value is always in the value attribute/property)

So

always read from textarea.value property
when writing static html, always write the value property into the (single) childNode

In snapshots, I've chosen to always serialize the childNodes into a 'value' attribute, so that masking can be done consistently with other elements (I actually first went with the alternative of masking childNodes; the extra complexity can be seen in the addition of a new maskInputValue call in d5b93ac)

When text is typed into the textarea by the user, the textarea value is changed but the childnodes stay the same;
if a childNode mutation happens it may or may not affect the value property depending on whether text has already been typed by user. To satisfy this, value mutations are rebuilt into childNodes, and don't modify the .value property directly; that property should only be modified by a text IncrementalSource.Input event.

All of this should be covered by examples in the tests.

changeset-bot · 2023-11-09T13:42:48Z

🦋 Changeset detected

Latest commit: 9df40e4

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

This PR includes changesets to release 8 packages

Name	Type
rrweb-snapshot	Patch
rrweb	Patch
rrdom	Patch
rrdom-nodejs	Patch
rrweb-player	Patch
@rrweb/types	Patch
@rrweb/web-extension	Patch
rrvideo	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 · 2023-11-13T11:45:42Z

I've added a new aspect to rrweb/test/integration.test.ts in that it now tests the replayer as well as checking the snapshot; the replayer is needed to read out what the actual values of the textarea are after specific mutations are applied.

josephmathew900 · 2023-11-28T02:08:47Z

#1301 (comment)

@eoghanmurray Do we have any blockers to getting this PR merged? After merging this PR, in which version will the fix be available?

…the duality that the value can be set in either the child node, or in the value _parameter_ (not attribute)

- this is to fix up 'historical' recordings, as duplicate textarea content should no longer be being created at record time (see previous commit in this PR) - new test shows what the snapshot generated by previous versions of rrweb used to look like, hence 'bad' - original 0efe23f fix either didn't work or no longer works due to childNodes being appended subsequent to this part of the code

…he value was recorded as a child node - I didn't notice that form.html was used in other tests, so lucky that I noticed that those tests also should have the 'pre value' masked out

…build

…te (from it's DOM property) and not as a childNode. It should still be rebuilt as a childNode rather than a property

…e was extremely painful to get right from a typings point of view)

eoghanmurray · 2023-11-28T10:00:54Z

I've rebased based on upstream; we need a review from another core team member.

packages/rrweb/test/integration.test.ts

Juice10 · 2023-12-01T12:05:30Z

packages/rrweb-snapshot/test/snapshot.test.ts

+    return document.querySelector('textarea')!;
+  };
+
+  it('should record textarea values once', () => {


Maybe we can add some comments here to document that we are doing the inverse of browser behaviour for our serialising (we are using the textarea's value attribute, and ignoring child nodes during serialization, where the browser ignores the value attribute but uses the child text nodes)

…prehension of why we are doing things this way

Juice10 · 2023-12-01T12:05:47Z

packages/rrweb/test/events/bad-textarea.ts

+                    id: 6,
+                    type: 2,
+                    tagName: 'textarea',
+                    attributes: {
+                      value: 'dupe',
+                    },
+                    childNodes: [
+                      {
+                        type: 3,
+                        textContent: 'dupe should ignore',
+                        id: 7,
+                      },


Maybe we can add some comments here to document that we are doing the inverse of browser behaviour for our serialising (we are using the textarea's value attribute, and ignoring child nodes during serialization, where the browser ignores the value attribute but uses the child text nodes)

Juice10 · 2023-12-01T12:07:19Z

packages/rrweb/test/events/bad-textarea.ts

+                    type: 2,
+                    tagName: 'textarea',
+                    attributes: {
+                      value: 'dupe',


Suggested change

value: 'dupe',

value: "text that is used in rrweb's replay",

Juice10 · 2023-12-01T12:08:33Z

packages/rrweb/test/events/bad-textarea.ts

+                    childNodes: [
+                      {
+                        type: 3,
+                        textContent: 'dupe should ignore',


Suggested change

textContent: 'dupe should ignore',

textContent: 'ignored when rrweb's replay reads this serialized child node',

…io#1351)" This reverts commit a2be77b.

* Fix serialization and mutation of <textarea> elements taking account the duality that the value can be set in either the child node, or in the value _parameter_ (not attribute) * Backwards compatibility: Bug fix and regression test for rrweb-io#112 - this is to fix up 'historical' recordings, as duplicate textarea content should no longer be being created at record time - new test shows what the snapshot generated by previous versions of rrweb used to look like, hence 'bad' - original 0efe23f fix either didn't work or no longer works due to childNodes being appended subsequent to this part of the code - during review, we also verified that the `_cssText` case should still be handled okay, as there's currently no scenario where csstext is present with css child nodes of a <style> * Masking: Fix that textarea values were being missed by the masking system if the value was recorded as a child node - I didn't notice that form.html was used in other tests, so lucky that I noticed that those tests also should have the 'pre value' masked out * Simplify by always storing the textarea value in the `.value` attribute (from it's DOM property) and not as a childNode. It should still be rebuilt as a childNode rather than a property --------- Authored-by: eoghanmurray <[email protected]>

eoghanmurray force-pushed the textarea-doubles branch from 512f48b to b5a4594 Compare November 9, 2023 13:45

eoghanmurray requested a review from Yuyz0112 November 9, 2023 13:47

This was referenced Nov 9, 2023

textarea标签的默认文本在播放时翻倍出现 #112

Closed

bugfix: Removve redundant content so that the textarea content in the replay will no longer appear repeatedly. #1326

Closed

Textarea shows default value twice in replay #745

Closed

eoghanmurray force-pushed the textarea-doubles branch 3 times, most recently from 607f794 to b961dcd Compare November 11, 2023 16:36

eoghanmurray mentioned this pull request Nov 13, 2023

[Bug]: Textarea shows default value twice in replay #1301

Closed

1 task

eoghanmurray added 9 commits November 28, 2023 09:52

Fix serialization and mutation of <textarea> elements taking account …

476af5b

…the duality that the value can be set in either the child node, or in the value _parameter_ (not attribute)

Create rare-adults-sneeze.md

a807888

Fix that textarea values were being missed by the masking system if t…

f800b19

…he value was recorded as a child node - I didn't notice that form.html was used in other tests, so lucky that I noticed that those tests also should have the 'pre value' masked out

Need a longer seek here to account for slower recording during testing

d002630

Make rrweb-snapshot behave like rrweb in that yarn test causes a re…

4bc169a

…build

Simplify by always storing the textarea value in the .value attribu…

69c9aa3

…te (from it's DOM property) and not as a childNode. It should still be rebuilt as a childNode rather than a property

replaceChildNodes is not yet available in RRDom (this replacement cod…

ee4aaac

…e was extremely painful to get right from a typings point of view)

Not needed since 8e47ca1 - rrweb-io#1157

71203c7

eoghanmurray force-pushed the textarea-doubles branch from 897fa18 to 71203c7 Compare November 28, 2023 10:00

Juice10 reviewed Dec 1, 2023

View reviewed changes

packages/rrweb/test/integration.test.ts Outdated Show resolved Hide resolved

Update packages/rrweb/test/integration.test.ts

e9b0318

Juice10 reviewed Dec 1, 2023

View reviewed changes

Improvements to test documentation; with Justin's help for better com…

302f855

…prehension of why we are doing things this way

Juice10 reviewed Dec 1, 2023

View reviewed changes

Juice10 approved these changes Dec 1, 2023

View reviewed changes

Apply formatting changes

9df40e4

eoghanmurray merged commit a2be77b into rrweb-io:master Dec 1, 2023

This was referenced Dec 4, 2023

Version Packages (alpha) #1291

Merged

Version Packages (alpha) Cristy94/rrweb#3

Open

Version Packages (alpha) getsentry/rrweb#136

Closed

github-actions bot mentioned this pull request Jan 9, 2024

Version Packages (alpha) PostHog/rrweb#1

Open

github-actions bot mentioned this pull request Feb 28, 2024

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

Open

This was referenced Apr 9, 2024

protect against no parent node #1445

Merged

User Session Recording Results in Error PostHog/posthog#21447

Closed

billyvg added a commit to getsentry/rrweb that referenced this pull request Apr 26, 2024

Revert "Fix serialization and mutation of <textarea> elements (rrweb-…

e26708f

…io#1351)" This reverts commit a2be77b.

YunFeng0817 mentioned this pull request Jun 18, 2024

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

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix serialization and mutation of <textarea> elements #1351

Fix serialization and mutation of <textarea> elements #1351

eoghanmurray commented Nov 9, 2023 •

edited

Loading

changeset-bot bot commented Nov 9, 2023 •

edited

Loading

eoghanmurray commented Nov 13, 2023

josephmathew900 commented Nov 28, 2023

eoghanmurray commented Nov 28, 2023

Juice10 Dec 1, 2023

Juice10 Dec 1, 2023

Juice10 Dec 1, 2023

Juice10 Dec 1, 2023

	textContent: 'dupe should ignore',
	textContent: 'ignored when rrweb's replay reads this serialized child node',

Fix serialization and mutation of <textarea> elements #1351

Fix serialization and mutation of <textarea> elements #1351

Conversation

eoghanmurray commented Nov 9, 2023 • edited Loading

changeset-bot bot commented Nov 9, 2023 • edited Loading

🦋 Changeset detected

eoghanmurray commented Nov 13, 2023

josephmathew900 commented Nov 28, 2023

eoghanmurray commented Nov 28, 2023

Juice10 Dec 1, 2023

Choose a reason for hiding this comment

Juice10 Dec 1, 2023

Choose a reason for hiding this comment

Juice10 Dec 1, 2023

Choose a reason for hiding this comment

Juice10 Dec 1, 2023

Choose a reason for hiding this comment

eoghanmurray commented Nov 9, 2023 •

edited

Loading

changeset-bot bot commented Nov 9, 2023 •

edited

Loading