@atlaskit/react-ufo 3.14.3 → 3.14.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.14.4
+
+### Patch Changes
+
+- [#175348](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175348)
+  [`1efcee7c6bc60`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1efcee7c6bc60) -
+  AFO-4012 react ufo to produce ciritical metrics payload
+
 ## 3.14.3
 
 ### Patch Changes

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

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createCriticalMetricsPayloads = createCriticalMetricsPayloads;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _rootMetrics = require("./root-metrics");
+var _createSegmentMetrics = require("./segment-metrics/create-segment-metrics");
+function createCriticalMetricsPayloads(_x, _x2, _x3) {
+  return _createCriticalMetricsPayloads.apply(this, arguments);
+}
+function _createCriticalMetricsPayloads() {
+  _createCriticalMetricsPayloads = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(interactionId, interaction, vcMetrics) {
+    var _yield$Promise$all, _yield$Promise$all2, rootPayload, segmentPayloads;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return Promise.all([(0, _rootMetrics.createRootCriticalMetricsPayload)(interactionId, interaction, vcMetrics), (0, _createSegmentMetrics.createSegmentMetricsPayloads)(interactionId, interaction)]);
+        case 2:
+          _yield$Promise$all = _context.sent;
+          _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 2);
+          rootPayload = _yield$Promise$all2[0];
+          segmentPayloads = _yield$Promise$all2[1];
+          return _context.abrupt("return", [rootPayload].concat((0, _toConsumableArray2.default)(segmentPayloads)));
+        case 7:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _createCriticalMetricsPayloads.apply(this, arguments);
+}

package/dist/cjs/create-payload/critical-metrics-payload/root-metrics.js

@@ -0,0 +1,180 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createRootCriticalMetricsPayload = createRootCriticalMetricsPayload;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _additionalPayload = require("../../additional-payload");
+var _config = require("../../config");
+var _hiddenTiming = require("../../hidden-timing");
+var _utils = require("../common/utils");
+var _getBrowserMetadata = _interopRequireDefault(require("../utils/get-browser-metadata"));
+var _getFmp = require("../utils/get-fmp");
+var _getInteractionStatus = _interopRequireDefault(require("../utils/get-interaction-status"));
+var _getNavigationMetrics = _interopRequireDefault(require("../utils/get-navigation-metrics"));
+var _getPageVisibilityUpToTtai = _interopRequireDefault(require("../utils/get-page-visibility-up-to-ttai"));
+var _getPaintMetrics = _interopRequireDefault(require("../utils/get-paint-metrics"));
+var _getReactUfoPayloadVersion = require("../utils/get-react-ufo-payload-version");
+var _getSsrSuccess = _interopRequireDefault(require("../utils/get-ssr-success"));
+var _getTtai = _interopRequireDefault(require("../utils/get-ttai"));
+var _getTti = require("../utils/get-tti");
+var _getVcMetrics = _interopRequireDefault(require("../utils/get-vc-metrics"));
+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; }
+// Re-export types for convenience
+
+// Local utility functions
+function getPageVisibilityUpToTTI(interaction) {
+  var _interaction$apdex$0$, _interaction$apdex;
+  var start = interaction.start;
+  var bm3EndTimeOrInteractionEndTime = (_interaction$apdex$0$ = (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 || (_interaction$apdex = _interaction$apdex[0]) === null || _interaction$apdex === void 0 ? void 0 : _interaction$apdex.stopTime) !== null && _interaction$apdex$0$ !== void 0 ? _interaction$apdex$0$ : interaction.end;
+  return (0, _hiddenTiming.getPageVisibilityState)(start, bm3EndTimeOrInteractionEndTime);
+}
+
+// TODO Write tests for this function
+function createRootCriticalMetricsPayload(_x, _x2, _x3) {
+  return _createRootCriticalMetricsPayload.apply(this, arguments);
+}
+function _createRootCriticalMetricsPayload() {
+  _createRootCriticalMetricsPayload = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(interactionId, interaction, vcMetrics) {
+    var _finalVCMetrics$ufoV, _interaction$cohortin, _window$location;
+    var config, end, start, ufoName, rate, type, abortReason, routeName, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, holdInfo, responsiveness, pageVisibilityAtTTI, pageVisibilityAtTTAI, interactionStatus, newUFOName, ttai, paintMetrics, navigationMetrics, ssrSuccess, tti, fmp, browserMetadata, lighthouseMetrics, finalVCMetrics, ttvc, earliestHold, cohortingCustomData, properties, payload;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          config = (0, _config.getConfig)();
+          if (config) {
+            _context.next = 3;
+            break;
+          }
+          throw Error('UFO Configuration not provided');
+        case 3:
+          end = interaction.end, start = interaction.start, ufoName = interaction.ufoName, rate = interaction.rate, type = interaction.type, abortReason = interaction.abortReason, routeName = interaction.routeName, previousInteractionName = interaction.previousInteractionName, isPreviousInteractionAborted = interaction.isPreviousInteractionAborted, abortedByInteractionName = interaction.abortedByInteractionName, holdInfo = interaction.holdInfo, responsiveness = interaction.responsiveness;
+          pageVisibilityAtTTI = getPageVisibilityUpToTTI(interaction);
+          pageVisibilityAtTTAI = (0, _getPageVisibilityUpToTtai.default)(interaction);
+          interactionStatus = (0, _getInteractionStatus.default)(interaction);
+          newUFOName = (0, _utils.sanitizeUfoName)(ufoName); // Get performance metrics
+          ttai = (0, _getTtai.default)(interaction);
+          _context.next = 11;
+          return (0, _getPaintMetrics.default)(type, end);
+        case 11:
+          paintMetrics = _context.sent;
+          navigationMetrics = (0, _getNavigationMetrics.default)(type);
+          ssrSuccess = (0, _getSsrSuccess.default)(type); // Calculate BM3 metrics (TTI and FMP) directly
+          tti = (0, _getTti.getTTI)(interaction, newUFOName);
+          fmp = (0, _getFmp.getFMP)(interaction, newUFOName); // Get browser metadata (using compact nested format)
+          browserMetadata = (0, _getBrowserMetadata.default)();
+          lighthouseMetrics = (0, _additionalPayload.getLighthouseMetrics)({
+            start: start,
+            stop: end
+          }); // Use provided vcMetrics or calculate if not provided
+          _context.t0 = vcMetrics;
+          if (_context.t0) {
+            _context.next = 23;
+            break;
+          }
+          _context.next = 22;
+          return (0, _getVcMetrics.default)(interaction);
+        case 22:
+          _context.t0 = _context.sent;
+        case 23:
+          finalVCMetrics = _context.t0;
+          ttvc = (_finalVCMetrics$ufoV = finalVCMetrics['ufo:vc:rev']) === null || _finalVCMetrics$ufoV === void 0 ? void 0 : _finalVCMetrics$ufoV.map(function (revision) {
+            if (revision['metric:vc90'] === null || revision.clean !== true) {
+              return null;
+            }
+            return {
+              revision: revision.revision,
+              vc90: revision['metric:vc90']
+            };
+          }).filter(function (revision) {
+            return revision != null;
+          }); // find earliest hold
+          earliestHold = holdInfo === null || holdInfo === void 0 ? void 0 : holdInfo.reduce(function (a, b) {
+            if (a && a.start < b.start) {
+              return a;
+            }
+            return b;
+          }, null); // Process cohorting custom data
+          cohortingCustomData = (_interaction$cohortin = interaction.cohortingCustomData) !== null && _interaction$cohortin !== void 0 && _interaction$cohortin.size ? Object.fromEntries(interaction.cohortingCustomData) : undefined;
+          properties = _objectSpread(_objectSpread({
+            // Basic metadata
+            '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:region': config.region || 'unknown',
+            'event:source': {
+              name: 'react-ufo/web',
+              version: _getReactUfoPayloadVersion.LATEST_REACT_UFO_PAYLOAD_VERSION
+            },
+            'experience:key': 'custom.ufo.critical-metrics',
+            'experience:name': newUFOName,
+            // Browser metadata (compact nested format)
+            browser: browserMetadata.browser,
+            device: browserMetadata.device,
+            network: browserMetadata.network,
+            time: browserMetadata.time,
+            metrics: _objectSpread({
+              fp: paintMetrics.fp,
+              fcp: paintMetrics.fcp,
+              lcp: paintMetrics.lcp,
+              ttai: ttai,
+              tti: tti,
+              fmp: fmp,
+              tbt: lighthouseMetrics['metric:tbt'],
+              tbtObserved: lighthouseMetrics['metric:tbt:observed'],
+              cls: lighthouseMetrics['metric:cls'],
+              ttvc: ttvc !== null && ttvc !== void 0 ? ttvc : undefined,
+              earliestHoldStart: earliestHold !== null && earliestHold !== void 0 && earliestHold.start ? Math.round(earliestHold.start - start) : undefined,
+              // for interaction response
+              inputDelay: responsiveness !== null && responsiveness !== void 0 && responsiveness.inputDelay ? Math.round(responsiveness.inputDelay) : undefined,
+              inp: responsiveness !== null && responsiveness !== void 0 && responsiveness.experimentalInputToNextPaint ? Math.round(responsiveness.experimentalInputToNextPaint) : undefined
+            }, navigationMetrics && {
+              navigation: navigationMetrics
+            })
+          }, ssrSuccess !== undefined && {
+            ssrSuccess: ssrSuccess
+          }), {}, {
+            interactionId: interactionId,
+            type: type,
+            rate: rate,
+            routeName: routeName !== null && routeName !== void 0 ? routeName : undefined,
+            // Performance timings
+            start: Math.round(start),
+            end: Math.round(end),
+            // Status and outcome
+            status: interactionStatus.originalInteractionStatus,
+            abortReason: abortReason,
+            previousInteractionName: previousInteractionName,
+            isPreviousInteractionAborted: isPreviousInteractionAborted,
+            abortedByInteractionName: abortedByInteractionName,
+            pageVisibilityAtTTI: pageVisibilityAtTTI !== null && pageVisibilityAtTTI !== void 0 ? pageVisibilityAtTTI : undefined,
+            pageVisibilityAtTTAI: pageVisibilityAtTTAI,
+            // Basic error count (not detailed error count)
+            errorCount: interaction.errors.length
+          }, Object.keys(cohortingCustomData || {}).length > 0 && {
+            cohortingCustomData: cohortingCustomData
+          });
+          payload = {
+            actionSubject: 'experience',
+            action: 'measured',
+            eventType: 'operational',
+            source: 'measured',
+            tags: ['observability'],
+            attributes: {
+              properties: properties
+            }
+          };
+          return _context.abrupt("return", payload);
+        case 30:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _createRootCriticalMetricsPayload.apply(this, arguments);
+}

package/dist/cjs/create-payload/critical-metrics-payload/segment-metrics/create-segment-metrics.js

@@ -0,0 +1,251 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createSegmentMetricsPayloads = createSegmentMetricsPayloads;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _config = require("../../../config");
+var _getBrowserMetadata = _interopRequireDefault(require("../../utils/get-browser-metadata"));
+var _getPageVisibilityUpToTtai = _interopRequireDefault(require("../../utils/get-page-visibility-up-to-ttai"));
+var _getReactUfoPayloadVersion = require("../../utils/get-react-ufo-payload-version");
+var _getIsRootSegment = _interopRequireDefault(require("./get-is-root-segment"));
+var _getSegmentId = _interopRequireDefault(require("./get-segment-id"));
+var _getSegmentStatus2 = _interopRequireDefault(require("./get-segment-status"));
+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 _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function createSegmentMetricsPayloads(_x, _x2) {
+  return _createSegmentMetricsPayloads.apply(this, arguments);
+}
+function _createSegmentMetricsPayloads() {
+  _createSegmentMetricsPayloads = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(interactionId, interaction) {
+    var _interaction$cohortin;
+    var config, browserMetadata, cohortingCustomData, pageVisibilityAtTTAI, knownSegments, reactProfilerTimings, rate, routeName, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, segmentsByName, _iterator, _step, _loop, _ret, payloads, _iterator2, _step2, _loop2;
+    return _regenerator.default.wrap(function _callee$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          config = (0, _config.getConfig)();
+          if (config) {
+            _context3.next = 3;
+            break;
+          }
+          throw Error('UFO Configuration not provided');
+        case 3:
+          // Get browser metadata (using compact nested format)
+          browserMetadata = (0, _getBrowserMetadata.default)(); // Process cohorting custom data
+          cohortingCustomData = (_interaction$cohortin = interaction.cohortingCustomData) !== null && _interaction$cohortin !== void 0 && _interaction$cohortin.size ? Object.fromEntries(interaction.cohortingCustomData) : undefined;
+          pageVisibilityAtTTAI = (0, _getPageVisibilityUpToTtai.default)(interaction);
+          knownSegments = interaction.knownSegments, reactProfilerTimings = interaction.reactProfilerTimings, rate = interaction.rate, routeName = interaction.routeName, previousInteractionName = interaction.previousInteractionName, isPreviousInteractionAborted = interaction.isPreviousInteractionAborted, abortedByInteractionName = interaction.abortedByInteractionName; // Group segments by name and select the first segment for each name
+          segmentsByName = new Map();
+          _iterator = _createForOfIteratorHelper(knownSegments);
+          _context3.prev = 9;
+          _loop = /*#__PURE__*/_regenerator.default.mark(function _loop() {
+            var segment, segmentId, name, isRootSegment, segmentProfilerTimings, firstMountTiming, firstMountTime, existingEntry;
+            return _regenerator.default.wrap(function _loop$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  segment = _step.value;
+                  segmentId = (0, _getSegmentId.default)(segment.labelStack); // skip if no segmentId
+                  if (segmentId) {
+                    _context.next = 4;
+                    break;
+                  }
+                  return _context.abrupt("return", 0);
+                case 4:
+                  name = segment.labelStack[segment.labelStack.length - 1].name;
+                  isRootSegment = (0, _getIsRootSegment.default)(segment.labelStack);
+                  segmentProfilerTimings = reactProfilerTimings.filter(function (timing) {
+                    var timingSegmentId = (0, _getSegmentId.default)(timing.labelStack);
+                    // check if labelStack matches exactly
+                    return timingSegmentId === segmentId;
+                  }).sort(function (a, b) {
+                    return a.startTime - b.startTime;
+                  });
+                  firstMountTiming = segmentProfilerTimings.find(function (timing) {
+                    return timing.type === 'mount';
+                  });
+                  if (firstMountTiming) {
+                    _context.next = 10;
+                    break;
+                  }
+                  return _context.abrupt("return", 0);
+                case 10:
+                  firstMountTime = isRootSegment ? interaction.start : firstMountTiming.startTime; // Check if we already have a segment with this name
+                  existingEntry = segmentsByName.get(name);
+                  if (!existingEntry || firstMountTime < existingEntry.firstMountTime) {
+                    // Either first time seeing this name, or this segment mounted earlier
+                    segmentsByName.set(name, {
+                      segment: segment,
+                      firstMountTime: firstMountTime
+                    });
+                  }
+                case 13:
+                case "end":
+                  return _context.stop();
+              }
+            }, _loop);
+          });
+          _iterator.s();
+        case 12:
+          if ((_step = _iterator.n()).done) {
+            _context3.next = 19;
+            break;
+          }
+          return _context3.delegateYield(_loop(), "t0", 14);
+        case 14:
+          _ret = _context3.t0;
+          if (!(_ret === 0)) {
+            _context3.next = 17;
+            break;
+          }
+          return _context3.abrupt("continue", 17);
+        case 17:
+          _context3.next = 12;
+          break;
+        case 19:
+          _context3.next = 24;
+          break;
+        case 21:
+          _context3.prev = 21;
+          _context3.t1 = _context3["catch"](9);
+          _iterator.e(_context3.t1);
+        case 24:
+          _context3.prev = 24;
+          _iterator.f();
+          return _context3.finish(24);
+        case 27:
+          // Create payloads only for the selected segments (first one per name)
+          payloads = [];
+          _iterator2 = _createForOfIteratorHelper(segmentsByName.values());
+          _context3.prev = 29;
+          _loop2 = /*#__PURE__*/_regenerator.default.mark(function _loop2() {
+            var _window$location;
+            var segment, segmentId, name, isRootSegment, segmentProfilerTimings, firstMountTiming, lastTiming, startTime, endTime, ttai, _getSegmentStatus, status, segmentAbortReason, properties, payload;
+            return _regenerator.default.wrap(function _loop2$(_context2) {
+              while (1) switch (_context2.prev = _context2.next) {
+                case 0:
+                  segment = _step2.value.segment;
+                  segmentId = (0, _getSegmentId.default)(segment.labelStack);
+                  name = segment.labelStack[segment.labelStack.length - 1].name;
+                  isRootSegment = (0, _getIsRootSegment.default)(segment.labelStack);
+                  segmentProfilerTimings = reactProfilerTimings.filter(function (timing) {
+                    var timingSegmentId = (0, _getSegmentId.default)(timing.labelStack);
+                    // check if labelStack matches exactly
+                    return timingSegmentId === segmentId;
+                  }).sort(function (a, b) {
+                    return a.startTime - b.startTime;
+                  });
+                  firstMountTiming = segmentProfilerTimings.find(function (timing) {
+                    return timing.type === 'mount';
+                  }); // We already checked this exists in the grouping phase
+                  if (firstMountTiming) {
+                    _context2.next = 8;
+                    break;
+                  }
+                  return _context2.abrupt("return", 1);
+                case 8:
+                  lastTiming = segmentProfilerTimings[segmentProfilerTimings.length - 1];
+                  startTime = isRootSegment ? interaction.start : firstMountTiming.startTime;
+                  endTime = lastTiming.commitTime;
+                  ttai = Math.round(endTime - startTime);
+                  _getSegmentStatus = (0, _getSegmentStatus2.default)(interaction, segment), status = _getSegmentStatus.status, segmentAbortReason = _getSegmentStatus.abortReason;
+                  properties = _objectSpread({
+                    // Basic metadata
+                    '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:region': config.region || 'unknown',
+                    'event:source': {
+                      name: 'react-ufo/web',
+                      version: _getReactUfoPayloadVersion.LATEST_REACT_UFO_PAYLOAD_VERSION
+                    },
+                    'experience:key': 'custom.ufo.critical-metrics',
+                    'experience:name': name,
+                    // Browser metadata (compact nested format)
+                    browser: browserMetadata.browser,
+                    device: browserMetadata.device,
+                    network: browserMetadata.network,
+                    time: browserMetadata.time,
+                    metrics: {
+                      ttai: ttai,
+                      tti: ttai
+                    },
+                    interactionId: interactionId,
+                    type: 'page_segment_load',
+                    rate: rate,
+                    routeName: routeName !== null && routeName !== void 0 ? routeName : undefined,
+                    // Performance timings
+                    start: Math.round(startTime),
+                    end: Math.round(endTime),
+                    // Status and outcome
+                    status: status,
+                    abortReason: segmentAbortReason,
+                    previousInteractionName: previousInteractionName,
+                    isPreviousInteractionAborted: isPreviousInteractionAborted,
+                    abortedByInteractionName: abortedByInteractionName,
+                    pageVisibilityAtTTAI: pageVisibilityAtTTAI,
+                    // Basic error count (not detailed error count)
+                    errorCount: interaction.errors.length
+                  }, Object.keys(cohortingCustomData || {}).length > 0 && {
+                    cohortingCustomData: cohortingCustomData
+                  });
+                  payload = {
+                    actionSubject: 'experience',
+                    action: 'measured',
+                    eventType: 'operational',
+                    source: 'measured',
+                    tags: ['observability'],
+                    attributes: {
+                      properties: properties
+                    }
+                  };
+                  payloads.push(payload);
+                case 16:
+                case "end":
+                  return _context2.stop();
+              }
+            }, _loop2);
+          });
+          _iterator2.s();
+        case 32:
+          if ((_step2 = _iterator2.n()).done) {
+            _context3.next = 38;
+            break;
+          }
+          return _context3.delegateYield(_loop2(), "t2", 34);
+        case 34:
+          if (!_context3.t2) {
+            _context3.next = 36;
+            break;
+          }
+          return _context3.abrupt("continue", 36);
+        case 36:
+          _context3.next = 32;
+          break;
+        case 38:
+          _context3.next = 43;
+          break;
+        case 40:
+          _context3.prev = 40;
+          _context3.t3 = _context3["catch"](29);
+          _iterator2.e(_context3.t3);
+        case 43:
+          _context3.prev = 43;
+          _iterator2.f();
+          return _context3.finish(43);
+        case 46:
+          return _context3.abrupt("return", payloads);
+        case 47:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee, null, [[9, 21, 24, 27], [29, 40, 43, 46]]);
+  }));
+  return _createSegmentMetricsPayloads.apply(this, arguments);
+}

package/dist/cjs/create-payload/critical-metrics-payload/segment-metrics/get-is-root-segment.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getIsRootSegment;
+function getIsRootSegment(labelStack) {
+  return labelStack.length === 1;
+}

package/dist/cjs/create-payload/critical-metrics-payload/segment-metrics/get-segment-id.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getSegmentId;
+function getSegmentId(labelStack) {
+  for (var i = labelStack.length - 1; i >= 0; i--) {
+    var label = labelStack[i];
+    if ('segmentId' in label) {
+      return label.segmentId;
+    }
+  }
+  return undefined;
+}

package/dist/cjs/create-payload/critical-metrics-payload/segment-metrics/get-segment-status.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getSegmentStatus;
+var _getInteractionStatus = _interopRequireDefault(require("../../utils/get-interaction-status"));
+var _getSegmentId = _interopRequireDefault(require("./get-segment-id"));
+var _hasSegmentFailed = _interopRequireDefault(require("./has-segment-failed"));
+var _isLabelStackUnderSegment = _interopRequireDefault(require("./is-label-stack-under-segment"));
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function getSegmentStatus(interaction, segment) {
+  var segmentId = (0, _getSegmentId.default)(segment.labelStack);
+
+  // Get the root interaction status info
+  var rootInteractionStatus = (0, _getInteractionStatus.default)(interaction);
+  var rootStatus = rootInteractionStatus.originalInteractionStatus;
+  var rootAbortReason = interaction.abortReason;
+  var isInteractionsAbortedByNewInteraction = rootStatus === 'ABORTED' && rootAbortReason === 'new_interaction';
+  var isInteractionsAbortedByTransition = rootStatus === 'ABORTED' && rootAbortReason === 'transition';
+  var status = 'SUCCEEDED';
+  var abortReason;
+
+  // Check if this specific segment has failed
+  if (segmentId && (0, _hasSegmentFailed.default)(interaction.errors, segmentId)) {
+    status = 'FAILED';
+  } else if (isInteractionsAbortedByNewInteraction) {
+    status = 'ABORTED';
+    abortReason = 'new_interaction';
+  } else if (isInteractionsAbortedByTransition) {
+    status = 'ABORTED';
+    abortReason = 'transition';
+  } else if (segmentId) {
+    // Check for active holds that are under this segment
+    var _iterator = _createForOfIteratorHelper(interaction.holdActive.values()),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var activeHold = _step.value;
+        if ((0, _isLabelStackUnderSegment.default)(activeHold.labelStack, segmentId)) {
+          status = 'ABORTED';
+          abortReason = 'timeout';
+          break;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }
+  return {
+    status: status,
+    abortReason: abortReason
+  };
+}

package/dist/cjs/create-payload/critical-metrics-payload/segment-metrics/has-segment-failed.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = hasSegmentFailed;
+var _getSegmentId = _interopRequireDefault(require("./get-segment-id"));
+function hasSegmentFailed(errors, segmentId) {
+  return errors.some(function (error) {
+    if (!error.labelStack) {
+      return false;
+    }
+    var errorSegmentId = (0, _getSegmentId.default)(error.labelStack);
+    return errorSegmentId === segmentId;
+  });
+}

package/dist/cjs/create-payload/critical-metrics-payload/segment-metrics/is-label-stack-under-segment.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = isLabelStackUnderSegment;
+function isLabelStackUnderSegment(labelStack, segmentId) {
+  return labelStack.some(function (label) {
+    return 'segmentId' in label && label.segmentId === segmentId;
+  });
+}

package/dist/cjs/create-payload/critical-metrics-payload/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});