feat(replay): Add `ReplayCanvas` integration #9826

mydea · 2023-12-14T09:10:12Z

Adding this integration in addition to Replay will set up canvas recording.

This is a bit hacky because interacting between multiple integrations is not really great/easy. But I think it is the best user experience we can provide there, AND it also provides a direct way to use this with CDN bundles as well - users just have to add the replaycanvas integration bundle in addition to the regular browser+replay bundle and it should just work.

github-actions · 2023-12-14T09:18:45Z

size-limit report 📦

Path	Size
@sentry/browser (incl. Tracing, Replay, Feedback) - Webpack (gzipped)	79.22 KB (+3.77% 🔺)
@sentry/browser (incl. Tracing, Replay) - Webpack (gzipped)	70.58 KB (+4.21% 🔺)
@sentry/browser (incl. Tracing, Replay) - Webpack with treeshaking flags (gzipped)	64.19 KB (+4.65% 🔺)
@sentry/browser (incl. Tracing) - Webpack (gzipped)	32.37 KB (0%)
@sentry/browser (incl. Feedback) - Webpack (gzipped)	30.71 KB (0%)
@sentry/browser - Webpack (gzipped)	22.45 KB (0%)
@sentry/browser (incl. Tracing, Replay, Feedback) - ES6 CDN Bundle (gzipped)	76.85 KB (+4.11% 🔺)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (gzipped)	68.47 KB (+4.62% 🔺)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (gzipped)	31.63 KB (0%)
@sentry/browser - ES6 CDN Bundle (gzipped)	23.58 KB (0%)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed)	215.88 KB (+5.21% 🔺)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed)	95.1 KB (0%)
@sentry/browser - ES6 CDN Bundle (minified & uncompressed)	69.97 KB (0%)
@sentry/browser (incl. Tracing) - ES5 CDN Bundle (gzipped)	34.56 KB (0%)
@sentry/react (incl. Tracing, Replay) - Webpack (gzipped)	71.06 KB (+4.32% 🔺)
@sentry/react - Webpack (gzipped)	22.5 KB (0%)
@sentry/nextjs Client (incl. Tracing, Replay) - Webpack (gzipped)	87.7 KB (+3.37% 🔺)
@sentry/nextjs Client - Webpack (gzipped)	49.45 KB (0%)
@sentry-internal/feedback - Webpack (gzipped)	16.73 KB (0%)
@sentry/browser (incl. Tracing, Replay with Canvas) - Webpack (gzipped)	70.58 KB (added)

mydea · 2023-12-14T10:23:27Z

Hmm, turns it this seems to not be tree shakeable automatically 😬 maybe this is related to getsentry/rrweb#141, though, I wonder 🤔

Lms24

What's the reason for solving this via an integration? Bundle size? Right now it only sets options, right?

Lms24 · 2023-12-14T12:23:03Z

packages/replay/src/integration.ts

+
+      const mergedExperimentsOptions = {
+        ...this._initialOptions._experiments,
+        ...additionalOptions._experiments,


Are we excluding _experiments from being mangled? I guess we do but this broke CDN bundles before so we should double check 😅

Oh wait, this is just a property this should be safe, no?

yeah, this is excluded from being mangled! as we rely on this for some things 😅

Lms24 · 2023-12-14T12:29:35Z

packages/replay/src/canvas.ts

@@ -0,0 +1,52 @@
+import { getCanvasManager } from '@sentry-internal/rrweb';


Oh it's for this, right? Only if the integration is used, the canvas manager will be added to the bundle

Yes, exactly - basically wrapping this, but providing a nicer way to add this than to ask people to pass some method into the replay config etc.

Also, it helps with CDN bundles, where this otherwise also very hard/impossible to solve 😬

Will we have any issues creating this bundle because rrweb is devDep?

should not be the case, but something is not quite right yet here 😅 so still need to look into it a bit more!

billyvg

This seems great to me from a DX standpoint!

billyvg · 2023-12-14T14:36:00Z

packages/replay/src/canvas.ts

@@ -0,0 +1,52 @@
+import { getCanvasManager } from '@sentry-internal/rrweb';


Will we have any issues creating this bundle because rrweb is devDep?

billyvg · 2023-12-14T14:46:42Z

packages/replay/src/canvas.ts

+    this._canvasOptions = {
+      fps: 4,
+      quality: 0.6,
+      ...options,
+    };


In the future we'll want to control this a bit more (e.g. preconfigure quality settings like low, med, high).

We've been using esbuild (default, from`@size-limit/preset-small-lib`) for most jobs, but webpack for the one with custom config, which is a bit inconsistent. This now updates this to always use webpack, which should be more consistent... If we eventually get rid of the custom webpack config (e.g. when we merge this or something like it: #9826), we can revert this back to use esbuild everywhere.

billyvg · 2024-01-04T18:50:19Z

packages/replay/src/canvas.ts

+    // TODO FN: Allow to configure this
+    // But since we haven't finalized how to configure this, this is predefined for now
+    // to avoid breaking changes
+    this._canvasOptions = {
+      fps: 4,
+      quality: 0.6,
+    };


I'm going to update this and move the following over to this integration: https://github.com/getsentry/sentry-javascript/blob/develop/packages/replay/src/replay.ts#L348

fixed changes

mydea · 2024-01-05T08:08:01Z

hmm, still seems to not tree shake :(

Adding this integration in addition to `Replay` will set up canvas recording.

mydea · 2024-01-09T09:20:23Z

Closing in favor of #10112

This bump contains the following changes: - fix(rrweb): Use unpatched requestAnimationFrame when possible [#150](getsentry/rrweb#150) - ref: Avoid async in canvas [#143](getsentry/rrweb#143) - feat: Bundle canvas worker manually [#144](getsentry/rrweb#144) - build: Build for ES2020 [#142](getsentry/rrweb#142) Extracted out from #9826 Closes #6946

mydea requested review from billyvg, Lms24 and c298lee December 14, 2023 09:10

mydea self-assigned this Dec 14, 2023

Lms24 reviewed Dec 14, 2023

View reviewed changes

billyvg approved these changes Dec 14, 2023

View reviewed changes

c298lee approved these changes Dec 14, 2023

View reviewed changes

mydea force-pushed the fn/replay-canvas-integration branch 3 times, most recently from 3230bc7 to fa6d477 Compare December 19, 2023 09:19

mydea mentioned this pull request Dec 19, 2023

build(size-limit): Consistently use webpack #9910

Merged

mydea force-pushed the fn/replay-canvas-integration branch from fa6d477 to 0940301 Compare January 4, 2024 16:32

billyvg previously requested changes Jan 4, 2024

View reviewed changes

mydea mentioned this pull request Jan 5, 2024

feat(replay): Update rrweb to 2.7.3 #10072

Merged

mydea and others added 3 commits January 5, 2024 11:06

feat(replay): Add ReplayCanvas integration

38b1a4e

Adding this integration in addition to `Replay` will set up canvas recording.

update rrweb to 2.7.3

42d38fc

new quality options

1044586

billyvg force-pushed the fn/replay-canvas-integration branch from 66bc1a3 to 1044586 Compare January 5, 2024 16:07

billyvg assigned billyvg and unassigned mydea Jan 5, 2024

fix

d1b20c5

mydea closed this Jan 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(replay): Add `ReplayCanvas` integration #9826

feat(replay): Add `ReplayCanvas` integration #9826

mydea commented Dec 14, 2023

github-actions bot commented Dec 14, 2023 •

edited

mydea commented Dec 14, 2023

Lms24 left a comment

Lms24 Dec 14, 2023

Lms24 Dec 14, 2023

mydea Dec 14, 2023

Lms24 Dec 14, 2023

mydea Dec 14, 2023

billyvg Dec 14, 2023

mydea Dec 15, 2023

billyvg left a comment

billyvg Dec 14, 2023

billyvg Dec 14, 2023

billyvg Jan 4, 2024

mydea commented Jan 5, 2024

mydea commented Jan 9, 2024

		@@ -0,0 +1,52 @@
		import { getCanvasManager } from '@sentry-internal/rrweb';

feat(replay): Add ReplayCanvas integration #9826

feat(replay): Add ReplayCanvas integration #9826

Conversation

mydea commented Dec 14, 2023

github-actions bot commented Dec 14, 2023 • edited

size-limit report 📦

mydea commented Dec 14, 2023

Lms24 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

billyvg left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mydea commented Jan 5, 2024

mydea commented Jan 9, 2024

feat(replay): Add `ReplayCanvas` integration #9826

feat(replay): Add `ReplayCanvas` integration #9826

github-actions bot commented Dec 14, 2023 •

edited