feat: Register errorHandler inside of CanvasManager

packages/rrweb-snapshot/src/snapshot.ts

@@ -263,7 +263,7 @@
 export function ignoreAttribute(
   tagName: string,
   name: string,
   _value: unknown,
 ): boolean {
   return (tagName === 'video' || tagName === 'audio') && name === 'autoplay';
 }
@@ -482,7 +482,7 @@
   iframeEl.addEventListener('load', listener);
 }
 
 function isStylesheetLoaded(link: HTMLLinkElement) {
   if (!link.getAttribute('href')) return true; // nothing to load
   return link.sheet !== null;
 }
@@ -689,7 +689,7 @@
         // So we'll be conservative and keep textContent as-is.
       } else if ((n.parentNode as HTMLStyleElement).sheet?.cssRules) {
         textContent = stringifyStylesheet(
           (n.parentNode as HTMLStyleElement).sheet!,
         );
       }
     } catch (err) {
@@ -796,7 +796,7 @@
     keepIframeSrcFn,
     newlyAddedElement = false,
     rootId,
     maskAllText,
     maskTextClass,
     unmaskTextClass,
     maskTextSelector,
@@ -813,7 +813,9 @@
   const len = n.attributes.length;
   for (let i = 0; i < len; i++) {
     const attr = n.attributes[i];
-    if (!ignoreAttribute(tagName, attr.name, attr.value)) {
+    // Looks like `attr.name` can be undefined although the types say differently
+    // see: https://github.com/getsentry/sentry-javascript/issues/10292
+    if (attr.name && !ignoreAttribute(tagName, attr.name, attr.value)) {
       attributes[attr.name] = transformAttribute(
         doc,
         tagName,
@@ -836,7 +838,7 @@
     if (cssText) {
       delete attributes.rel;
       delete attributes.href;
       attributes._cssText = absoluteToStylesheet(cssText, stylesheet!.href!);
     }
   }
   // dynamic stylesheet
@@ -947,10 +949,10 @@
     const recordInlineImage = () => {
       image.removeEventListener('load', recordInlineImage);
       try {
         canvasService!.width = image.naturalWidth;
         canvasService!.height = image.naturalHeight;
         canvasCtx!.drawImage(image, 0, 0);
         attributes.rr_dataURL = canvasService!.toDataURL(
           dataURLOptions.type,
           dataURLOptions.quality,
         );

packages/rrweb/src/record/index.ts

@@ -358,6 +358,7 @@
       unblockSelector,
       sampling: sampling['canvas'],
       dataURLOptions,
+      errorHandler,
     },
   );
 
@@ -627,7 +628,7 @@
             plugins
               ?.filter((p) => p.observer)
               ?.map((p) => ({
                 observer: p.observer!,
                 options: p.options,
                 callback: (payload: object) =>
                   wrappedEmit(
@@ -647,7 +648,7 @@
 
     iframeManager.addLoadListener((iframeEl) => {
       try {
         handlers.push(observe(iframeEl.contentDocument!));
       } catch (error) {
         // TODO: handle internal error
         console.warn(error);

packages/rrweb/src/record/observers/canvas/canvas-manager.ts

@@ -20,7 +20,8 @@
 import initCanvasContextObserver from './canvas';
 import initCanvasWebGLMutationObserver from './webgl';
 import { getImageBitmapDataUrlWorkerURL } from '@sentry-internal/rrweb-worker';
-import { callbackWrapper } from '../../error-handler';
+import { callbackWrapper, registerErrorHandler } from '../../error-handler';
+import type { ErrorHandler } from '../../../types';
 
 export type RafStamps = { latestId: number; invokeId: number | null };
 
@@ -47,8 +48,9 @@
   blockSelector: string | null;
   unblockSelector: string | null;
   mirror: Mirror;
-  sampling?: 'all' | number;
   dataURLOptions: DataURLOptions;
+  errorHandler?: ErrorHandler;
+  sampling?: 'all' | number;
 }
 
 export class CanvasManagerNoop implements CanvasManagerInterface {
@@ -113,11 +115,16 @@
       unblockSelector,
       recordCanvas,
       dataURLOptions,
+      errorHandler,
     } = options;
     this.mutationCb = options.mutationCb;
     this.mirror = options.mirror;
     this.options = options;
 
+    if (errorHandler) {
+      registerErrorHandler(errorHandler);
+    }
+
     if (options.enableManualSnapshot) {
       return;
     }
@@ -158,7 +165,7 @@
       this.pendingCanvasMutations.set(target, []);
     }
 
     this.pendingCanvasMutations.get(target)!.push(mutation);
   };
 
   private initCanvasFPSObserver(
@@ -420,7 +427,7 @@
     if (!valuesWithType || id === -1) return;
 
     const values = valuesWithType.map((value) => {
       const { type, ...rest } = value;
       return rest;
     });
     const { type } = valuesWithType[0];