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!

getsentry / sentry-javascript