@atlaskit/react-ufo 3.3.2 → 3.4.0

package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/index.js

@@ -3,7 +3,8 @@ import { ViewportCanvas } from './canvas-pixel';
 export default async function calculateTTVCPercentiles({
   viewport,
   orderedEntries,
-  percentiles
+  percentiles,
+  startTime
 }) {
   const canvas = new ViewportCanvas(viewport, fg('platform_ufo_canvas_heatmap_full_precision') ? 1 : 0.25);
   const elementMap = new Map();
@@ -22,10 +23,11 @@ export default async function calculateTTVCPercentiles({
 
   // Get pixel counts
   const timePixelCounts = await canvas.getPixelCounts();
-  const viewportTotalPixels = viewport.width * viewport.height;
-  return calculatePercentiles(timePixelCounts, elementMap, percentiles, viewportTotalPixels);
+  const canvasDimenstions = canvas.getScaledDimensions();
+  const totalPixels = canvasDimenstions.width * canvasDimenstions.height;
+  return calculatePercentiles(timePixelCounts, elementMap, percentiles, totalPixels, startTime);
 }
-export function calculatePercentiles(timePixelCounts, elementMap, unorderedPercentiles, totalPixels) {
+export function calculatePercentiles(timePixelCounts, elementMap, unorderedPercentiles, totalPixels, startTime) {
   const results = {};
   let cumulativePixels = 0;
   const percentiles = unorderedPercentiles.sort((a, b) => a - b);
@@ -42,7 +44,7 @@ export function calculatePercentiles(timePixelCounts, elementMap, unorderedPerce
     let matchesAnyCheckpoints = false;
     while (percentileIndex < percentiles.length && percentCovered >= percentiles[percentileIndex]) {
       results[`${percentiles[percentileIndex]}`] = {
-        t: Number(time),
+        t: Math.round(Number(time - startTime)),
         e: Array.from(domElementsBuffer)
       };
       percentileIndex++;
@@ -55,15 +57,16 @@ export function calculatePercentiles(timePixelCounts, elementMap, unorderedPerce
       break;
     }
   }
-
-  // Fill in any missing percentiles
-  for (const percentile of percentiles) {
+  let previousResult = {
+    t: 0,
+    e: []
+  };
+  for (let i = 0; i < percentiles.length; i++) {
+    const percentile = percentiles[i];
     if (!(percentile in results)) {
-      results[`${percentile}`] = {
-        t: 0,
-        e: []
-      };
+      results[`${percentile}`] = previousResult;
     }
+    previousResult = results[`${percentile}`];
   }
   return results;
 }

package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/heatmap/index.js

@@ -175,7 +175,7 @@ class Heatmap {
       }
     }
   }
-  async getVCPercentMetrics(vcPercentCheckpoint) {
+  async getVCPercentMetrics(vcPercentCheckpoint, startTime) {
     const sortedCheckpoints = [...vcPercentCheckpoint].sort((a, b) => a - b);
     const flattenHeatmap = this.map.flat();
     const totalCells = flattenHeatmap.length;
@@ -232,7 +232,7 @@ class Heatmap {
         }
         matchesAnyCheckpoints = true;
         result[checkpoint.toString()] = {
-          t: timestamp,
+          t: Math.round(timestamp - startTime),
           e: domElements
         };
       }
@@ -249,13 +249,14 @@ class Heatmap {
 export default async function calculateTTVCPercentiles({
   orderedEntries,
   viewport,
-  percentiles
+  percentiles,
+  startTime
 }) {
   const heatmap = new Heatmap({
     viewport,
     heatmapSize: 200
   });
   await heatmap.applyEntriesToHeatmap(orderedEntries);
-  const vcDetails = await heatmap.getVCPercentMetrics(percentiles);
+  const vcDetails = await heatmap.getVCPercentMetrics(percentiles, startTime);
   return vcDetails;
 }

package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/rect-sweeping-line/index.js

@@ -4,7 +4,8 @@ import calculateUnionArea from './calc-union-area';
 export default async function calculateTTVCPercentiles({
   orderedEntries,
   viewport,
-  percentiles
+  percentiles,
+  startTime
 }) {
   const sortedPercentiles = [...percentiles].sort((a, b) => a - b);
   const viewportArea = viewport.width * viewport.height;
@@ -43,7 +44,7 @@ export default async function calculateTTVCPercentiles({
       }
       matchesAnyCheckpoints = true;
       checkpoints[checkpoint.toString()] = {
-        t: iEntry.time,
+        t: Math.round(iEntry.time - startTime),
         e: domElements
       };
     }

package/dist/es2019/vc/vc-observer-new/window-event-observer/index.js

@@ -9,6 +9,9 @@ export default class WindowEventObserver {
     const unbindCallback = bind(window, {
       type,
       listener: event => {
+        if (!event.isTrusted) {
+          return;
+        }
         this.onEvent({
           time: event.timeStamp,
           type,
@@ -16,7 +19,8 @@ export default class WindowEventObserver {
         });
       },
       options: {
-        passive: true
+        passive: true,
+        once: true
       }
     });
     this.unbindFns.push(unbindCallback);

package/dist/esm/assets/index.js

@@ -1,8 +1,7 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { calculateTransferType, DISK_KEY, MEMORY_KEY, NETWORK_KEY, round } from './utils';
+import { calculateTransferType, checkIfTimingsAvailable, DISK_KEY, getTypeOfRequest, MEMORY_KEY, NETWORK_KEY, round } from './utils';
 export var CHRSummary = /*#__PURE__*/function () {
   function CHRSummary() {
     _classCallCheck(this, CHRSummary);
@@ -14,9 +13,8 @@ export var CHRSummary = /*#__PURE__*/function () {
   return _createClass(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 = calculateTransferType(asset.type, asset.duration, size);
+      var encodedSize = asset.encodedSize || 0;
+      var type = calculateTransferType(asset.name, asset.initiatorType, asset.duration, asset.transferSize);
       if (type === null) {
         return;
       }
@@ -47,28 +45,39 @@ export var CHRReporter = /*#__PURE__*/function () {
     _defineProperty(this, "all", new CHRSummary());
     _defineProperty(this, "allAtlassian", new CHRSummary());
     _defineProperty(this, "preloaded", new CHRSummary());
+    _defineProperty(this, "defaultAllowedTypes", ['js']);
   }
   return _createClass(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 = _slicedToArray(_ref, 2),
-            label = _ref2[0],
-            entry = _ref2[1];
-          if (assetsClassification.all) {
+        if (resourceTimings === null) {
+          return null;
+        }
+        resourceTimings.forEach(function (entry) {
+          if (!checkIfTimingsAvailable(entry)) {
+            return;
+          }
+          if (entry.encodedSize === entry.decodedSize) {
+            // incorrectly reported size
+            return;
+          }
+          var type = 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);
           }
@@ -76,11 +85,12 @@ export var 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/esm/assets/utils.js

@@ -1,10 +1,10 @@
 /* Borrowed from https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/performance/browser-metrics/src/plugins/timings/resource.ts */
-export var cacheableTypes = ['script', 'link'];
+export var cacheableTypes = ['script', 'link', 'other'];
 export var MEMORY_KEY = 'mem';
 export var DISK_KEY = 'disk';
 export var NETWORK_KEY = 'net';
-export var calculateTransferType = function calculateTransferType(type, duration, size) {
-  if (!cacheableTypes.includes(type)) {
+export var 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) {
@@ -18,6 +18,49 @@ export var calculateTransferType = function calculateTransferType(type, duration
   }
   return NETWORK_KEY;
 };
+export var 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;
+};
+export var checkIfTimingsAvailable = function checkIfTimingsAvailable(entry) {
+  if (entry.decodedSize === 0 && entry.encodedSize === 0 && entry.requestStart === 0 && entry.responseStart === 0) {
+    return false;
+  }
+  return true;
+};
 export var round = function round(n) {
   if (isNaN(n)) {
     return 0;

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

@@ -25,6 +25,7 @@ import { getPageVisibilityState } from '../hidden-timing';
 import * as initialPageLoadExtraTiming from '../initial-page-load-extra-timing';
 import { interactionSpans as atlaskitInteractionSpans } from '../interaction-metrics';
 import * as resourceTiming from '../resource-timing';
+import { filterResourceTimings } from '../resource-timing/common/utils/resource-timing-buffer';
 import { roundEpsilon } from '../round-number';
 import * as ssr from '../ssr';
 import { buildSegmentTree, labelStackStartWith, optimizeLabelStack, sanitizeUfoName, stringifyLabelStackFully } from './common/utils';
@@ -246,18 +247,19 @@ function getSSRProperties(type) {
     'ssr:featureFlags': getSSRFeatureFlags(type)
   };
 }
-var getAssetsMetrics = function getAssetsMetrics(interaction, resourceTimings) {
+var getAssetsMetrics = function getAssetsMetrics(interaction, SSRDoneTime) {
   try {
     var 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 CHRReporter();
-    var assets = reporter.get(resourceTimings, assetsClassification);
+    var resourceTimings = filterResourceTimings(interaction.start, interaction.end);
+    var assets = reporter.get(resourceTimings, assetsConfig, SSRDoneTime);
     if (assets) {
       // Only add assets in case it exists
       return {
@@ -636,7 +638,7 @@ function createInteractionMetricsPayload(_x, _x2, _x3) {
 function _createInteractionMetricsPayload() {
   _createInteractionMetricsPayload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.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 _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -663,7 +665,7 @@ function _createInteractionMetricsPayload() {
           labelStack = interaction.labelStack ? {
             labelStack: optimizeLabelStack(interaction.labelStack, getReactUFOVersion(interaction.type))
           } : {}; // Page Load
-          getPageLoadInteractionMetrics = function getPageLoadInteractionMetrics() {
+          getInitialPageLoadSSRMetrics = function getInitialPageLoadSSRMetrics() {
             var _config$ssr;
             if (!isPageLoad) {
               return {};
@@ -677,7 +679,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 {};
@@ -720,9 +723,9 @@ function _createInteractionMetricsPayload() {
           }
           newUFOName = sanitizeUfoName(ufoName);
           resourceTimings = getResourceTimings(start, end);
-          _context.next = 23;
+          _context.next = 24;
           return Promise.all([getVCMetrics(interaction), experimental ? getExperimentalVCMetrics(interaction) : Promise.resolve(undefined)]);
-        case 23:
+        case 24:
           _yield$Promise$all = _context.sent;
           _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 2);
           vcMetrics = _yield$Promise$all2[0];
@@ -747,7 +750,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 || '',
@@ -779,7 +782,7 @@ function _createInteractionMetricsPayload() {
                   marks: optimizeMarks(interaction.marks, getReactUFOVersion(interaction.type)),
                   customData: optimizeCustomData(interaction),
                   reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start, 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
                 }),
@@ -793,7 +796,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();
       }
@@ -827,19 +830,47 @@ function _createPayloads() {
   }));
   return _createPayloads.apply(this, arguments);
 }
-export function createExperimentalMetricsPayload(interactionId, interaction) {
-  var config = getConfig();
-  if (!config) {
-    throw Error('UFO Configuration not provided');
-  }
-  var ufoName = sanitizeUfoName(interaction.ufoName);
-  var rate = getExperimentalInteractionRate(ufoName, interaction.type);
-  if (!coinflip(rate)) {
-    return null;
-  }
-  var pageVisibilityState = getPageVisibilityState(interaction.start, interaction.end);
-  if (pageVisibilityState !== 'visible') {
-    return null;
-  }
-  return createInteractionMetricsPayload(interaction, interactionId, true);
+export function createExperimentalMetricsPayload(_x6, _x7) {
+  return _createExperimentalMetricsPayload.apply(this, arguments);
+}
+function _createExperimentalMetricsPayload() {
+  _createExperimentalMetricsPayload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(interactionId, interaction) {
+    var config, ufoName, rate, pageVisibilityState, result;
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          config = getConfig();
+          if (config) {
+            _context3.next = 3;
+            break;
+          }
+          throw Error('UFO Configuration not provided');
+        case 3:
+          ufoName = sanitizeUfoName(interaction.ufoName);
+          rate = getExperimentalInteractionRate(ufoName, interaction.type);
+          if (coinflip(rate)) {
+            _context3.next = 7;
+            break;
+          }
+          return _context3.abrupt("return", null);
+        case 7:
+          pageVisibilityState = 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/esm/interaction-metrics-init/index.js

@@ -29,17 +29,19 @@ function sinkInteraction(instance, payloadPackage) {
 function sinkExperimentalInteractionMetrics(instance, payloadPackage) {
   sinkExperimentalHandler(function (interactionId, interaction) {
     scheduleCallback(idlePriority, function () {
-      var payload = payloadPackage.createExperimentalMetricsPayload(interactionId, interaction);
-      if (payload) {
-        if (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 (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/esm/vc/index.js

@@ -7,15 +7,17 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 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) { _defineProperty(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; }
 import { fg } from '@atlaskit/platform-feature-flags';
+import { getConfig } from '../config';
 import { VCObserver } from './vc-observer';
 import VCObserverNew from './vc-observer-new';
 var VCObserverWrapper = /*#__PURE__*/function () {
   function VCObserverWrapper() {
+    var _getConfig;
     var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     _classCallCheck(this, VCObserverWrapper);
     this.oldVCObserver = new VCObserver(opts);
     this.newVCObserver = null;
-    var isNewVCObserverEnabled = fg('platform_ufo_vc_observer_new');
+    var isNewVCObserverEnabled = fg('platform_ufo_vc_observer_new') || ((_getConfig = getConfig()) === null || _getConfig === void 0 || (_getConfig = _getConfig.vc) === null || _getConfig === void 0 ? void 0 : _getConfig.enableVCObserverNew);
     if (isNewVCObserverEnabled) {
       this.newVCObserver = new VCObserverNew({
         selectorConfig: opts.selectorConfig
@@ -27,7 +29,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/esm/vc/vc-observer-new/get-element-name.js

@@ -4,7 +4,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;
@@ -12,11 +20,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) {
@@ -24,9 +34,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);
@@ -35,6 +47,7 @@ function getUniqueSelector(selectorConfig, element) {
       return _potentialSelector;
     }
     currentElement = currentElement.parentElement;
+    currentDepth++;
   }
   var potentialSelector = parts.join(' > ').trim();
   if (!potentialSelector) {

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

@@ -20,7 +20,6 @@ var VCObserverNew = /*#__PURE__*/function () {
     var _config$selectorConfi,
       _this = this;
     _classCallCheck(this, VCObserverNew);
-    _defineProperty(this, "startTime", 0);
     _defineProperty(this, "viewportObserver", null);
     _defineProperty(this, "windowEventObserver", null);
     this.entriesTimeline = new EntriesTimeline();
@@ -68,10 +67,12 @@ var VCObserverNew = /*#__PURE__*/function () {
   }
   return _createClass(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",
@@ -97,7 +98,9 @@ var VCObserverNew = /*#__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/esm/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js

@@ -17,11 +17,11 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
         var _this = this,
           _vcDetails$90$t,
           _vcDetails$;
-        var orderedEntries, filteredEntries, isVCClean, vcDetails;
+        var startTime, stopTime, orderedEntries, filteredEntries, isVCClean, vcDetails;
         return _regeneratorRuntime.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);
               });
@@ -42,6 +42,8 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
                   width: getViewportWidth(),
                   height: getViewportHeight()
                 },
+                startTime: startTime,
+                stopTime: stopTime,
                 orderedEntries: filteredEntries,
                 percentiles: [25, 50, 75, 80, 85, 90, 95, 98, 99]
               });