fix(replays): Handle non-canvas elements and toDataURL errors in canvas replayer (#91725)

👋 Hi there! This PR was automatically generated by Autofix 🤖


Fixes
[JAVASCRIPT-2SKA](https://sentry.io/organizations/sentry/issues/5213327583/).
The issue was that: Canvas replay fails due to
`replayer.getMirror().getNode` returning a non-canvas element, bypassed
by a type assertion, causing `toDataURL` to error.

- Added a check to ensure that the node being cloned is a canvas
element.
- Added a try-catch block around the `toDataURL` call to handle
potential errors.
- Added a check to ensure that the target is a canvas element before
calling `toDataURL`.
- Changed `Sentry.captureException` to `Sentry.captureMessage` with
level warning for canvas node errors.

If you have any questions or feedback for the Sentry team about this
fix, please email [autofix@sentry.io](mailto:autofix@sentry.io) with the
Run ID: 34843.

---------

Co-authored-by: sentry-autofix[bot] <157164994+sentry-autofix[bot]@users.noreply.github.com>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>
Co-authored-by: Billy Vong <billyvg@users.noreply.github.com>

Author: 3 people

static/app/components/replays/canvasReplayerPlugin.tsx

@@ -19,6 +19,10 @@ type CanvasEventWithTime = eventWithTime & {
   type: EventType.IncrementalSnapshot;
 };
 
+function isCanvasElement(node: Node): node is HTMLCanvasElement {
+  return node instanceof HTMLCanvasElement;
+}
+
 function isCanvasMutationEvent(e: eventWithTime): e is CanvasEventWithTime {
   return (
     e.type === EventType.IncrementalSnapshot &&
@@ -173,8 +177,17 @@ export function CanvasReplayerPlugin(events: eventWithTime[]): ReplayPlugin {
    * The image element is saved to `containers` map, which will later get
    * written to when replay is being played.
    */
-  function cloneCanvas(id: number, node: HTMLCanvasElement) {
-    const cloneNode = node.cloneNode() as HTMLCanvasElement;
+  function cloneCanvas(id: number, node: Node) {
+    if (!isCanvasElement(node)) {
+      return null;
+    }
+    const cloneNode = node.cloneNode();
+
+    if (!isCanvasElement(cloneNode)) {
+      Sentry.logger.warn('Replay: cloned node is not a canvas element');
+      return null;
+    }
+
     canvases.set(id, cloneNode);
     document.adoptNode(cloneNode);
     return cloneNode;
@@ -263,9 +276,7 @@ export function CanvasReplayerPlugin(events: eventWithTime[]): ReplayPlugin {
     preload(e);
 
     const source = replayer.getMirror().getNode(e.data.id);
-    const target =
-      canvases.get(e.data.id) ||
-      (source && cloneCanvas(e.data.id, source as HTMLCanvasElement));
+    const target = canvases.get(e.data.id) || (source && cloneCanvas(e.data.id, source));
 
     if (!target) {
       throw new InvalidCanvasNodeError('No canvas found for id');
@@ -285,10 +296,17 @@ export function CanvasReplayerPlugin(events: eventWithTime[]): ReplayPlugin {
     });
 
     const img = containers.get(e.data.id);
-    if (img) {
-      img.src = target.toDataURL();
-      img.style.maxWidth = '100%';
-      img.style.maxHeight = '100%';
+    if (img && isCanvasElement(target)) {
+      try {
+        img.src = target.toDataURL();
+        img.style.maxWidth = '100%';
+        img.style.maxHeight = '100%';
+      } catch (err) {
+        Sentry.logger.warn('Replay: Failed to copy canvas to image', {
+          error: err,
+          element: target.tagName,
+        });
+      }
     }
 
     prune(e);