@atlaskit/react-ufo 3.14.3 → 3.14.5

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

@@ -1,8 +1,8 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 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"],
@@ -10,8 +10,11 @@ var _excluded = ["labelStack", "time"],
 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';
+import { getDocument } from '@atlaskit/browser-apis';
 import { fg } from '@atlaskit/platform-feature-flags';
+
+// Import common utilities
+
 import { getLighthouseMetrics } from '../additional-payload';
 import { CHRReporter } from '../assets';
 import * as bundleEvalTiming from '../bundle-eval-timing';
@@ -29,10 +32,17 @@ import { filterResourceTimings } from '../resource-timing/common/utils/resource-
 import { roundEpsilon } from '../round-number';
 import * as ssr from '../ssr';
 import { buildSegmentTree, labelStackStartWith, optimizeLabelStack, sanitizeUfoName, stringifyLabelStackFully } from './common/utils';
+import { createCriticalMetricsPayloads } from './critical-metrics-payload';
+import { getBrowserMetadataToLegacyFormat } from './utils/get-browser-metadata';
 import getInteractionStatus from './utils/get-interaction-status';
+import { getNavigationMetricsToLegacyFormat } from './utils/get-navigation-metrics';
 import getPageVisibilityUpToTTAI from './utils/get-page-visibility-up-to-ttai';
+import { getPaintMetricsToLegacyFormat } from './utils/get-paint-metrics';
+import getPayloadSize from './utils/get-payload-size';
 import { getReactUFOPayloadVersion } from './utils/get-react-ufo-payload-version';
 import getSSRDoneTimeValue from './utils/get-ssr-done-time-value';
+import getSSRSuccessUtil from './utils/get-ssr-success';
+import getTTAI from './utils/get-ttai';
 import getVCMetrics from './utils/get-vc-metrics';
 function getUfoNameOverride(interaction) {
   var ufoName = interaction.ufoName,
@@ -142,138 +152,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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(type, end) {
-    var metrics, lcp;
-    return _regeneratorRuntime.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 = getPageVisibilityUpToTTAI(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,
@@ -304,7 +188,7 @@ function getPPSMetrics(interaction) {
 function getSSRProperties(type) {
   var ssrPhases = getSSRPhaseSuccess(type);
   return _objectSpread(_objectSpread({
-    'ssr:success': getSSRSuccess(type),
+    'ssr:success': getSSRSuccessUtil(type),
     'ssr:featureFlags': getSSRFeatureFlags(type)
   }, (ssrPhases === null || ssrPhases === void 0 ? void 0 : ssrPhases.earlyFlush) != null ? {
     'ssr:earlyflush:success': ssrPhases.earlyFlush
@@ -337,33 +221,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 = Bowser.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;
@@ -382,6 +239,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;
@@ -395,6 +253,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 = 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: optimizeLabelStack((_interaction$labelSta2 = interaction.labelStack) !== null && _interaction$labelSta2 !== void 0 ? _interaction$labelSta2 : [], getReactUFOPayloadVersion(interaction.type)),
+      data: Object.assign(value, Object.fromEntries(cohortingCustomData))
+    });
+  }
   if (legacyMetrics) {
     var legacyMetricsFiltered = legacyMetrics.filter(function (item) {
       return item.type === 'PAGE_LOAD';
@@ -403,12 +272,12 @@ function optimizeCustomData(interaction) {
         var _result$get$data2, _result$get2;
         var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
           key = _Object$entries$_i[0],
-          value = _Object$entries$_i[1];
-        var label = 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 = 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: optimizeLabelStack([], getReactUFOPayloadVersion(interaction.type)),
-          data: Object.assign(labelValue, _defineProperty({}, key, value))
+          data: Object.assign(labelValue, _defineProperty({}, key, _value))
         });
       }
       return result;
@@ -646,14 +515,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 = 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;
@@ -661,9 +531,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;
@@ -693,20 +563,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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(interaction, interactionId, experimental) {
+  _createInteractionMetricsPayload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.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 _regeneratorRuntime.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 _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
         case 0:
           interactionPayloadStart = performance.now();
           config = getConfig();
           if (config) {
-            _context2.next = 4;
+            _context.next = 4;
             break;
           }
           throw Error('UFO Configuration not provided');
@@ -784,12 +654,27 @@ function _createInteractionMetricsPayload() {
           }
           newUFOName = sanitizeUfoName(ufoName);
           resourceTimings = getResourceTimings(start, end);
-          _context2.next = 24;
-          return Promise.all([getVCMetrics(interaction), experimental ? 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 getVCMetrics(interaction);
+        case 27:
+          _context.t1 = _context.sent;
+        case 28:
+          _context.t2 = _context.t1;
+          _context.t3 = experimental ? getExperimentalVCMetrics(interaction) : Promise.resolve(undefined);
+          _context.t4 = 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 = _slicedToArray(_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 = {
@@ -799,7 +684,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,
@@ -816,7 +701,10 @@ function _createInteractionMetricsPayload() {
                 'event:cpu:usage': createPressureStateReport(interaction.start, interaction.end)
               } : {}), fg('platform_ufo_report_memory_usage') ? {
                 'event:memory:usage': 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
+              } : {}), getBrowserMetadataToLegacyFormat()), getSSRProperties(type)), getAssetsMetrics(interaction, pageLoadInteractionMetrics === null || pageLoadInteractionMetrics === void 0 ? void 0 : pageLoadInteractionMetrics.SSRDoneTime)), getPPSMetrics(interaction)), paintMetrics), 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 || '',
@@ -867,12 +755,12 @@ function _createInteractionMetricsPayload() {
             expTTAI = undefined;
           }
           payload.attributes.properties['event:sizeInKb'] = getPayloadSize(payload.attributes.properties);
-          return _context2.abrupt("return", payload);
-        case 33:
+          return _context.abrupt("return", payload);
+        case 43:
         case "end":
-          return _context2.stop();
+          return _context.stop();
       }
-    }, _callee2);
+    }, _callee);
   }));
   return _createInteractionMetricsPayload.apply(this, arguments);
 }
@@ -880,25 +768,48 @@ export function createPayloads(_x6, _x7) {
   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) {
+  _createPayloads = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(interactionId, interaction) {
+    var ufoNameOverride, modifiedInteraction, payloads, isCriticalMetricsEnabled, vcMetrics, criticalMetricsPayloads, criticalPayloadCount, interactionMetricsPayload;
+    return _regeneratorRuntime.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 = fg('platform_ufo_critical_metrics_payload'); // Calculate VC metrics once to avoid duplicate expensive calculations
+          _context2.next = 6;
+          return getVCMetrics(interaction);
         case 6:
+          vcMetrics = _context2.sent;
+          if (!isCriticalMetricsEnabled) {
+            _context2.next = 13;
+            break;
+          }
+          _context2.next = 10;
+          return 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, _toConsumableArray(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);
 }
@@ -906,14 +817,14 @@ export function createExperimentalMetricsPayload(_x8, _x9) {
   return _createExperimentalMetricsPayload.apply(this, arguments);
 }
 function _createExperimentalMetricsPayload() {
-  _createExperimentalMetricsPayload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(interactionId, interaction) {
+  _createExperimentalMetricsPayload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(interactionId, interaction) {
     var config, ufoName, rate, pageVisibilityState, result;
-    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
         case 0:
           config = getConfig();
           if (config) {
-            _context4.next = 3;
+            _context3.next = 3;
             break;
           }
           throw Error('UFO Configuration not provided');
@@ -921,28 +832,28 @@ function _createExperimentalMetricsPayload() {
           ufoName = sanitizeUfoName(interaction.ufoName);
           rate = getExperimentalInteractionRate(ufoName, interaction.type);
           if (coinflip(rate)) {
-            _context4.next = 7;
+            _context3.next = 7;
             break;
           }
-          return _context4.abrupt("return", null);
+          return _context3.abrupt("return", null);
         case 7:
           pageVisibilityState = 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/esm/create-payload/utils/find-matching-legacy-metric.js

@@ -0,0 +1,9 @@
+/**
+ * Find matching legacy metric by experience name and type
+ */
+export 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/esm/create-payload/utils/get-browser-metadata.js

@@ -0,0 +1,79 @@
+import Bowser from 'bowser-ultralight';
+export default 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 = Bowser.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
+export 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;
+}

package/dist/esm/create-payload/utils/get-fmp.js

@@ -0,0 +1,47 @@
+import { getConfig } from '../../config';
+import { findMatchingLegacyMetric } from './find-matching-legacy-metric';
+
+/**
+ * Calculate FMP (First Meaningful Paint) based on interaction type and configuration
+ * FMP is calculated based on legacy metrics or marks depending on interaction type and configuration
+ */
+export function getFMP(interaction, experienceName) {
+  var _config$ssr, _config$ssr$getSSRDon, _config$ssr2;
+  var start = interaction.start,
+    type = interaction.type,
+    marks = interaction.marks;
+  var config = getConfig();
+  var ssrDoneTime = config === null || config === void 0 || (_config$ssr = config.ssr) === null || _config$ssr === void 0 || (_config$ssr$getSSRDon = _config$ssr.getSSRDoneTime) === null || _config$ssr$getSSRDon === void 0 ? void 0 : _config$ssr$getSSRDon.call(_config$ssr);
+  var isBM3ConfigSSRDoneAsFmp = interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp;
+  var isUFOConfigSSRDoneAsFmp = interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp || !!(config !== null && config !== void 0 && (_config$ssr2 = config.ssr) !== null && _config$ssr2 !== void 0 && _config$ssr2.getSSRDoneTime);
+
+  // Find matching legacy metric
+  var matchingLegacyMetric = findMatchingLegacyMetric(interaction, experienceName);
+  var fmp;
+  if (type === 'page_load' || type === 'transition') {
+    if (interaction.legacyMetrics && matchingLegacyMetric) {
+      // Check if legacy metric has FMP
+      var legacyFmp = matchingLegacyMetric.fmp; // BM3Event doesn't have fmp in types, but it might exist
+      if (legacyFmp) {
+        fmp = Math.round(legacyFmp - start);
+      }
+      // If no FMP in legacy metric, return undefined (don't calculate fallback)
+    }
+  }
+  if (type === 'page_load' && fmp === undefined) {
+    if (isBM3ConfigSSRDoneAsFmp || isUFOConfigSSRDoneAsFmp) {
+      var _marks$find;
+      var foundMark = marks === null || marks === void 0 || (_marks$find = marks.find(function (mark) {
+        return mark.name === 'fmp';
+      })) === null || _marks$find === void 0 ? void 0 : _marks$find.time;
+      if (foundMark) {
+        fmp = Math.round(foundMark - start);
+      } else if (ssrDoneTime) {
+        fmp = Math.round(ssrDoneTime - start);
+      }
+      // If no FMP mark and no SSR done time, fmp remains undefined
+    }
+    // If not using SSR config, fmp remains undefined for page_load without legacy metrics
+  }
+  return fmp;
+}