@atlaskit/react-ufo 2.5.3 → 2.7.0

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

@@ -10,6 +10,8 @@ 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 _utils = require("../create-payload/common/utils");
 var _hiddenTiming = require("../hidden-timing");
 var _interactionMetrics = require("../interaction-metrics");
 var _vc = require("../vc");
@@ -26,6 +28,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 +55,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,
@@ -52,20 +65,23 @@ var init = exports.init = function init(analyticsWebClientAsync, config) {
     (0, _vc.getVCObserver)(vcOptions).start({
       startTime: 0
     });
-    _interactionMetrics.postInteractionLog.initializeVCObserver(vcOptions);
-    _interactionMetrics.postInteractionLog.startVCObserver({
+    _utils.postInteractionLog.initializeVCObserver(vcOptions);
+    _utils.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 +89,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);

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) {

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

@@ -0,0 +1,71 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { calculateVCMetrics } from '../create-payload/common/utils';
+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 _result$metricsVc;
+    const result = calculateVCMetrics(interaction, 'ufo-experimental', experimentalVC.vcObserver.getVCResult);
+    experimentalVC.vcObserver.stop();
+    return {
+      ...result,
+      'metric:experimental:vc90': result === null || result === void 0 ? void 0 : (_result$metricsVc = result['metrics:vc']) === null || _result$metricsVc === void 0 ? void 0 : _result$metricsVc['90']
+    };
+  }
+  return null;
+};

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

@@ -1,5 +1,12 @@
 /* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
+
 import { REACT_UFO_VERSION } from '../../../common/constants';
+import { getConfig } from '../../../config';
+import { getPageVisibilityState } from '../../../hidden-timing';
+import PostInteractionLog from '../../../interaction-metrics/post-interaction-log';
+import { getSSRDoneTime } from '../../../ssr';
+import { getVCObserver } from '../../../vc';
+export const postInteractionLog = new PostInteractionLog();
 export const sanitizeUfoName = name => {
   return name.replace(/_/g, '-');
 };
@@ -53,4 +60,64 @@ export function optimizeLabelStack(labelStack) {
       s: ls.segmentId
     } : {})
   }));
-}
+}
+export const getPageVisibilityUpToTTAI = interaction => {
+  const {
+    start,
+    end
+  } = interaction;
+  return getPageVisibilityState(start, end);
+};
+export const calculateVCMetrics = (interaction, prefix, getVCResultFn) => {
+  var _interaction$apdex, _interaction$apdex$;
+  const result = getVCResultFn({
+    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 = getPageVisibilityUpToTTAI(interaction);
+  if (interaction.abortReason || pageVisibilityUpToTTAI !== 'visible') {
+    return result;
+  }
+  return result;
+};
+export function getSSRDoneTimeValue(config) {
+  var _config$ssr, _config$ssr2;
+  return config !== null && config !== void 0 && (_config$ssr = config.ssr) !== null && _config$ssr !== void 0 && _config$ssr.getSSRDoneTime ? config === null || config === void 0 ? void 0 : (_config$ssr2 = config.ssr) === null || _config$ssr2 === void 0 ? void 0 : _config$ssr2.getSSRDoneTime() : getSSRDoneTime();
+}
+export const getVCMetrics = interaction => {
+  var _config$vc, _config$vc$ssrWhiteli, _result$metricsVc;
+  const config = getConfig();
+  if (!(config !== null && config !== void 0 && (_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled)) {
+    return {};
+  }
+  if (interaction.type !== 'page_load' && interaction.type !== 'transition') {
+    return {};
+  }
+  const isSSREnabled = (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));
+  const ssr = interaction.type === 'page_load' && isSSREnabled ? {
+    ssr: getSSRDoneTimeValue(config)
+  } : null;
+  postInteractionLog.setVCObserverSSRConfig(ssr);
+  const result = calculateVCMetrics(interaction, 'ufo', getVCObserver().getVCResult);
+  getVCObserver().stop();
+  postInteractionLog.setLastInteractionFinishVCResult(result);
+  return {
+    ...result,
+    'metric:vc90': result === null || result === void 0 ? void 0 : (_result$metricsVc = result['metrics:vc']) === null || _result$metricsVc === void 0 ? void 0 : _result$metricsVc['90']
+  };
+};
+export const getTTAI = interaction => {
+  const {
+    start,
+    end
+  } = interaction;
+  const pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
+  return !interaction.abortReason && pageVisibilityUpToTTAI === 'visible' ? Math.round(end - start) : undefined;
+};

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

@@ -2,19 +2,20 @@ 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';
 import * as initialPageLoadExtraTiming from '../initial-page-load-extra-timing';
-import { interactionSpans as atlaskitInteractionSpans, postInteractionLog } from '../interaction-metrics';
+import { interactionSpans as atlaskitInteractionSpans } from '../interaction-metrics';
 import * as resourceTiming from '../resource-timing';
 import { roundEpsilon } from '../round-number';
 import * as ssr from '../ssr';
-import { getVCObserver } from '../vc';
-import { buildSegmentTree, labelStackStartWith, optimizeLabelStack, sanitizeUfoName, stringifyLabelStackFully } from './common/utils';
-function getUfoNameOverride(interaction) {
+import { buildSegmentTree, getPageVisibilityUpToTTAI, getSSRDoneTimeValue, getTTAI, getVCMetrics, labelStackStartWith, optimizeLabelStack, sanitizeUfoName, stringifyLabelStackFully } from './common/utils';
+export function getUfoNameOverride(interaction) {
   const {
     ufoName,
     apdex
@@ -28,7 +29,6 @@ function getUfoNameOverride(interaction) {
       }
     }
     return ufoName;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (e) {
     return ufoName;
   }
@@ -63,13 +63,6 @@ const getPageVisibilityUpToTTI = interaction => {
   const bm3EndTimeOrInteractionEndTime = getBm3EndTimeOrFallbackValue(interaction);
   return getPageVisibilityState(start, bm3EndTimeOrInteractionEndTime);
 };
-const getPageVisibilityUpToTTAI = interaction => {
-  const {
-    start,
-    end
-  } = interaction;
-  return getPageVisibilityState(start, end);
-};
 const getVisibilityStateFromPerformance = stop => {
   try {
     const results = performance.getEntriesByType('visibility-state');
@@ -124,15 +117,6 @@ const getMoreAccuratePageVisibilityUpToTTAI = interaction => {
   }
   return old;
 };
-const getInteractionStatus = interaction => {
-  const originalInteractionStatus = interaction.abortReason ? 'ABORTED' : 'SUCCEEDED';
-  const hasBm3TTI = interaction.apdex.length > 0;
-  const overrideStatus = hasBm3TTI ? 'SUCCEEDED' : originalInteractionStatus;
-  return {
-    originalInteractionStatus,
-    overrideStatus
-  };
-};
 const getResourceTimings = (start, end) => {
   var _resourceTiming$getRe;
   return (_resourceTiming$getRe = resourceTiming.getResourceTimings(start, end)) !== null && _resourceTiming$getRe !== void 0 ? _resourceTiming$getRe : undefined;
@@ -155,44 +139,6 @@ const getPaintMetrics = type => {
   });
   return metrics;
 };
-const getVCMetrics = interaction => {
-  var _config$vc, _interaction$apdex, _interaction$apdex$;
-  const config = getConfig();
-  if (!(config !== null && config !== void 0 && (_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled)) {
-    return {};
-  }
-  if (interaction.type !== 'page_load' && interaction.type !== 'transition') {
-    return {};
-  }
-  const ssr = interaction.type === 'page_load' && config !== null && config !== void 0 && config.ssr ? {
-    ssr: getSSRDoneTimeValue(config)
-  } : null;
-  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 = getVCObserver().getVCResult({
-    start: interaction.start,
-    stop: interaction.end,
-    tti,
-    prefix,
-    vc: interaction.vc,
-    ...ssr
-  });
-  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`])) {
-    return result;
-  }
-  const interactionStatus = getInteractionStatus(interaction);
-  const pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
-  if (interactionStatus.originalInteractionStatus !== 'SUCCEEDED' || pageVisibilityUpToTTAI !== 'visible') {
-    return result;
-  }
-  return {
-    ...result,
-    'metric:vc90': VC['90']
-  };
-};
 const getNavigationMetrics = type => {
   if (type !== 'page_load') {
     return {};
@@ -240,16 +186,15 @@ const getNavigationMetrics = type => {
   };
 };
 const getPPSMetrics = interaction => {
-  var _interaction$apdex2, _interaction$apdex2$;
+  var _interaction$apdex, _interaction$apdex$;
   const {
     start,
     end
   } = interaction;
   const config = getConfig();
-  const interactionStatus = getInteractionStatus(interaction);
   const pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
-  const tti = (_interaction$apdex2 = interaction.apdex) === null || _interaction$apdex2 === void 0 ? void 0 : (_interaction$apdex2$ = _interaction$apdex2[0]) === null || _interaction$apdex2$ === void 0 ? void 0 : _interaction$apdex2$.stopTime;
-  const ttai = interactionStatus.originalInteractionStatus === 'SUCCEEDED' && pageVisibilityUpToTTAI === 'visible' ? Math.round(end - start) : undefined;
+  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 ttai = !interaction.abortReason && pageVisibilityUpToTTAI === 'visible' ? Math.round(end - start) : undefined;
   const PPSMetricsAtTTI = tti !== undefined ? getLighthouseMetrics({
     start,
     stop: tti
@@ -594,10 +539,6 @@ function getBm3TrackerTimings(interaction) {
     legacyMetrics
   };
 }
-function getSSRDoneTimeValue(config) {
-  var _config$ssr, _config$ssr2;
-  return config !== null && config !== void 0 && (_config$ssr = config.ssr) !== null && _config$ssr !== void 0 && _config$ssr.getSSRDoneTime ? config === null || config === void 0 ? void 0 : (_config$ssr2 = config.ssr) === null || _config$ssr2 === void 0 ? void 0 : _config$ssr2.getSSRDoneTime() : ssr.getSSRDoneTime();
-}
 function getPayloadSize(payload) {
   return Math.round(new TextEncoder().encode(JSON.stringify(payload)).length / 1024);
 }
@@ -640,13 +581,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();
@@ -681,7 +624,7 @@ function createInteractionMetricsPayload(interaction, interactionId) {
   } : {};
   // Page Load
   const getPageLoadInteractionMetrics = () => {
-    var _config$ssr3;
+    var _config$ssr;
     if (!isPageLoad) {
       return {};
     }
@@ -693,12 +636,12 @@ function createInteractionMetricsPayload(interaction, interactionId) {
     return {
       ...SSRDoneTime,
       isBM3ConfigSSRDoneAsFmp: interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp,
-      isUFOConfigSSRDoneAsFmp: interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp || !!(config !== null && config !== void 0 && (_config$ssr3 = config.ssr) !== null && _config$ssr3 !== void 0 && _config$ssr3.getSSRDoneTime)
+      isUFOConfigSSRDoneAsFmp: interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp || !!(config !== null && config !== void 0 && (_config$ssr = config.ssr) !== null && _config$ssr !== void 0 && _config$ssr.getSSRDoneTime)
     };
   };
   // Detailed payload. Page visibility = visible
   const getDetailedInteractionMetrics = () => {
-    if (window.__UFO_COMPACT_PAYLOAD__ || !isDetailedPayload) {
+    if (experimental || window.__UFO_COMPACT_PAYLOAD__ || !isDetailedPayload) {
       return {};
     }
     const spans = [...interaction.spans, ...atlaskitInteractionSpans];
@@ -713,7 +656,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),
@@ -723,16 +666,21 @@ function createInteractionMetricsPayload(interaction, interactionId) {
   };
   // Page load & detailed payload
   const getPageLoadDetailedInteractionMetrics = () => {
-    var _config$ssr4;
+    var _config$ssr2;
     if (!isPageLoad || !isDetailedPayload) {
       return {};
     }
     const config = getConfig();
     return {
       initialPageLoadExtraTimings: objectToArray(initialPageLoadExtraTiming.getTimings()),
-      SSRTimings: config !== null && config !== void 0 && (_config$ssr4 = config.ssr) !== null && _config$ssr4 !== void 0 && _config$ssr4.getSSRTimings ? config.ssr.getSSRTimings() : objectToArray(ssr.getSSRTimings())
+      SSRTimings: config !== null && config !== void 0 && (_config$ssr2 = config.ssr) !== null && _config$ssr2 !== void 0 && _config$ssr2.getSSRTimings ? config.ssr.getSSRTimings() : objectToArray(ssr.getSSRTimings())
     };
   };
+  if (experimental) {
+    expTTAI = getTTAI(interaction);
+  } else {
+    regularTTAI = getTTAI(interaction);
+  }
   const newUFOName = sanitizeUfoName(ufoName);
   const payload = {
     actionSubject: 'experience',
@@ -753,7 +701,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(),
@@ -762,6 +710,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(),
@@ -801,12 +750,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;
 }
@@ -818,4 +773,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,7 @@
-const interactions = new Map();
-export default interactions;
+export const interactions = new Map();
+export const CLEANUP_TIMEOUT = 60 * 1000;
+export const CLEANUP_TIMEOUT_AFTER_APDEX = 15 * 1000;
+export const interactionQueue = [];
+export const segmentCache = new Map();
+export const segmentObservers = [];
+export const moduleLoadingRequests = {};