@percy/core 1.31.7 → 1.31.8

package/dist/network.js

@@ -348,6 +348,43 @@ export class Network {
     /* istanbul ignore if: race condition paranoia */
     if (!request) return;
 
+    // Log instrumentation for failed requests
+    let response = request.response;
+    let category, reason, details;
+
+    /* istanbul ignore next: rare edge case where loadingFailed is called with a response */
+    if (response) {
+      // Request has a response but failed (e.g., 404, 5xx)
+      if (response.status >= 500 && response.status < 600) {
+        category = 'asset_load_5xx';
+        reason = 'server_error';
+      } else if (!ALLOWED_STATUSES.includes(response.status)) {
+        category = 'asset_not_uploaded';
+        reason = 'disallowed_status';
+      }
+      if (category) {
+        details = {
+          url: request.url,
+          statusCode: response.status,
+          snapshot: this.meta.snapshot,
+          requestType: request.type
+        };
+      }
+      // Failed request without a response (network error)
+    } else if (event.errorText && event.errorText !== 'net::ERR_FAILED') {
+      category = 'asset_load_missing';
+      reason = 'network_error';
+      details = {
+        url: request.url,
+        errorText: event.errorText,
+        snapshot: this.meta.snapshot,
+        requestType: request.type
+      };
+    }
+    if (category) {
+      logAssetInstrumentation(this.log, category, reason, details);
+    }
+
     // If request was aborted, keep track of it as we need to cancel any in process callbacks for
     // such a request to avoid Invalid InterceptionId errors
     // Note: 404s also show up under ERR_ABORTED and not ERR_FAILED
@@ -377,6 +414,33 @@ export class Network {
   }
 }
 
+// Logs asset instrumentation for failed/skipped asset loading
+function logAssetInstrumentation(log, category, reason, details) {
+  const categoryMap = {
+    asset_load_5xx: '[ASSET_LOAD_5XX]',
+    asset_not_uploaded: '[ASSET_NOT_UPLOADED]',
+    asset_load_missing: '[ASSET_LOAD_MISSING]'
+  };
+  const messageMap = {
+    server_error: 'Server error response',
+    disallowed_status: 'Disallowed status code',
+    network_error: 'Network error',
+    disallowed_hostname: 'Disallowed hostname',
+    resource_too_large: 'Resource too large',
+    no_response: 'No response received',
+    empty_response: 'Empty response',
+    disallowed_resource_type: 'Disallowed resource type'
+  };
+  const prefix = categoryMap[category];
+  /* istanbul ignore next: fallback for unknown reason */
+  const message = messageMap[reason] || reason;
+  log.debug(`${prefix} ${message}`, {
+    ...details,
+    reason,
+    instrumentationCategory: category
+  });
+}
+
 // Returns the normalized origin URL of a request
 function originURL(request) {
   return normalizeURL((request.redirectChain[0] || request).url);
@@ -399,6 +463,11 @@ async function sendResponseResource(network, request, session) {
     let resource = network.intercept.getResource(url, network.intercept.currentWidth);
     network.log.debug(`Handling request: ${url}`, meta);
     if (!(resource !== null && resource !== void 0 && resource.root) && hostnameMatches(disallowedHostnames, url)) {
+      logAssetInstrumentation(log, 'asset_not_uploaded', 'disallowed_hostname', {
+        url,
+        hostname: new URL(url).hostname,
+        snapshot: meta.snapshot
+      });
       log.debug('- Skipping disallowed hostname', meta);
       await send('Fetch.failRequest', {
         requestId: request.interceptId,
@@ -512,6 +581,11 @@ async function saveResponseResource(network, request, session) {
   let contentLength = (_response$headers = response.headers) === null || _response$headers === void 0 ? void 0 : _response$headers[Object.keys(response.headers).find(key => key.toLowerCase() === 'content-length')];
   contentLength = parseInt(contentLength);
   if (contentLength > MAX_RESOURCE_SIZE) {
+    logAssetInstrumentation(log, 'asset_not_uploaded', 'resource_too_large', {
+      url,
+      size: contentLength,
+      snapshot: meta.snapshot
+    });
     return log.debug('- Skipping resource larger than 25MB', meta);
   }
   let resource = network.intercept.getResource(url);
@@ -526,17 +600,51 @@ async function saveResponseResource(network, request, session) {
       // Don't rename the below log line as it is used in getting network logs in api
       /* istanbul ignore if: first check is a sanity check */
       if (!response) {
+        logAssetInstrumentation(log, 'asset_load_missing', 'no_response', {
+          url,
+          snapshot: meta.snapshot,
+          requestType: request.type
+        });
         return log.debug('- Skipping no response', meta);
       } else if (!shouldCapture) {
+        logAssetInstrumentation(log, 'asset_not_uploaded', 'disallowed_hostname', {
+          url,
+          hostname: new URL(url).hostname,
+          snapshot: meta.snapshot
+        });
         return log.debug('- Skipping remote resource', meta);
       } else if (!body.length) {
+        logAssetInstrumentation(log, 'asset_not_uploaded', 'empty_response', {
+          url,
+          snapshot: meta.snapshot
+        });
         return log.debug('- Skipping empty response', meta);
       } else if (body.length > MAX_RESOURCE_SIZE) {
+        logAssetInstrumentation(log, 'asset_not_uploaded', 'resource_too_large', {
+          url,
+          size: body.length,
+          snapshot: meta.snapshot
+        });
         log.debug('- Missing headers for the requested resource.', meta);
         return log.debug('- Skipping resource larger than 25MB', meta);
       } else if (!ALLOWED_STATUSES.includes(response.status)) {
+        /* istanbul ignore next: ternary branches tested separately */
+        const category = response.status >= 500 && response.status < 600 ? 'asset_load_5xx' : 'asset_not_uploaded';
+        /* istanbul ignore next: ternary branches tested separately */
+        const reason = response.status >= 500 && response.status < 600 ? 'server_error' : 'disallowed_status';
+        logAssetInstrumentation(log, category, reason, {
+          url,
+          statusCode: response.status,
+          snapshot: meta.snapshot,
+          requestType: request.type
+        });
         return log.debug(`- Skipping disallowed status [${response.status}]`, meta);
       } else if (!enableJavaScript && !ALLOWED_RESOURCES.includes(request.type)) {
+        logAssetInstrumentation(log, 'asset_not_uploaded', 'disallowed_resource_type', {
+          url,
+          resourceType: request.type,
+          snapshot: meta.snapshot
+        });
         return log.debug(`- Skipping disallowed resource type [${request.type}]`, meta);
       }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/core",
-  "version": "1.31.7",
+  "version": "1.31.8",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -43,12 +43,12 @@
     "test:types": "tsd"
   },
   "dependencies": {
-    "@percy/client": "1.31.7",
-    "@percy/config": "1.31.7",
-    "@percy/dom": "1.31.7",
-    "@percy/logger": "1.31.7",
-    "@percy/monitoring": "1.31.7",
-    "@percy/webdriver-utils": "1.31.7",
+    "@percy/client": "1.31.8",
+    "@percy/config": "1.31.8",
+    "@percy/dom": "1.31.8",
+    "@percy/logger": "1.31.8",
+    "@percy/monitoring": "1.31.8",
+    "@percy/webdriver-utils": "1.31.8",
     "content-disposition": "^0.5.4",
     "cross-spawn": "^7.0.3",
     "extract-zip": "^2.0.1",
@@ -61,5 +61,5 @@
     "ws": "^8.17.1",
     "yaml": "^2.4.1"
   },
-  "gitHead": "a0b5ff9e0224d0ab4559f20170256320e91c6161"
+  "gitHead": "f5c77f4e541aca84042d7249105428c55303e809"
 }

package/types/index.d.ts

@@ -59,9 +59,66 @@ interface CommonSnapshotOptions {
   scopeOptions?: ScopeOptions;
   browsers?: string[];
 }
+// Region support for TypeScript
+interface BoundingBox {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface Padding {
+  top?: number;
+  left?: number;
+  right?: number;
+  bottom?: number;
+}
+
+interface ElementSelector {
+  boundingBox?: BoundingBox;
+  elementXpath?: string;
+  elementCSS?: string;
+}
+
+interface RegionConfiguration {
+  diffSensitivity?: number;
+  imageIgnoreThreshold?: number;
+  carouselsEnabled?: boolean;
+  bannersEnabled?: boolean;
+  adsEnabled?: boolean;
+}
+
+interface RegionAssertion {
+  diffIgnoreThreshold?: number;
+}
+
+export interface Region {
+  algorithm: string;
+  elementSelector: ElementSelector;
+  padding?: Padding;
+  configuration?: RegionConfiguration;
+  assertion?: RegionAssertion;
+}
+
+export interface CreateRegionOptions {
+  boundingBox?: BoundingBox;
+  elementXpath?: string;
+  elementCSS?: string;
+  padding?: Padding;
+  algorithm?: string;
+  diffSensitivity?: number;
+  imageIgnoreThreshold?: number;
+  carouselsEnabled?: boolean;
+  bannersEnabled?: boolean;
+  adsEnabled?: boolean;
+  diffIgnoreThreshold?: number;
+}
+
+export function createRegion(options: CreateRegionOptions): Region;
 
 export interface SnapshotOptions extends CommonSnapshotOptions {
   discovery?: DiscoveryOptions;
+  regions?: Region[];
 }
 
 type ClientEnvInfo = {