search

getsentry / sentry-javascript

Official Sentry SDKs for JavaScript
https://sentry.io
MIT License
7.78k stars 1.53k forks source link

Support for iframes in Session Replay #7279

Closed idosun closed 7 months ago

idosun commented 1 year ago

Problem Statement

Session replay currently doesn't capture DOM recording for elements rendered within iframes. For web pages relying heavily on iframes, this might block adopting replay.

Solution Brainstorm

...

┆Issue is synchronized with this Jira Improvement by Unito

billyvg commented 1 year ago

iframes are supported as long as they are not cross origin (although v2 of rrweb will support cross origin iframes). Though there may be a bug with the player. I'm seeing that the iframe contents are being recorded in the JSON but player may not be rendering them until a mutation occurs? This is also with me testing via a browser extension, so the page is fully rendered (and iframe loaded + ready state) before Sentry Replay is injected and started. Here's an example replay https://sentry-emerging-tech.sentry.io/replays/billy-test:6d9d9faba7c440329da3b9d5d853bb8b/?project=6326737&query=&referrer=%2Freplays%2F&statsPeriod=14d&yAxis=count%28%29

bruno-garcia commented 1 year ago

Closing as this should be supported on the latest SDK version. Please let us know if you encounter problems.

billyvg commented 1 year ago

Going to re-open this as we're still seeing some issues with playback. I will try to reproduce the issue.

bruno-garcia commented 1 year ago

Lets aim to have something we can put on our docs. For example cases we know it works and cases that won't: "There's no support for cross origin iframes" for example I believe is one we know.

abierbaum commented 1 year ago

I ran into an issue where it seem like iframes from the same origin fail with stickySession is true and multiple iframes are active in the same page at the same time. Is this similarly unsupported?

I had to disable stickySession, which is fine, but burns through replay sessions much faster than I would like and thus is much more costly.

bruno-garcia commented 1 year ago

iframes from the same origin fail with stickySession is true and multiple iframes are active in the same page at the same time.

Could you describe in more details what you mean by fail? They no longer show up on the replay or do you see some error in the site, or during playback?

Is this similarly unsupported?

We're not aware yet why some uses cases with iframes don't work. We'll need more examples to investigate this. If a website is public for example, could you please share a link to the site? A link to a Replay in Sentry is also helpful.

bruno-garcia commented 1 year ago

For folks coming into this issue because you experienced problems with iframes: We'd really appreciate repros so we can debug into those. Thanks!

gilesbutler commented 1 year ago

Hi @bruno-garcia - I just came to this issue via your support team. We've setup Sentry with Session Replay and are having problems seeing the iFrame in the replay. Sometimes the iFrame is blank, other times we can see the chrome page load failed screen. We're trying to understand whether it's Sentry not showing the iframe in Session Replay or the iframe failing. It's a same origin src in the iFrame by the way. We don't have any public data to share but happy to share privately if that helps?

billyvg commented 1 year ago

@gilesbutler Can you email me at billy at sentry.io and I can take a look for you

PhillipRt commented 1 year ago

I have the same issue with using "react-frame-component" in my content script. the replay only captures the webpage where i inject my content script but not the iframe if a generating with my content script. The user input in the iframe i captured though. (my extention is based on https://github.com/satendra02/react-chrome-extension)

ant1m4tt3r commented 1 year ago

I have a web app that runs entirely inside an iframe in any given host (usualy ecommerces), and session replay does not seem to be capturing any of the screen as well.

bruno-garcia commented 1 year ago

I have a web app that runs entirely inside an iframe in any given host (usualy ecommerces), and session replay does not seem to be capturing any of the screen as well.

Are you running Sentry inside your webapp (that's inside someone's website)? Or is your customer, adding Sentry, and you want it to capture their website + the contents of the iframe (your website)?

ant1m4tt3r commented 1 year ago

@bruno-garcia I'm running Sentry on both actually, one instance in the plugin that ships with the customers page, and other inside my app (the iframe), but I only expect the replays from the Sentry instance inside the iframe to be captured.

ant1m4tt3r commented 1 year ago

Ok, maybe I did something in the config that messed with the Replay config, but it seems to be working now! Thanks and sorry to bother.

bruno-garcia commented 8 months ago

Our latest version of the SDK includes rrweb 2.0 which has improve iframe support. Could you give that a try?

The bundle size was also reduced recently: https://sentry.engineering/blog/session-replay-sdk-bundle-size-optimizations

billyvg commented 7 months ago

I'm closing this issue as there are no known iframe issues w/ the latest version of the SDK. Please open a new issue if you're still experiencing iframe problems.