Support for iframes in Canvas Replay

[p-mazhnik]

Canvas replays are not shown in Sentry for canvas elements located inside iframe of the same origin.

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• 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

7.102.0

Link to Sentry event

https://p-mazhnik.sentry.io/replays/44d8116f8b714865a288222de0c7f760

SDK Setup

Main html

 Sentry.onLoad(function() {
 Sentry.init({
 dsn: '',
 integrations: [
 Sentry.captureConsoleIntegration(),
 Sentry.replayIntegration({
 blockAllMedia: false,
 maskAllText: false,
 }),
 Sentry.replayCanvasIntegration()
 ],
 // Session Replay
 replaysSessionSampleRate: 1.0,
 replaysOnErrorSampleRate: 1.0,
 });
 });

Steps to Reproduce

1. Download 2 html files: sentry-canvas-replay.zip
   index.html page contains two parts: it has canvas element with dynamic changes on the left, and iframe element on the right, containing another canvas element with dynamic changes.
2. Set dsn
3. Serve them locally, e.g. by running python3 -m http.server 8080 --bind 0.0.0.0 in the directory with index.html
4. Open url in browser; in my case – http://0.0.0.0:8080/ in Chrome
5. Wait a few seconds

video

canvases.mov

Expected Result

In Sentry Replay, both canvases – from the main page and from the same origin iframe – should be visible.

Actual Result

Canvas from iframe is not visible in Replay.

Replay

sentry-canvases.mov

Note that result is the same when canvas from the main page does not exist.

[bruno-garcia]

Thanks for raising and sorry this fell through the cracks. Request makes sense and canvas is a project we're currently pushing but not GA yet. Not sure this can land before GA given other priorities. Any chance you can help us with a PR?

[p-mazhnik]

@bruno-garcia it looks like the limitation is coming from rrweb package. Should I create a PR to https://github.com/getsentry/rrweb or to the original https://github.com/rrweb-io/rrweb? I am not sure what is the best practice here. Looking at the base repo, it doesn't seem like they actively reviewing PRs.

Note that I was able to find the key reason of the limitation and I have a fix locally.

[Lms24]

Note that I was able to find the key reason of the limitation and I have a fix locally.

Awesome, thanks!

It's probably best to submit PRs to both repos. That's what we usually do: First fix it in our fork and then submit the fix upstream.

[p-mazhnik]

I ended up opening both getsentry/rrweb#168 and rrweb-io/rrweb#1428