@atlaskit/react-ufo 2.10.0 → 2.12.0

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

@@ -9,6 +9,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _config = require("../../../config");
 var _vcUtils = require("../media-wrapper/vc-utils");
 var _editorLnv = require("./editor-lnv");
 var _ssrPlaceholders = require("./ssr-placeholders");
@@ -140,6 +141,7 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
     key: "getMutationObserver",
     value: function getMutationObserver() {
       var _this2 = this;
+      var shouldHandleEditorLnvLocal = (0, _config.shouldHandleEditorLnv)();
       return this.isBrowserSupported() ? new MutationObserver(function (mutations) {
         _this2.measureStart();
         mutations.forEach(function (mutation) {
@@ -185,7 +187,7 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
                   });
                   return;
                 }
-                if ((0, _platformFeatureFlags.fg)('platform_editor_ed-25557_lnv_add_ssr_placeholder')) {
+                if (shouldHandleEditorLnvLocal) {
                   if (_this2.editorLnvHandler.shouldHandleAddedNode(node)) {
                     _this2.editorLnvHandler.handleAddedNode(node).then(function (_ref) {
                       var shouldIgnore = _ref.shouldIgnore;

package/dist/es2019/config/index.js

@@ -67,6 +67,28 @@ export function getInteractionRate(name, interactionKind) {
     return 0;
   }
 }
+export function getExperimentalInteractionRate(name, interactionType) {
+  try {
+    if (!config) {
+      return 0;
+    }
+    const {
+      experimentalInteractionMetrics
+    } = config;
+    if (!(experimentalInteractionMetrics !== null && experimentalInteractionMetrics !== void 0 && experimentalInteractionMetrics.enabled)) {
+      return 0;
+    }
+    if (experimentalInteractionMetrics.rates && typeof experimentalInteractionMetrics.rates[name] === 'number') {
+      return experimentalInteractionMetrics.rates[name];
+    }
+    if (experimentalInteractionMetrics.kind && typeof experimentalInteractionMetrics.kind[interactionType] === 'number') {
+      return experimentalInteractionMetrics.kind[interactionType];
+    }
+    return 0;
+  } catch (e) {
+    return 0;
+  }
+}
 export function getPostInteractionRate(name, interactionType) {
   try {
     if (!config) {
@@ -234,4 +256,12 @@ export function getDoNotAbortActivePressInteractionOnTransition() {
   } catch (e) {
     return undefined;
   }
+}
+export function shouldHandleEditorLnv() {
+  try {
+    var _config$enableEditorL, _config;
+    return (_config$enableEditorL = (_config = config) === null || _config === void 0 ? void 0 : _config.enableEditorLnvHandler) !== null && _config$enableEditorL !== void 0 ? _config$enableEditorL : false;
+  } catch (e) {
+    return false;
+  }
 }

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

@@ -0,0 +1,85 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { getPageVisibilityState } from '../hidden-timing';
+import { VCObserver } from '../vc/vc-observer';
+const interactionBuffer = [];
+let bufferInteractionData = (interactionId, data) => {
+  interactionBuffer.push({
+    interactionId,
+    data
+  });
+};
+function clearInteractionBuffer() {
+  interactionBuffer.length = 0;
+}
+function appendInteractionData(interactionId, data) {
+  bufferInteractionData(interactionId, data);
+}
+export function installInteractionSink(handler) {
+  for (const {
+    interactionId,
+    data
+  } of interactionBuffer) {
+    handler(interactionId, data);
+  }
+  clearInteractionBuffer();
+  bufferInteractionData = handler;
+}
+export function sinkExperimentalHandler(sinkFn) {
+  installInteractionSink(sinkFn);
+}
+export function onExperimentalInteractionComplete(interactionId, data, endTime = performance.now()) {
+  if (data.ufoName) {
+    data.end = endTime;
+    appendInteractionData(interactionId, data);
+    clearInteractionBuffer();
+  }
+}
+export class ExperimentalVCMetrics {
+  constructor() {
+    _defineProperty(this, "vcObserver", null);
+  }
+  initialize(options) {
+    if (this.vcObserver === null) {
+      this.vcObserver = new VCObserver({
+        ...options,
+        isPostInteraction: true
+      });
+    }
+    return this;
+  }
+  start({
+    startTime
+  }) {
+    var _this$vcObserver;
+    (_this$vcObserver = this.vcObserver) === null || _this$vcObserver === void 0 ? void 0 : _this$vcObserver.start({
+      startTime
+    });
+  }
+}
+export const experimentalVC = new ExperimentalVCMetrics();
+export const getExperimentalVCMetrics = interaction => {
+  if (experimentalVC.vcObserver) {
+    var _interaction$apdex, _interaction$apdex$;
+    const prefix = 'ufo-experimental';
+    const result = experimentalVC.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,
+      prefix,
+      vc: interaction.vc
+    });
+    const VC = result === null || result === void 0 ? void 0 : result['metrics:vc'];
+    if (!VC || !(result !== null && result !== void 0 && result[`${prefix}:vc:clean`])) {
+      return result;
+    }
+    const pageVisibilityUpToTTAI = getPageVisibilityState(interaction.start, interaction.end);
+    if (interaction.abortReason || pageVisibilityUpToTTAI !== 'visible') {
+      return result;
+    }
+    return {
+      ...result,
+      'metric:experimental:vc90': VC['90']
+    };
+  }
+  return null;
+};

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

@@ -2,8 +2,10 @@ import Bowser from 'bowser-ultralight';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getLighthouseMetrics } from '../additional-payload';
 import * as bundleEvalTiming from '../bundle-eval-timing';
+import coinflip from '../coinflip';
 import { REACT_UFO_VERSION } from '../common/constants';
-import { getConfig, getUfoNameOverrides } from '../config';
+import { getConfig, getExperimentalInteractionRate, getUfoNameOverrides } from '../config';
+import { getExperimentalVCMetrics } from '../create-experimental-interaction-metrics-payload';
 import { getBm3Timings } from '../custom-timings';
 import { getGlobalErrorCount } from '../global-error-handler';
 import { getPageVisibilityState } from '../hidden-timing';
@@ -28,7 +30,6 @@ function getUfoNameOverride(interaction) {
       }
     }
     return ufoName;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (e) {
     return ufoName;
   }
@@ -155,8 +156,16 @@ const getPaintMetrics = type => {
   });
   return metrics;
 };
+const getTTAI = interaction => {
+  const {
+    start,
+    end
+  } = interaction;
+  const pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
+  return !interaction.abortReason && pageVisibilityUpToTTAI === 'visible' ? Math.round(end - start) : undefined;
+};
 const getVCMetrics = interaction => {
-  var _config$vc, _config$vc$ssrWhiteli, _interaction$apdex, _interaction$apdex$;
+  var _config$vc, _config$vc$ssrWhiteli, _interaction$apdex, _interaction$apdex$, _config$experimentalI;
   const config = getConfig();
   if (!(config !== null && config !== void 0 && (_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled)) {
     return {};
@@ -179,6 +188,9 @@ const getVCMetrics = interaction => {
     vc: interaction.vc,
     ...ssr
   });
+  if ((_config$experimentalI = config.experimentalInteractionMetrics) !== null && _config$experimentalI !== void 0 && _config$experimentalI.enabled) {
+    getVCObserver().stop();
+  }
   postInteractionLog.setLastInteractionFinishVCResult(result);
   const VC = result === null || result === void 0 ? void 0 : result['metrics:vc'];
   if (!VC || !(result !== null && result !== void 0 && result[`${prefix}:vc:clean`])) {
@@ -641,13 +653,15 @@ function getStylesheetMetrics() {
     return {};
   }
 }
+let regularTTAI;
+let expTTAI;
 function getErrorCounts(interaction) {
   return {
     'ufo:errors:globalCount': getGlobalErrorCount(),
     'ufo:errors:count': interaction.errors.length
   };
 }
-function createInteractionMetricsPayload(interaction, interactionId) {
+function createInteractionMetricsPayload(interaction, interactionId, experimental) {
   var _window$location, _config$additionalPay;
   const interactionPayloadStart = performance.now();
   const config = getConfig();
@@ -699,7 +713,7 @@ function createInteractionMetricsPayload(interaction, interactionId) {
   };
   // Detailed payload. Page visibility = visible
   const getDetailedInteractionMetrics = () => {
-    if (window.__UFO_COMPACT_PAYLOAD__ || !isDetailedPayload) {
+    if (experimental || window.__UFO_COMPACT_PAYLOAD__ || !isDetailedPayload) {
       return {};
     }
     const spans = [...interaction.spans, ...atlaskitInteractionSpans];
@@ -714,7 +728,7 @@ function createInteractionMetricsPayload(interaction, interactionId) {
       })),
       holdActive: [...interaction.holdActive.values()],
       redirects: optimizeRedirects(interaction.redirects, start),
-      holdInfo: optimizeHoldInfo(interaction.holdInfo, start),
+      holdInfo: optimizeHoldInfo(experimental ? interaction.holdExpInfo : interaction.holdInfo, start),
       spans: optimizeSpans(spans, start),
       requestInfo: optimizeRequestInfo(interaction.requestInfo, start),
       customTimings: optimizeCustomTimings(interaction.customTimings, start),
@@ -734,6 +748,11 @@ function createInteractionMetricsPayload(interaction, interactionId) {
       SSRTimings: config !== null && config !== void 0 && (_config$ssr4 = config.ssr) !== null && _config$ssr4 !== void 0 && _config$ssr4.getSSRTimings ? config.ssr.getSSRTimings() : objectToArray(ssr.getSSRTimings())
     };
   };
+  if (experimental) {
+    expTTAI = getTTAI(interaction);
+  } else {
+    regularTTAI = getTTAI(interaction);
+  }
   const newUFOName = sanitizeUfoName(ufoName);
   const payload = {
     actionSubject: 'experience',
@@ -754,7 +773,7 @@ function createInteractionMetricsPayload(interaction, interactionId) {
           payloadSource: 'platform'
         },
         'event:region': config.region || 'unknown',
-        'experience:key': 'custom.interaction-metrics',
+        'experience:key': experimental ? 'custom.experimental-interaction-metrics' : 'custom.interaction-metrics',
         'experience:name': newUFOName,
         // root
         ...getBrowserMetadata(),
@@ -763,6 +782,7 @@ function createInteractionMetricsPayload(interaction, interactionId) {
         ...getPaintMetrics(type),
         ...getNavigationMetrics(type),
         ...getVCMetrics(interaction),
+        ...(experimental ? getExperimentalVCMetrics(interaction) : undefined),
         ...((_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)),
         ...getTracingContextData(interaction),
         ...getStylesheetMetrics(),
@@ -802,12 +822,18 @@ function createInteractionMetricsPayload(interaction, interactionId) {
           ...getPageLoadInteractionMetrics(),
           ...getDetailedInteractionMetrics(),
           ...getPageLoadDetailedInteractionMetrics(),
-          ...getBm3TrackerTimings(interaction)
+          ...getBm3TrackerTimings(interaction),
+          'metric:ttai': experimental ? regularTTAI || expTTAI : undefined,
+          'metric:experimental:ttai': expTTAI
         },
         'ufo:payloadTime': roundEpsilon(performance.now() - interactionPayloadStart)
       }
     }
   };
+  if (experimental) {
+    regularTTAI = undefined;
+    expTTAI = undefined;
+  }
   payload.attributes.properties['event:sizeInKb'] = getPayloadSize(payload.attributes.properties);
   return payload;
 }
@@ -819,4 +845,20 @@ export function createPayloads(interactionId, interaction) {
   };
   const interactionMetricsPayload = createInteractionMetricsPayload(modifiedInteraction, interactionId);
   return [interactionMetricsPayload];
+}
+export function createExperimentalMetricsPayload(interactionId, interaction) {
+  const config = getConfig();
+  if (!config) {
+    throw Error('UFO Configuration not provided');
+  }
+  const ufoName = sanitizeUfoName(interaction.ufoName);
+  const rate = getExperimentalInteractionRate(ufoName, interaction.type);
+  if (!coinflip(rate)) {
+    return null;
+  }
+  const pageVisibilityState = getPageVisibilityState(interaction.start, interaction.end);
+  if (pageVisibilityState !== 'visible') {
+    return null;
+  }
+  return createInteractionMetricsPayload(interaction, interactionId, true);
 }

package/dist/es2019/interaction-metrics/common/constants.js

@@ -1,2 +1 @@
-const interactions = new Map();
-export default interactions;
+export const interactions = new Map();

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

@@ -1,11 +1,12 @@
 import { v4 as createUUID } from 'uuid';
 import coinflip from '../coinflip';
 import { getAwaitBM3TTIList, getCapabilityRate, getConfig } from '../config';
+import { experimentalVC, getExperimentalVCMetrics, onExperimentalInteractionComplete } from '../create-experimental-interaction-metrics-payload';
 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 interactions from './common/constants';
+import { interactions } from './common/constants';
 import PostInteractionLog from './post-interaction-log';
 const PreviousInteractionLog = {
   name: undefined,
@@ -218,16 +219,29 @@ function removeHoldCriterion(id) {
   }
   window.__CRITERION__.removeUFOHold(id);
 }
-export function addHold(interactionId, labelStack, name) {
+export function addHold(interactionId, labelStack, name, experimental) {
   const interaction = interactions.get(interactionId);
   const id = createUUID();
   if (interaction != null) {
+    var _getConfig2, _getConfig2$experimen;
     const start = performance.now();
-    interaction.holdActive.set(id, {
+    const holdActive = {
       labelStack,
       name,
       start
-    });
+    };
+    if ((_getConfig2 = getConfig()) !== null && _getConfig2 !== void 0 && (_getConfig2$experimen = _getConfig2.experimentalInteractionMetrics) !== null && _getConfig2$experimen !== void 0 && _getConfig2$experimen.enabled && experimental) {
+      interaction.holdExpActive.set(id, {
+        ...holdActive,
+        start
+      });
+    }
+    if (!experimental) {
+      interaction.holdActive.set(id, {
+        ...holdActive,
+        start
+      });
+    }
     addHoldCriterion(id, labelStack, name, start);
     return () => {
       const end = performance.now();
@@ -245,12 +259,22 @@ export function addHold(interactionId, labelStack, name) {
       removeHoldCriterion(id);
       const currentInteraction = interactions.get(interactionId);
       const currentHold = interaction.holdActive.get(id);
-      if (currentInteraction != null && currentHold != null) {
-        currentInteraction.holdInfo.push({
-          ...currentHold,
-          end
-        });
-        interaction.holdActive.delete(id);
+      const expHold = interaction.holdExpActive.get(id);
+      if (currentInteraction != null) {
+        if (currentHold != null) {
+          currentInteraction.holdInfo.push({
+            ...currentHold,
+            end
+          });
+          interaction.holdActive.delete(id);
+        }
+        if (expHold != null) {
+          currentInteraction.holdExpInfo.push({
+            ...expHold,
+            end
+          });
+          interaction.holdExpActive.delete(id);
+        }
       }
     };
   }
@@ -353,7 +377,7 @@ export function addErrorToAll(name, labelStack, errorType, errorMessage, errorSt
   });
 }
 export const addProfilerTimings = (interactionId, labelStack, type, actualDuration, baseDuration, startTime, commitTime) => {
-  var _getConfig2, _getConfig2$postInter;
+  var _getConfig3, _getConfig3$postInter;
   if (isPerformanceTracingEnabled()) {
     try {
       // for Firefox 102 and older
@@ -375,7 +399,7 @@ export const addProfilerTimings = (interactionId, labelStack, type, actualDurati
       startTime,
       commitTime
     });
-  } else if ((_getConfig2 = getConfig()) !== null && _getConfig2 !== void 0 && (_getConfig2$postInter = _getConfig2.postInteractionLog) !== null && _getConfig2$postInter !== void 0 && _getConfig2$postInter.enabled) {
+  } else if ((_getConfig3 = getConfig()) !== null && _getConfig3 !== void 0 && (_getConfig3$postInter = _getConfig3.postInteractionLog) !== null && _getConfig3$postInter !== void 0 && _getConfig3$postInter.enabled) {
     postInteractionLog.addProfilerTimings(labelStack, type, actualDuration, baseDuration, startTime, commitTime);
   }
 };
@@ -392,8 +416,7 @@ function callCleanUpCallbacks(interaction) {
   });
 }
 const finishInteraction = (id, data, endTime = performance.now()) => {
-  var _getConfig3, _getConfig3$vc;
-  // eslint-disable-next-line no-param-reassign
+  var _getConfig4, _getConfig4$vc, _getConfig5, _getConfig5$experimen;
   data.end = endTime;
   try {
     // for Firefox 102 and older
@@ -405,15 +428,16 @@ const finishInteraction = (id, data, endTime = performance.now()) => {
     // do nothing
   }
   if (data.featureFlags) {
-    // eslint-disable-next-line no-param-reassign
     data.featureFlags.during = Object.fromEntries(currentFeatureFlagsAccessed);
   }
   clearActiveTrace();
   callCleanUpCallbacks(data);
-  if ((_getConfig3 = getConfig()) !== null && _getConfig3 !== void 0 && (_getConfig3$vc = _getConfig3.vc) !== null && _getConfig3$vc !== void 0 && _getConfig3$vc.stopVCAtInteractionFinish) {
+  if ((_getConfig4 = getConfig()) !== null && _getConfig4 !== void 0 && (_getConfig4$vc = _getConfig4.vc) !== null && _getConfig4$vc !== void 0 && _getConfig4$vc.stopVCAtInteractionFinish) {
     data.vc = getVCObserver().getVCRawData();
   }
-  remove(id);
+  if (!((_getConfig5 = getConfig()) !== null && _getConfig5 !== void 0 && (_getConfig5$experimen = _getConfig5.experimentalInteractionMetrics) !== null && _getConfig5$experimen !== void 0 && _getConfig5$experimen.enabled)) {
+    remove(id);
+  }
   PreviousInteractionLog.name = data.ufoName || 'unknown';
   PreviousInteractionLog.isAborted = data.abortReason != null;
   if (data.ufoName) {
@@ -470,15 +494,51 @@ export const sinkInteractionHandler = sinkFn => {
 export const sinkPostInteractionLogHandler = sinkFn => {
   postInteractionLog.sinkHandler(sinkFn);
 };
+
+// a flag to prevent multiple submitting
+let activeSubmitted = false;
 export function tryComplete(interactionId, endTime) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
-    const noMoreHolds = interaction.holdActive.size === 0;
-    if (noMoreHolds) {
-      var _getConfig4, _getConfig4$postInter;
-      finishInteraction(interactionId, interaction, endTime);
-      if ((_getConfig4 = getConfig()) !== null && _getConfig4 !== void 0 && (_getConfig4$postInter = _getConfig4.postInteractionLog) !== null && _getConfig4$postInter !== void 0 && _getConfig4$postInter.enabled) {
-        postInteractionLog.onInteractionComplete(interaction);
+    const noMoreActiveHolds = interaction.holdActive.size === 0;
+    const noMoreExpHolds = interaction.holdExpActive.size === 0;
+    const postInteraction = () => {
+      var _getConfig6, _getConfig6$postInter, _getConfig8, _getConfig8$experimen;
+      if ((_getConfig6 = getConfig()) !== null && _getConfig6 !== void 0 && (_getConfig6$postInter = _getConfig6.postInteractionLog) !== null && _getConfig6$postInter !== void 0 && _getConfig6$postInter.enabled) {
+        var _getConfig7, _getConfig7$experimen;
+        let experimentalVC90;
+        let experimentalTTAI;
+        if ((_getConfig7 = getConfig()) !== null && _getConfig7 !== void 0 && (_getConfig7$experimen = _getConfig7.experimentalInteractionMetrics) !== null && _getConfig7$experimen !== void 0 && _getConfig7$experimen.enabled) {
+          var _getExperimentalVCMet;
+          experimentalVC90 = (_getExperimentalVCMet = getExperimentalVCMetrics(interaction)) === null || _getExperimentalVCMet === void 0 ? void 0 : _getExperimentalVCMet['metric:experimental:vc90'];
+          const {
+            start,
+            end
+          } = interaction;
+          experimentalTTAI = !interaction.abortReason ? Math.round(end - start) : undefined;
+        }
+        postInteractionLog.onInteractionComplete({
+          ...interaction,
+          experimentalTTAI,
+          experimentalVC90
+        });
+      }
+      if ((_getConfig8 = getConfig()) !== null && _getConfig8 !== void 0 && (_getConfig8$experimen = _getConfig8.experimentalInteractionMetrics) !== null && _getConfig8$experimen !== void 0 && _getConfig8$experimen.enabled) {
+        remove(interactionId);
+      }
+      activeSubmitted = false;
+    };
+    if (noMoreActiveHolds) {
+      if (!activeSubmitted) {
+        finishInteraction(interactionId, interaction, endTime);
+        activeSubmitted = true;
+      }
+      if (noMoreExpHolds) {
+        var _getConfig9, _getConfig9$experimen;
+        if ((_getConfig9 = getConfig()) !== null && _getConfig9 !== void 0 && (_getConfig9$experimen = _getConfig9.experimentalInteractionMetrics) !== null && _getConfig9$experimen !== void 0 && _getConfig9$experimen.enabled) {
+          onExperimentalInteractionComplete(interactionId, interaction, endTime);
+        }
+        postInteraction();
       }
     }
   }
@@ -491,33 +551,46 @@ function callCancelCallbacks(interaction) {
 export function abort(interactionId, abortReason) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
+    var _getConfig10, _getConfig10$experime;
     callCancelCallbacks(interaction);
     interaction.abortReason = abortReason;
     finishInteraction(interactionId, interaction);
+    if ((_getConfig10 = getConfig()) !== null && _getConfig10 !== void 0 && (_getConfig10$experime = _getConfig10.experimentalInteractionMetrics) !== null && _getConfig10$experime !== void 0 && _getConfig10$experime.enabled) {
+      onExperimentalInteractionComplete(interactionId, interaction);
+      remove(interactionId);
+    }
   }
 }
 export function abortByNewInteraction(interactionId, interactionName) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
+    var _getConfig11, _getConfig11$experime;
     callCancelCallbacks(interaction);
     interaction.abortReason = 'new_interaction';
     interaction.abortedByInteractionName = interactionName;
     finishInteraction(interactionId, interaction);
+    if ((_getConfig11 = getConfig()) !== null && _getConfig11 !== void 0 && (_getConfig11$experime = _getConfig11.experimentalInteractionMetrics) !== null && _getConfig11$experime !== void 0 && _getConfig11$experime.enabled) {
+      onExperimentalInteractionComplete(interactionId, interaction);
+      remove(interactionId);
+    }
   }
 }
 export function abortAll(abortReason, abortedByInteractionName) {
   interactions.forEach((interaction, interactionId) => {
+    var _getConfig12, _getConfig12$experime;
     const 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 = getConfig()) !== null && _getConfig12 !== void 0 && (_getConfig12$experime = _getConfig12.experimentalInteractionMetrics) !== null && _getConfig12$experime !== void 0 && _getConfig12$experime.enabled) {
+      onExperimentalInteractionComplete(interactionId, interaction);
+      remove(interactionId);
+    }
   });
 }
 export function addOnCancelCallback(id, cancelCallback) {
@@ -525,8 +598,8 @@ export function addOnCancelCallback(id, cancelCallback) {
   interaction === null || interaction === void 0 ? void 0 : interaction.cancelCallbacks.push(cancelCallback);
 }
 export function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelStack, routeName, trace = null) {
-  var _getConfig5, _getConfig5$postInter;
-  if ((_getConfig5 = getConfig()) !== null && _getConfig5 !== void 0 && (_getConfig5$postInter = _getConfig5.postInteractionLog) !== null && _getConfig5$postInter !== void 0 && _getConfig5$postInter.enabled) {
+  var _getConfig13, _getConfig13$postInte;
+  if ((_getConfig13 = getConfig()) !== null && _getConfig13 !== void 0 && (_getConfig13$postInte = _getConfig13.postInteractionLog) !== null && _getConfig13$postInte !== void 0 && _getConfig13$postInte.enabled) {
     postInteractionLog.reset();
   }
   let previousTime = startTime;
@@ -566,9 +639,11 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
     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,
@@ -612,12 +687,18 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
     addHoldByID(interactionId, [], ufoName, ufoName, true);
   }
   if (type === 'transition') {
+    var _getConfig14, _getConfig14$experime;
     getVCObserver().start({
       startTime
     });
     postInteractionLog.startVCObserver({
       startTime
     });
+    if ((_getConfig14 = getConfig()) !== null && _getConfig14 !== void 0 && (_getConfig14$experime = _getConfig14.experimentalInteractionMetrics) !== null && _getConfig14$experime !== void 0 && _getConfig14$experime.enabled) {
+      experimentalVC.start({
+        startTime
+      });
+    }
   }
 }
 export function addBrowserMetricEvent(event) {

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

@@ -86,23 +86,33 @@ export default class PostInteractionLog {
    * Send the log if there is data
    */
   sendPostInteractionLog() {
-    var _this$vcObserver2;
+    var _this$vcObserver3, _getConfig2, _getConfig2$experimen;
     if (!this.hasData() || !this.lastInteractionFinish || !this.sinkHandlerFn) {
+      var _getConfig, _getConfig$experiment;
       this.reset();
+      if ((_getConfig = getConfig()) !== null && _getConfig !== void 0 && (_getConfig$experiment = _getConfig.experimentalInteractionMetrics) !== null && _getConfig$experiment !== void 0 && _getConfig$experiment.enabled) {
+        var _this$vcObserver2;
+        (_this$vcObserver2 = this.vcObserver) === null || _this$vcObserver2 === void 0 ? void 0 : _this$vcObserver2.stop();
+      }
       return;
     }
+    const postInteractionFinishVCResult = (_this$vcObserver3 = this.vcObserver) === null || _this$vcObserver3 === void 0 ? void 0 : _this$vcObserver3.getVCResult({
+      start: this.lastInteractionFinish.start,
+      stop: performance.now(),
+      tti: -1,
+      // no need for TTI value here
+      prefix: 'ufo',
+      ...this.vcObserverSSRConfig
+    });
+    if ((_getConfig2 = getConfig()) !== null && _getConfig2 !== void 0 && (_getConfig2$experimen = _getConfig2.experimentalInteractionMetrics) !== null && _getConfig2$experimen !== void 0 && _getConfig2$experimen.enabled) {
+      var _this$vcObserver4;
+      (_this$vcObserver4 = this.vcObserver) === null || _this$vcObserver4 === void 0 ? 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({
-        start: this.lastInteractionFinish.start,
-        stop: performance.now(),
-        tti: -1,
-        // no need for TTI value here
-        prefix: 'ufo',
-        ...this.vcObserverSSRConfig
-      }),
+      postInteractionFinishVCResult,
       lastInteractionFinishVCResult: this.lastInteractionFinishVCResult
     });
     this.reset();
@@ -125,7 +135,7 @@ export default class PostInteractionLog {
     experimentalTTAI,
     experimentalVC90
   }) {
-    var _getConfig;
+    var _getConfig3;
     this.lastInteractionFinish = {
       ufoName,
       start,
@@ -138,7 +148,7 @@ export default class PostInteractionLog {
       experimentalTTAI,
       experimentalVC90
     };
-    const timeout = ((_getConfig = getConfig()) === null || _getConfig === void 0 ? void 0 : _getConfig.timeWindowForLateMutationsInMilliseconds) || POST_INTERACTION_LOG_SEND_DEFAULT_TIMEOUT;
+    const timeout = ((_getConfig3 = getConfig()) === null || _getConfig3 === void 0 ? void 0 : _getConfig3.timeWindowForLateMutationsInMilliseconds) || POST_INTERACTION_LOG_SEND_DEFAULT_TIMEOUT;
     this.sinkTimeoutId = window.setTimeout(() => {
       this.sendPostInteractionLog();
     }, timeout);