@atlaskit/react-ufo 3.14.7 → 3.14.9

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.14.9
+
+### Patch Changes
+
+- [#180517](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/180517)
+  [`cba15052f7278`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cba15052f7278) -
+  AFO-4101 properly aborting previous interacttion
+
+## 3.14.8
+
+### Patch Changes
+
+- [#179381](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/179381)
+  [`05fa3d08ecda9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/05fa3d08ecda9) -
+  User vc observer per interaction
+
 ## 3.14.7
 
 ### Patch Changes

package/dist/cjs/create-experimental-interaction-metrics-payload/index.js

@@ -95,17 +95,19 @@ function getExperimentalVCMetrics(_x) {
 }
 function _getExperimentalVCMetrics() {
   _getExperimentalVCMetrics = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(interaction) {
-    var _interaction$apdex, prefix, result, VC, pageVisibilityUpToTTAI;
+    var vcObserver, _interaction$apdex, prefix, result, VC, pageVisibilityUpToTTAI;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          if (!experimentalVC.vcObserver) {
-            _context.next = 12;
+          // Use per-interaction VC observer if available, otherwise fall back to global experimentalVC
+          vcObserver = interaction.experimentalVCObserver || experimentalVC.vcObserver;
+          if (!vcObserver) {
+            _context.next = 13;
             break;
           }
           prefix = 'ufo-experimental';
-          _context.next = 4;
-          return experimentalVC.vcObserver.getVCResult({
+          _context.next = 5;
+          return vcObserver.getVCResult({
             start: interaction.start,
             stop: interaction.end,
             tti: (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 || (_interaction$apdex = _interaction$apdex[0]) === null || _interaction$apdex === void 0 ? void 0 : _interaction$apdex.stopTime,
@@ -115,28 +117,28 @@ function _getExperimentalVCMetrics() {
             experienceKey: interaction.ufoName,
             interactionId: interaction.id
           });
-        case 4:
+        case 5:
           result = _context.sent;
           VC = result === null || result === void 0 ? void 0 : result['metrics:vc'];
           if (!(!VC || !(result !== null && result !== void 0 && result["".concat(prefix, ":vc:clean")]))) {
-            _context.next = 8;
+            _context.next = 9;
             break;
           }
           return _context.abrupt("return", result);
-        case 8:
+        case 9:
           pageVisibilityUpToTTAI = (0, _hiddenTiming.getPageVisibilityState)(interaction.start, interaction.end);
           if (!(interaction.abortReason || pageVisibilityUpToTTAI !== 'visible')) {
-            _context.next = 11;
+            _context.next = 12;
             break;
           }
           return _context.abrupt("return", result);
-        case 11:
+        case 12:
           return _context.abrupt("return", _objectSpread(_objectSpread({}, result), {}, {
             'metric:experimental:vc90': VC['90']
           }));
-        case 12:
-          return _context.abrupt("return", null);
         case 13:
+          return _context.abrupt("return", null);
+        case 14:
         case "end":
           return _context.stop();
       }

package/dist/cjs/create-payload/utils/get-vc-metrics.js

@@ -23,7 +23,7 @@ function getVCMetrics(_x) {
 function _getVCMetrics() {
   _getVCMetrics = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(interaction) {
     var _config$vc, _config$vc$ssrWhiteli, _interaction$apdex, _config$vc2, _config$vc3, _config$experimentalI, _result$ufoVcRev;
-    var config, interactionStatus, pageVisibilityUpToTTAI, shouldReportVCMetrics, isSSREnabled, ssr, tti, prefix, result, mostRecentVCRevision, mostRecentVCRevisionPayload;
+    var config, interactionStatus, pageVisibilityUpToTTAI, shouldReportVCMetrics, observer, isSSREnabled, ssr, tti, prefix, result, mostRecentVCRevision, mostRecentVCRevisionPayload;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -34,7 +34,7 @@ function _getVCMetrics() {
           }
           return _context.abrupt("return", {});
         case 3:
-          if (!((0, _platformFeatureFlags.fg)('platform_ufo_enable_interactions_vc') || (0, _platformFeatureFlags.fg)('platform_ufo_enable_interactivity_jsm'))) {
+          if (!(0, _platformFeatureFlags.fg)('platform_ufo_enable_vc_press_interactions')) {
             _context.next = 8;
             break;
           }
@@ -55,14 +55,15 @@ function _getVCMetrics() {
         case 10:
           interactionStatus = (0, _getInteractionStatus.default)(interaction);
           pageVisibilityUpToTTAI = (0, _getPageVisibilityUpToTtai.default)(interaction);
-          shouldReportVCMetrics = interactionStatus.originalInteractionStatus === 'SUCCEEDED' && pageVisibilityUpToTTAI === 'visible';
+          shouldReportVCMetrics = interactionStatus.originalInteractionStatus === 'SUCCEEDED' && pageVisibilityUpToTTAI === 'visible'; // Use per-interaction VC observer if available, otherwise fall back to global
+          observer = interaction.vcObserver || (0, _vc.getVCObserver)();
           if (!(!shouldReportVCMetrics && (0, _platformFeatureFlags.fg)('platform_ufo_no_vc_on_aborted'))) {
-            _context.next = 16;
+            _context.next = 17;
             break;
           }
-          (0, _vc.getVCObserver)().stop(interaction.ufoName);
+          observer.stop(interaction.ufoName);
           return _context.abrupt("return", {});
-        case 16:
+        case 17:
           isSSREnabled = interaction.type === 'page_load' && ((config === null || config === void 0 ? void 0 : config.ssr) || (config === null || config === void 0 || (_config$vc$ssrWhiteli = config.vc.ssrWhitelist) === null || _config$vc$ssrWhiteli === void 0 ? void 0 : _config$vc$ssrWhiteli.includes(interaction.ufoName)));
           ssr = interaction.type === 'page_load' && isSSREnabled ? {
             ssr: (0, _getSsrDoneTimeValue.default)(config)
@@ -70,8 +71,8 @@ function _getVCMetrics() {
           _interactionMetrics.postInteractionLog.setVCObserverSSRConfig(ssr);
           tti = (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 || (_interaction$apdex = _interaction$apdex[0]) === null || _interaction$apdex === void 0 ? void 0 : _interaction$apdex.stopTime;
           prefix = 'ufo';
-          _context.next = 23;
-          return (0, _vc.getVCObserver)().getVCResult(_objectSpread({
+          _context.next = 24;
+          return observer.getVCResult(_objectSpread({
             start: interaction.start,
             stop: interaction.end,
             tti: tti,
@@ -83,10 +84,13 @@ function _getVCMetrics() {
             interactionId: interaction.id,
             includeSSRRatio: (_config$vc3 = config.vc) === null || _config$vc3 === void 0 ? void 0 : _config$vc3.includeSSRRatio
           }, ssr));
-        case 23:
+        case 24:
           result = _context.sent;
+          if ((0, _platformFeatureFlags.fg)('platform_ufo_enable_vc_observer_per_interaction')) {
+            observer.stop(interaction.ufoName);
+          }
           if ((_config$experimentalI = config.experimentalInteractionMetrics) !== null && _config$experimentalI !== void 0 && _config$experimentalI.enabled) {
-            (0, _vc.getVCObserver)().stop(interaction.ufoName);
+            observer.stop(interaction.ufoName);
           }
           _interactionMetrics.postInteractionLog.setLastInteractionFinishVCResult(result);
           mostRecentVCRevision = (0, _config.getMostRecentVCRevision)(interaction.ufoName);
@@ -95,15 +99,15 @@ function _getVCMetrics() {
             return revision === mostRecentVCRevision;
           });
           if (!(!shouldReportVCMetrics || !(mostRecentVCRevisionPayload !== null && mostRecentVCRevisionPayload !== void 0 && mostRecentVCRevisionPayload.clean))) {
-            _context.next = 30;
+            _context.next = 32;
             break;
           }
           return _context.abrupt("return", result);
-        case 30:
+        case 32:
           return _context.abrupt("return", _objectSpread(_objectSpread({}, result), {}, {
             'metric:vc90': mostRecentVCRevisionPayload['metric:vc90']
           }));
-        case 31:
+        case 33:
         case "end":
           return _context.stop();
       }

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

@@ -569,7 +569,9 @@ function finishInteraction(id, data) {
   (0, _experienceTraceIdContext.clearActiveTrace)();
   callCleanUpCallbacks(data);
   if ((_getConfig4 = (0, _config.getConfig)()) !== null && _getConfig4 !== void 0 && (_getConfig4 = _getConfig4.vc) !== null && _getConfig4 !== void 0 && _getConfig4.stopVCAtInteractionFinish) {
-    data.vc = (0, _vc.getVCObserver)().getVCRawData();
+    // Use per-interaction VC observer if available, otherwise fall back to global
+    var observer = data.vcObserver || (0, _vc.getVCObserver)();
+    data.vc = observer.getVCRawData();
   }
   if (!((_getConfig5 = (0, _config.getConfig)()) !== null && _getConfig5 !== void 0 && (_getConfig5 = _getConfig5.experimentalInteractionMetrics) !== null && _getConfig5 !== void 0 && _getConfig5.enabled)) {
     remove(id);
@@ -781,6 +783,7 @@ function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelS
   if ((_getConfig11 = (0, _config.getConfig)()) !== null && _getConfig11 !== void 0 && (_getConfig11 = _getConfig11.postInteractionLog) !== null && _getConfig11 !== void 0 && _getConfig11.enabled) {
     postInteractionLog.reset();
   }
+  var vcObserver;
   var previousTime = startTime;
   var timeoutTime = (0, _platformFeatureFlags.fg)('platform_ufo_enable_timeout_config') ? (0, _config.getInteractionTimeout)(ufoName) : CLEANUP_TIMEOUT;
   var timerID = setTimeout(function () {
@@ -803,6 +806,21 @@ function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelS
     this.timerID = newTimerID;
   }
   var addFeatureFlagsToInteraction = (0, _coinflip.default)((0, _config.getCapabilityRate)('feature_flag_access'));
+  var config = (0, _config.getConfig)();
+  if (config && config.vc) {
+    var vcOptions = {
+      heatmapSize: config.vc.heatmapSize,
+      oldDomUpdates: config.vc.oldDomUpdates,
+      devToolsEnabled: config.vc.devToolsEnabled,
+      selectorConfig: config.vc.selectorConfig,
+      ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder,
+      disableSizeAndPositionCheck: config.vc.disableSizeAndPositionCheck
+    };
+    vcObserver = (0, _platformFeatureFlags.fg)('platform_ufo_enable_vc_observer_per_interaction') ? (0, _vc.newVCObserver)(vcOptions) : undefined;
+  }
+
+  // Create per-interaction VC observer when feature flag is enabled
+
   var metrics = {
     id: interactionId,
     start: startTime,
@@ -843,7 +861,8 @@ function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelS
     redirects: [],
     timerID: timerID,
     changeTimeout: changeTimeout,
-    trace: trace
+    trace: trace,
+    vcObserver: vcObserver
   };
   if (addFeatureFlagsToInteraction) {
     _featureFlagsAccessed.currentFeatureFlagsAccessed.clear();
@@ -862,13 +881,21 @@ function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelS
   metrics.cleanupCallbacks.push(function () {
     clearTimeout(metrics.timerID);
   });
+  // Add cleanup for per-interaction VC observer
+  if (vcObserver) {
+    metrics.cleanupCallbacks.push(function () {
+      vcObserver.stop(ufoName);
+    });
+  }
   var awaitBM3TTIList = (0, _config.getAwaitBM3TTIList)();
   if (awaitBM3TTIList.includes(ufoName)) {
     addHoldByID(interactionId, [], ufoName, ufoName, true);
   }
-  if (type === 'transition') {
+  if (type === 'transition' || type === 'page_load') {
     var _getConfig12;
-    (0, _vc.getVCObserver)().start({
+    // Use per-interaction VC observer if available, otherwise fall back to global
+    var observer = vcObserver || (0, _vc.getVCObserver)();
+    observer.start({
       startTime: startTime,
       experienceKey: ufoName
     });
@@ -881,20 +908,13 @@ function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelS
       });
     }
   }
-  if (type === 'press' && ((0, _platformFeatureFlags.fg)('platform_ufo_enable_interactions_vc') || (0, _platformFeatureFlags.fg)('platform_ufo_enable_interactivity_jsm'))) {
-    var _getConfig13;
-    (0, _vc.getVCObserver)().start({
+  if (type === 'press' && (0, _platformFeatureFlags.fg)('platform_ufo_enable_vc_press_interactions')) {
+    // Use per-interaction VC observer if available, otherwise fall back to global
+    var _observer = vcObserver || (0, _vc.getVCObserver)();
+    _observer.start({
       startTime: startTime,
       experienceKey: ufoName
     });
-    postInteractionLog.startVCObserver({
-      startTime: startTime
-    });
-    if ((_getConfig13 = (0, _config.getConfig)()) !== null && _getConfig13 !== void 0 && (_getConfig13 = _getConfig13.experimentalInteractionMetrics) !== null && _getConfig13 !== void 0 && _getConfig13.enabled) {
-      _createExperimentalInteractionMetricsPayload.experimentalVC.start({
-        startTime: startTime
-      });
-    }
   }
 }
 function addBrowserMetricEvent(event) {

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

@@ -101,9 +101,11 @@ function init(analyticsWebClientAsync, config) {
       ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder,
       disableSizeAndPositionCheck: config.vc.disableSizeAndPositionCheck
     };
-    (0, _vc.getVCObserver)(vcOptions).start({
-      startTime: 0
-    });
+    if (!(0, _platformFeatureFlags.fg)('platform_ufo_enable_vc_observer_per_interaction')) {
+      (0, _vc.getVCObserver)(vcOptions).start({
+        startTime: 0
+      });
+    }
     _interactionMetrics.postInteractionLog.initializeVCObserver(vcOptions);
     _interactionMetrics.postInteractionLog.startVCObserver({
       startTime: 0

package/dist/cjs/trace-interaction/index.js

@@ -4,46 +4,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _uuid = require("uuid");
-var _coinflip = _interopRequireDefault(require("../coinflip"));
-var _config = require("../config");
-var _interactionIdContext = require("../interaction-id-context");
-var _interactionMetrics = require("../interaction-metrics");
-var _routeNameContext = _interopRequireDefault(require("../route-name-context"));
-function mapToInteractionType(eventType) {
-  if (eventType === 'click' || eventType === 'dblclick' || eventType === 'mousedown') {
-    return 'press';
-  }
-  if (eventType === 'mouseenter' || eventType === 'mouseover') {
-    return 'hover';
+Object.defineProperty(exports, "UNSAFE__DO_NOT_USE_traceUFOInteraction", {
+  enumerable: true,
+  get: function get() {
+    return _traceUfoInteraction.default;
   }
-  return undefined;
-}
+});
+exports.default = void 0;
+var _mapToInteractionType = _interopRequireDefault(require("./internal/map-to-interaction-type"));
+var _traceUfoInteraction = _interopRequireDefault(require("./internal/trace-ufo-interaction"));
 function traceUFOInteraction(name, event) {
   if (!event || !event.isTrusted) {
     return;
   }
-  var interactionType = mapToInteractionType(event.type);
+  var interactionType = (0, _mapToInteractionType.default)(event.type);
   if (!interactionType) {
     // when interactionType is falsy we do not yet support this type of event. should we blow up with throwing error instead?
     return;
   }
-  var rate = (0, _config.getInteractionRate)(name, interactionType);
-  var pressInteractionsList = (0, _config.getDoNotAbortActivePressInteraction)();
-  if (pressInteractionsList !== null && pressInteractionsList !== void 0 && pressInteractionsList.includes(name)) {
-    var interaction = (0, _interactionMetrics.getActiveInteraction)();
-    if ((interaction === null || interaction === void 0 ? void 0 : interaction.ufoName) !== 'unknown' && (interaction === null || interaction === void 0 ? void 0 : interaction.type) === 'press') {
-      return;
-    }
-  }
-  if ((0, _coinflip.default)(rate)) {
-    var _event$timeStamp;
-    (0, _interactionMetrics.abortAll)('new_interaction', name);
-    var startTimestamp = (_event$timeStamp = event.timeStamp) !== null && _event$timeStamp !== void 0 ? _event$timeStamp : performance.now();
-    var newId = (0, _uuid.v4)();
-    _interactionIdContext.DefaultInteractionID.current = newId;
-    (0, _interactionMetrics.addNewInteraction)(newId, name, 'press', startTimestamp, rate, [], _routeNameContext.default.current);
-  }
+  return (0, _traceUfoInteraction.default)(name, interactionType, event.timeStamp);
 }
 var _default = exports.default = traceUFOInteraction;

package/dist/cjs/trace-interaction/internal/map-to-interaction-type.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function mapToInteractionType(eventType) {
+  if (eventType === 'click' || eventType === 'dblclick' || eventType === 'mousedown') {
+    return 'press';
+  }
+  if (eventType === 'mouseenter' || eventType === 'mouseover') {
+    return 'hover';
+  }
+  return undefined;
+}
+var _default = exports.default = mapToInteractionType;

package/dist/cjs/trace-interaction/internal/trace-ufo-interaction.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _uuid = require("uuid");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _coinflip = _interopRequireDefault(require("../../coinflip"));
+var _config = require("../../config");
+var _experienceTraceIdContext = require("../../experience-trace-id-context");
+var _interactionIdContext = require("../../interaction-id-context");
+var _interactionMetrics = require("../../interaction-metrics");
+var _routeNameContext = _interopRequireDefault(require("../../route-name-context"));
+function traceUFOInteraction(name, interactionType, startTime) {
+  var rate = (0, _config.getInteractionRate)(name, interactionType);
+  var pressInteractionsList = (0, _config.getDoNotAbortActivePressInteraction)();
+  if (pressInteractionsList !== null && pressInteractionsList !== void 0 && pressInteractionsList.includes(name)) {
+    var interaction = (0, _interactionMetrics.getActiveInteraction)();
+    if ((interaction === null || interaction === void 0 ? void 0 : interaction.ufoName) !== 'unknown' && (interaction === null || interaction === void 0 ? void 0 : interaction.type) === 'press') {
+      return;
+    }
+  } else {
+    if ((0, _platformFeatureFlags.fg)('platform_ufo_abort_measurement_fix')) {
+      // abort any existing interaction regardless if the next interaction's coinflip returns true or false
+      (0, _interactionMetrics.abortAll)('new_interaction', name);
+    }
+  }
+  if ((0, _coinflip.default)(rate)) {
+    if (!(0, _platformFeatureFlags.fg)('platform_ufo_abort_measurement_fix')) {
+      (0, _interactionMetrics.abortAll)('new_interaction', name);
+    }
+    var startTimestamp = startTime !== null && startTime !== void 0 ? startTime : performance.now();
+    var newId = (0, _uuid.v4)();
+    _interactionIdContext.DefaultInteractionID.current = newId;
+
+    // covered experiences with tracing instrumentation:
+    // inline-result.inline-card-create-submit
+    (0, _experienceTraceIdContext.setInteractionActiveTrace)(newId, interactionType);
+    (0, _interactionMetrics.addNewInteraction)(newId, name, interactionType === 'hover' ? 'press' : interactionType,
+    // TODO add dedicated type for hover, might change backend though
+    startTimestamp, rate, [], _routeNameContext.default.current, (0, _experienceTraceIdContext.getActiveTrace)());
+  }
+}
+var _default = exports.default = traceUFOInteraction;

package/dist/cjs/trace-press/index.js

@@ -5,31 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _uuid = require("uuid");
-var _coinflip = _interopRequireDefault(require("../coinflip"));
-var _config = require("../config");
-var _experienceTraceIdContext = require("../experience-trace-id-context");
-var _interactionIdContext = require("../interaction-id-context");
-var _interactionMetrics = require("../interaction-metrics");
-var _routeNameContext = _interopRequireDefault(require("../route-name-context"));
+var _traceUfoInteraction = _interopRequireDefault(require("../trace-interaction/internal/trace-ufo-interaction"));
 function traceUFOPress(name, timestamp) {
-  var rate = (0, _config.getInteractionRate)(name, 'press');
-  var pressInteractionsList = (0, _config.getDoNotAbortActivePressInteraction)();
-  if (pressInteractionsList !== null && pressInteractionsList !== void 0 && pressInteractionsList.includes(name)) {
-    var interaction = (0, _interactionMetrics.getActiveInteraction)();
-    if ((interaction === null || interaction === void 0 ? void 0 : interaction.ufoName) !== 'unknown' && (interaction === null || interaction === void 0 ? void 0 : interaction.type) === 'press') {
-      return;
-    }
-  }
-  if ((0, _coinflip.default)(rate)) {
-    (0, _interactionMetrics.abortAll)('new_interaction', name);
-    var startTimestamp = timestamp !== null && timestamp !== void 0 ? timestamp : performance.now();
-    var newId = (0, _uuid.v4)();
-    // covered experiences with tracing instrumentation:
-    // inline-result.inline-card-create-submit
-    (0, _experienceTraceIdContext.setInteractionActiveTrace)(newId, 'press');
-    _interactionIdContext.DefaultInteractionID.current = newId;
-    (0, _interactionMetrics.addNewInteraction)(newId, name, 'press', startTimestamp, rate, [], _routeNameContext.default.current, (0, _experienceTraceIdContext.getActiveTrace)());
-  }
+  return (0, _traceUfoInteraction.default)(name, 'press', timestamp);
 }
 var _default = exports.default = traceUFOPress;

package/dist/cjs/vc/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.VCObserverWrapper = void 0;
 exports.getVCObserver = getVCObserver;
 exports.isEnvironmentSupported = isEnvironmentSupported;
+exports.newVCObserver = newVCObserver;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
@@ -241,4 +242,10 @@ function getVCObserver() {
     globalThis.__vcObserver = shouldMockVCObserver ? new _noOpVcObserver.VCObserverNOOP() : new VCObserverWrapper(opts);
   }
   return globalThis.__vcObserver;
+}
+function newVCObserver() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var shouldMockVCObserver = !isEnvironmentSupported();
+  var observer = shouldMockVCObserver ? new _noOpVcObserver.VCObserverNOOP() : new VCObserverWrapper(opts);
+  return observer;
 }

package/dist/es2019/create-experimental-interaction-metrics-payload/index.js

@@ -58,10 +58,12 @@ export class ExperimentalVCMetrics {
 }
 export const experimentalVC = new ExperimentalVCMetrics();
 export async function getExperimentalVCMetrics(interaction) {
-  if (experimentalVC.vcObserver) {
+  // Use per-interaction VC observer if available, otherwise fall back to global experimentalVC
+  const vcObserver = interaction.experimentalVCObserver || experimentalVC.vcObserver;
+  if (vcObserver) {
     var _interaction$apdex, _interaction$apdex$;
     const prefix = 'ufo-experimental';
-    const result = await experimentalVC.vcObserver.getVCResult({
+    const result = await vcObserver.getVCResult({
       start: interaction.start,
       stop: interaction.end,
       tti: (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 ? void 0 : (_interaction$apdex$ = _interaction$apdex[0]) === null || _interaction$apdex$ === void 0 ? void 0 : _interaction$apdex$.stopTime,

package/dist/es2019/create-payload/utils/get-vc-metrics.js

@@ -11,7 +11,7 @@ async function getVCMetrics(interaction) {
   if (!(config !== null && config !== void 0 && (_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled)) {
     return {};
   }
-  if (fg('platform_ufo_enable_interactions_vc') || fg('platform_ufo_enable_interactivity_jsm')) {
+  if (fg('platform_ufo_enable_vc_press_interactions')) {
     if (interaction.type !== 'page_load' && interaction.type !== 'transition' && interaction.type !== 'press') {
       return {};
     }
@@ -23,8 +23,11 @@ async function getVCMetrics(interaction) {
   const interactionStatus = getInteractionStatus(interaction);
   const pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
   const shouldReportVCMetrics = interactionStatus.originalInteractionStatus === 'SUCCEEDED' && pageVisibilityUpToTTAI === 'visible';
+
+  // Use per-interaction VC observer if available, otherwise fall back to global
+  const observer = interaction.vcObserver || getVCObserver();
   if (!shouldReportVCMetrics && fg('platform_ufo_no_vc_on_aborted')) {
-    getVCObserver().stop(interaction.ufoName);
+    observer.stop(interaction.ufoName);
     return {};
   }
   const isSSREnabled = interaction.type === 'page_load' && ((config === null || config === void 0 ? void 0 : config.ssr) || (config === null || config === void 0 ? void 0 : (_config$vc$ssrWhiteli = config.vc.ssrWhitelist) === null || _config$vc$ssrWhiteli === void 0 ? void 0 : _config$vc$ssrWhiteli.includes(interaction.ufoName)));
@@ -34,7 +37,7 @@ async function getVCMetrics(interaction) {
   postInteractionLog.setVCObserverSSRConfig(ssr);
   const tti = (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 ? void 0 : (_interaction$apdex$ = _interaction$apdex[0]) === null || _interaction$apdex$ === void 0 ? void 0 : _interaction$apdex$.stopTime;
   const prefix = 'ufo';
-  const result = await getVCObserver().getVCResult({
+  const result = await observer.getVCResult({
     start: interaction.start,
     stop: interaction.end,
     tti,
@@ -47,8 +50,11 @@ async function getVCMetrics(interaction) {
     includeSSRRatio: (_config$vc3 = config.vc) === null || _config$vc3 === void 0 ? void 0 : _config$vc3.includeSSRRatio,
     ...ssr
   });
+  if (fg('platform_ufo_enable_vc_observer_per_interaction')) {
+    observer.stop(interaction.ufoName);
+  }
   if ((_config$experimentalI = config.experimentalInteractionMetrics) !== null && _config$experimentalI !== void 0 && _config$experimentalI.enabled) {
-    getVCObserver().stop(interaction.ufoName);
+    observer.stop(interaction.ufoName);
   }
   postInteractionLog.setLastInteractionFinishVCResult(result);
   const mostRecentVCRevision = getMostRecentVCRevision(interaction.ufoName);

package/dist/es2019/interaction-metrics/index.js

@@ -6,7 +6,7 @@ import { experimentalVC, getExperimentalVCMetrics, onExperimentalInteractionComp
 import { clearActiveTrace } from '../experience-trace-id-context';
 import { allFeatureFlagsAccessed, currentFeatureFlagsAccessed } from '../feature-flags-accessed';
 import { getInteractionId } from '../interaction-id-context';
-import { getVCObserver } from '../vc';
+import { getVCObserver, newVCObserver } from '../vc';
 import { interactions } from './common/constants';
 import PostInteractionLog from './post-interaction-log';
 const PreviousInteractionLog = {
@@ -487,7 +487,9 @@ function finishInteraction(id, data, endTime = performance.now()) {
   clearActiveTrace();
   callCleanUpCallbacks(data);
   if ((_getConfig4 = getConfig()) !== null && _getConfig4 !== void 0 && (_getConfig4$vc = _getConfig4.vc) !== null && _getConfig4$vc !== void 0 && _getConfig4$vc.stopVCAtInteractionFinish) {
-    data.vc = getVCObserver().getVCRawData();
+    // Use per-interaction VC observer if available, otherwise fall back to global
+    const observer = data.vcObserver || getVCObserver();
+    data.vc = observer.getVCRawData();
   }
   if (!((_getConfig5 = getConfig()) !== null && _getConfig5 !== void 0 && (_getConfig5$experimen = _getConfig5.experimentalInteractionMetrics) !== null && _getConfig5$experimen !== void 0 && _getConfig5$experimen.enabled)) {
     remove(id);
@@ -656,6 +658,7 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
   if ((_getConfig11 = getConfig()) !== null && _getConfig11 !== void 0 && (_getConfig11$postInte = _getConfig11.postInteractionLog) !== null && _getConfig11$postInte !== void 0 && _getConfig11$postInte.enabled) {
     postInteractionLog.reset();
   }
+  let vcObserver;
   let previousTime = startTime;
   let timeoutTime = fg('platform_ufo_enable_timeout_config') ? getInteractionTimeout(ufoName) : CLEANUP_TIMEOUT;
   const timerID = setTimeout(() => {
@@ -678,6 +681,21 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
     this.timerID = newTimerID;
   }
   const addFeatureFlagsToInteraction = coinflip(getCapabilityRate('feature_flag_access'));
+  const config = getConfig();
+  if (config && config.vc) {
+    const vcOptions = {
+      heatmapSize: config.vc.heatmapSize,
+      oldDomUpdates: config.vc.oldDomUpdates,
+      devToolsEnabled: config.vc.devToolsEnabled,
+      selectorConfig: config.vc.selectorConfig,
+      ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder,
+      disableSizeAndPositionCheck: config.vc.disableSizeAndPositionCheck
+    };
+    vcObserver = fg('platform_ufo_enable_vc_observer_per_interaction') ? newVCObserver(vcOptions) : undefined;
+  }
+
+  // Create per-interaction VC observer when feature flag is enabled
+
   const metrics = {
     id: interactionId,
     start: startTime,
@@ -718,7 +736,8 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
     redirects: [],
     timerID,
     changeTimeout,
-    trace
+    trace,
+    vcObserver
   };
   if (addFeatureFlagsToInteraction) {
     currentFeatureFlagsAccessed.clear();
@@ -737,13 +756,21 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
   metrics.cleanupCallbacks.push(() => {
     clearTimeout(metrics.timerID);
   });
+  // Add cleanup for per-interaction VC observer
+  if (vcObserver) {
+    metrics.cleanupCallbacks.push(() => {
+      vcObserver.stop(ufoName);
+    });
+  }
   const awaitBM3TTIList = getAwaitBM3TTIList();
   if (awaitBM3TTIList.includes(ufoName)) {
     addHoldByID(interactionId, [], ufoName, ufoName, true);
   }
-  if (type === 'transition') {
+  if (type === 'transition' || type === 'page_load') {
     var _getConfig12, _getConfig12$experime;
-    getVCObserver().start({
+    // Use per-interaction VC observer if available, otherwise fall back to global
+    const observer = vcObserver || getVCObserver();
+    observer.start({
       startTime,
       experienceKey: ufoName
     });
@@ -756,20 +783,13 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
       });
     }
   }
-  if (type === 'press' && (fg('platform_ufo_enable_interactions_vc') || fg('platform_ufo_enable_interactivity_jsm'))) {
-    var _getConfig13, _getConfig13$experime;
-    getVCObserver().start({
+  if (type === 'press' && fg('platform_ufo_enable_vc_press_interactions')) {
+    // Use per-interaction VC observer if available, otherwise fall back to global
+    const observer = vcObserver || getVCObserver();
+    observer.start({
       startTime,
       experienceKey: ufoName
     });
-    postInteractionLog.startVCObserver({
-      startTime
-    });
-    if ((_getConfig13 = getConfig()) !== null && _getConfig13 !== void 0 && (_getConfig13$experime = _getConfig13.experimentalInteractionMetrics) !== null && _getConfig13$experime !== void 0 && _getConfig13$experime.enabled) {
-      experimentalVC.start({
-        startTime
-      });
-    }
   }
 }
 export function addBrowserMetricEvent(event) {

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

@@ -91,9 +91,11 @@ export function init(analyticsWebClientAsync, config) {
       ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder,
       disableSizeAndPositionCheck: config.vc.disableSizeAndPositionCheck
     };
-    getVCObserver(vcOptions).start({
-      startTime: 0
-    });
+    if (!fg('platform_ufo_enable_vc_observer_per_interaction')) {
+      getVCObserver(vcOptions).start({
+        startTime: 0
+      });
+    }
     postInteractionLog.initializeVCObserver(vcOptions);
     postInteractionLog.startVCObserver({
       startTime: 0