@atlaskit/react-ufo 3.14.7 → 3.14.8

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 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/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

package/dist/es2019/vc/index.js

@@ -165,4 +165,9 @@ export function getVCObserver(opts = {}) {
     globalThis.__vcObserver = shouldMockVCObserver ? new VCObserverNOOP() : new VCObserverWrapper(opts);
   }
   return globalThis.__vcObserver;
+}
+export function newVCObserver(opts = {}) {
+  const shouldMockVCObserver = !isEnvironmentSupported();
+  const observer = shouldMockVCObserver ? new VCObserverNOOP() : new VCObserverWrapper(opts);
+  return observer;
 }

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

@@ -84,17 +84,19 @@ export function getExperimentalVCMetrics(_x) {
 }
 function _getExperimentalVCMetrics() {
   _getExperimentalVCMetrics = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(interaction) {
-    var _interaction$apdex, prefix, result, VC, pageVisibilityUpToTTAI;
+    var vcObserver, _interaction$apdex, prefix, result, VC, pageVisibilityUpToTTAI;
     return _regeneratorRuntime.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,
@@ -104,28 +106,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 = 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/esm/create-payload/utils/get-vc-metrics.js

@@ -16,7 +16,7 @@ function getVCMetrics(_x) {
 function _getVCMetrics() {
   _getVCMetrics = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.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 _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -27,7 +27,7 @@ function _getVCMetrics() {
           }
           return _context.abrupt("return", {});
         case 3:
-          if (!(fg('platform_ufo_enable_interactions_vc') || fg('platform_ufo_enable_interactivity_jsm'))) {
+          if (!fg('platform_ufo_enable_vc_press_interactions')) {
             _context.next = 8;
             break;
           }
@@ -48,14 +48,15 @@ function _getVCMetrics() {
         case 10:
           interactionStatus = getInteractionStatus(interaction);
           pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(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 || getVCObserver();
           if (!(!shouldReportVCMetrics && fg('platform_ufo_no_vc_on_aborted'))) {
-            _context.next = 16;
+            _context.next = 17;
             break;
           }
-          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: getSSRDoneTimeValue(config)
@@ -63,8 +64,8 @@ function _getVCMetrics() {
           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 getVCObserver().getVCResult(_objectSpread({
+          _context.next = 24;
+          return observer.getVCResult(_objectSpread({
             start: interaction.start,
             stop: interaction.end,
             tti: tti,
@@ -76,10 +77,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 (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);
           mostRecentVCRevision = getMostRecentVCRevision(interaction.ufoName);
@@ -88,15 +92,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/esm/interaction-metrics/index.js

@@ -16,7 +16,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';
 var PreviousInteractionLog = {
@@ -523,7 +523,9 @@ function finishInteraction(id, data) {
   clearActiveTrace();
   callCleanUpCallbacks(data);
   if ((_getConfig4 = getConfig()) !== null && _getConfig4 !== void 0 && (_getConfig4 = _getConfig4.vc) !== null && _getConfig4 !== void 0 && _getConfig4.stopVCAtInteractionFinish) {
-    data.vc = getVCObserver().getVCRawData();
+    // Use per-interaction VC observer if available, otherwise fall back to global
+    var observer = data.vcObserver || getVCObserver();
+    data.vc = observer.getVCRawData();
   }
   if (!((_getConfig5 = getConfig()) !== null && _getConfig5 !== void 0 && (_getConfig5 = _getConfig5.experimentalInteractionMetrics) !== null && _getConfig5 !== void 0 && _getConfig5.enabled)) {
     remove(id);
@@ -735,6 +737,7 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
   if ((_getConfig11 = getConfig()) !== null && _getConfig11 !== void 0 && (_getConfig11 = _getConfig11.postInteractionLog) !== null && _getConfig11 !== void 0 && _getConfig11.enabled) {
     postInteractionLog.reset();
   }
+  var vcObserver;
   var previousTime = startTime;
   var timeoutTime = fg('platform_ufo_enable_timeout_config') ? getInteractionTimeout(ufoName) : CLEANUP_TIMEOUT;
   var timerID = setTimeout(function () {
@@ -757,6 +760,21 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
     this.timerID = newTimerID;
   }
   var addFeatureFlagsToInteraction = coinflip(getCapabilityRate('feature_flag_access'));
+  var 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 = fg('platform_ufo_enable_vc_observer_per_interaction') ? newVCObserver(vcOptions) : undefined;
+  }
+
+  // Create per-interaction VC observer when feature flag is enabled
+
   var metrics = {
     id: interactionId,
     start: startTime,
@@ -797,7 +815,8 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
     redirects: [],
     timerID: timerID,
     changeTimeout: changeTimeout,
-    trace: trace
+    trace: trace,
+    vcObserver: vcObserver
   };
   if (addFeatureFlagsToInteraction) {
     currentFeatureFlagsAccessed.clear();
@@ -816,13 +835,21 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
   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 = getAwaitBM3TTIList();
   if (awaitBM3TTIList.includes(ufoName)) {
     addHoldByID(interactionId, [], ufoName, ufoName, true);
   }
-  if (type === 'transition') {
+  if (type === 'transition' || type === 'page_load') {
     var _getConfig12;
-    getVCObserver().start({
+    // Use per-interaction VC observer if available, otherwise fall back to global
+    var observer = vcObserver || getVCObserver();
+    observer.start({
       startTime: startTime,
       experienceKey: ufoName
     });
@@ -835,20 +862,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;
-    getVCObserver().start({
+  if (type === 'press' && fg('platform_ufo_enable_vc_press_interactions')) {
+    // Use per-interaction VC observer if available, otherwise fall back to global
+    var _observer = vcObserver || getVCObserver();
+    _observer.start({
       startTime: startTime,
       experienceKey: ufoName
     });
-    postInteractionLog.startVCObserver({
-      startTime: startTime
-    });
-    if ((_getConfig13 = getConfig()) !== null && _getConfig13 !== void 0 && (_getConfig13 = _getConfig13.experimentalInteractionMetrics) !== null && _getConfig13 !== void 0 && _getConfig13.enabled) {
-      experimentalVC.start({
-        startTime: startTime
-      });
-    }
   }
 }
 export function addBrowserMetricEvent(event) {

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

@@ -92,9 +92,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

package/dist/esm/vc/index.js

@@ -234,4 +234,10 @@ export function getVCObserver() {
     globalThis.__vcObserver = shouldMockVCObserver ? new VCObserverNOOP() : new VCObserverWrapper(opts);
   }
   return globalThis.__vcObserver;
+}
+export function newVCObserver() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var shouldMockVCObserver = !isEnvironmentSupported();
+  var observer = shouldMockVCObserver ? new VCObserverNOOP() : new VCObserverWrapper(opts);
+  return observer;
 }

package/dist/types/common/common/types.d.ts

@@ -1,5 +1,6 @@
 import type { TraceIdContext } from '../../experience-trace-id-context';
 import type { LabelStack, UFOInteractionContextType } from '../../interaction-context';
+import type { VCObserverInterface } from '../../vc/types';
 import { type VCRawDataType, type VCResult } from '../vc/types';
 export type LifecycleMarkType = 'render' | 'beforePaint' | 'afterPaint' | 'nextTick' | 'mount' | 'commit';
 export type MarkType = ('placeholder' | 'bm3_stop' | 'bundle_preload' | 'custom') | LifecycleMarkType;
@@ -113,8 +114,8 @@ export interface InteractionMetrics {
     holdInfo: HoldInfo[];
     holdExpInfo: HoldInfo[];
     holdActive: Map<string, HoldActive>;
-    holdExpActive: Map<string, HoldActive>;
     reactProfilerTimings: ReactProfilerTiming[];
+    holdExpActive: Map<string, HoldActive>;
     measureStart: number;
     rate: number;
     cancelCallbacks: (() => void)[];
@@ -158,6 +159,8 @@ export interface InteractionMetrics {
     changeTimeout: (newTime: number) => void;
     trace: TraceIdContext | null;
     legacyMetrics?: BM3Event[];
+    vcObserver?: VCObserverInterface;
+    experimentalVCObserver?: VCObserverInterface;
     vc?: VCRawDataType | null;
     experimentalTTAI?: number;
     experimentalVC90?: number;

package/dist/types/vc/index.d.ts

@@ -24,3 +24,4 @@ export declare class VCObserverWrapper implements VCObserverInterface {
 }
 export declare function isEnvironmentSupported(): boolean;
 export declare function getVCObserver(opts?: VCObserverOptions): VCObserverInterface;
+export declare function newVCObserver(opts?: VCObserverOptions): VCObserverInterface;

package/dist/types-ts4.5/common/common/types.d.ts

@@ -1,5 +1,6 @@
 import type { TraceIdContext } from '../../experience-trace-id-context';
 import type { LabelStack, UFOInteractionContextType } from '../../interaction-context';
+import type { VCObserverInterface } from '../../vc/types';
 import { type VCRawDataType, type VCResult } from '../vc/types';
 export type LifecycleMarkType = 'render' | 'beforePaint' | 'afterPaint' | 'nextTick' | 'mount' | 'commit';
 export type MarkType = ('placeholder' | 'bm3_stop' | 'bundle_preload' | 'custom') | LifecycleMarkType;
@@ -113,8 +114,8 @@ export interface InteractionMetrics {
     holdInfo: HoldInfo[];
     holdExpInfo: HoldInfo[];
     holdActive: Map<string, HoldActive>;
-    holdExpActive: Map<string, HoldActive>;
     reactProfilerTimings: ReactProfilerTiming[];
+    holdExpActive: Map<string, HoldActive>;
     measureStart: number;
     rate: number;
     cancelCallbacks: (() => void)[];
@@ -158,6 +159,8 @@ export interface InteractionMetrics {
     changeTimeout: (newTime: number) => void;
     trace: TraceIdContext | null;
     legacyMetrics?: BM3Event[];
+    vcObserver?: VCObserverInterface;
+    experimentalVCObserver?: VCObserverInterface;
     vc?: VCRawDataType | null;
     experimentalTTAI?: number;
     experimentalVC90?: number;

package/dist/types-ts4.5/vc/index.d.ts

@@ -24,3 +24,4 @@ export declare class VCObserverWrapper implements VCObserverInterface {
 }
 export declare function isEnvironmentSupported(): boolean;
 export declare function getVCObserver(opts?: VCObserverOptions): VCObserverInterface;
+export declare function newVCObserver(opts?: VCObserverOptions): VCObserverInterface;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "3.14.7",
+	"version": "3.14.8",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -175,9 +175,6 @@
 		"platform_ufo_timeout_simplification": {
 			"type": "boolean"
 		},
-		"platform_ufo_enable_interactions_vc": {
-			"type": "boolean"
-		},
 		"platform_ufo_enable_timeout_config": {
 			"type": "boolean"
 		},
@@ -210,6 +207,12 @@
 		},
 		"platform_ufo_vc_v3_ssr_placeholder": {
 			"type": "boolean"
+		},
+		"platform_ufo_enable_vc_press_interactions": {
+			"type": "boolean"
+		},
+		"platform_ufo_enable_vc_observer_per_interaction": {
+			"type": "boolean"
 		}
 	}
 }