@atlaskit/react-ufo 3.1.4 → 3.3.0

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

@@ -2,10 +2,12 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 var _excluded = ["labelStack", "time"],
   _excluded2 = ["stopTime", "labelStack"],
   _excluded3 = ["labelStack"],
   _excluded4 = ["labelStack"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 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) { _defineProperty(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; }
 import Bowser from 'bowser-ultralight';
@@ -176,56 +178,84 @@ var getTTAI = function getTTAI(interaction) {
   var pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
   return !interaction.abortReason && pageVisibilityUpToTTAI === 'visible' ? Math.round(end - start) : undefined;
 };
-var getVCMetrics = function getVCMetrics(interaction) {
-  var _config$vc, _config$vc$ssrWhiteli, _interaction$apdex, _config$experimentalI;
-  var 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 {};
-  }
-  var isSSREnabled = (config === null || config === void 0 ? void 0 : config.ssr) || (config === null || config === void 0 || (_config$vc$ssrWhiteli = config.vc.ssrWhitelist) === null || _config$vc$ssrWhiteli === void 0 ? void 0 : _config$vc$ssrWhiteli.includes(interaction.ufoName));
-  var ssr = interaction.type === 'page_load' && isSSREnabled ? {
-    ssr: getSSRDoneTimeValue(config)
-  } : null;
-  postInteractionLog.setVCObserverSSRConfig(ssr);
-  var tti = (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 || (_interaction$apdex = _interaction$apdex[0]) === null || _interaction$apdex === void 0 ? void 0 : _interaction$apdex.stopTime;
-  var prefix = 'ufo';
-  var result = getVCObserver().getVCResult(_objectSpread({
-    start: interaction.start,
-    stop: interaction.end,
-    tti: tti,
-    prefix: prefix,
-    vc: interaction.vc
-  }, ssr));
-  if ((_config$experimentalI = config.experimentalInteractionMetrics) !== null && _config$experimentalI !== void 0 && _config$experimentalI.enabled) {
-    getVCObserver().stop();
-  }
-  postInteractionLog.setLastInteractionFinishVCResult(result);
-  var VC = result === null || result === void 0 ? void 0 : result['metrics:vc'];
-  if (!VC || !(result !== null && result !== void 0 && result["".concat(prefix, ":vc:clean")])) {
-    return result;
-  }
-  var interactionStatus = getInteractionStatus(interaction);
-  var pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
-  if (interactionStatus.originalInteractionStatus !== 'SUCCEEDED' || pageVisibilityUpToTTAI !== 'visible') {
-    return result;
-  }
-  if (fg('ufo_vc_multiheatmap')) {
-    var _result;
-    (_result = result["".concat(prefix, ":vc:rev")]) === null || _result === void 0 || _result.forEach(function (element) {
-      var _element$vcDetails;
-      if ((_element$vcDetails = element.vcDetails) !== null && _element$vcDetails !== void 0 && (_element$vcDetails = _element$vcDetails['90']) !== null && _element$vcDetails !== void 0 && _element$vcDetails.t) {
-        var _element$vcDetails$;
-        element['metric:vc90'] = (_element$vcDetails$ = element.vcDetails['90']) === null || _element$vcDetails$ === void 0 ? void 0 : _element$vcDetails$.t;
+var getVCMetrics = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(interaction) {
+    var _config$vc, _config$vc$ssrWhiteli, _interaction$apdex, _config$experimentalI;
+    var config, isSSREnabled, ssr, tti, prefix, result, VC, interactionStatus, pageVisibilityUpToTTAI, _result;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          config = getConfig();
+          if (config !== null && config !== void 0 && (_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled) {
+            _context.next = 3;
+            break;
+          }
+          return _context.abrupt("return", {});
+        case 3:
+          if (!(interaction.type !== 'page_load' && interaction.type !== 'transition')) {
+            _context.next = 5;
+            break;
+          }
+          return _context.abrupt("return", {});
+        case 5:
+          isSSREnabled = (config === null || config === void 0 ? void 0 : config.ssr) || (config === null || config === void 0 || (_config$vc$ssrWhiteli = config.vc.ssrWhitelist) === null || _config$vc$ssrWhiteli === void 0 ? void 0 : _config$vc$ssrWhiteli.includes(interaction.ufoName));
+          ssr = interaction.type === 'page_load' && isSSREnabled ? {
+            ssr: getSSRDoneTimeValue(config)
+          } : null;
+          postInteractionLog.setVCObserverSSRConfig(ssr);
+          tti = (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 || (_interaction$apdex = _interaction$apdex[0]) === null || _interaction$apdex === void 0 ? void 0 : _interaction$apdex.stopTime;
+          prefix = 'ufo';
+          _context.next = 12;
+          return getVCObserver().getVCResult(_objectSpread({
+            start: interaction.start,
+            stop: interaction.end,
+            tti: tti,
+            prefix: prefix,
+            vc: interaction.vc
+          }, ssr));
+        case 12:
+          result = _context.sent;
+          if ((_config$experimentalI = config.experimentalInteractionMetrics) !== null && _config$experimentalI !== void 0 && _config$experimentalI.enabled) {
+            getVCObserver().stop();
+          }
+          postInteractionLog.setLastInteractionFinishVCResult(result);
+          VC = result === null || result === void 0 ? void 0 : result['metrics:vc'];
+          if (!(!VC || !(result !== null && result !== void 0 && result["".concat(prefix, ":vc:clean")]))) {
+            _context.next = 18;
+            break;
+          }
+          return _context.abrupt("return", result);
+        case 18:
+          interactionStatus = getInteractionStatus(interaction);
+          pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
+          if (!(interactionStatus.originalInteractionStatus !== 'SUCCEEDED' || pageVisibilityUpToTTAI !== 'visible')) {
+            _context.next = 22;
+            break;
+          }
+          return _context.abrupt("return", result);
+        case 22:
+          if (fg('ufo_vc_multiheatmap')) {
+            (_result = result["".concat(prefix, ":vc:rev")]) === null || _result === void 0 || _result.forEach(function (element) {
+              var _element$vcDetails;
+              if ((_element$vcDetails = element.vcDetails) !== null && _element$vcDetails !== void 0 && (_element$vcDetails = _element$vcDetails['90']) !== null && _element$vcDetails !== void 0 && _element$vcDetails.t) {
+                var _element$vcDetails$;
+                element['metric:vc90'] = (_element$vcDetails$ = element.vcDetails['90']) === null || _element$vcDetails$ === void 0 ? void 0 : _element$vcDetails$.t;
+              }
+            });
+          }
+          return _context.abrupt("return", _objectSpread(_objectSpread({}, result), {}, {
+            'metric:vc90': VC['90']
+          }));
+        case 24:
+        case "end":
+          return _context.stop();
       }
-    });
-  }
-  return _objectSpread(_objectSpread({}, result), {}, {
-    'metric:vc90': VC['90']
-  });
-};
+    }, _callee);
+  }));
+  return function getVCMetrics(_x) {
+    return _ref2.apply(this, arguments);
+  };
+}();
 var getNavigationMetrics = function getNavigationMetrics(type) {
   if (type !== 'page_load') {
     return {};
@@ -375,10 +405,10 @@ var getTracingContextData = function getTracingContextData(interaction) {
 function optimizeCustomData(interaction) {
   var customData = interaction.customData,
     legacyMetrics = interaction.legacyMetrics;
-  var customDataMap = customData.reduce(function (result, _ref2) {
+  var customDataMap = customData.reduce(function (result, _ref3) {
     var _result$get$data, _result$get;
-    var labelStack = _ref2.labelStack,
-      data = _ref2.data;
+    var labelStack = _ref3.labelStack,
+      data = _ref3.data;
     var label = stringifyLabelStackFully(labelStack);
     var value = (_result$get$data = (_result$get = result.get(label)) === null || _result$get === void 0 ? void 0 : _result$get.data) !== null && _result$get$data !== void 0 ? _result$get$data : {};
     result.set(label, {
@@ -410,12 +440,12 @@ function optimizeCustomData(interaction) {
   return _toConsumableArray(customDataMap.values());
 }
 function optimizeReactProfilerTimings(reactProfilerTimings, interactionStart, reactUFOVersion) {
-  var reactProfilerTimingsMap = reactProfilerTimings.reduce(function (result, _ref3) {
-    var labelStack = _ref3.labelStack,
-      startTime = _ref3.startTime,
-      commitTime = _ref3.commitTime,
-      actualDuration = _ref3.actualDuration,
-      type = _ref3.type;
+  var reactProfilerTimingsMap = reactProfilerTimings.reduce(function (result, _ref4) {
+    var labelStack = _ref4.labelStack,
+      startTime = _ref4.startTime,
+      commitTime = _ref4.commitTime,
+      actualDuration = _ref4.actualDuration,
+      type = _ref4.type;
     if (labelStack && startTime >= interactionStart) {
       var label = stringifyLabelStackFully(labelStack);
       var start = Math.round(startTime);
@@ -561,10 +591,10 @@ function optimizeCustomTimings(customTimings, interactionStart) {
   }, []);
 }
 function optimizeMarks(marks, reactUFOVersion) {
-  return marks.map(function (_ref4) {
-    var labelStack = _ref4.labelStack,
-      time = _ref4.time,
-      others = _objectWithoutProperties(_ref4, _excluded);
+  return marks.map(function (_ref5) {
+    var labelStack = _ref5.labelStack,
+      time = _ref5.time,
+      others = _objectWithoutProperties(_ref5, _excluded);
     return _objectSpread(_objectSpread({}, others), {}, {
       labelStack: labelStack && optimizeLabelStack(labelStack, reactUFOVersion),
       time: Math.round(time)
@@ -572,10 +602,10 @@ function optimizeMarks(marks, reactUFOVersion) {
   });
 }
 function optimizeApdex(apdex, reactUFOVersion) {
-  return apdex.map(function (_ref5) {
-    var stopTime = _ref5.stopTime,
-      labelStack = _ref5.labelStack,
-      others = _objectWithoutProperties(_ref5, _excluded2);
+  return apdex.map(function (_ref6) {
+    var stopTime = _ref6.stopTime,
+      labelStack = _ref6.labelStack,
+      others = _objectWithoutProperties(_ref6, _excluded2);
     return _objectSpread(_objectSpread({}, others), {}, {
       stopTime: Math.round(stopTime)
     }, labelStack ? {
@@ -693,173 +723,202 @@ function getErrorCounts(interaction) {
     'ufo:errors:count': interaction.errors.length
   };
 }
-function createInteractionMetricsPayload(interaction, interactionId, experimental) {
-  var _window$location, _config$additionalPay;
-  var interactionPayloadStart = performance.now();
-  var config = getConfig();
-  if (!config) {
-    throw Error('UFO Configuration not provided');
-  }
-  var end = interaction.end,
-    start = interaction.start,
-    ufoName = interaction.ufoName,
-    knownSegments = interaction.knownSegments,
-    rate = interaction.rate,
-    type = interaction.type,
-    abortReason = interaction.abortReason,
-    routeName = interaction.routeName,
-    featureFlags = interaction.featureFlags,
-    previousInteractionName = interaction.previousInteractionName,
-    isPreviousInteractionAborted = interaction.isPreviousInteractionAborted,
-    abortedByInteractionName = interaction.abortedByInteractionName;
-  var pageVisibilityAtTTI = getPageVisibilityUpToTTI(interaction);
-  var pageVisibilityAtTTAI = getPageVisibilityUpToTTAI(interaction);
-  var segments = config.killswitchNestedSegments ? [] : knownSegments;
-  var segmentTree = getReactUFOVersion(interaction.type) === '2.0.0' ? buildSegmentTree(segments.map(function (segment) {
-    return segment.labelStack;
-  })) : {};
-  var isDetailedPayload = pageVisibilityAtTTAI === 'visible';
-  var isPageLoad = type === 'page_load';
-  var calculatePageVisibilityFromTheStartOfPageLoad = config.enableBetterPageVisibilityApi && isPageLoad;
-  var moreAccuratePageVisibilityAtTTI = calculatePageVisibilityFromTheStartOfPageLoad ? getMoreAccuratePageVisibilityUpToTTI(interaction) : null;
-  var moreAccuratePageVisibilityAtTTAI = calculatePageVisibilityFromTheStartOfPageLoad ? getMoreAccuratePageVisibilityUpToTTAI(interaction) : null;
-  var labelStack = interaction.labelStack ? {
-    labelStack: optimizeLabelStack(interaction.labelStack, getReactUFOVersion(interaction.type))
-  } : {};
-  // Page Load
-  var getPageLoadInteractionMetrics = function getPageLoadInteractionMetrics() {
-    var _config$ssr3;
-    if (!isPageLoad) {
-      return {};
-    }
-    var config = getConfig();
-    var SSRDoneTimeValue = getSSRDoneTimeValue(config);
-    var SSRDoneTime = SSRDoneTimeValue !== undefined ? {
-      SSRDoneTime: Math.round(SSRDoneTimeValue)
-    } : {};
-    return _objectSpread(_objectSpread({}, 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)
-    });
-  };
-  // Detailed payload. Page visibility = visible
-  var getDetailedInteractionMetrics = function getDetailedInteractionMetrics(resourceTimings) {
-    if (experimental || window.__UFO_COMPACT_PAYLOAD__ || !isDetailedPayload) {
-      return {};
-    }
-    var spans = [].concat(_toConsumableArray(interaction.spans), _toConsumableArray(atlaskitInteractionSpans));
-    atlaskitInteractionSpans.length = 0;
-    return {
-      errors: interaction.errors.map(function (_ref6) {
-        var labelStack = _ref6.labelStack,
-          others = _objectWithoutProperties(_ref6, _excluded3);
-        return _objectSpread(_objectSpread({}, others), {}, {
-          labelStack: labelStack && optimizeLabelStack(labelStack, getReactUFOVersion(interaction.type))
-        });
-      }),
-      holdActive: _toConsumableArray(interaction.holdActive.values()),
-      redirects: optimizeRedirects(interaction.redirects, start),
-      holdInfo: optimizeHoldInfo(experimental ? interaction.holdExpInfo : interaction.holdInfo, start, getReactUFOVersion(interaction.type)),
-      spans: optimizeSpans(spans, start, getReactUFOVersion(interaction.type)),
-      requestInfo: optimizeRequestInfo(interaction.requestInfo, start, getReactUFOVersion(interaction.type)),
-      customTimings: optimizeCustomTimings(interaction.customTimings, start),
-      bundleEvalTimings: objectToArray(getBundleEvalTimings(start)),
-      resourceTimings: objectToArray(resourceTimings)
-    };
-  };
-  // Page load & detailed payload
-  var getPageLoadDetailedInteractionMetrics = function getPageLoadDetailedInteractionMetrics() {
-    var _config$ssr4;
-    if (!isPageLoad || !isDetailedPayload) {
-      return {};
-    }
-    var 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())
-    };
-  };
-  if (experimental) {
-    expTTAI = getTTAI(interaction);
-  } else {
-    regularTTAI = getTTAI(interaction);
-  }
-  var newUFOName = sanitizeUfoName(ufoName);
-  var resourceTimings = getResourceTimings(start, end);
-  var payload = {
-    actionSubject: 'experience',
-    action: 'measured',
-    eventType: 'operational',
-    source: 'measured',
-    tags: ['observability'],
-    attributes: {
-      properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-        // basic
-        'event:hostname': ((_window$location = window.location) === null || _window$location === void 0 ? void 0 : _window$location.hostname) || 'unknown',
-        'event:product': config.product,
-        'event:schema': '1.0.0',
-        'event:sizeInKb': 0,
-        'event:source': {
-          name: 'react-ufo/web',
-          version: getReactUFOVersion(interaction.type)
-        },
-        'event:region': config.region || 'unknown',
-        'experience:key': experimental ? 'custom.experimental-interaction-metrics' : 'custom.interaction-metrics',
-        'experience:name': newUFOName
-      }, getBrowserMetadata()), getSSRProperties(type)), getAssetsMetrics(interaction, resourceTimings)), getPPSMetrics(interaction)), 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()), getErrorCounts(interaction)), {}, {
-        interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-          namePrefix: config.namePrefix || '',
-          segmentPrefix: config.segmentPrefix || '',
-          interactionId: interactionId,
-          pageVisibilityAtTTI: pageVisibilityAtTTI,
-          pageVisibilityAtTTAI: pageVisibilityAtTTAI,
-          experimental__pageVisibilityAtTTI: moreAccuratePageVisibilityAtTTI,
-          experimental__pageVisibilityAtTTAI: moreAccuratePageVisibilityAtTTAI,
-          // raw interaction metrics
-          rate: rate,
-          routeName: routeName,
-          type: type,
-          abortReason: abortReason,
-          featureFlags: featureFlags,
-          previousInteractionName: previousInteractionName,
-          isPreviousInteractionAborted: isPreviousInteractionAborted,
-          abortedByInteractionName: abortedByInteractionName,
-          // performance
-          apdex: optimizeApdex(interaction.apdex, getReactUFOVersion(interaction.type)),
-          end: Math.round(end),
-          start: Math.round(start),
-          segments: getReactUFOVersion(interaction.type) === '2.0.0' ? segmentTree : segments.map(function (_ref7) {
-            var labelStack = _ref7.labelStack,
-              others = _objectWithoutProperties(_ref7, _excluded4);
-            return _objectSpread(_objectSpread({}, others), {}, {
-              labelStack: optimizeLabelStack(labelStack, getReactUFOVersion(interaction.type))
+function createInteractionMetricsPayload(_x2, _x3, _x4) {
+  return _createInteractionMetricsPayload.apply(this, arguments);
+}
+function _createInteractionMetricsPayload() {
+  _createInteractionMetricsPayload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(interaction, interactionId, experimental) {
+    var _window$location, _config$additionalPay;
+    var interactionPayloadStart, config, end, start, ufoName, knownSegments, rate, type, abortReason, routeName, featureFlags, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, pageVisibilityAtTTI, pageVisibilityAtTTAI, segments, segmentTree, isDetailedPayload, isPageLoad, calculatePageVisibilityFromTheStartOfPageLoad, moreAccuratePageVisibilityAtTTI, moreAccuratePageVisibilityAtTTAI, labelStack, getPageLoadInteractionMetrics, getDetailedInteractionMetrics, getPageLoadDetailedInteractionMetrics, newUFOName, resourceTimings, _yield$Promise$all, _yield$Promise$all2, vcMetrics, experimentalMetrics, payload;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          interactionPayloadStart = performance.now();
+          config = getConfig();
+          if (config) {
+            _context2.next = 4;
+            break;
+          }
+          throw Error('UFO Configuration not provided');
+        case 4:
+          end = interaction.end, start = interaction.start, ufoName = interaction.ufoName, knownSegments = interaction.knownSegments, rate = interaction.rate, type = interaction.type, abortReason = interaction.abortReason, routeName = interaction.routeName, featureFlags = interaction.featureFlags, previousInteractionName = interaction.previousInteractionName, isPreviousInteractionAborted = interaction.isPreviousInteractionAborted, abortedByInteractionName = interaction.abortedByInteractionName;
+          pageVisibilityAtTTI = getPageVisibilityUpToTTI(interaction);
+          pageVisibilityAtTTAI = getPageVisibilityUpToTTAI(interaction);
+          segments = config.killswitchNestedSegments ? [] : knownSegments;
+          segmentTree = getReactUFOVersion(interaction.type) === '2.0.0' ? buildSegmentTree(segments.map(function (segment) {
+            return segment.labelStack;
+          })) : {};
+          isDetailedPayload = pageVisibilityAtTTAI === 'visible';
+          isPageLoad = type === 'page_load';
+          calculatePageVisibilityFromTheStartOfPageLoad = config.enableBetterPageVisibilityApi && isPageLoad;
+          moreAccuratePageVisibilityAtTTI = calculatePageVisibilityFromTheStartOfPageLoad ? getMoreAccuratePageVisibilityUpToTTI(interaction) : null;
+          moreAccuratePageVisibilityAtTTAI = calculatePageVisibilityFromTheStartOfPageLoad ? getMoreAccuratePageVisibilityUpToTTAI(interaction) : null;
+          labelStack = interaction.labelStack ? {
+            labelStack: optimizeLabelStack(interaction.labelStack, getReactUFOVersion(interaction.type))
+          } : {}; // Page Load
+          getPageLoadInteractionMetrics = function getPageLoadInteractionMetrics() {
+            var _config$ssr3;
+            if (!isPageLoad) {
+              return {};
+            }
+            var config = getConfig();
+            var SSRDoneTimeValue = getSSRDoneTimeValue(config);
+            var SSRDoneTime = SSRDoneTimeValue !== undefined ? {
+              SSRDoneTime: Math.round(SSRDoneTimeValue)
+            } : {};
+            return _objectSpread(_objectSpread({}, 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)
             });
-          }),
-          marks: optimizeMarks(interaction.marks, getReactUFOVersion(interaction.type)),
-          customData: optimizeCustomData(interaction),
-          reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start, getReactUFOVersion(interaction.type))
-        }, labelStack), getPageLoadInteractionMetrics()), getDetailedInteractionMetrics(resourceTimings)), getPageLoadDetailedInteractionMetrics()), 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;
+          }; // Detailed payload. Page visibility = visible
+          getDetailedInteractionMetrics = function getDetailedInteractionMetrics(resourceTimings) {
+            if (experimental || window.__UFO_COMPACT_PAYLOAD__ || !isDetailedPayload) {
+              return {};
+            }
+            var spans = [].concat(_toConsumableArray(interaction.spans), _toConsumableArray(atlaskitInteractionSpans));
+            atlaskitInteractionSpans.length = 0;
+            return {
+              errors: interaction.errors.map(function (_ref7) {
+                var labelStack = _ref7.labelStack,
+                  others = _objectWithoutProperties(_ref7, _excluded3);
+                return _objectSpread(_objectSpread({}, others), {}, {
+                  labelStack: labelStack && optimizeLabelStack(labelStack, getReactUFOVersion(interaction.type))
+                });
+              }),
+              holdActive: _toConsumableArray(interaction.holdActive.values()),
+              redirects: optimizeRedirects(interaction.redirects, start),
+              holdInfo: optimizeHoldInfo(experimental ? interaction.holdExpInfo : interaction.holdInfo, start, getReactUFOVersion(interaction.type)),
+              spans: optimizeSpans(spans, start, getReactUFOVersion(interaction.type)),
+              requestInfo: optimizeRequestInfo(interaction.requestInfo, start, getReactUFOVersion(interaction.type)),
+              customTimings: optimizeCustomTimings(interaction.customTimings, start),
+              bundleEvalTimings: objectToArray(getBundleEvalTimings(start)),
+              resourceTimings: objectToArray(resourceTimings)
+            };
+          }; // Page load & detailed payload
+          getPageLoadDetailedInteractionMetrics = function getPageLoadDetailedInteractionMetrics() {
+            var _config$ssr4;
+            if (!isPageLoad || !isDetailedPayload) {
+              return {};
+            }
+            var 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())
+            };
+          };
+          if (experimental) {
+            expTTAI = getTTAI(interaction);
+          } else {
+            regularTTAI = getTTAI(interaction);
+          }
+          newUFOName = sanitizeUfoName(ufoName);
+          resourceTimings = getResourceTimings(start, end);
+          _context2.next = 23;
+          return Promise.all([getVCMetrics(interaction), experimental ? getExperimentalVCMetrics(interaction) : Promise.resolve(undefined)]);
+        case 23:
+          _yield$Promise$all = _context2.sent;
+          _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 2);
+          vcMetrics = _yield$Promise$all2[0];
+          experimentalMetrics = _yield$Promise$all2[1];
+          payload = {
+            actionSubject: 'experience',
+            action: 'measured',
+            eventType: 'operational',
+            source: 'measured',
+            tags: ['observability'],
+            attributes: {
+              properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+                // basic
+                'event:hostname': ((_window$location = window.location) === null || _window$location === void 0 ? void 0 : _window$location.hostname) || 'unknown',
+                'event:product': config.product,
+                'event:schema': '1.0.0',
+                'event:sizeInKb': 0,
+                'event:source': {
+                  name: 'react-ufo/web',
+                  version: getReactUFOVersion(interaction.type)
+                },
+                'event:region': config.region || 'unknown',
+                'experience:key': experimental ? 'custom.experimental-interaction-metrics' : 'custom.interaction-metrics',
+                'experience:name': newUFOName
+              }, getBrowserMetadata()), getSSRProperties(type)), getAssetsMetrics(interaction, resourceTimings)), getPPSMetrics(interaction)), getPaintMetrics(type)), getNavigationMetrics(type)), vcMetrics), experimentalMetrics), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), getStylesheetMetrics()), getErrorCounts(interaction)), {}, {
+                interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+                  namePrefix: config.namePrefix || '',
+                  segmentPrefix: config.segmentPrefix || '',
+                  interactionId: interactionId,
+                  pageVisibilityAtTTI: pageVisibilityAtTTI,
+                  pageVisibilityAtTTAI: pageVisibilityAtTTAI,
+                  experimental__pageVisibilityAtTTI: moreAccuratePageVisibilityAtTTI,
+                  experimental__pageVisibilityAtTTAI: moreAccuratePageVisibilityAtTTAI,
+                  // raw interaction metrics
+                  rate: rate,
+                  routeName: routeName,
+                  type: type,
+                  abortReason: abortReason,
+                  featureFlags: featureFlags,
+                  previousInteractionName: previousInteractionName,
+                  isPreviousInteractionAborted: isPreviousInteractionAborted,
+                  abortedByInteractionName: abortedByInteractionName,
+                  // performance
+                  apdex: optimizeApdex(interaction.apdex, getReactUFOVersion(interaction.type)),
+                  end: Math.round(end),
+                  start: Math.round(start),
+                  segments: getReactUFOVersion(interaction.type) === '2.0.0' ? segmentTree : segments.map(function (_ref8) {
+                    var labelStack = _ref8.labelStack,
+                      others = _objectWithoutProperties(_ref8, _excluded4);
+                    return _objectSpread(_objectSpread({}, others), {}, {
+                      labelStack: optimizeLabelStack(labelStack, getReactUFOVersion(interaction.type))
+                    });
+                  }),
+                  marks: optimizeMarks(interaction.marks, getReactUFOVersion(interaction.type)),
+                  customData: optimizeCustomData(interaction),
+                  reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start, getReactUFOVersion(interaction.type))
+                }, labelStack), getPageLoadInteractionMetrics()), getDetailedInteractionMetrics(resourceTimings)), getPageLoadDetailedInteractionMetrics()), 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 _context2.abrupt("return", payload);
+        case 31:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _createInteractionMetricsPayload.apply(this, arguments);
 }
-export function createPayloads(interactionId, interaction) {
-  var ufoNameOverride = getUfoNameOverride(interaction);
-  var modifiedInteraction = _objectSpread(_objectSpread({}, interaction), {}, {
-    ufoName: ufoNameOverride
-  });
-  var interactionMetricsPayload = createInteractionMetricsPayload(modifiedInteraction, interactionId);
-  return [interactionMetricsPayload];
+export function createPayloads(_x5, _x6) {
+  return _createPayloads.apply(this, arguments);
+}
+function _createPayloads() {
+  _createPayloads = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(interactionId, interaction) {
+    var ufoNameOverride, modifiedInteraction, interactionMetricsPayload;
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          ufoNameOverride = getUfoNameOverride(interaction);
+          modifiedInteraction = _objectSpread(_objectSpread({}, interaction), {}, {
+            ufoName: ufoNameOverride
+          });
+          _context3.next = 4;
+          return createInteractionMetricsPayload(modifiedInteraction, interactionId);
+        case 4:
+          interactionMetricsPayload = _context3.sent;
+          return _context3.abrupt("return", [interactionMetricsPayload]);
+        case 6:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return _createPayloads.apply(this, arguments);
 }
 export function createExperimentalMetricsPayload(interactionId, interaction) {
   var config = getConfig();