Canvas Replay cannot be lazily loaded

[MIreland]

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/react

SDK Version

8.30.0

Framework Version

17.0.2

Link to Sentry event

https://orthly-5a.sentry.io/replays/fe385969b6944552a585205815cc33be/?environment=development&environment=staging&environment=test&project=1730923&query=&referrer=%2Freplays%2F&statsPeriod=1h&yAxis=count%28%29

Reproduction Example/SDK Setup

Not working:

Sentry init config:

        return {
            dsn: SENTRY_DSN,
            enabled: sentryEnabled,
            debug: false,
            attachStacktrace: true,
            environment: this.env,
            release: RELEASE,
            normalizeDepth: 4,
            beforeBreadcrumb: excludeGraphQLFetch,
            ignoreErrors: [/OTLPExporterError/],
            denyUrls: [
                // EPDPOR-1165 - SunCo flakiness
                /smooch\.io/i,
            ],
            integrations: [],
            replaysSessionSampleRate: 1.0,
            replaysOnErrorSampleRate: 1.0,
        };

Later:

export function useEnableSentrySessionReplay(shouldRecord: boolean = true): void {
    React.useEffect(() => {
        const sentryEnabled = !!process.env.ENABLE_SENTRY_SESSION_REPLAY;
        if (shouldRecord && sentryEnabled && !initializedSentrySessionReplay) {
            initializedSentrySessionReplay = true;
            Sentry.addIntegration(
                replayIntegration({
                    maskAllText: false,
                    blockAllMedia: false,
                }),
            );
            Sentry.addIntegration(replayCanvasIntegration());
        }
    }, [shouldRecord]);
}

Working:

return {
            dsn: SENTRY_DSN,
            enabled: sentryEnabled,
            debug: false,
            attachStacktrace: true,
            environment: this.env,
            release: RELEASE,
            normalizeDepth: 4,
            beforeBreadcrumb: excludeGraphQLFetch,
            ignoreErrors: [/OTLPExporterError/],
            denyUrls: [
                // EPDPOR-1165 - SunCo flakiness
                /smooch\.io/i,
            ],
            integrations: [
                replayIntegration({
                    maskAllText: false,
                    blockAllMedia: false,
                }),
                replayCanvasIntegration(),
            ],
            replaysSessionSampleRate: 1.0,
            replaysOnErrorSampleRate: 1.0,
            initialScope: {
                tags: {
                    build_version: DANDY_METADATA.VERSION || 'unknown',
                    sha: DANDY_METADATA.SHA || 'unknown',
                    build_timestamp: DANDY_METADATA.TIMESTAMP || 0,
                },
            },
        };

Steps to Reproduce

Canvas integration for replays works when initialized as 'on', but does not work when added lazily.

This works fine:

{
...restOfSetup,
integrations: [
    replayIntegration({
        maskAllText: false,
        blockAllMedia: false,
    }),
    replayCanvasIntegration(),
],
}

This does not:

{
...restOfSetup,
integrations: [],
}


//....later
Sentry.addIntegration(
    replayIntegration({
        maskAllText: false,
        blockAllMedia: false,
    }),
);
Sentry.addIntegration(replayCanvasIntegration());

Expected Result

Lazily loading canvas replays should still work.

Actual Result

Canvas does not work in replays when lazily loaded.

[chargome]

Hi @MIreland, thanks for reaching out. What exactly does not work after adding the integrations? Can you add debug: true to your init call and check the logs after replay has been added?

EDIT: A colleague suggested you could try to add the cavas integration before the replay integration.

[MIreland]

Hi- so this is (effectively) resolved on my end.

Canvas replays do not work after lazily adding the integrations, but video replays in general do work.

If we turn canvas replays on in the initial setup, then lazily load video replays, canvas replays seem to work.

I tried debug: true in a variety of permutations and didn't find anything noteworthy.

Thanks!

[jimniels]

I have this same issue. Recording of canvas element only seems to work if I stick it in the initialization.

If I try to use .addIntegration later on, it doesn't work. Instead of seeing what's on the canvas, it's just all white (or black sometimes).

Reversing the order in which I call .addIntegration (replay before canvas, canvas before replay) seems to have no effect.