Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(replay): Replay canvas troubleshooting docs #9559

Merged
merged 4 commits into from
Mar 27, 2024

Conversation

c298lee
Copy link
Member

@c298lee c298lee commented Mar 26, 2024

Adds troubleshooting section for canvas being tainted
image

Fixes #9515

@c298lee c298lee requested review from jas-kas and a team March 26, 2024 19:39
Copy link

vercel bot commented Mar 26, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
sentry-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 27, 2024 8:36pm

Copy link

codecov bot commented Mar 26, 2024

Bundle Report

Changes will decrease total bundle size by 21 bytes ⬇️

Bundle name Size Change
sentry-docs-server 6.11MB 12 bytes ⬇️
sentry-docs-edge-server 618.05kB 3 bytes ⬇️
sentry-docs-client 5.52MB 6 bytes ⬇️

@@ -17,6 +17,10 @@ This guide aims to extend the <PlatformLink to="/troubleshooting/">main troubles

Canvas is supported in SDK versions >= `7.98.0`. Please see the <PlatformLink to="/session-replay/#canvas-recording">canvas setup documention</PlatformLink> to get started with canvas recordings.

## My `canvas` has been tainted

Set `crossorigin="anonymous"` on your images. This will allow images that are loaded from foreign origins to be used in `canvas` as if they have been loaded from the current origin. See the [CORS documention](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image) for more information about this error.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe link directly to the Security and tainted canvases header https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#security_and_tainted_canvases

@@ -17,6 +17,10 @@ This guide aims to extend the <PlatformLink to="/troubleshooting/">main troubles

Canvas is supported in SDK versions >= `7.98.0`. Please see the <PlatformLink to="/session-replay/#canvas-recording">canvas setup documention</PlatformLink> to get started with canvas recordings.

## My `canvas` has been tainted
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think users will know what "tainted" means in this context - I think we should move this paragraph into the above section because it will look like canvas is not being captured.

We should say something like, If you are on a supported SDK version and your canvas elements still aren't being captured, check if you have images or videos inside of your canvas that are loaded from foreign origins. You may also see a SecurityError being thrown when trying to use the replay canvas integration. ...

Copy link
Member

@billyvg billyvg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm but would like a @vivianyentran to double check the new words

…g.mdx

Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com>
@c298lee c298lee enabled auto-merge (squash) March 27, 2024 20:21
@c298lee c298lee merged commit c85d20f into master Mar 27, 2024
6 checks passed
@c298lee c298lee deleted the cl/canvas-troubleshooting branch March 27, 2024 20:36
@github-actions github-actions bot locked and limited conversation to collaborators Apr 12, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add a Replay troubleshooting entry for Canvas
4 participants