getsentry
Capture DOM elements for same-origin iframe content
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 SDK are you using?
@sentry/browser
SDK Version
8.34.0
Framework Version
No response
Link to Sentry event
https://dev-curumas.sentry.io/replays/b631bc650dd14e8192c4d2b4df61bc79/?project=5242419&query=&referrer=%2Freplays%2F&statsPeriod=24h&t_main=tags&yAxis=count%28%29
Reproduction Example/SDK Setup
Have a page with multiple nested iframes, for example: Top:
<script>
window.sentryOnLoad = function () {
Sentry.init({
replaysSessionSampleRate: 1.0,
integrations: [
Sentry.replayIntegration({maskAllText: false})
],
})
}
</script>
<script src='https://js.sentry-cdn.com/651430b2d9bbd075301fbd0377389722.min.js' crossorigin="anonymous"></script>
<body>
Just the high level body, nothing to see here.
<iframe src="iframe1.html" width="1000" height="1000"></iframe>
</body>
Nested iframes:
<script src="https://js.sentry-cdn.com/cf49a5aeecb64d96a5631a5cc50883a4.min.js" crossorigin="anonymous"></script>
<script>
throw new Error("Iframe 1 error")
</script>
<iframe src="iframe2.html" width="700" height="700"></iframe>
<body>
Steps to Reproduce
Run a simple page with few nested iframes and click around on each of the iframes
Expected Result
The SDK registered all clicks on the iframes and these are visible in the replay sent.
Actual Result
No user click breadcrumbs when there are nested iframes.
I guess this is not really related to replay per-se, we simply do not capture clicks in iframes generally, I guess (as this is probably not covered by window.addEventListener('click', ...) which we use there.
So i think what we probably need to do, is actually add our DOM listeners not just for window but also for same origin iframes. However, this is hard because they may not exist at render time 🤔
We could start with only adding this at init time (so only iframes that exist at this point are handled), which probably covers many cases at least. We'd need a way to reliably check if an iframe is same-origin, though.
We are pretty busy with other work right now so I'll put this into the backlog. PRs are welcome, though!
Adding the sentry code to initialize it in each iframe doesn't seem to help though
This is something we would need to implement. We will discuss this internally :)
Spoke with @chargome briefly, we're hesitant to support this edge case given the increased complexity and bundle size. We're going to close this issue until we see more demand.
