@atlaskit/react-ufo 3.3.2 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.4.0
+
+### Minor Changes
+
+- [#124334](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/124334)
+  [`419c4451a0c0f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/419c4451a0c0f) -
+  Updated assets config to include different types of requests
+
+## 3.3.3
+
+### Patch Changes
+
+- [#123538](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/123538)
+  [`2dd75c16ca0c4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2dd75c16ca0c4) -
+  fix handling of potentially invalid selectors in TTVC v3
+
 ## 3.3.2
 
 ### Patch Changes

package/dist/cjs/assets/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CHRSummary = exports.CHRReporter = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty4 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -21,9 +20,8 @@ var CHRSummary = exports.CHRSummary = /*#__PURE__*/function () {
   return (0, _createClass2.default)(CHRSummary, [{
     key: "add",
     value: function add(asset) {
-      var size = 'size' in asset ? asset.size : undefined;
-      var encodedSize = 'encodedSize' in asset ? Number(asset.encodedSize) : 0;
-      var type = (0, _utils.calculateTransferType)(asset.type, asset.duration, size);
+      var encodedSize = asset.encodedSize || 0;
+      var type = (0, _utils.calculateTransferType)(asset.name, asset.initiatorType, asset.duration, asset.transferSize);
       if (type === null) {
         return;
       }
@@ -54,28 +52,39 @@ var CHRReporter = exports.CHRReporter = /*#__PURE__*/function () {
     (0, _defineProperty4.default)(this, "all", new CHRSummary());
     (0, _defineProperty4.default)(this, "allAtlassian", new CHRSummary());
     (0, _defineProperty4.default)(this, "preloaded", new CHRSummary());
+    (0, _defineProperty4.default)(this, "defaultAllowedTypes", ['js']);
   }
   return (0, _createClass2.default)(CHRReporter, [{
     key: "get",
-    value: function get(resourceTimings, assetsClassification) {
+    value: function get(resourceTimings, assetsConfig, SSRDoneTime) {
       var _this = this;
       try {
-        Object.entries(resourceTimings).map(function (_ref) {
-          var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-            label = _ref2[0],
-            entry = _ref2[1];
-          if (assetsClassification.all) {
+        if (resourceTimings === null) {
+          return null;
+        }
+        resourceTimings.forEach(function (entry) {
+          if (!(0, _utils.checkIfTimingsAvailable)(entry)) {
+            return;
+          }
+          if (entry.encodedSize === entry.decodedSize) {
+            // incorrectly reported size
+            return;
+          }
+          var type = (0, _utils.getTypeOfRequest)(entry);
+          if (!(assetsConfig.allowedTypes || _this.defaultAllowedTypes).includes(type)) {
+            return;
+          }
+          if (assetsConfig.classification.all) {
             _this.all.add(entry);
           }
-          if (assetsClassification.allAtlassian({
-            label: label,
+          if (assetsConfig.classification.allAtlassian({
             entry: entry
           })) {
             _this.allAtlassian.add(entry);
           }
-          if (assetsClassification.preloaded({
-            label: label,
-            entry: entry
+          if (assetsConfig.classification.preloaded({
+            entry: entry,
+            SSRDoneTime: SSRDoneTime
           })) {
             _this.preloaded.add(entry);
           }
@@ -83,11 +92,12 @@ var CHRReporter = exports.CHRReporter = /*#__PURE__*/function () {
         if (this.all.bundlesCount === 0) {
           return null;
         }
-        return {
+        var CHRData = {
           all: CHRSummary.makePayload(this.all),
           allAtlassian: CHRSummary.makePayload(this.allAtlassian),
           preloaded: CHRSummary.makePayload(this.preloaded)
         };
+        return CHRData;
       } catch (error) {
         return null;
       }

package/dist/cjs/assets/utils.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.round = exports.calculateTransferType = exports.cacheableTypes = exports.NETWORK_KEY = exports.MEMORY_KEY = exports.DISK_KEY = void 0;
+exports.round = exports.getTypeOfRequest = exports.checkIfTimingsAvailable = exports.calculateTransferType = exports.cacheableTypes = exports.NETWORK_KEY = exports.MEMORY_KEY = exports.DISK_KEY = void 0;
 /* Borrowed from https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/performance/browser-metrics/src/plugins/timings/resource.ts */
-var cacheableTypes = exports.cacheableTypes = ['script', 'link'];
+var cacheableTypes = exports.cacheableTypes = ['script', 'link', 'other'];
 var MEMORY_KEY = exports.MEMORY_KEY = 'mem';
 var DISK_KEY = exports.DISK_KEY = 'disk';
 var NETWORK_KEY = exports.NETWORK_KEY = 'net';
-var calculateTransferType = exports.calculateTransferType = function calculateTransferType(type, duration, size) {
-  if (!cacheableTypes.includes(type)) {
+var calculateTransferType = exports.calculateTransferType = function calculateTransferType(name, type, duration, size) {
+  if (!cacheableTypes.includes(type) && !(type === 'other' && name.includes('.js'))) {
     return null;
   }
   if ((size === undefined || size === 0) && duration === 0) {
@@ -24,6 +24,49 @@ var calculateTransferType = exports.calculateTransferType = function calculateTr
   }
   return NETWORK_KEY;
 };
+var getTypeOfRequest = exports.getTypeOfRequest = function getTypeOfRequest(_ref) {
+  var name = _ref.name,
+    type = _ref.initiatorType;
+  var category = 'other';
+  var urlWithoutQuery = name.split('?')[0];
+  switch (type) {
+    case 'script':
+      category = 'js';
+      break;
+    case 'link':
+      if (urlWithoutQuery.endsWith('.css')) {
+        category = 'css';
+      }
+      if (urlWithoutQuery.endsWith('.js')) {
+        category = 'js';
+      }
+      break;
+    case 'img':
+      category = 'image';
+      break;
+    case 'font':
+      category = 'font';
+      break;
+    default:
+      if (urlWithoutQuery.endsWith('.js')) {
+        category = 'js';
+      } else if (urlWithoutQuery.endsWith('.css')) {
+        category = 'css';
+      } else if (urlWithoutQuery.match(/\.(woff|woff2|ttf|otf)$/)) {
+        category = 'font';
+      } else if (urlWithoutQuery.match(/\.(png|jpg|jpeg|gif|svg)$/)) {
+        category = 'image';
+      }
+      break;
+  }
+  return category;
+};
+var checkIfTimingsAvailable = exports.checkIfTimingsAvailable = function checkIfTimingsAvailable(entry) {
+  if (entry.decodedSize === 0 && entry.encodedSize === 0 && entry.requestStart === 0 && entry.responseStart === 0) {
+    return false;
+  }
+  return true;
+};
 var round = exports.round = function round(n) {
   if (isNaN(n)) {
     return 0;

package/dist/cjs/create-payload/index.js

@@ -28,6 +28,7 @@ var _hiddenTiming = require("../hidden-timing");
 var initialPageLoadExtraTiming = _interopRequireWildcard(require("../initial-page-load-extra-timing"));
 var _interactionMetrics = require("../interaction-metrics");
 var resourceTiming = _interopRequireWildcard(require("../resource-timing"));
+var _resourceTimingBuffer = require("../resource-timing/common/utils/resource-timing-buffer");
 var _roundNumber = require("../round-number");
 var ssr = _interopRequireWildcard(require("../ssr"));
 var _utils = require("./common/utils");
@@ -257,18 +258,19 @@ function getSSRProperties(type) {
     'ssr:featureFlags': getSSRFeatureFlags(type)
   };
 }
-var getAssetsMetrics = function getAssetsMetrics(interaction, resourceTimings) {
+var getAssetsMetrics = function getAssetsMetrics(interaction, SSRDoneTime) {
   try {
     var config = (0, _config.getConfig)();
     var type = interaction.type;
     var allowedTypes = ['page_load', 'transition'];
-    var assetsClassification = config === null || config === void 0 ? void 0 : config.assetsClassification;
-    if (!allowedTypes.includes(type) || !assetsClassification) {
+    var assetsConfig = config === null || config === void 0 ? void 0 : config.assetsConfig;
+    if (!allowedTypes.includes(type) || !assetsConfig) {
       // Skip if: type not allowed or assetsClassification isn't configured
       return {};
     }
     var reporter = new _assets.CHRReporter();
-    var assets = reporter.get(resourceTimings, assetsClassification);
+    var resourceTimings = (0, _resourceTimingBuffer.filterResourceTimings)(interaction.start, interaction.end);
+    var assets = reporter.get(resourceTimings, assetsConfig, SSRDoneTime);
     if (assets) {
       // Only add assets in case it exists
       return {
@@ -647,7 +649,7 @@ function createInteractionMetricsPayload(_x, _x2, _x3) {
 function _createInteractionMetricsPayload() {
   _createInteractionMetricsPayload = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(interaction, interactionId, experimental) {
     var _window$location, _config$additionalPay;
-    var interactionPayloadStart, config, end, start, ufoName, knownSegments, rate, type, abortReason, routeName, featureFlags, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, pageVisibilityAtTTI, pageVisibilityAtTTAI, segments, segmentTree, isDetailedPayload, isPageLoad, calculatePageVisibilityFromTheStartOfPageLoad, moreAccuratePageVisibilityAtTTI, moreAccuratePageVisibilityAtTTAI, labelStack, getPageLoadInteractionMetrics, getDetailedInteractionMetrics, getPageLoadDetailedInteractionMetrics, newUFOName, resourceTimings, _yield$Promise$all, _yield$Promise$all2, vcMetrics, experimentalMetrics, payload;
+    var interactionPayloadStart, config, end, start, ufoName, knownSegments, rate, type, abortReason, routeName, featureFlags, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, pageVisibilityAtTTI, pageVisibilityAtTTAI, segments, segmentTree, isDetailedPayload, isPageLoad, calculatePageVisibilityFromTheStartOfPageLoad, moreAccuratePageVisibilityAtTTI, moreAccuratePageVisibilityAtTTAI, labelStack, getInitialPageLoadSSRMetrics, pageLoadInteractionMetrics, getDetailedInteractionMetrics, getPageLoadDetailedInteractionMetrics, newUFOName, resourceTimings, _yield$Promise$all, _yield$Promise$all2, vcMetrics, experimentalMetrics, payload;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -674,7 +676,7 @@ function _createInteractionMetricsPayload() {
           labelStack = interaction.labelStack ? {
             labelStack: (0, _utils.optimizeLabelStack)(interaction.labelStack, (0, _constants.getReactUFOVersion)(interaction.type))
           } : {}; // Page Load
-          getPageLoadInteractionMetrics = function getPageLoadInteractionMetrics() {
+          getInitialPageLoadSSRMetrics = function getInitialPageLoadSSRMetrics() {
             var _config$ssr;
             if (!isPageLoad) {
               return {};
@@ -688,7 +690,8 @@ function _createInteractionMetricsPayload() {
               isBM3ConfigSSRDoneAsFmp: interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp,
               isUFOConfigSSRDoneAsFmp: interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp || !!(config !== null && config !== void 0 && (_config$ssr = config.ssr) !== null && _config$ssr !== void 0 && _config$ssr.getSSRDoneTime)
             });
-          }; // Detailed payload. Page visibility = visible
+          };
+          pageLoadInteractionMetrics = getInitialPageLoadSSRMetrics(); // Detailed payload. Page visibility = visible
           getDetailedInteractionMetrics = function getDetailedInteractionMetrics(resourceTimings) {
             if (experimental || window.__UFO_COMPACT_PAYLOAD__ || !isDetailedPayload) {
               return {};
@@ -731,9 +734,9 @@ function _createInteractionMetricsPayload() {
           }
           newUFOName = (0, _utils.sanitizeUfoName)(ufoName);
           resourceTimings = getResourceTimings(start, end);
-          _context.next = 23;
+          _context.next = 24;
           return Promise.all([(0, _getVcMetrics.default)(interaction), experimental ? (0, _createExperimentalInteractionMetricsPayload.getExperimentalVCMetrics)(interaction) : Promise.resolve(undefined)]);
-        case 23:
+        case 24:
           _yield$Promise$all = _context.sent;
           _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 2);
           vcMetrics = _yield$Promise$all2[0];
@@ -758,7 +761,7 @@ function _createInteractionMetricsPayload() {
                 'event:region': config.region || 'unknown',
                 'experience:key': experimental ? 'custom.experimental-interaction-metrics' : 'custom.interaction-metrics',
                 'experience:name': newUFOName
-              }, getBrowserMetadata()), getSSRProperties(type)), getAssetsMetrics(interaction, resourceTimings)), getPPSMetrics(interaction)), getPaintMetrics(type)), getNavigationMetrics(type)), vcMetrics), experimentalMetrics), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), getStylesheetMetrics()), getErrorCounts(interaction)), {}, {
+              }, getBrowserMetadata()), getSSRProperties(type)), getAssetsMetrics(interaction, pageLoadInteractionMetrics === null || pageLoadInteractionMetrics === void 0 ? void 0 : pageLoadInteractionMetrics.SSRDoneTime)), getPPSMetrics(interaction)), getPaintMetrics(type)), getNavigationMetrics(type)), vcMetrics), experimentalMetrics), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), getStylesheetMetrics()), getErrorCounts(interaction)), {}, {
                 interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
                   namePrefix: config.namePrefix || '',
                   segmentPrefix: config.segmentPrefix || '',
@@ -790,7 +793,7 @@ function _createInteractionMetricsPayload() {
                   marks: optimizeMarks(interaction.marks, (0, _constants.getReactUFOVersion)(interaction.type)),
                   customData: optimizeCustomData(interaction),
                   reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start, (0, _constants.getReactUFOVersion)(interaction.type))
-                }, labelStack), getPageLoadInteractionMetrics()), getDetailedInteractionMetrics(resourceTimings)), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)), {}, {
+                }, labelStack), pageLoadInteractionMetrics), getDetailedInteractionMetrics(resourceTimings)), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)), {}, {
                   'metric:ttai': experimental ? regularTTAI || expTTAI : undefined,
                   'metric:experimental:ttai': expTTAI
                 }),
@@ -804,7 +807,7 @@ function _createInteractionMetricsPayload() {
           }
           payload.attributes.properties['event:sizeInKb'] = getPayloadSize(payload.attributes.properties);
           return _context.abrupt("return", payload);
-        case 31:
+        case 32:
         case "end":
           return _context.stop();
       }
@@ -838,19 +841,47 @@ function _createPayloads() {
   }));
   return _createPayloads.apply(this, arguments);
 }
-function createExperimentalMetricsPayload(interactionId, interaction) {
-  var config = (0, _config.getConfig)();
-  if (!config) {
-    throw Error('UFO Configuration not provided');
-  }
-  var ufoName = (0, _utils.sanitizeUfoName)(interaction.ufoName);
-  var rate = (0, _config.getExperimentalInteractionRate)(ufoName, interaction.type);
-  if (!(0, _coinflip.default)(rate)) {
-    return null;
-  }
-  var pageVisibilityState = (0, _hiddenTiming.getPageVisibilityState)(interaction.start, interaction.end);
-  if (pageVisibilityState !== 'visible') {
-    return null;
-  }
-  return createInteractionMetricsPayload(interaction, interactionId, true);
+function createExperimentalMetricsPayload(_x6, _x7) {
+  return _createExperimentalMetricsPayload.apply(this, arguments);
+}
+function _createExperimentalMetricsPayload() {
+  _createExperimentalMetricsPayload = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(interactionId, interaction) {
+    var config, ufoName, rate, pageVisibilityState, result;
+    return _regenerator.default.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          config = (0, _config.getConfig)();
+          if (config) {
+            _context3.next = 3;
+            break;
+          }
+          throw Error('UFO Configuration not provided');
+        case 3:
+          ufoName = (0, _utils.sanitizeUfoName)(interaction.ufoName);
+          rate = (0, _config.getExperimentalInteractionRate)(ufoName, interaction.type);
+          if ((0, _coinflip.default)(rate)) {
+            _context3.next = 7;
+            break;
+          }
+          return _context3.abrupt("return", null);
+        case 7:
+          pageVisibilityState = (0, _hiddenTiming.getPageVisibilityState)(interaction.start, interaction.end);
+          if (!(pageVisibilityState !== 'visible')) {
+            _context3.next = 10;
+            break;
+          }
+          return _context3.abrupt("return", null);
+        case 10:
+          _context3.next = 12;
+          return createInteractionMetricsPayload(interaction, interactionId, true);
+        case 12:
+          result = _context3.sent;
+          return _context3.abrupt("return", result);
+        case 14:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return _createExperimentalMetricsPayload.apply(this, arguments);
 }

package/dist/cjs/interaction-metrics-init/index.js

@@ -39,17 +39,19 @@ function sinkInteraction(instance, payloadPackage) {
 function sinkExperimentalInteractionMetrics(instance, payloadPackage) {
   (0, _createExperimentalInteractionMetricsPayload.sinkExperimentalHandler)(function (interactionId, interaction) {
     (0, _scheduler.unstable_scheduleCallback)(_scheduler.unstable_IdlePriority, function () {
-      var payload = payloadPackage.createExperimentalMetricsPayload(interactionId, interaction);
-      if (payload) {
-        if ((0, _platformFeatureFlags.fg)('enable_ufo_devtools_api_for_extra_events')) {
-          // NOTE: This API is used by the UFO DevTool Chrome Extension and Criterion
-          var devToolObserver = globalThis.__ufo_devtool_onUfoPayload;
-          if (typeof devToolObserver === 'function') {
-            devToolObserver === null || devToolObserver === void 0 || devToolObserver(payload);
+      var payloadPromise = payloadPackage.createExperimentalMetricsPayload(interactionId, interaction);
+      payloadPromise.then(function (payload) {
+        if (payload) {
+          if ((0, _platformFeatureFlags.fg)('enable_ufo_devtools_api_for_extra_events')) {
+            // NOTE: This API is used by the UFO DevTool Chrome Extension and Criterion
+            var devToolObserver = globalThis.__ufo_devtool_onUfoPayload;
+            if (typeof devToolObserver === 'function') {
+              devToolObserver === null || devToolObserver === void 0 || devToolObserver(payload);
+            }
           }
+          instance.sendOperationalEvent(payload);
         }
-        instance.sendOperationalEvent(payload);
-      }
+      });
     });
   });
 }

package/dist/cjs/vc/index.js

@@ -12,17 +12,19 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _config = require("../config");
 var _vcObserver = require("./vc-observer");
 var _vcObserverNew = _interopRequireDefault(require("./vc-observer-new"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var VCObserverWrapper = /*#__PURE__*/function () {
   function VCObserverWrapper() {
+    var _getConfig;
     var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     (0, _classCallCheck2.default)(this, VCObserverWrapper);
     this.oldVCObserver = new _vcObserver.VCObserver(opts);
     this.newVCObserver = null;
-    var isNewVCObserverEnabled = (0, _platformFeatureFlags.fg)('platform_ufo_vc_observer_new');
+    var isNewVCObserverEnabled = (0, _platformFeatureFlags.fg)('platform_ufo_vc_observer_new') || ((_getConfig = (0, _config.getConfig)()) === null || _getConfig === void 0 || (_getConfig = _getConfig.vc) === null || _getConfig === void 0 ? void 0 : _getConfig.enableVCObserverNew);
     if (isNewVCObserverEnabled) {
       this.newVCObserver = new _vcObserverNew.default({
         selectorConfig: opts.selectorConfig
@@ -34,7 +36,9 @@ var VCObserverWrapper = /*#__PURE__*/function () {
     value: function start(startArg) {
       var _this$oldVCObserver, _this$newVCObserver;
       (_this$oldVCObserver = this.oldVCObserver) === null || _this$oldVCObserver === void 0 || _this$oldVCObserver.start(startArg);
-      (_this$newVCObserver = this.newVCObserver) === null || _this$newVCObserver === void 0 || _this$newVCObserver.start();
+      (_this$newVCObserver = this.newVCObserver) === null || _this$newVCObserver === void 0 || _this$newVCObserver.start({
+        startTime: startArg.startTime
+      });
     }
   }, {
     key: "stop",

package/dist/cjs/vc/vc-observer-new/get-element-name.js

@@ -10,7 +10,15 @@ function getAttributeSelector(element, attributeName) {
   if (!attrValue) {
     return '';
   }
-  return "[".concat(attributeName, "=\"").concat(encodeURIComponent(attrValue), "\"]");
+  return "[".concat(attributeName, "=\"").concat(attrValue, "\"]");
+}
+function isValidSelector(selector) {
+  try {
+    document.querySelector(selector);
+    return true;
+  } catch (err) {
+    return false;
+  }
 }
 function isSelectorUnique(selector) {
   return document.querySelectorAll(selector).length === 1;
@@ -18,11 +26,13 @@ function isSelectorUnique(selector) {
 function getUniqueSelector(selectorConfig, element) {
   var currentElement = element;
   var parts = [];
-  while (currentElement && currentElement.localName !== 'body') {
+  var MAX_DEPTH = 3;
+  var currentDepth = 0;
+  while (currentElement && currentElement.localName !== 'body' && currentDepth <= MAX_DEPTH) {
     var tagName = currentElement.localName;
     var selectorPart = tagName;
-    if (selectorConfig.id && currentElement.id) {
-      selectorPart += "#".concat(encodeURIComponent(currentElement.id));
+    if (selectorConfig.id && currentElement.id && isValidSelector("#".concat(currentElement.id))) {
+      selectorPart += "#".concat(currentElement.id);
     } else if (selectorConfig.dataVC) {
       selectorPart += getAttributeSelector(currentElement, 'data-vc');
     } else if (selectorConfig.testId) {
@@ -30,9 +40,11 @@ function getUniqueSelector(selectorConfig, element) {
     } else if (selectorConfig.role) {
       selectorPart += getAttributeSelector(currentElement, 'role');
     } else if (selectorConfig.className && currentElement.className) {
-      var classNames = Array.from(currentElement.classList).map(encodeURIComponent).join('.');
+      var classNames = Array.from(currentElement.classList).join('.');
       if (classNames) {
-        selectorPart += ".".concat(classNames);
+        if (isValidSelector(".".concat(classNames))) {
+          selectorPart += ".".concat(classNames);
+        }
       }
     }
     parts.unshift(selectorPart);
@@ -41,6 +53,7 @@ function getUniqueSelector(selectorConfig, element) {
       return _potentialSelector;
     }
     currentElement = currentElement.parentElement;
+    currentDepth++;
   }
   var potentialSelector = parts.join(' > ').trim();
   if (!potentialSelector) {

package/dist/cjs/vc/vc-observer-new/index.js

@@ -27,7 +27,6 @@ var VCObserverNew = exports.default = /*#__PURE__*/function () {
     var _config$selectorConfi,
       _this = this;
     (0, _classCallCheck2.default)(this, VCObserverNew);
-    (0, _defineProperty2.default)(this, "startTime", 0);
     (0, _defineProperty2.default)(this, "viewportObserver", null);
     (0, _defineProperty2.default)(this, "windowEventObserver", null);
     this.entriesTimeline = new _entriesTimeline.default();
@@ -75,10 +74,12 @@ var VCObserverNew = exports.default = /*#__PURE__*/function () {
   }
   return (0, _createClass2.default)(VCObserverNew, [{
     key: "start",
-    value: function start() {
+    value: function start(_ref2) {
       var _this$viewportObserve, _this$windowEventObse;
+      var startTime = _ref2.startTime;
       (_this$viewportObserve = this.viewportObserver) === null || _this$viewportObserve === void 0 || _this$viewportObserve.start();
       (_this$windowEventObse = this.windowEventObserver) === null || _this$windowEventObse === void 0 || _this$windowEventObse.start();
+      this.entriesTimeline.clear();
     }
   }, {
     key: "stop",
@@ -104,7 +105,9 @@ var VCObserverNew = exports.default = /*#__PURE__*/function () {
               });
               _context.next = 6;
               return calculator_fy25_03.calculate({
-                orderedEntries: orderedEntries
+                orderedEntries: orderedEntries,
+                startTime: start,
+                stopTime: stop
               });
             case 6:
               fy25_03 = _context.sent;

package/dist/cjs/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js

@@ -24,11 +24,11 @@ var AbstractVCCalculatorBase = exports.default = /*#__PURE__*/function () {
         var _this = this,
           _vcDetails$90$t,
           _vcDetails$;
-        var orderedEntries, filteredEntries, isVCClean, vcDetails;
+        var startTime, stopTime, orderedEntries, filteredEntries, isVCClean, vcDetails;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              orderedEntries = _ref.orderedEntries;
+              startTime = _ref.startTime, stopTime = _ref.stopTime, orderedEntries = _ref.orderedEntries;
               filteredEntries = orderedEntries.filter(function (entry) {
                 return _this.isEntryIncluded(entry);
               });
@@ -49,6 +49,8 @@ var AbstractVCCalculatorBase = exports.default = /*#__PURE__*/function () {
                   width: (0, _getViewportWidth.default)(),
                   height: (0, _getViewportHeight.default)()
                 },
+                startTime: startTime,
+                stopTime: stopTime,
                 orderedEntries: filteredEntries,
                 percentiles: [25, 50, 75, 80, 85, 90, 95, 98, 99]
               });

package/dist/cjs/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/canvas-pixel.js

@@ -228,17 +228,16 @@ function calculateDrawnPixelsRaw(_x, _x2, _x3) {
 }
 function _calculateDrawnPixelsRaw() {
   _calculateDrawnPixelsRaw = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(imageData, scaleFactor, arraySize) {
-    var data, scaleCompensation, arr, i, color, colorIndex;
+    var data, arr, i, color, colorIndex;
     return _regenerator.default.wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
           data = imageData.data;
-          scaleCompensation = Math.round(1 / (scaleFactor * scaleFactor));
           arr = new Uint32Array(arraySize);
           i = 0;
-        case 4:
+        case 3:
           if (!(i < data.length)) {
-            _context2.next = 12;
+            _context2.next = 11;
             break;
           }
           // Check alpha
@@ -250,21 +249,21 @@ function _calculateDrawnPixelsRaw() {
             // The | operator combines all bits together
             color = data[i] << 16 | data[i + 1] << 8 | data[i + 2];
             colorIndex = color - 1;
-            arr[colorIndex] = (arr[colorIndex] || 0) + scaleCompensation;
+            arr[colorIndex] = (arr[colorIndex] || 0) + 1;
           }
           if (!(i % 10000 === 0)) {
-            _context2.next = 9;
+            _context2.next = 8;
             break;
           }
-          _context2.next = 9;
+          _context2.next = 8;
           return (0, _taskYield.default)();
-        case 9:
+        case 8:
           i += 4;
-          _context2.next = 4;
+          _context2.next = 3;
           break;
-        case 12:
+        case 11:
           return _context2.abrupt("return", arr);
-        case 13:
+        case 12:
         case "end":
           return _context2.stop();
       }