Replay: Certain browser elements not displaying

futzlarson commented 1 year ago

Is there an existing issue for this?

[X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
[X] I have reviewed the documentation https://docs.sentry.io/
[X] I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

Browser CDN bundle

SDK Version

7.36.0

Framework Version

No response

Link to Sentry event

https://auxbus.sentry.io/replays/javascript:c37480da967c443ca75a5a7784ac952b/?project=1375267&query=duration%3A%3E%3D5&referrer=%2Freplays%2F%3AreplaySlug%2F&statsPeriod=14d&yAxis=count%28%29&t=162

SDK Setup

        Sentry.init({
            dsn: 'https://435a8c34ae0641a5ae9d3da6d7d9afa7@o224628.ingest.sentry.io/1375267',
            environment: '{{ App::environment() }}',
            replaysSessionSampleRate: {{ prod() ? '0.1' : '1.0' }},
            replaysOnErrorSampleRate: 1.0,
            integrations: [
                new Sentry.Integrations.Replay({
                    maskAllInputs: false,
                    maskAllText: false,
                    blockAllMedia: false
                })
            ]
        });

Steps to Reproduce

I've noticed certain browser elements are not rendering in the replay. For example:

At 2:32 in that video, I click the dropdown but the options do not appear.
Around 2:36, I also click the browser's lock icon to select microphone permissions, but this is also not shown.

My guess is that due to how you are reconstructing this, things like this cannot be shown like a screen recording. But perhaps it can be reconstructed in some way? There may be other things like this, but these are the ones I've noticed.

Also, is there a click indicator? If there is, it seems too fast/subtle for me to notice.

Expected Result

See above

Actual Result

See above

Lms24 commented 1 year ago

Hi @futzlarson,

At 2:32 in that video, I click the dropdown but the options do not appear.

Hmm I watched it and inspected your HTML from the replay (a replay is basically a fancy iframe with the recorded DOM changes over time, not a video). I think this is because the <select> options are browser-native elements that can't be captured by rrweb. rrweb (the library we use to record the replays) only captures DOM mutations, which I'm assuming the select options are not. Does that make sense for your app?

Around 2:36, I also click the browser's lock icon to select microphone permissions, but this is also not shown.

Just to confirm, you're talking about the lock icon left of the browser's URL bar, right? As you can see in the replay, we only capture the DOM contents and mutations over time. The browser-window is out of reach as it doesn't belong to the DOM. Hence we can't record this.

Does this answer your questions?

BTW: We just added the loader and our CDN bundles as selectable options in the bug report template. Thanks for raising this point :)

futzlarson commented 1 year ago

I think this is because the select options are browser-native elements that can't be captured by rrweb. rrweb...only captures DOM mutations, which I'm assuming the select options are not. Does that make sense for your app?

It makes sense, I was just wondering if you could detect the options and display them somehow, as it would be helpful for debugging. I wonder if there are other browser-native elements that would benefit from something similar?

The browser-window is out of reach as it doesn't belong to the DOM. Hence we can't record this.

Similar idea. Rather than recording, can you detect this activity and present it in the replay somehow? Either by manipulating the DOM in the replay, or adding info to the Breadcrumbs/Console.

billyvg commented 1 year ago

It makes sense, I was just wondering if you could detect the options and display them somehow, as it would be helpful for debugging. I wonder if there are other browser-native elements that would benefit from something similar?

Having a breadcrumb for this event would be helpful, though it's something we'll have to think about further. We'll want to see how it fits given our stronger stance on PII masking, as well as how breadcrumbs behave with other form elements.

Similar idea. Rather than recording, can you detect this activity and present it in the replay somehow? Either by manipulating the DOM in the replay, or adding info to the Breadcrumbs/Console.

That's an interesting idea that we haven't looked into yet..

futzlarson commented 1 year ago

Note: See 4:23 here to see that changing the dropdown selection isn't reflected in the replay, which makes it inaccurate. I don't have a blank option there.

github-actions[bot] commented 1 year ago

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

mydea commented 1 year ago

Hi @futzlarson ,

sorry, this kind of got lost a bit. I opened an issue https://github.com/getsentry/rrweb/issues/74 to track better handling of select boxes! I'll keep you posted here as well.

mydea commented 1 year ago

The select box masking should now be improved in the latest version 7.43.0!

getsentry / sentry-javascript