Typescript: ReplayCanvas integration type doesn't have "snapshot" method

[pahuta]

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

7.114.0

Framework Version

7.114.0

Link to Sentry event

No response

SDK Setup

Sentry.init({
    dsn: config.SENTRY_DSN as string,
    integrations: [
      Sentry.browserTracingIntegration(),
      Sentry.replayIntegration({
        minReplayDuration: 1000,
        networkDetailAllowUrls: [
          config.API_URL as string,
        ],
        networkCaptureBodies: true,
        maskAllText: false,
        maskAllInputs: false,
        blockAllMedia: false,
      }),
      // The following is all you need to enable canvas recording with Replay
      Sentry.replayCanvasIntegration({
        enableManualSnapshot: true,
      }),
    ],
    // adjust in case of too many samples
    tracesSampleRate: 0.2,

    // This sets the sample rate to be 0%. You may want this to be 100% while
    // in development and sample at a lower rate in production
    replaysSessionSampleRate: 0,

    // If the entire session is not sampled, use the below sample rate to sample
    // sessions when an error occurs.
    replaysOnErrorSampleRate: 1.0,
  });

Steps to Reproduce

I use modified code snippet from documentation, step 2:

export const sendCanvasSnapshotToSentry = (canvasEl: HTMLCanvasElement) => {
  const sentryClient = Sentry.getClient();

  if (!sentryClient) {
    return;
  }

  const replayCanvasIntegration = sentryClient.getIntegrationByName('ReplayCanvas');

  if (!replayCanvasIntegration) {
    return;
  }

  replayCanvasIntegration.snapshot(canvasEl); // replayCanvasIntegration has interface "Integration"
};

typescript@5.3.3

Expected Result

Sentry provides interface like ReplayCanvasIntegration which extends interface Integration and defines methods of integrations (I guess the same as _replayCanvasIntegration from @sentry-internal/replay-canvas/types/canvas.d.ts). Then I'll be able to use it as a generic type like:

      const replayCanvasIntegration = sentryClient.getIntegrationByName<ReplayCanvasIntegration>('ReplayCanvas');

Actual Result

Method snapshot is not defined in replay canvas integration, can't use it in a type safe way.

[mydea]

Hey,

thank you for bringing this up! This is indeed not properly exported, I will adjust this so this has the snapshot method correctly.

The way this will work in v8 is:

import { getClient, replayCanvasIntegration } from '@sentry/browser';

const canvas = getClient()?.getIntegrationByName<ReturnType<typeof replayCanvasIntegration>>('ReplayCanvas');
canvas.snapshot();

I'll keep you posted in this issue when this is released!