PostHog
Session recording input masking is flaky
Bug description
I noticed that sometimes the default input (textarea) masking in session recordings doesn't work and shows the actual text. I can't reproduce it myself, but here's a recording that shows it: https://eu.posthog.com/project/63349/replay/01991e61-16cf-75a2-bd88-edb707fb85d7?t=554 - I can add whoever investigates to the project if necessary.
How to reproduce
dunno
Related sub-libraries
- [ ] All of them
- [x] posthog-js (web)
- [ ] posthog-js-lite (web lite)
- [ ] posthog-node
- [ ] posthog-react-native
- [ ] @posthog/react
- [ ] @posthog/ai
- [ ] @posthog/nextjs-config
Additional context
The app is a chrome extension, and the code lives in https://github.com/zizzfizzix/scrape-similar
Thank you for your bug report – we love squashing them!
hey,
it looks like your project is set to the default with is to only mask text inputs so it wouldn't mask text areas
you can change the masking to mask all text at https://eu.posthog.com/project/63349/replay/settings#selectedSetting=replay-masking
or you can provide specific options when initialising the client if you want to control which types of input or text matching is applied
Hey, I do have a masking class set in options which wasn't applied to inputs as they just worked.
If you can open the recording you'll see that the same text area is being masked most of the session and then when the user loads a config that overrides the input text all of a sudden it becomes visible. I couldn't reproduce it with my test account though, it is masked the whole time for me.
It doesn't feel like the problem is with the input field being a text area since it's being masked up to a certain point?
inputs and textareas aren't the same thing for masking
so if you don't have explicit masking for textareas they won't be masked. the most likely thing here is that the classes on the element or type of the element is changing
i don't know your site so it's easy sometimes to miss things... can you share the timestamps where it is and isn't masked in a recording so we can help identify things
I might be mistaken but according to https://github.com/PostHog/posthog-js/blob/3740abc5309b0af105a52aa79472366de1932e95/packages/browser/src/extensions/replay/sessionrecording.ts#L920 maskAllInputs is true by default and according to https://github.com/rrweb-io/rrweb/blob/76df9799ecc14930fa914e5623a73ea7726e3747/packages/rrweb/src/record/index.ts#L155 textarea should be masked when that option is enabled.
While looking for the code in rrweb I stumbled upon https://github.com/rrweb-io/rrweb/issues/1609 - this sort of looks like a similar case.
The recording link I shared starts exactly where the textarea is masked and becomes unmasked.
well, it's not a hidden input so I don't think https://github.com/rrweb-io/rrweb/issues/1609 would apply here
there's no change in CSS that I can spot when the content is captured unmasked
i do notice that when we take a fullsnapshot the content switches back to being masked
and it's only unmasked when someone is clicking in the menu
can you describe how the click in the menu is updating the DOM? i'm wondering if it sidesteps the mutation observer so it's not triggering the recording code that would mask it
does this happen for every recording for you? is it a site we can log into so we can look at what is happening?
it's a React useEffect and useState combo that updates the value in the textarea when a preset is loaded i.e. config changes:
https://github.com/zizzfizzix/scrape-similar/blob/02faac8df60552101a15d61bf6339969309b9840/src/components/ConfigForm.tsx#L522
https://github.com/zizzfizzix/scrape-similar/blob/02faac8df60552101a15d61bf6339969309b9840/src/components/ConfigForm.tsx#L120
This app is a sidepanel of a chrome extension https://chromewebstore.google.com/detail/scrape-similar/bhgobenflkkhfcgkikejaaejenoddcmo - you can open the sidepanel with cmd + shift + s when installed.
I wasn't able to reproduce this myself in another test project, however, I can see it in some other recordings when I filter by the preset_load event:
- 2 different timestamps - unmasked, same session:
- triggered via a session storage watcher https://eu.posthog.com/project/63349/replay/0199244f-d43a-7cdc-83a1-9a08fce9a7d7?t=84
- triggered via a ui interaction https://eu.posthog.com/project/63349/replay/0199244f-d43a-7cdc-83a1-9a08fce9a7d7?t=299
- masked: https://eu.posthog.com/project/63349/replay/01991ff8-9639-7254-a938-3615b48b0894?t=75
- masked: https://eu.posthog.com/project/63349/replay/01991e61-16cf-75a2-bd88-edb707fb85d7?t=272
- unmasked: https://eu.posthog.com/project/63349/replay/01991b62-bd5a-7d36-a064-a95c44c2ce9a?t=174
- masked: https://eu.posthog.com/project/63349/replay/01991908-8536-78d0-ab1b-63dd831565b5?t=210