feat(replay): Document skipRequestAnimationFrame option for WebGPU canvas snapshots (#16011)

Adds documentation for the `skipRequestAnimationFrame` option when using
manual canvas snapshots with WebGPU.

WebGPU textures expire after the current task completes, so deferring
snapshot capture to the next animation frame results in an empty canvas.
This option captures immediately after rendering.

Sources:
- https://gpuweb.github.io/gpuweb/explainer/
- gpuweb/gpuweb#2743
- gpuweb/gpuweb#3295

Related: getsentry/sentry-javascript#18804

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Sarah Mischinger <sarah@codingwriter.com>

Author: 3 people

docs/platforms/javascript/common/session-replay/index.mdx

@@ -100,6 +100,36 @@ function paint() {
   Sentry.getClient().getIntegrationByName("ReplayCanvas").snapshot(canvasRef);
 }
 ```
+
+#### WebGPU Canvases
+
+WebGPU works differently from WebGL in how it manages the lifetime of rendered frames. The canvas texture returned by `getCurrentTexture()` is only valid until the current task completes – after that, the texture expires, and its contents are no longer accessible. This means that by default, when `snapshot()` defers capture to the next animation frame, it will capture an empty or invalid canvas. There are two steps to capturing WebGPU canvases:
+
+**Step 1.**
+Enable manual snapshotting when initializing the `ReplayCanvas` integration.
+
+```javascript
+Sentry.replayCanvasIntegration({
+  // Enabling the following will ensure your canvas elements are not forced
+  // into `preserveDrawingBuffer`.
+  enableManualSnapshot: true,
+});
+```
+
+**Step 2.**
+Call the `snapshot()` method inside your application's paint loop with `skipRequestAnimationFrame: true` to capture the snapshot immediately:
+
+```javascript
+function paint() {
+  const canvasRef = document.querySelector("#my-canvas");
+  const canvasIntegration = Sentry.getClient().getIntegrationByName("ReplayCanvas");
+
+  // ... your WebGPU rendering commands ...
+
+  // Capture immediately after rendering - required for WebGPU
+  canvasIntegration.snapshot(canvasRef, { skipRequestAnimationFrame: true });
+}
+```
 </PlatformSection>
 
 ### Content Security Policy (CSP)
@@ -161,11 +191,11 @@ Sampling allows you to control how much of your website's traffic will result in
 ```javascript {5-6} {filename:instrumentation-client.ts}
 Sentry.init({
   // ... other configuration
-  
+
   // Session Replay sampling rates
   replaysSessionSampleRate: 0.1, // Capture 10% of all sessions
   replaysOnErrorSampleRate: 1.0,  // Capture 100% of error sessions
-  
+
   // For development/testing, you can set replaysSessionSampleRate to 1.0
   // to capture all sessions for complete visibility
 });
@@ -204,4 +234,3 @@ Once testing is complete, **we recommend lowering this value in production**. We
 ## Next Steps
 
 <PageGrid />
-