@atlaskit/react-ufo 3.14.3 → 3.14.5

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

@@ -8,12 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.createExperimentalMetricsPayload = createExperimentalMetricsPayload;
 exports.createPayloads = createPayloads;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _bowserUltralight = _interopRequireDefault(require("bowser-ultralight"));
+var _browserApis = require("@atlaskit/browser-apis");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _additionalPayload = require("../additional-payload");
 var _assets = require("../assets");
@@ -32,10 +32,17 @@ var _resourceTimingBuffer = require("../resource-timing/common/utils/resource-ti
 var _roundNumber = require("../round-number");
 var ssr = _interopRequireWildcard(require("../ssr"));
 var _utils = require("./common/utils");
+var _criticalMetricsPayload = require("./critical-metrics-payload");
+var _getBrowserMetadata = require("./utils/get-browser-metadata");
 var _getInteractionStatus = _interopRequireDefault(require("./utils/get-interaction-status"));
+var _getNavigationMetrics = require("./utils/get-navigation-metrics");
 var _getPageVisibilityUpToTtai = _interopRequireDefault(require("./utils/get-page-visibility-up-to-ttai"));
+var _getPaintMetrics = require("./utils/get-paint-metrics");
+var _getPayloadSize = _interopRequireDefault(require("./utils/get-payload-size"));
 var _getReactUfoPayloadVersion = require("./utils/get-react-ufo-payload-version");
 var _getSsrDoneTimeValue = _interopRequireDefault(require("./utils/get-ssr-done-time-value"));
+var _getSsrSuccess = _interopRequireDefault(require("./utils/get-ssr-success"));
+var _getTtai = _interopRequireDefault(require("./utils/get-ttai"));
 var _getVcMetrics = _interopRequireDefault(require("./utils/get-vc-metrics"));
 var _excluded = ["labelStack", "time"],
   _excluded2 = ["stopTime", "labelStack"],
@@ -43,7 +50,7 @@ var _excluded = ["labelStack", "time"],
   _excluded4 = ["labelStack"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // Import common utilities
 function getUfoNameOverride(interaction) {
   var ufoName = interaction.ufoName,
     apdex = interaction.apdex;
@@ -152,138 +159,12 @@ function getResourceTimings(start, end) {
 function getBundleEvalTimings(start) {
   return bundleEvalTiming.getBundleEvalTimings(start);
 }
-function getSSRSuccess(type) {
-  return type === 'page_load' ? ssr.getSSRSuccess() : undefined;
-}
 function getSSRPhaseSuccess(type) {
   return type === 'page_load' ? ssr.getSSRPhaseSuccess() : undefined;
 }
 function getSSRFeatureFlags(type) {
   return type === 'page_load' ? ssr.getSSRFeatureFlags() : undefined;
 }
-var getLCP = function getLCP(end) {
-  return new Promise(function (resolve) {
-    var observer;
-    var timeout = setTimeout(function () {
-      var _observer;
-      (_observer = observer) === null || _observer === void 0 || _observer.disconnect();
-      resolve(null);
-    }, 200);
-    var performanceObserverCallback = function performanceObserverCallback(list) {
-      var entries = Array.from(list.getEntries());
-      var lastEntry = entries.reduce(function (agg, entry) {
-        // Use the latest LCP candidate before TTAI
-        if (entry.startTime <= end && (agg === null || agg.startTime < entry.startTime)) {
-          return entry;
-        }
-        return agg;
-      }, null);
-      clearTimeout(timeout);
-      if (!lastEntry || lastEntry === null) {
-        resolve(null);
-      } else {
-        resolve(lastEntry.startTime);
-      }
-    };
-    observer = new PerformanceObserver(performanceObserverCallback);
-    observer.observe({
-      type: 'largest-contentful-paint',
-      buffered: true
-    });
-  });
-};
-function getPaintMetrics(_x, _x2) {
-  return _getPaintMetrics.apply(this, arguments);
-}
-function _getPaintMetrics() {
-  _getPaintMetrics = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(type, end) {
-    var metrics, lcp;
-    return _regenerator.default.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          if (!(type !== 'page_load')) {
-            _context.next = 2;
-            break;
-          }
-          return _context.abrupt("return", {});
-        case 2:
-          metrics = {};
-          performance.getEntriesByType('paint').forEach(function (entry) {
-            if (entry.name === 'first-paint') {
-              metrics['metric:fp'] = Math.round(entry.startTime);
-            }
-            if (entry.name === 'first-contentful-paint') {
-              metrics['metric:fcp'] = Math.round(entry.startTime);
-            }
-          });
-          _context.next = 6;
-          return getLCP(end);
-        case 6:
-          lcp = _context.sent;
-          if (lcp) {
-            metrics['metric:lcp'] = Math.round(lcp);
-          }
-          return _context.abrupt("return", metrics);
-        case 9:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  }));
-  return _getPaintMetrics.apply(this, arguments);
-}
-function getTTAI(interaction) {
-  var start = interaction.start,
-    end = interaction.end;
-  var pageVisibilityUpToTTAI = (0, _getPageVisibilityUpToTtai.default)(interaction);
-  return !interaction.abortReason && pageVisibilityUpToTTAI === 'visible' ? Math.round(end - start) : undefined;
-}
-function getNavigationMetrics(type) {
-  if (type !== 'page_load') {
-    return {};
-  }
-  var entries = performance.getEntriesByType('navigation');
-  if (entries.length === 0) {
-    return {};
-  }
-  var navigation = entries[0];
-  var metrics = {
-    // From https://www.w3.org/TR/resource-timing/
-    redirectStart: Math.round(navigation.redirectStart),
-    redirectEnd: Math.round(navigation.redirectEnd),
-    fetchStart: Math.round(navigation.fetchStart),
-    domainLookupStart: Math.round(navigation.domainLookupStart),
-    domainLookupEnd: Math.round(navigation.domainLookupEnd),
-    connectStart: Math.round(navigation.connectStart),
-    connectEnd: Math.round(navigation.connectEnd),
-    secureConnectionStart: Math.round(navigation.secureConnectionStart),
-    requestStart: Math.round(navigation.requestStart),
-    responseStart: Math.round(navigation.responseStart),
-    responseEnd: Math.round(navigation.responseEnd),
-    encodedBodySize: Math.round(navigation.encodedBodySize),
-    decodedBodySize: Math.round(navigation.decodedBodySize),
-    transferSize: Math.round(navigation.transferSize),
-    // From https://www.w3.org/TR/navigation-timing-2/
-    redirectCount: navigation.redirectCount,
-    type: navigation.type,
-    unloadEventEnd: Math.round(navigation.unloadEventEnd),
-    unloadEventStart: Math.round(navigation.unloadEventStart),
-    workerStart: Math.round(navigation.workerStart),
-    nextHopProtocol: navigation.nextHopProtocol
-
-    // The following properties are ignored because they provided limited value on a modern stack (e.g. the content
-    // is usually rendered and interactive before the dom is fully parsed, dont't play well with streamed content...)
-    //   * domComplete
-    //   * domContentLoadedEventEnd
-    //   * domContentLoadedEventStart
-    //   * domInteractive
-    //   * loadEventEnd
-    //   * loadEventStart
-  };
-  return {
-    'metrics:navigation': metrics
-  };
-}
 function getPPSMetrics(interaction) {
   var _interaction$apdex;
   var start = interaction.start,
@@ -314,7 +195,7 @@ function getPPSMetrics(interaction) {
 function getSSRProperties(type) {
   var ssrPhases = getSSRPhaseSuccess(type);
   return _objectSpread(_objectSpread({
-    'ssr:success': getSSRSuccess(type),
+    'ssr:success': (0, _getSsrSuccess.default)(type),
     'ssr:featureFlags': getSSRFeatureFlags(type)
   }, (ssrPhases === null || ssrPhases === void 0 ? void 0 : ssrPhases.earlyFlush) != null ? {
     'ssr:earlyflush:success': ssrPhases.earlyFlush
@@ -347,33 +228,6 @@ function getAssetsMetrics(interaction, SSRDoneTime) {
     return {};
   }
 }
-function getBrowserMetadata() {
-  var data = {};
-  var now = new Date();
-  data['event:localHour'] = now.getHours(); // returns the hours for this date according to local time
-  data['event:localDayOfWeek'] = now.getDay(); // Sunday - Saturday : 0 - 6
-  data['event:localTimezoneOffset'] = now.getTimezoneOffset(); // A number representing the difference, in minutes, between the date as evaluated in the UTC time zone and as evaluated in the local time zone.
-
-  if (navigator.userAgent != null) {
-    var browser = _bowserUltralight.default.getParser(navigator.userAgent);
-    data['event:browser:name'] = browser.getBrowserName();
-    data['event:browser:version'] = browser.getBrowserVersion();
-  }
-  if (navigator.hardwareConcurrency != null) {
-    data['event:cpus'] = navigator.hardwareConcurrency;
-  }
-  if (navigator.deviceMemory != null) {
-    data['event:memory'] = navigator.deviceMemory;
-  }
-
-  // eslint-disable-next-line compat/compat
-  if (navigator.connection != null) {
-    data['event:network:effectiveType'] = navigator.connection.effectiveType;
-    data['event:network:rtt'] = navigator.connection.rtt;
-    data['event:network:downlink'] = navigator.connection.downlink;
-  }
-  return data;
-}
 function getTracingContextData(interaction) {
   var trace = interaction.trace,
     start = interaction.start;
@@ -392,6 +246,7 @@ function getTracingContextData(interaction) {
 }
 function optimizeCustomData(interaction) {
   var customData = interaction.customData,
+    cohortingCustomData = interaction.cohortingCustomData,
     legacyMetrics = interaction.legacyMetrics;
   var customDataMap = customData.reduce(function (result, _ref2) {
     var _result$get$data, _result$get;
@@ -405,6 +260,17 @@ function optimizeCustomData(interaction) {
     });
     return result;
   }, new Map());
+
+  // Merge cohorting custom data into the same map
+  if (cohortingCustomData && cohortingCustomData.size > 0) {
+    var _interaction$labelSta, _customDataMap$get$da, _customDataMap$get, _interaction$labelSta2;
+    var label = (0, _utils.stringifyLabelStackFully)((_interaction$labelSta = interaction.labelStack) !== null && _interaction$labelSta !== void 0 ? _interaction$labelSta : []);
+    var value = (_customDataMap$get$da = (_customDataMap$get = customDataMap.get(label)) === null || _customDataMap$get === void 0 ? void 0 : _customDataMap$get.data) !== null && _customDataMap$get$da !== void 0 ? _customDataMap$get$da : {};
+    customDataMap.set(label, {
+      labelStack: (0, _utils.optimizeLabelStack)((_interaction$labelSta2 = interaction.labelStack) !== null && _interaction$labelSta2 !== void 0 ? _interaction$labelSta2 : [], (0, _getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type)),
+      data: Object.assign(value, Object.fromEntries(cohortingCustomData))
+    });
+  }
   if (legacyMetrics) {
     var legacyMetricsFiltered = legacyMetrics.filter(function (item) {
       return item.type === 'PAGE_LOAD';
@@ -413,12 +279,12 @@ function optimizeCustomData(interaction) {
         var _result$get$data2, _result$get2;
         var _Object$entries$_i = (0, _slicedToArray2.default)(_Object$entries[_i], 2),
           key = _Object$entries$_i[0],
-          value = _Object$entries$_i[1];
-        var label = (0, _utils.stringifyLabelStackFully)([]);
-        var labelValue = (_result$get$data2 = (_result$get2 = result.get(label)) === null || _result$get2 === void 0 ? void 0 : _result$get2.data) !== null && _result$get$data2 !== void 0 ? _result$get$data2 : {};
-        result.set(label, {
+          _value = _Object$entries$_i[1];
+        var _label = (0, _utils.stringifyLabelStackFully)([]);
+        var labelValue = (_result$get$data2 = (_result$get2 = result.get(_label)) === null || _result$get2 === void 0 ? void 0 : _result$get2.data) !== null && _result$get$data2 !== void 0 ? _result$get$data2 : {};
+        result.set(_label, {
           labelStack: (0, _utils.optimizeLabelStack)([], (0, _getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type)),
-          data: Object.assign(labelValue, (0, _defineProperty2.default)({}, key, value))
+          data: Object.assign(labelValue, (0, _defineProperty2.default)({}, key, _value))
         });
       }
       return result;
@@ -656,14 +522,15 @@ function getBm3TrackerTimings(interaction) {
     legacyMetrics: legacyMetrics
   };
 }
-function getPayloadSize(payload) {
-  return Math.round(new TextEncoder().encode(JSON.stringify(payload)).length / 1024);
-}
 function getStylesheetMetrics() {
   try {
-    var stylesheets = Array.from(document.styleSheets);
+    var doc = (0, _browserApis.getDocument)();
+    if (!doc) {
+      return {};
+    }
+    var stylesheets = Array.from(doc.styleSheets);
     var stylesheetCount = stylesheets.length;
-    var cssrules = Array.from(document.styleSheets).reduce(function (acc, item) {
+    var cssrules = Array.from(doc.styleSheets).reduce(function (acc, item) {
       // Other domain stylesheets throw a SecurityError
       try {
         return acc + item.cssRules.length;
@@ -671,9 +538,9 @@ function getStylesheetMetrics() {
         return acc;
       }
     }, 0);
-    var styleElements = document.querySelectorAll('style').length;
-    var styleProps = document.querySelectorAll('[style]');
-    var styleDeclarations = Array.from(document.querySelectorAll('[style]')).reduce(function (acc, item) {
+    var styleElements = doc.querySelectorAll('style').length;
+    var styleProps = doc.querySelectorAll('[style]');
+    var styleDeclarations = Array.from(doc.querySelectorAll('[style]')).reduce(function (acc, item) {
       try {
         if ('style' in item) {
           return acc + item.style.length;
@@ -703,20 +570,20 @@ function getErrorCounts(interaction) {
     'ufo:errors:count': interaction.errors.length
   };
 }
-function createInteractionMetricsPayload(_x3, _x4, _x5) {
+function createInteractionMetricsPayload(_x, _x2, _x3, _x4, _x5) {
   return _createInteractionMetricsPayload.apply(this, arguments);
 }
 function _createInteractionMetricsPayload() {
-  _createInteractionMetricsPayload = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(interaction, interactionId, experimental) {
+  _createInteractionMetricsPayload = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(interaction, interactionId, experimental, criticalPayloadCount, vcMetrics) {
     var _window$location, _config$additionalPay;
-    var interactionPayloadStart, config, end, start, ufoName, knownSegments, rate, type, abortReason, routeName, featureFlags, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, responsiveness, unknownElementName, unknownElementHierarchy, pageVisibilityAtTTI, pageVisibilityAtTTAI, segments, segmentTree, isDetailedPayload, isPageLoad, calculatePageVisibilityFromTheStartOfPageLoad, moreAccuratePageVisibilityAtTTI, moreAccuratePageVisibilityAtTTAI, labelStack, getInitialPageLoadSSRMetrics, pageLoadInteractionMetrics, getDetailedInteractionMetrics, getPageLoadDetailedInteractionMetrics, newUFOName, resourceTimings, _yield$Promise$all, _yield$Promise$all2, vcMetrics, experimentalMetrics, paintMetrics, payload;
-    return _regenerator.default.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
+    var interactionPayloadStart, config, end, start, ufoName, knownSegments, rate, type, abortReason, routeName, featureFlags, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, responsiveness, unknownElementName, unknownElementHierarchy, pageVisibilityAtTTI, pageVisibilityAtTTAI, segments, segmentTree, isDetailedPayload, isPageLoad, calculatePageVisibilityFromTheStartOfPageLoad, moreAccuratePageVisibilityAtTTI, moreAccuratePageVisibilityAtTTAI, labelStack, getInitialPageLoadSSRMetrics, pageLoadInteractionMetrics, getDetailedInteractionMetrics, getPageLoadDetailedInteractionMetrics, newUFOName, resourceTimings, _yield$Promise$all, _yield$Promise$all2, finalVCMetrics, experimentalMetrics, paintMetrics, payload;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
         case 0:
           interactionPayloadStart = performance.now();
           config = (0, _config.getConfig)();
           if (config) {
-            _context2.next = 4;
+            _context.next = 4;
             break;
           }
           throw Error('UFO Configuration not provided');
@@ -788,18 +655,33 @@ function _createInteractionMetricsPayload() {
             };
           };
           if (experimental) {
-            expTTAI = getTTAI(interaction);
+            expTTAI = (0, _getTtai.default)(interaction);
           } else {
-            regularTTAI = getTTAI(interaction);
+            regularTTAI = (0, _getTtai.default)(interaction);
           }
           newUFOName = (0, _utils.sanitizeUfoName)(ufoName);
           resourceTimings = getResourceTimings(start, end);
-          _context2.next = 24;
-          return Promise.all([(0, _getVcMetrics.default)(interaction), experimental ? (0, _createExperimentalInteractionMetricsPayload.getExperimentalVCMetrics)(interaction) : Promise.resolve(undefined), getPaintMetrics(type, end)]);
-        case 24:
-          _yield$Promise$all = _context2.sent;
+          _context.t0 = Promise;
+          _context.t1 = vcMetrics;
+          if (_context.t1) {
+            _context.next = 28;
+            break;
+          }
+          _context.next = 27;
+          return (0, _getVcMetrics.default)(interaction);
+        case 27:
+          _context.t1 = _context.sent;
+        case 28:
+          _context.t2 = _context.t1;
+          _context.t3 = experimental ? (0, _createExperimentalInteractionMetricsPayload.getExperimentalVCMetrics)(interaction) : Promise.resolve(undefined);
+          _context.t4 = (0, _getPaintMetrics.getPaintMetricsToLegacyFormat)(type, end);
+          _context.t5 = [_context.t2, _context.t3, _context.t4];
+          _context.next = 34;
+          return _context.t0.all.call(_context.t0, _context.t5);
+        case 34:
+          _yield$Promise$all = _context.sent;
           _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 3);
-          vcMetrics = _yield$Promise$all2[0];
+          finalVCMetrics = _yield$Promise$all2[0];
           experimentalMetrics = _yield$Promise$all2[1];
           paintMetrics = _yield$Promise$all2[2];
           payload = {
@@ -809,7 +691,7 @@ function _createInteractionMetricsPayload() {
             source: 'measured',
             tags: ['observability'],
             attributes: {
-              properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+              properties: _objectSpread(_objectSpread(_objectSpread(_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,
@@ -826,7 +708,10 @@ function _createInteractionMetricsPayload() {
                 'event:cpu:usage': (0, _machineUtilisation.createPressureStateReport)(interaction.start, interaction.end)
               } : {}), (0, _platformFeatureFlags.fg)('platform_ufo_report_memory_usage') ? {
                 'event:memory:usage': (0, _machineUtilisation.createMemoryStateReport)(interaction.start, interaction.end)
-              } : {}), getBrowserMetadata()), getSSRProperties(type)), getAssetsMetrics(interaction, pageLoadInteractionMetrics === null || pageLoadInteractionMetrics === void 0 ? void 0 : pageLoadInteractionMetrics.SSRDoneTime)), getPPSMetrics(interaction)), paintMetrics), 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)), {}, {
+              } : {}), criticalPayloadCount !== undefined ? {
+                'ufo:multipayload': true,
+                'ufo:criticalPayloadCount': criticalPayloadCount
+              } : {}), (0, _getBrowserMetadata.getBrowserMetadataToLegacyFormat)()), getSSRProperties(type)), getAssetsMetrics(interaction, pageLoadInteractionMetrics === null || pageLoadInteractionMetrics === void 0 ? void 0 : pageLoadInteractionMetrics.SSRDoneTime)), getPPSMetrics(interaction)), paintMetrics), (0, _getNavigationMetrics.getNavigationMetricsToLegacyFormat)(type)), finalVCMetrics), 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(_objectSpread(_objectSpread({
                   namePrefix: config.namePrefix || '',
                   segmentPrefix: config.segmentPrefix || '',
@@ -876,13 +761,13 @@ function _createInteractionMetricsPayload() {
             regularTTAI = undefined;
             expTTAI = undefined;
           }
-          payload.attributes.properties['event:sizeInKb'] = getPayloadSize(payload.attributes.properties);
-          return _context2.abrupt("return", payload);
-        case 33:
+          payload.attributes.properties['event:sizeInKb'] = (0, _getPayloadSize.default)(payload.attributes.properties);
+          return _context.abrupt("return", payload);
+        case 43:
         case "end":
-          return _context2.stop();
+          return _context.stop();
       }
-    }, _callee2);
+    }, _callee);
   }));
   return _createInteractionMetricsPayload.apply(this, arguments);
 }
@@ -890,25 +775,48 @@ function createPayloads(_x6, _x7) {
   return _createPayloads.apply(this, arguments);
 }
 function _createPayloads() {
-  _createPayloads = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(interactionId, interaction) {
-    var ufoNameOverride, modifiedInteraction, interactionMetricsPayload;
-    return _regenerator.default.wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
+  _createPayloads = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(interactionId, interaction) {
+    var ufoNameOverride, modifiedInteraction, payloads, isCriticalMetricsEnabled, vcMetrics, criticalMetricsPayloads, criticalPayloadCount, interactionMetricsPayload;
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.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]);
+          payloads = [];
+          isCriticalMetricsEnabled = (0, _platformFeatureFlags.fg)('platform_ufo_critical_metrics_payload'); // Calculate VC metrics once to avoid duplicate expensive calculations
+          _context2.next = 6;
+          return (0, _getVcMetrics.default)(interaction);
         case 6:
+          vcMetrics = _context2.sent;
+          if (!isCriticalMetricsEnabled) {
+            _context2.next = 13;
+            break;
+          }
+          _context2.next = 10;
+          return (0, _criticalMetricsPayload.createCriticalMetricsPayloads)(interactionId, interaction, vcMetrics);
+        case 10:
+          _context2.t0 = _context2.sent;
+          _context2.next = 14;
+          break;
+        case 13:
+          _context2.t0 = [];
+        case 14:
+          criticalMetricsPayloads = _context2.t0;
+          payloads.push.apply(payloads, (0, _toConsumableArray2.default)(criticalMetricsPayloads));
+          criticalPayloadCount = isCriticalMetricsEnabled ? criticalMetricsPayloads.length : undefined;
+          _context2.next = 19;
+          return createInteractionMetricsPayload(modifiedInteraction, interactionId, undefined, criticalPayloadCount, vcMetrics);
+        case 19:
+          interactionMetricsPayload = _context2.sent;
+          payloads.push(interactionMetricsPayload);
+          return _context2.abrupt("return", payloads.filter(Boolean));
+        case 22:
         case "end":
-          return _context3.stop();
+          return _context2.stop();
       }
-    }, _callee3);
+    }, _callee2);
   }));
   return _createPayloads.apply(this, arguments);
 }
@@ -916,14 +824,14 @@ function createExperimentalMetricsPayload(_x8, _x9) {
   return _createExperimentalMetricsPayload.apply(this, arguments);
 }
 function _createExperimentalMetricsPayload() {
-  _createExperimentalMetricsPayload = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(interactionId, interaction) {
+  _createExperimentalMetricsPayload = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(interactionId, interaction) {
     var config, ufoName, rate, pageVisibilityState, result;
-    return _regenerator.default.wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
+    return _regenerator.default.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
         case 0:
           config = (0, _config.getConfig)();
           if (config) {
-            _context4.next = 3;
+            _context3.next = 3;
             break;
           }
           throw Error('UFO Configuration not provided');
@@ -931,28 +839,28 @@ function _createExperimentalMetricsPayload() {
           ufoName = (0, _utils.sanitizeUfoName)(interaction.ufoName);
           rate = (0, _config.getExperimentalInteractionRate)(ufoName, interaction.type);
           if ((0, _coinflip.default)(rate)) {
-            _context4.next = 7;
+            _context3.next = 7;
             break;
           }
-          return _context4.abrupt("return", null);
+          return _context3.abrupt("return", null);
         case 7:
           pageVisibilityState = (0, _hiddenTiming.getPageVisibilityState)(interaction.start, interaction.end);
           if (!(pageVisibilityState !== 'visible')) {
-            _context4.next = 10;
+            _context3.next = 10;
             break;
           }
-          return _context4.abrupt("return", null);
+          return _context3.abrupt("return", null);
         case 10:
-          _context4.next = 12;
+          _context3.next = 12;
           return createInteractionMetricsPayload(interaction, interactionId, true);
         case 12:
-          result = _context4.sent;
-          return _context4.abrupt("return", result);
+          result = _context3.sent;
+          return _context3.abrupt("return", result);
         case 14:
         case "end":
-          return _context4.stop();
+          return _context3.stop();
       }
-    }, _callee4);
+    }, _callee3);
   }));
   return _createExperimentalMetricsPayload.apply(this, arguments);
 }

package/dist/cjs/create-payload/utils/find-matching-legacy-metric.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findMatchingLegacyMetric = findMatchingLegacyMetric;
+/**
+ * Find matching legacy metric by experience name and type
+ */
+function findMatchingLegacyMetric(interaction, experienceName) {
+  var _interaction$legacyMe;
+  return (_interaction$legacyMe = interaction.legacyMetrics) === null || _interaction$legacyMe === void 0 ? void 0 : _interaction$legacyMe.find(function (metric) {
+    return (metric.key === experienceName || metric.config.reactUFOName === experienceName) && metric.type === 'PAGE_LOAD';
+  });
+}

package/dist/cjs/create-payload/utils/get-browser-metadata.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getBrowserMetadata;
+exports.getBrowserMetadataToLegacyFormat = getBrowserMetadataToLegacyFormat;
+var _bowserUltralight = _interopRequireDefault(require("bowser-ultralight"));
+function getBrowserMetadata() {
+  var data = {
+    time: {
+      localHour: 0,
+      localDayOfWeek: 0,
+      localTimezoneOffset: 0
+    }
+  };
+  var now = new Date();
+  data.time.localHour = now.getHours(); // returns the hours for this date according to local time
+  data.time.localDayOfWeek = now.getDay(); // Sunday - Saturday : 0 - 6
+  data.time.localTimezoneOffset = now.getTimezoneOffset(); // A number representing the difference, in minutes, between the date as evaluated in the UTC time zone and as evaluated in the local time zone.
+
+  if (typeof navigator !== 'undefined' && navigator.userAgent != null) {
+    var browser = _bowserUltralight.default.getParser(navigator.userAgent);
+    data.browser = {
+      name: browser.getBrowserName(),
+      version: browser.getBrowserVersion()
+    };
+  }
+  if (typeof navigator !== 'undefined' && navigator.hardwareConcurrency != null) {
+    if (!data.device) {
+      data.device = {};
+    }
+    data.device.cpus = navigator.hardwareConcurrency;
+  }
+  if (typeof navigator !== 'undefined' && navigator.deviceMemory != null) {
+    if (!data.device) {
+      data.device = {};
+    }
+    data.device.memory = navigator.deviceMemory;
+  }
+
+  // eslint-disable-next-line compat/compat
+  if (typeof navigator !== 'undefined' && navigator.connection != null) {
+    data.network = {
+      effectiveType: navigator.connection.effectiveType,
+      rtt: navigator.connection.rtt,
+      downlink: navigator.connection.downlink
+    };
+  }
+  return data;
+}
+
+// Helper function to get browser metadata in legacy colon format for backward compatibility
+function getBrowserMetadataToLegacyFormat() {
+  var metadata = getBrowserMetadata();
+  var legacyFormat = {};
+
+  // Time data
+  legacyFormat['event:localHour'] = metadata.time.localHour;
+  legacyFormat['event:localDayOfWeek'] = metadata.time.localDayOfWeek;
+  legacyFormat['event:localTimezoneOffset'] = metadata.time.localTimezoneOffset;
+
+  // Browser data
+  if (metadata.browser) {
+    legacyFormat['event:browser:name'] = metadata.browser.name;
+    legacyFormat['event:browser:version'] = metadata.browser.version;
+  }
+
+  // Device data
+  if (metadata.device) {
+    if (metadata.device.cpus !== undefined) {
+      legacyFormat['event:cpus'] = metadata.device.cpus;
+    }
+    if (metadata.device.memory !== undefined) {
+      legacyFormat['event:memory'] = metadata.device.memory;
+    }
+  }
+
+  // Network data
+  if (metadata.network) {
+    legacyFormat['event:network:effectiveType'] = metadata.network.effectiveType;
+    legacyFormat['event:network:rtt'] = metadata.network.rtt;
+    legacyFormat['event:network:downlink'] = metadata.network.downlink;
+  }
+  return legacyFormat;
+}