@percy/dom 1.31.1-beta.2 → 1.31.2-beta.0

package/dist/bundle.js

@@ -336,14 +336,50 @@
       }
     }
 
+    // Helper function to create and insert image element
+    function createAndInsertImageElement(canvas, clone, percyElementId, imageUrl) {
+      let img = document.createElement('img');
+
+      // copy canvas element attributes to the image element
+      for (let {
+        name,
+        value
+      } of canvas.attributes) {
+        img.setAttribute(name, value);
+      }
+
+      // mark the image as serialized and set src attribute
+      img.setAttribute('data-percy-canvas-serialized', '');
+      img.setAttribute('data-percy-serialized-attribute-src', imageUrl);
+
+      // set a default max width to account for canvases that might resize with JS
+      img.style.maxWidth = img.style.maxWidth || '100%';
+
+      // insert the image into the cloned DOM and remove the cloned canvas element
+      let cloneEl = clone.querySelector(`[data-percy-element-id=${percyElementId}]`);
+      if (!cloneEl) {
+        throw new Error(`Clone element not found for percy-element-id: ${percyElementId}`);
+      }
+
+      // `parentElement` for elements directly under shadow root is `null` -> Incase of Nested Shadow DOM.
+      if (cloneEl.parentElement) {
+        cloneEl.parentElement.insertBefore(img, cloneEl);
+      } else {
+        clone.insertBefore(img, cloneEl);
+      }
+      cloneEl.remove();
+    }
+
     // Serialize in-memory canvas elements into images.
     function serializeCanvas(ctx) {
       let {
         dom,
         clone,
-        resources
+        resources,
+        ignoreCanvasSerializationErrors
       } = ctx;
       for (let canvas of dom.querySelectorAll('canvas')) {
+        let percyElementId = canvas.getAttribute('data-percy-element-id');
         try {
           // Note: the `.toDataURL` API requires WebGL canvas elements to use
           // `preserveDrawingBuffer: true`. This is because `.toDataURL` uses the
@@ -353,41 +389,25 @@
           // skip empty canvases
           if (!dataUrl || dataUrl === 'data:,') continue;
 
-          // get the element's percy id and create a resource for it
-          let percyElementId = canvas.getAttribute('data-percy-element-id');
+          // create a resource for the canvas data
           let resource = resourceFromDataURL(percyElementId, dataUrl);
           resources.add(resource);
 
-          // create an image element in the cloned dom
-          let img = document.createElement('img');
-          // use a data attribute to avoid making a real request
-          img.setAttribute('data-percy-serialized-attribute-src', resource.url);
-
-          // copy canvas element attributes to the image element such as style, class,
-          // or data attributes that may be targeted by CSS
-          for (let {
-            name,
-            value
-          } of canvas.attributes) {
-            img.setAttribute(name, value);
-          }
-
-          // mark the image as serialized (can be targeted by CSS)
-          img.setAttribute('data-percy-canvas-serialized', '');
-          // set a default max width to account for canvases that might resize with JS
-          img.style.maxWidth = img.style.maxWidth || '100%';
-
-          // insert the image into the cloned DOM and remove the cloned canvas element
-          let cloneEl = clone.querySelector(`[data-percy-element-id=${percyElementId}]`);
-          // `parentElement` for elements directly under shadow root is `null` -> Incase of Nested Shadow DOM.
-          if (cloneEl.parentElement) {
-            cloneEl.parentElement.insertBefore(img, cloneEl);
+          // create and insert image element with the resource URL
+          createAndInsertImageElement(canvas, clone, percyElementId, resource.url);
+        } catch (err) {
+          if (ignoreCanvasSerializationErrors) {
+            try {
+              // create and insert image element with empty src
+              ctx.warnings.add('Canvas Serialization failed, Replaced canvas with empty Image');
+              ctx.warnings.add('Error: ' + err.message);
+              createAndInsertImageElement(canvas, clone, percyElementId, '');
+            } catch (fallbackErr) {
+              ctx.warnings.add('Error creating fallback image element: ' + fallbackErr.message);
+            }
           } else {
-            clone.insertBefore(img, cloneEl);
+            handleErrors(err, 'Error serializing canvas element: ', canvas);
           }
-          cloneEl.remove();
-        } catch (err) {
-          handleErrors(err, 'Error serializing canvas element: ', canvas);
         }
       }
     }
@@ -729,7 +749,8 @@
         domTransformation = options === null || options === void 0 ? void 0 : options.dom_transformation,
         stringifyResponse = options === null || options === void 0 ? void 0 : options.stringify_response,
         disableShadowDOM = options === null || options === void 0 ? void 0 : options.disable_shadow_dom,
-        reshuffleInvalidTags = options === null || options === void 0 ? void 0 : options.reshuffle_invalid_tags
+        reshuffleInvalidTags = options === null || options === void 0 ? void 0 : options.reshuffle_invalid_tags,
+        ignoreCanvasSerializationErrors = options === null || options === void 0 ? void 0 : options.ignore_canvas_serialization_errors
       } = options || {};
 
       // keep certain records throughout serialization
@@ -740,7 +761,8 @@
         cache: new Map(),
         shadowRootElements: [],
         enableJavaScript,
-        disableShadowDOM
+        disableShadowDOM,
+        ignoreCanvasSerializationErrors
       };
       ctx.dom = dom;
       ctx.clone = cloneNodeAndShadow(ctx);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/dom",
-  "version": "1.31.1-beta.2",
+  "version": "1.31.2-beta.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -35,5 +35,5 @@
   "devDependencies": {
     "interactor.js": "^2.0.0-beta.10"
   },
-  "gitHead": "809b770761a7a5ad0044e462218452e920a4d1f0"
+  "gitHead": "6d36e464efaa1261bf1f1e7c7302c64cc85eccc7"
 }