Repository navigation
Support for iframes in Canvas Replay #10758
Description
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
- Download 2 html files: sentry-canvas-replay.zip
index.htmlpage 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. - Set
dsn - Serve them locally, e.g. by running
python3 -m http.server 8080 --bind 0.0.0.0in the directory withindex.html - Open url in browser; in my case –
http://0.0.0.0:8080/in Chrome - 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.
Activity
bruno-garcia commentedon Mar 11, 2024
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 commentedon Mar 11, 2024
@bruno-garcia it looks like the limitation is coming from
rrwebpackage. 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 commentedon Mar 12, 2024
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 commentedon Mar 18, 2024
I ended up opening both getsentry/rrweb#168 and rrweb-io/rrweb#1428
feat: support recording canvas in iframe and shadow dom (#168)