Skip to content

feat(replays): Add snapshot function to replay canvas integration #10066

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 50 commits into from
Jan 17, 2024
Merged

feat(replays): Add snapshot function to replay canvas integration #10066

merged 50 commits into from
Jan 17, 2024

Conversation

@c298lee
Copy link
Contributor

@c298lee c298lee commented Jan 4, 2024 •
edited
Loading

Adds a snapshot function that allows the user to manually snapshot canvas for gl/3d contexts. Manual snapshot will take a snapshot of the canvas element passed in or all canvas in the window if nothing is passed in.

To manually snapshot:

  1. Add ReplayCanvas to your Sentry integrations: new Sentry.ReplayCanvas({ enableManualSnapshot:true })
  2. Add snapshot function, eg. Sentry.getClient().getIntegrationByName('ReplayCanvas').snapshot(); into your render/repaint

Closes https://github.com/getsentry/team-replay/issues/308

@c298lee c298lee requested a review from billyvg January 4, 2024 18:17
billyvg
billyvg reviewed Jan 4, 2024
View reviewed changes
@billyvg billyvg force-pushed the fn/replay-canvas-integration branch from 66bc1a3 to 1044586 Compare January 5, 2024 16:07
@billyvg billyvg mentioned this pull request Jan 9, 2024
Merged
@billyvg billyvg changed the base branch from fn/replay-canvas-integration to fn/replay-canvas-integration-sep-package January 9, 2024 17:42
@billyvg billyvg force-pushed the fn/replay-canvas-integration-sep-package branch 2 times, most recently from 3e11d66 to 86ce591 Compare January 10, 2024 15:08
c298lee added a commit to getsentry/rrweb that referenced this pull request Jan 10, 2024
@c298lee
feat(replays): Add manual canvas snapshot function (#149)
2edc45b 
Adds a snapshot canvas function that allows you to manually snapshot
canvas elements, which enables recording of 3d and webgl canvas

Requires getsentry/sentry-javascript#10066
@c298lee c298lee closed this Jan 10, 2024
@c298lee c298lee force-pushed the snapshot-replay-canvas branch from b23bf20 to 86ce591 Compare January 10, 2024 19:23
@mydea @billyvg
feat(replay): Add ReplayCanvas integration
64a84af 
Adding this integration in addition to `Replay` will set up canvas recording.
@c298lee c298lee reopened this Jan 10, 2024
@c298lee c298lee force-pushed the snapshot-replay-canvas branch from 81606d9 to c9136d5 Compare January 10, 2024 20:30
@billyvg billyvg force-pushed the fn/replay-canvas-integration-sep-package branch from b39c5fe to d001529 Compare January 11, 2024 03:53
@github-actions
Copy link
Contributor

github-actions bot commented Jan 11, 2024 •
edited
Loading

size-limit report 📦

Path Size
@sentry/browser (incl. Tracing, Replay, Feedback) - Webpack (gzipped) 77.37 KB (+0.03% 🔺)
@sentry/browser (incl. Tracing, Replay) - Webpack (gzipped) 68.67 KB (+0.02% 🔺)
@sentry/browser (incl. Tracing, Replay) - Webpack with treeshaking flags (gzipped) 62.31 KB (+0.01% 🔺)
@sentry/browser (incl. Tracing) - Webpack (gzipped) 32.67 KB (0%)
@sentry/browser (incl. Feedback) - Webpack (gzipped) 31.13 KB (0%)
@sentry/browser - Webpack (gzipped) 22.48 KB (0%)
@sentry/browser (incl. Tracing, Replay, Feedback) - ES6 CDN Bundle (gzipped) 75 KB (-0.01% 🔽)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (gzipped) 66.63 KB (-0.04% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (gzipped) 32.48 KB (0%)
@sentry/browser - ES6 CDN Bundle (gzipped) 24.19 KB (0%)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed) 209.91 KB (+0.04% 🔺)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed) 97.89 KB (0%)
@sentry/browser - ES6 CDN Bundle (minified & uncompressed) 72.34 KB (0%)
@sentry/browser (incl. Tracing) - ES5 CDN Bundle (gzipped) 35.49 KB (0%)
@sentry/react (incl. Tracing, Replay) - Webpack (gzipped) 69.06 KB (+0.03% 🔺)
@sentry/react - Webpack (gzipped) 22.52 KB (0%)
@sentry/nextjs Client (incl. Tracing, Replay) - Webpack (gzipped) 85.68 KB (+0.03% 🔺)
@sentry/nextjs Client - Webpack (gzipped) 49.81 KB (0%)
@sentry-internal/feedback - Webpack (gzipped) 17.11 KB (0%)
@sentry/browser (incl. Tracing, Replay with Canvas) - Webpack (gzipped) 72.54 KB (added)

@billyvg billyvg force-pushed the fn/replay-canvas-integration-sep-package branch 2 times, most recently from 03f872d to 8f5257f Compare January 11, 2024 21:46
@c298lee c298lee marked this pull request as ready for review January 12, 2024 16:04
billyvg
billyvg reviewed Jan 12, 2024
View reviewed changes
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.

We should add a test for this as well, I would look at https://github.com/getsentry/sentry-javascript/blob/fn/replay-canvas-integration-sep-package/dev-packages/browser-integration-tests/suites/replay/canvas/records/test.ts for an example

@mydea
Copy link
Member

mydea commented Jan 15, 2024

What's the context for this, actually? So, why/when would you do a manual canvas snapshot?

@billyvg billyvg force-pushed the fn/replay-canvas-integration-sep-package branch from 8f5257f to cb20f6a Compare January 15, 2024 21:41
@c298lee c298lee force-pushed the snapshot-replay-canvas branch from 4832cda to 301dbf4 Compare January 15, 2024 23:45
@c298lee c298lee requested a review from billyvg January 16, 2024 00:09
billyvg
billyvg reviewed Jan 16, 2024
View reviewed changes
@c298lee c298lee requested a review from billyvg January 16, 2024 16:07
@billyvg billyvg force-pushed the fn/replay-canvas-integration-sep-package branch from 9dd8cfe to b87f421 Compare January 16, 2024 19:13
@c298lee c298lee force-pushed the snapshot-replay-canvas branch from 081dc39 to bdb58a4 Compare January 17, 2024 16:17
@c298lee c298lee requested a review from billyvg January 17, 2024 16:45
@c298lee c298lee merged commit 583d720 into develop Jan 17, 2024
@c298lee c298lee deleted the snapshot-replay-canvas branch January 17, 2024 18:53
@c298lee c298lee mentioned this pull request Jan 17, 2024
Merged
billyvg pushed a commit to getsentry/rrweb that referenced this pull request Apr 26, 2024
@c298lee @billyvg
feat(replays): Add manual canvas snapshot function (#149)
6d12350 
Adds a snapshot canvas function that allows you to manually snapshot
canvas elements, which enables recording of 3d and webgl canvas

Requires getsentry/sentry-javascript#10066
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@billyvg billyvg billyvg approved these changes

Assignees

@c298lee c298lee

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@c298lee @mydea @billyvg