Skip to content

Commit 1a7572e

Browse files
billyvggetsantry[bot]vivianyentranryan953lizokm
authored
feat(replay): Add docs for canvas support in Replay (#8879)
* feat(replay): Add docs for canvas support in Replay Adds documention on how to setup `<canvas>` recording support in Replay. Also updates the Troubleshooting section accordingly. * [getsentry/action-github-commit] Auto commit * add info about manual snapshot * [getsentry/action-github-commit] Auto commit * Apply suggestions from code review Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com> * Update src/platform-includes/session-replay/setup/javascript.mdx Co-authored-by: Ryan Albrecht <ryan.albrecht@sentry.io> * update min SDK version * add beta/ea notice * [getsentry/action-github-commit] Auto commit * add CDN instructions for replay canvas * [getsentry/action-github-commit] Auto commit * update min version * update class syntax * Apply suggestions from code review Co-authored-by: Liza Mock <liza.mock@sentry.io> * [getsentry/action-github-commit] Auto commit * Update src/platforms/javascript/common/session-replay/troubleshooting.mdx --------- Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com> Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com> Co-authored-by: Ryan Albrecht <ryan.albrecht@sentry.io> Co-authored-by: Liza Mock <liza.mock@sentry.io>
1 parent ec1971b commit 1a7572e

File tree

3 files changed

+84
-3
lines changed

3 files changed

+84
-3
lines changed

‎src/docs/product/accounts/early-adopter-features/index.mdx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,7 @@ Limitations:
2424
- [Issue Reprocessing](/product/issues/reprocessing/)
2525
- [Span Summary](/product/performance/transaction-summary/#span-summary)
2626
- [Open PR Comments](/product/integrations/source-code-mgmt/github/#open-pull-request-comments)
27+
- [Investigation Mode](/product/performance/retention-priorities/#investigation-mode) for retention priorities in Performance Monitoring
28+
- <PlatformLink to="/session-replay/#canvas-recording">
29+
Replay Canvas Recording
30+
</PlatformLink>

‎src/platform-includes/session-replay/setup/javascript.mdx

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,76 @@ Sentry.init({
4646
const { Replay } = await import("@sentry/browser");
4747
Sentry.addIntegration(replayIntegration());
4848
```
49+
50+
### Canvas Recording
51+
52+
<Alert level="warning">
53+
There is currently no PII scrubbing in canvas recordings!
54+
</Alert>
55+
56+
<Alert level="">
57+
Canvas recording is in beta and currently only available to{" "}
58+
<a href="/product/accounts/early-adopter-features/">early adopters</a>
59+
</Alert>
60+
61+
If you want to record HTML canvas elements, you'll need to add an additional integration in your Sentry configuration. The canvas integration is exported from the browser SDK, so no additional package is required. Canvas recording is opt-in and will be tree-shaken from your bundle if it's not being used:
62+
63+
```javascript
64+
// import Sentry from your framework SDK (e.g. @sentry/react) instead of @sentry/browser
65+
import * as Sentry from "@sentry/browser";
66+
67+
Sentry.init({
68+
dsn: "___PUBLIC_DSN___",
69+
replaysSessionSampleRate: 0.1,
70+
replaysOnErrorSampleRate: 1.0,
71+
72+
integrations: [
73+
// Keep the Replay integration as before
74+
Sentry.replayIntegration(),
75+
76+
// The following is all you need to enable canvas recording with Replay
77+
Sentry.replayCanvasIntegration(),
78+
],
79+
});
80+
```
81+
82+
```html {tabTitle: CDN}
83+
<!-- Existing script tag for bundle with replay, error, and performance monitoring -->
84+
<script
85+
src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/bundle.tracing.replay.min.js"
86+
integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'bundle.tracing.replay.min.js', 'sha384-base64') }}"
87+
crossorigin="anonymous"
88+
></script>
89+
90+
<!-- New script tag for the canvas replay integration -->
91+
<script
92+
src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/replay-canvas.min.js"
93+
integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'replay-canvas.min.js', 'sha384-base64') }}"
94+
crossorigin="anonymous"
95+
></script>
96+
```
97+
98+
#### 3D and WebGL Canvases
99+
100+
The canvas recording integration works by exporting the canvas as an image (at a rate of 2 frames per second). However, in order to export images from 3D and WebGL canvases, the integration needs to enable `preserveDrawingBuffer` which can negatively affect canvas performance. If your canvas application is impacted by enabling `preserveDrawingBuffer`, you'll need to enable manual snapshotting and call a `snapshot()` method inside of your re-paint loop. There are two steps to using manual snapshotting:
101+
102+
**Step 1.**
103+
Enable manual snapshotting when initializing the `ReplayCanvas` integration.
104+
105+
```javascript
106+
Sentry.replayCanvasIntegration({
107+
// Enabling the following will ensure your canvas elements are not forced
108+
// into `preserveDrawingBuffer`.
109+
enableManualSnapshot: true,
110+
});
111+
```
112+
113+
**Step 2**
114+
Call the the following `snapshot()` method inside your application's paint loop. `snapshot()` needs to be called in the same execution loop as the canvas draw commands, otherwise you may be snapshotting empty canvas buffers. This is due to how WebGL works when `preserveDrawingBuffer` is `false`.
115+
116+
```javascript
117+
function paint() {
118+
const canvasRef = document.querySelector("#my-canvas");
119+
Sentry.getClient().getIntegrationByName("ReplayCanvas").snapshot(canvasRef);
120+
}
121+
```

‎src/platforms/javascript/common/session-replay/troubleshooting.mdx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,15 @@ redirect_from:
2626

2727
This guide aims to extend the <PlatformLink to="/troubleshooting/">main troubleshooting</PlatformLink> guide by covering Replay-specific scenarios.
2828

29-
## My `canvas` Elements Aren't Getting Captured
29+
## My `canvas` elements aren't getting captured
3030

31-
There's currently no support for `canvas`. It's being tracked in this [GitHub issue](https://github.com/getsentry/sentry-javascript/issues/6519). Feel free to 👍 and help us prioritize it.
31+
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.
3232

33-
## My Custom CSS/Images/Fonts/Media Aren't Appearing When I View the Replay
33+
## Replay is slowing down my `canvas`
34+
35+
The integration needs to enable `preserveDrawingBuffer` to export images from 3D and WebGL canvases. This can negatively affect canvas performance. If your canvas application is impacted by enabling `preserveDrawingBuffer`, you'll need to <PlatformLink to="/session-replay/#canvas-recording-performance">enable manual snapshotting</PlatformLink> and call a `snapshot()` method inside of your re-paint loop.
36+
37+
## My custom CSS/Images/Fonts/Media aren't appearing when I view the Replay
3438

3539
The replay 'video' is actually a video-like reproduction of the HTML on your website. This means that all the external resources your site uses (CSS/Images/Fonts), will be rendered by the corresponding &lt;style&gt;, &lt;img&gt; and &lt;video&gt; tags on your site. Add `sentry.io` to your CORS policy so the iframe hosted on sentry.io can fetch and display these resources.
3640

0 commit comments

Comments
 (0)