@atlaskit/react-ufo 2.10.0 → 2.12.0

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

@@ -47,11 +47,12 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _uuid = require("uuid");
 var _coinflip = _interopRequireDefault(require("../coinflip"));
 var _config = require("../config");
+var _createExperimentalInteractionMetricsPayload = require("../create-experimental-interaction-metrics-payload");
 var _experienceTraceIdContext = require("../experience-trace-id-context");
 var _featureFlagsAccessed = require("../feature-flags-accessed");
 var _interactionIdContext = require("../interaction-id-context");
 var _vc = require("../vc");
-var _constants = _interopRequireDefault(require("./common/constants"));
+var _constants = require("./common/constants");
 var _postInteractionLog = _interopRequireDefault(require("./post-interaction-log"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -73,7 +74,7 @@ function getActiveInteraction() {
   if (!interactionId.current) {
     return;
   }
-  return _constants.default.get(interactionId.current);
+  return _constants.interactions.get(interactionId.current);
 }
 function isPerformanceTracingEnabled() {
   var _getConfig;
@@ -121,7 +122,7 @@ function removeSegmentObserver(observer) {
   }
 }
 function remove(interactionId) {
-  _constants.default.delete(interactionId);
+  _constants.interactions.delete(interactionId);
 }
 function updatePageLoadInteractionName(ufoName) {
   var routeName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ufoName;
@@ -133,7 +134,7 @@ function updatePageLoadInteractionName(ufoName) {
   interaction.routeName = routeName;
 }
 function addMetadata(interactionId, data) {
-  var interaction = _constants.default.get(interactionId);
+  var interaction = _constants.interactions.get(interactionId);
   if (interaction != null) {
     Object.keys(data).forEach(function (key) {
       interaction.metaData[key] = data[key];
@@ -141,7 +142,7 @@ function addMetadata(interactionId, data) {
   }
 }
 function addCustomData(interactionId, labelStack, data) {
-  var interaction = _constants.default.get(interactionId);
+  var interaction = _constants.interactions.get(interactionId);
   if (interaction != null) {
     Object.keys(data).forEach(function (i) {
       interaction.customData.push({
@@ -152,7 +153,7 @@ function addCustomData(interactionId, labelStack, data) {
   }
 }
 function addCustomTiming(interactionId, labelStack, data) {
-  var interaction = _constants.default.get(interactionId);
+  var interaction = _constants.interactions.get(interactionId);
   if (interaction != null) {
     interaction.customTimings.push({
       labelStack: labelStack,
@@ -180,7 +181,7 @@ function addCustomTiming(interactionId, labelStack, data) {
 }
 function addMark(interactionId, type, name, labelStack) {
   var time = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : performance.now();
-  var interaction = _constants.default.get(interactionId);
+  var interaction = _constants.interactions.get(interactionId);
   if (interaction != null) {
     interaction.marks.push({
       type: type,
@@ -197,7 +198,7 @@ function addMark(interactionId, type, name, labelStack) {
 }
 function addMarkToAll(type, name, labelStack) {
   var time = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : performance.now();
-  _constants.default.forEach(function (interaction) {
+  _constants.interactions.forEach(function (interaction) {
     interaction.marks.push({
       type: type,
       name: name,
@@ -214,7 +215,7 @@ function addMarkToAll(type, name, labelStack) {
 function addSpan(interactionId, type, name, labelStack, start) {
   var end = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : performance.now();
   var size = arguments.length > 6 ? arguments[6] : undefined;
-  var interaction = _constants.default.get(interactionId);
+  var interaction = _constants.interactions.get(interactionId);
   if (interaction != null) {
     interaction.spans.push({
       type: type,
@@ -240,7 +241,7 @@ function addSpan(interactionId, type, name, labelStack, start) {
 function addSpanToAll(type, name, labelStack, start) {
   var end = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : performance.now();
   var size = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
-  _constants.default.forEach(function (interaction) {
+  _constants.interactions.forEach(function (interaction) {
     interaction.spans.push({
       type: type,
       name: name,
@@ -290,16 +291,27 @@ function removeHoldCriterion(id) {
   }
   window.__CRITERION__.removeUFOHold(id);
 }
-function addHold(interactionId, labelStack, name) {
-  var interaction = _constants.default.get(interactionId);
+function addHold(interactionId, labelStack, name, experimental) {
+  var interaction = _constants.interactions.get(interactionId);
   var id = (0, _uuid.v4)();
   if (interaction != null) {
+    var _getConfig2;
     var start = performance.now();
-    interaction.holdActive.set(id, {
+    var holdActive = {
       labelStack: labelStack,
       name: name,
       start: start
-    });
+    };
+    if ((_getConfig2 = (0, _config.getConfig)()) !== null && _getConfig2 !== void 0 && (_getConfig2 = _getConfig2.experimentalInteractionMetrics) !== null && _getConfig2 !== void 0 && _getConfig2.enabled && experimental) {
+      interaction.holdExpActive.set(id, _objectSpread(_objectSpread({}, holdActive), {}, {
+        start: start
+      }));
+    }
+    if (!experimental) {
+      interaction.holdActive.set(id, _objectSpread(_objectSpread({}, holdActive), {}, {
+        start: start
+      }));
+    }
     addHoldCriterion(id, labelStack, name, start);
     return function () {
       var end = performance.now();
@@ -315,20 +327,29 @@ function addHold(interactionId, labelStack, name) {
         }
       }
       removeHoldCriterion(id);
-      var currentInteraction = _constants.default.get(interactionId);
+      var currentInteraction = _constants.interactions.get(interactionId);
       var currentHold = interaction.holdActive.get(id);
-      if (currentInteraction != null && currentHold != null) {
-        currentInteraction.holdInfo.push(_objectSpread(_objectSpread({}, currentHold), {}, {
-          end: end
-        }));
-        interaction.holdActive.delete(id);
+      var expHold = interaction.holdExpActive.get(id);
+      if (currentInteraction != null) {
+        if (currentHold != null) {
+          currentInteraction.holdInfo.push(_objectSpread(_objectSpread({}, currentHold), {}, {
+            end: end
+          }));
+          interaction.holdActive.delete(id);
+        }
+        if (expHold != null) {
+          currentInteraction.holdExpInfo.push(_objectSpread(_objectSpread({}, expHold), {}, {
+            end: end
+          }));
+          interaction.holdExpActive.delete(id);
+        }
       }
     };
   }
   return function () {};
 }
 function addHoldByID(interactionId, labelStack, name, id, ignoreOnSubmit) {
-  var interaction = _constants.default.get(interactionId);
+  var interaction = _constants.interactions.get(interactionId);
   if (interaction != null) {
     var start = performance.now();
     interaction.holdActive.set(id, {
@@ -342,10 +363,10 @@ function addHoldByID(interactionId, labelStack, name, id, ignoreOnSubmit) {
   return function () {};
 }
 function removeHoldByID(interactionId, id) {
-  var interaction = _constants.default.get(interactionId);
+  var interaction = _constants.interactions.get(interactionId);
   if (interaction != null) {
     var end = performance.now();
-    var currentInteraction = _constants.default.get(interactionId);
+    var currentInteraction = _constants.interactions.get(interactionId);
     var currentHold = interaction.holdActive.get(id);
     if (currentInteraction != null && currentHold != null) {
       currentInteraction.holdInfo.push(_objectSpread(_objectSpread({}, currentHold), {}, {
@@ -357,7 +378,7 @@ function removeHoldByID(interactionId, id) {
   }
 }
 function getCurrentInteractionType(interactionId) {
-  var interaction = _constants.default.get(interactionId);
+  var interaction = _constants.interactions.get(interactionId);
   if (interaction) {
     return interaction.type;
   }
@@ -399,7 +420,7 @@ var ModuleLoadingProfiler = exports.ModuleLoadingProfiler = {
   }
 };
 function addError(interactionId, name, labelStack, errorType, errorMessage, errorStack, forcedError) {
-  var interaction = _constants.default.get(interactionId);
+  var interaction = _constants.interactions.get(interactionId);
   if (interaction != null) {
     interaction.errors.push({
       name: name,
@@ -412,7 +433,7 @@ function addError(interactionId, name, labelStack, errorType, errorMessage, erro
   }
 }
 function addErrorToAll(name, labelStack, errorType, errorMessage, errorStack) {
-  _constants.default.forEach(function (interaction) {
+  _constants.interactions.forEach(function (interaction) {
     interaction.errors.push({
       name: name,
       labelStack: labelStack,
@@ -423,7 +444,7 @@ function addErrorToAll(name, labelStack, errorType, errorMessage, errorStack) {
   });
 }
 var addProfilerTimings = exports.addProfilerTimings = function addProfilerTimings(interactionId, labelStack, type, actualDuration, baseDuration, startTime, commitTime) {
-  var _getConfig2;
+  var _getConfig3;
   if (isPerformanceTracingEnabled()) {
     try {
       // for Firefox 102 and older
@@ -435,7 +456,7 @@ var addProfilerTimings = exports.addProfilerTimings = function addProfilerTiming
       // do nothing
     }
   }
-  var interaction = _constants.default.get(interactionId);
+  var interaction = _constants.interactions.get(interactionId);
   if (interaction != null) {
     interaction.reactProfilerTimings.push({
       labelStack: labelStack,
@@ -445,7 +466,7 @@ var addProfilerTimings = exports.addProfilerTimings = function addProfilerTiming
       startTime: startTime,
       commitTime: commitTime
     });
-  } else if ((_getConfig2 = (0, _config.getConfig)()) !== null && _getConfig2 !== void 0 && (_getConfig2 = _getConfig2.postInteractionLog) !== null && _getConfig2 !== void 0 && _getConfig2.enabled) {
+  } else if ((_getConfig3 = (0, _config.getConfig)()) !== null && _getConfig3 !== void 0 && (_getConfig3 = _getConfig3.postInteractionLog) !== null && _getConfig3 !== void 0 && _getConfig3.enabled) {
     postInteractionLog.addProfilerTimings(labelStack, type, actualDuration, baseDuration, startTime, commitTime);
   }
 };
@@ -462,9 +483,8 @@ function callCleanUpCallbacks(interaction) {
   });
 }
 var finishInteraction = function finishInteraction(id, data) {
-  var _getConfig3;
+  var _getConfig4, _getConfig5;
   var endTime = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : performance.now();
-  // eslint-disable-next-line no-param-reassign
   data.end = endTime;
   try {
     // for Firefox 102 and older
@@ -476,15 +496,16 @@ var finishInteraction = function finishInteraction(id, data) {
     // do nothing
   }
   if (data.featureFlags) {
-    // eslint-disable-next-line no-param-reassign
     data.featureFlags.during = Object.fromEntries(_featureFlagsAccessed.currentFeatureFlagsAccessed);
   }
   (0, _experienceTraceIdContext.clearActiveTrace)();
   callCleanUpCallbacks(data);
-  if ((_getConfig3 = (0, _config.getConfig)()) !== null && _getConfig3 !== void 0 && (_getConfig3 = _getConfig3.vc) !== null && _getConfig3 !== void 0 && _getConfig3.stopVCAtInteractionFinish) {
+  if ((_getConfig4 = (0, _config.getConfig)()) !== null && _getConfig4 !== void 0 && (_getConfig4 = _getConfig4.vc) !== null && _getConfig4 !== void 0 && _getConfig4.stopVCAtInteractionFinish) {
     data.vc = (0, _vc.getVCObserver)().getVCRawData();
   }
-  remove(id);
+  if (!((_getConfig5 = (0, _config.getConfig)()) !== null && _getConfig5 !== void 0 && (_getConfig5 = _getConfig5.experimentalInteractionMetrics) !== null && _getConfig5 !== void 0 && _getConfig5.enabled)) {
+    remove(id);
+  }
   PreviousInteractionLog.name = data.ufoName || 'unknown';
   PreviousInteractionLog.isAborted = data.abortReason != null;
   if (data.ufoName) {
@@ -550,15 +571,48 @@ var sinkInteractionHandler = exports.sinkInteractionHandler = function sinkInter
 var sinkPostInteractionLogHandler = exports.sinkPostInteractionLogHandler = function sinkPostInteractionLogHandler(sinkFn) {
   postInteractionLog.sinkHandler(sinkFn);
 };
+
+// a flag to prevent multiple submitting
+var activeSubmitted = false;
 function tryComplete(interactionId, endTime) {
-  var interaction = _constants.default.get(interactionId);
+  var interaction = _constants.interactions.get(interactionId);
   if (interaction != null) {
-    var noMoreHolds = interaction.holdActive.size === 0;
-    if (noMoreHolds) {
-      var _getConfig4;
-      finishInteraction(interactionId, interaction, endTime);
-      if ((_getConfig4 = (0, _config.getConfig)()) !== null && _getConfig4 !== void 0 && (_getConfig4 = _getConfig4.postInteractionLog) !== null && _getConfig4 !== void 0 && _getConfig4.enabled) {
-        postInteractionLog.onInteractionComplete(interaction);
+    var noMoreActiveHolds = interaction.holdActive.size === 0;
+    var noMoreExpHolds = interaction.holdExpActive.size === 0;
+    var postInteraction = function postInteraction() {
+      var _getConfig6, _getConfig8;
+      if ((_getConfig6 = (0, _config.getConfig)()) !== null && _getConfig6 !== void 0 && (_getConfig6 = _getConfig6.postInteractionLog) !== null && _getConfig6 !== void 0 && _getConfig6.enabled) {
+        var _getConfig7;
+        var experimentalVC90;
+        var experimentalTTAI;
+        if ((_getConfig7 = (0, _config.getConfig)()) !== null && _getConfig7 !== void 0 && (_getConfig7 = _getConfig7.experimentalInteractionMetrics) !== null && _getConfig7 !== void 0 && _getConfig7.enabled) {
+          var _getExperimentalVCMet;
+          experimentalVC90 = (_getExperimentalVCMet = (0, _createExperimentalInteractionMetricsPayload.getExperimentalVCMetrics)(interaction)) === null || _getExperimentalVCMet === void 0 ? void 0 : _getExperimentalVCMet['metric:experimental:vc90'];
+          var start = interaction.start,
+            end = interaction.end;
+          experimentalTTAI = !interaction.abortReason ? Math.round(end - start) : undefined;
+        }
+        postInteractionLog.onInteractionComplete(_objectSpread(_objectSpread({}, interaction), {}, {
+          experimentalTTAI: experimentalTTAI,
+          experimentalVC90: experimentalVC90
+        }));
+      }
+      if ((_getConfig8 = (0, _config.getConfig)()) !== null && _getConfig8 !== void 0 && (_getConfig8 = _getConfig8.experimentalInteractionMetrics) !== null && _getConfig8 !== void 0 && _getConfig8.enabled) {
+        remove(interactionId);
+      }
+      activeSubmitted = false;
+    };
+    if (noMoreActiveHolds) {
+      if (!activeSubmitted) {
+        finishInteraction(interactionId, interaction, endTime);
+        activeSubmitted = true;
+      }
+      if (noMoreExpHolds) {
+        var _getConfig9;
+        if ((_getConfig9 = (0, _config.getConfig)()) !== null && _getConfig9 !== void 0 && (_getConfig9 = _getConfig9.experimentalInteractionMetrics) !== null && _getConfig9 !== void 0 && _getConfig9.enabled) {
+          (0, _createExperimentalInteractionMetricsPayload.onExperimentalInteractionComplete)(interactionId, interaction, endTime);
+        }
+        postInteraction();
       }
     }
   }
@@ -569,45 +623,58 @@ function callCancelCallbacks(interaction) {
   });
 }
 function abort(interactionId, abortReason) {
-  var interaction = _constants.default.get(interactionId);
+  var interaction = _constants.interactions.get(interactionId);
   if (interaction != null) {
+    var _getConfig10;
     callCancelCallbacks(interaction);
     interaction.abortReason = abortReason;
     finishInteraction(interactionId, interaction);
+    if ((_getConfig10 = (0, _config.getConfig)()) !== null && _getConfig10 !== void 0 && (_getConfig10 = _getConfig10.experimentalInteractionMetrics) !== null && _getConfig10 !== void 0 && _getConfig10.enabled) {
+      (0, _createExperimentalInteractionMetricsPayload.onExperimentalInteractionComplete)(interactionId, interaction);
+      remove(interactionId);
+    }
   }
 }
 function abortByNewInteraction(interactionId, interactionName) {
-  var interaction = _constants.default.get(interactionId);
+  var interaction = _constants.interactions.get(interactionId);
   if (interaction != null) {
+    var _getConfig11;
     callCancelCallbacks(interaction);
     interaction.abortReason = 'new_interaction';
     interaction.abortedByInteractionName = interactionName;
     finishInteraction(interactionId, interaction);
+    if ((_getConfig11 = (0, _config.getConfig)()) !== null && _getConfig11 !== void 0 && (_getConfig11 = _getConfig11.experimentalInteractionMetrics) !== null && _getConfig11 !== void 0 && _getConfig11.enabled) {
+      (0, _createExperimentalInteractionMetricsPayload.onExperimentalInteractionComplete)(interactionId, interaction);
+      remove(interactionId);
+    }
   }
 }
 function abortAll(abortReason, abortedByInteractionName) {
-  _constants.default.forEach(function (interaction, interactionId) {
+  _constants.interactions.forEach(function (interaction, interactionId) {
+    var _getConfig12;
     var noMoreHolds = interaction.holdActive.size === 0;
     if (!noMoreHolds) {
       callCancelCallbacks(interaction);
-      // eslint-disable-next-line no-param-reassign
       interaction.abortReason = abortReason;
       if (abortedByInteractionName != null) {
-        // eslint-disable-next-line no-param-reassign
         interaction.abortedByInteractionName = abortedByInteractionName;
       }
     }
     finishInteraction(interactionId, interaction);
+    if ((_getConfig12 = (0, _config.getConfig)()) !== null && _getConfig12 !== void 0 && (_getConfig12 = _getConfig12.experimentalInteractionMetrics) !== null && _getConfig12 !== void 0 && _getConfig12.enabled) {
+      (0, _createExperimentalInteractionMetricsPayload.onExperimentalInteractionComplete)(interactionId, interaction);
+      remove(interactionId);
+    }
   });
 }
 function addOnCancelCallback(id, cancelCallback) {
-  var interaction = _constants.default.get(id);
+  var interaction = _constants.interactions.get(id);
   interaction === null || interaction === void 0 || interaction.cancelCallbacks.push(cancelCallback);
 }
 function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelStack, routeName) {
-  var _getConfig5;
+  var _getConfig13;
   var trace = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
-  if ((_getConfig5 = (0, _config.getConfig)()) !== null && _getConfig5 !== void 0 && (_getConfig5 = _getConfig5.postInteractionLog) !== null && _getConfig5 !== void 0 && _getConfig5.enabled) {
+  if ((_getConfig13 = (0, _config.getConfig)()) !== null && _getConfig13 !== void 0 && (_getConfig13 = _getConfig13.postInteractionLog) !== null && _getConfig13 !== void 0 && _getConfig13.enabled) {
     postInteractionLog.reset();
   }
   var previousTime = startTime;
@@ -647,9 +714,11 @@ function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelS
     requestInfo: [],
     reactProfilerTimings: [],
     holdInfo: [],
+    holdExpInfo: [],
     holdActive: new Map(),
+    holdExpActive: new Map(),
     // measure when we execute this code
-    // from this we can measure the input delay -
+    // from this, we can measure the input delay -
     // how long the browser took to hand execution back to JS)
     measureStart: performance.now(),
     rate: rate,
@@ -674,7 +743,7 @@ function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelS
   if (addFeatureFlagsToInteraction) {
     _featureFlagsAccessed.currentFeatureFlagsAccessed.clear();
   }
-  _constants.default.set(interactionId, metrics);
+  _constants.interactions.set(interactionId, metrics);
   var segmentObserver = {
     onAdd: function onAdd(segment) {
       metrics.knownSegments.push(segment);
@@ -693,12 +762,18 @@ function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelS
     addHoldByID(interactionId, [], ufoName, ufoName, true);
   }
   if (type === 'transition') {
+    var _getConfig14;
     (0, _vc.getVCObserver)().start({
       startTime: startTime
     });
     postInteractionLog.startVCObserver({
       startTime: startTime
     });
+    if ((_getConfig14 = (0, _config.getConfig)()) !== null && _getConfig14 !== void 0 && (_getConfig14 = _getConfig14.experimentalInteractionMetrics) !== null && _getConfig14 !== void 0 && _getConfig14.enabled) {
+      _createExperimentalInteractionMetricsPayload.experimentalVC.start({
+        startTime: startTime
+      });
+    }
   }
 }
 function addBrowserMetricEvent(event) {
@@ -714,7 +789,7 @@ function addBrowserMetricEvent(event) {
   }
 }
 function addApdexToAll(apdex) {
-  _constants.default.forEach(function (interaction, key) {
+  _constants.interactions.forEach(function (interaction, key) {
     interaction.apdex.push(apdex);
     try {
       var _apdex$startTime;
@@ -733,7 +808,7 @@ function addApdexToAll(apdex) {
   });
 }
 function addApdex(interactionId, apdexInfo) {
-  var interaction = _constants.default.get(interactionId);
+  var interaction = _constants.interactions.get(interactionId);
   if (interaction != null) {
     interaction.apdex.push(apdexInfo);
     try {
@@ -753,7 +828,7 @@ function addApdex(interactionId, apdexInfo) {
   }
 }
 function addRequestInfo(interactionId, labelStack, requestInfo) {
-  var interaction = _constants.default.get(interactionId);
+  var interaction = _constants.interactions.get(interactionId);
   if (interaction != null) {
     interaction.requestInfo.push(_objectSpread({
       labelStack: labelStack
@@ -795,7 +870,7 @@ function removeSegment(labelStack) {
   }
 }
 function addRedirect(interactionId, fromUfoName, nextUfoName, nextRouteName, time) {
-  var interaction = _constants.default.get(interactionId);
+  var interaction = _constants.interactions.get(interactionId);
   if (interaction != null) {
     interaction.ufoName = nextUfoName;
     interaction.routeName = nextRouteName;

package/dist/cjs/interaction-metrics/post-interaction-log.js

@@ -113,22 +113,32 @@ var PostInteractionLog = exports.default = /*#__PURE__*/function () {
   }, {
     key: "sendPostInteractionLog",
     value: function sendPostInteractionLog() {
-      var _this$vcObserver2;
+      var _this$vcObserver3, _getConfig2;
       if (!this.hasData() || !this.lastInteractionFinish || !this.sinkHandlerFn) {
+        var _getConfig;
         this.reset();
+        if ((_getConfig = (0, _config.getConfig)()) !== null && _getConfig !== void 0 && (_getConfig = _getConfig.experimentalInteractionMetrics) !== null && _getConfig !== void 0 && _getConfig.enabled) {
+          var _this$vcObserver2;
+          (_this$vcObserver2 = this.vcObserver) === null || _this$vcObserver2 === void 0 || _this$vcObserver2.stop();
+        }
         return;
       }
+      var postInteractionFinishVCResult = (_this$vcObserver3 = this.vcObserver) === null || _this$vcObserver3 === void 0 ? void 0 : _this$vcObserver3.getVCResult(_objectSpread({
+        start: this.lastInteractionFinish.start,
+        stop: performance.now(),
+        tti: -1,
+        // no need for TTI value here
+        prefix: 'ufo'
+      }, this.vcObserverSSRConfig));
+      if ((_getConfig2 = (0, _config.getConfig)()) !== null && _getConfig2 !== void 0 && (_getConfig2 = _getConfig2.experimentalInteractionMetrics) !== null && _getConfig2 !== void 0 && _getConfig2.enabled) {
+        var _this$vcObserver4;
+        (_this$vcObserver4 = this.vcObserver) === null || _this$vcObserver4 === void 0 || _this$vcObserver4.stop();
+      }
       this.sinkHandlerFn({
         lastInteractionFinish: this.lastInteractionFinish,
         reactProfilerTimings: this.reactProfilerTimings,
         // NOTE: invoking `getVCResult` at latest possible point in time here (not earlier) to get the most accurate result (from performance.now())
-        postInteractionFinishVCResult: (_this$vcObserver2 = this.vcObserver) === null || _this$vcObserver2 === void 0 ? void 0 : _this$vcObserver2.getVCResult(_objectSpread({
-          start: this.lastInteractionFinish.start,
-          stop: performance.now(),
-          tti: -1,
-          // no need for TTI value here
-          prefix: 'ufo'
-        }, this.vcObserverSSRConfig)),
+        postInteractionFinishVCResult: postInteractionFinishVCResult,
         lastInteractionFinishVCResult: this.lastInteractionFinishVCResult
       });
       this.reset();
@@ -142,7 +152,7 @@ var PostInteractionLog = exports.default = /*#__PURE__*/function () {
   }, {
     key: "onInteractionComplete",
     value: function onInteractionComplete(_ref2) {
-      var _getConfig,
+      var _getConfig3,
         _this = this;
       var ufoName = _ref2.ufoName,
         start = _ref2.start,
@@ -166,7 +176,7 @@ var PostInteractionLog = exports.default = /*#__PURE__*/function () {
         experimentalTTAI: experimentalTTAI,
         experimentalVC90: experimentalVC90
       };
-      var timeout = ((_getConfig = (0, _config.getConfig)()) === null || _getConfig === void 0 ? void 0 : _getConfig.timeWindowForLateMutationsInMilliseconds) || POST_INTERACTION_LOG_SEND_DEFAULT_TIMEOUT;
+      var timeout = ((_getConfig3 = (0, _config.getConfig)()) === null || _getConfig3 === void 0 ? void 0 : _getConfig3.timeWindowForLateMutationsInMilliseconds) || POST_INTERACTION_LOG_SEND_DEFAULT_TIMEOUT;
       this.sinkTimeoutId = window.setTimeout(function () {
         _this.sendPostInteractionLog();
       }, timeout);

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

@@ -10,6 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _scheduler = require("scheduler");
 var _additionalPayload = require("../additional-payload");
 var _config = require("../config");
+var _createExperimentalInteractionMetricsPayload = require("../create-experimental-interaction-metrics-payload");
 var _hiddenTiming = require("../hidden-timing");
 var _interactionMetrics = require("../interaction-metrics");
 var _vc = require("../vc");
@@ -26,6 +27,16 @@ function sinkInteraction(instance, payloadPackage) {
     });
   });
 }
+function sinkExperimentalInteractionMetrics(instance, payloadPackage) {
+  (0, _createExperimentalInteractionMetricsPayload.sinkExperimentalHandler)(function (interactionId, interaction) {
+    (0, _scheduler.unstable_scheduleCallback)(_scheduler.unstable_IdlePriority, function () {
+      var payload = payloadPackage.createExperimentalMetricsPayload(interactionId, interaction);
+      if (payload) {
+        instance.sendOperationalEvent(payload);
+      }
+    });
+  });
+}
 function sinkPostInteractionLog(instance, createPostInteractionLogPayload) {
   (0, _interactionMetrics.sinkPostInteractionLogHandler)(function (logOutput) {
     (0, _scheduler.unstable_scheduleCallback)(_scheduler.unstable_IdlePriority, function () {
@@ -43,6 +54,7 @@ var init = exports.init = function init(analyticsWebClientAsync, config) {
   }
   (0, _config.setUFOConfig)(config);
   if ((_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled) {
+    var _config$experimentalI;
     var vcOptions = {
       heatmapSize: config.vc.heatmapSize,
       oldDomUpdates: config.vc.oldDomUpdates,
@@ -56,16 +68,19 @@ var init = exports.init = function init(analyticsWebClientAsync, config) {
     _interactionMetrics.postInteractionLog.startVCObserver({
       startTime: 0
     });
+    if (config !== null && config !== void 0 && (_config$experimentalI = config.experimentalInteractionMetrics) !== null && _config$experimentalI !== void 0 && _config$experimentalI.enabled) {
+      _createExperimentalInteractionMetricsPayload.experimentalVC.initialize(vcOptions).start({
+        startTime: 0
+      });
+    }
   }
   (0, _hiddenTiming.setupHiddenTimingCapture)();
   (0, _additionalPayload.startLighthouseObserver)();
   initialized = true;
-  Promise.all([analyticsWebClientAsync, // eslint-disable-next-line import/dynamic-import-chunkname
-  Promise.resolve().then(function () {
+  Promise.all([analyticsWebClientAsync, Promise.resolve().then(function () {
     return _interopRequireWildcard(require( /* webpackChunkName: "create-payloads" */'../create-payload'));
-  }), // eslint-disable-next-line import/dynamic-import-chunkname
-  Promise.resolve().then(function () {
-    return _interopRequireWildcard(require( /* webpackChunkName: "create-post-intreaction-log-payload" */'../create-post-interaction-log-payload'));
+  }), Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "create-post-interaction-log-payload" */'../create-post-interaction-log-payload'));
   })]).then(function (_ref) {
     var _ref2 = (0, _slicedToArray2.default)(_ref, 3),
       awc = _ref2[0],
@@ -73,16 +88,22 @@ var init = exports.init = function init(analyticsWebClientAsync, config) {
       createPostInteractionLogPayloadPackage = _ref2[2];
     if (awc.getAnalyticsWebClientPromise) {
       awc.getAnalyticsWebClientPromise().then(function (client) {
-        var _config$postInteracti;
+        var _config$experimentalI2, _config$postInteracti;
         var instance = client.getInstance();
         sinkInteraction(instance, payloadPackage);
+        if (config !== null && config !== void 0 && (_config$experimentalI2 = config.experimentalInteractionMetrics) !== null && _config$experimentalI2 !== void 0 && _config$experimentalI2.enabled) {
+          sinkExperimentalInteractionMetrics(instance, payloadPackage);
+        }
         if ((_config$postInteracti = config.postInteractionLog) !== null && _config$postInteracti !== void 0 && _config$postInteracti.enabled) {
           sinkPostInteractionLog(instance, createPostInteractionLogPayloadPackage.default);
         }
       });
     } else if (awc.sendOperationalEvent) {
-      var _config$postInteracti2;
+      var _config$experimentalI3, _config$postInteracti2;
       sinkInteraction(awc, payloadPackage);
+      if (config !== null && config !== void 0 && (_config$experimentalI3 = config.experimentalInteractionMetrics) !== null && _config$experimentalI3 !== void 0 && _config$experimentalI3.enabled) {
+        sinkExperimentalInteractionMetrics(awc, payloadPackage);
+      }
       if ((_config$postInteracti2 = config.postInteractionLog) !== null && _config$postInteracti2 !== void 0 && _config$postInteracti2.enabled) {
         sinkPostInteractionLog(awc, createPostInteractionLogPayloadPackage.default);
       }

package/dist/cjs/load-hold/UFOLoadHold.js

@@ -32,8 +32,7 @@ var useLayoutEffectSAFE = typeof window === 'undefined' ? _react.useEffect : _re
  *   return (
  *     <>
  *       <Skeleton />
- *       <UFOLoadHold name="card">
- *     </UFOLoadHold>
+ *       <UFOLoadHold name="card" />
  *   )
  * }
  * ```
@@ -68,7 +67,10 @@ function UFOLoadHold(_ref) {
   // react-18: useId instead
   var context = (0, _react.useContext)(_interactionContext.default);
   useLayoutEffectSAFE(function () {
-    if (hold && !experimental && context != null) {
+    if (hold && context != null) {
+      if (experimental && context.holdExperimental) {
+        return context.holdExperimental(name);
+      }
       return context.hold(name);
     }
   }, [hold, context, name]);

package/dist/cjs/segment/segment.js

@@ -91,15 +91,14 @@ function UFOSegment(_ref) {
         }
       }
     }
-    function _internalHold(labelStack, name
-    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
-    ) {
+    function _internalHold(labelStack, name) {
+      var experimental = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       if (interactionId.current != null) {
         if (parentContext) {
-          return parentContext._internalHold(labelStack, name);
+          return parentContext._internalHold(labelStack, name, experimental);
         } else {
           var capturedInteractionId = interactionId.current;
-          var disposeHold = (0, _interactionMetrics.addHold)(interactionId.current, labelStack, name);
+          var disposeHold = (0, _interactionMetrics.addHold)(interactionId.current, labelStack, name, experimental);
           return function () {
             if (capturedInteractionId === interactionId.current) {
               disposeHold();
@@ -108,9 +107,7 @@ function UFOSegment(_ref) {
         }
       }
     }
-    function _internalHoldByID(labelStack, id, name, remove
-    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
-    ) {
+    function _internalHoldByID(labelStack, id, name, remove) {
       if (interactionId.current != null) {
         if (parentContext) {
           parentContext._internalHoldByID(labelStack, name, id, remove);
@@ -135,6 +132,10 @@ function UFOSegment(_ref) {
         var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'unknown';
         return this._internalHold(this.labelStack, name);
       },
+      holdExperimental: function holdExperimental() {
+        var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'unknown';
+        return this._internalHold(this.labelStack, name, true);
+      },
       addHoldByID: function addHoldByID(labelStack, id) {
         var name = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'unknown';
         this._internalHoldByID(labelStack, id, name, false);