Skip to content

Commit

Permalink
fix(replay): Fix type for replayCanvasIntegration (#11995)
Browse files Browse the repository at this point in the history
`snapshot` is a public API.

I think the other methods we do not need to expose (?).

With this, usage will be:

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

Closes #11971
  • Loading branch information
mydea authored May 13, 2024
1 parent bd9ead6 commit 9510771
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 4 deletions.
12 changes: 9 additions & 3 deletions packages/replay-canvas/src/canvas.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import type { CanvasManagerInterface, CanvasManagerOptions } from '@sentry-internal/replay';
import { CanvasManager } from '@sentry-internal/rrweb';
import { defineIntegration } from '@sentry/core';
import type { IntegrationFn } from '@sentry/types';
import type { Integration, IntegrationFn } from '@sentry/types';

interface ReplayCanvasIntegration extends Integration {
snapshot: (canvasElement?: HTMLCanvasElement) => Promise<void>;
}

interface ReplayCanvasOptions {
enableManualSnapshot?: boolean;
Expand Down Expand Up @@ -107,9 +111,11 @@ export const _replayCanvasIntegration = ((options: Partial<ReplayCanvasOptions>
canvasManager.snapshot(canvasElement);
},
};
}) satisfies IntegrationFn;
}) satisfies IntegrationFn<ReplayCanvasIntegration>;

/**
* Add this in addition to `replayIntegration()` to enable canvas recording.
*/
export const replayCanvasIntegration = defineIntegration(_replayCanvasIntegration);
export const replayCanvasIntegration = defineIntegration(
_replayCanvasIntegration,
) as IntegrationFn<ReplayCanvasIntegration>;
14 changes: 13 additions & 1 deletion packages/replay-canvas/test/canvas.test.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { CanvasManager } from '@sentry-internal/rrweb';
import { _replayCanvasIntegration } from '../src/canvas';
import { _replayCanvasIntegration, replayCanvasIntegration } from '../src/canvas';

jest.mock('@sentry-internal/rrweb');

Expand Down Expand Up @@ -86,3 +86,15 @@ it('enforces a max canvas size', () => {
}),
);
});

it('has correct types', () => {
const rc = replayCanvasIntegration();

expect(typeof rc.snapshot).toBe('function');
const res = rc.snapshot();
expect(res).toBeInstanceOf(Promise);

// Function signature is correctly typed
const res2 = rc.snapshot(document.createElement('canvas'));
expect(res2).toBeInstanceOf(Promise);
});

0 comments on commit 9510771

Please sign in to comment.