[Replay] Manual snapshot results in blank or missing frames in ReplayCanvas

[kerenkhatiwada]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/browser

SDK Version

10.1.0

Framework Version

Vanilla JS, Mapbox GL JS WebGL canvas

Link to Sentry event

No response

Reproduction Example/SDK Setup

Snapshot on render

map.on('render', () => {
  const replayIntegration = Sentry.getClient()?.getIntegrationByName('ReplayCanvas');
  if (!replayIntegration) return;
  replayIntegration.snapshot(map.getCanvas());
});

Snapshot on interval

setInterval(() => takeSentryScreenshot(), 1000);

function takeSentryScreenshot() {
  console.log('ask screenshot');
  map.once('render', () => {
    const replayIntegration = Sentry.getClient()?.getIntegrationByName('ReplayCanvas');
    if (!replayIntegration) return;
    replayIntegration.snapshot(map.getCanvas());
  });
  map.triggerRepaint();
}

Steps to Reproduce

Reported via ZD ticket: a user is having trouble using manual snapshots with ReplayCanvas on a WebGL canvas. They've tested two approaches, snapshot on render and snapshot on an interval. The render version results in no visible canvas in the replay, and the interval method results in flickering / missing frames.

Expected Result

Snapshots should capture canvas frames and appear in the replay.

Actual Result

With render: canvas is blank or missing entirely in the replay. With interval: canvas flickers / renders intermittently.

[linear]

JS-829 [Replay] Manual snapshot results in blank or missing frames in ReplayCanvas

[Divyanshu7001]

Hello @kerenkhatiwada ,

💡 Proposal: Wrap ReplayCanvas.snapshot() in requestAnimationFrame for WebGL Canvas Timing

Given that the current approaches for capturing snapshots using ReplayCanvas during map.on('render') or via intervals are resulting in blank canvases or flickering replays, I propose we try using the native requestAnimationFrame() function to better align with the WebGL render lifecycle.

🧪 Suggested Code

map.on('render', () => {
  requestAnimationFrame(() => {
    const replayIntegration = Sentry.getClient()?.getIntegrationByName('ReplayCanvas');
    if (!replayIntegration) return;
    replayIntegration.snapshot(map.getCanvas());
  });
});

i think this can lead to the desired behavior.

[billyvg]

@Divyanshu7001 The snapshot function actually uses rAF under the hood and Ive found that skipping rAF results in a correct capture. I have a PR in progress with an option to skip rAF