@atlaskit/react-ufo 2.3.3 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 2.4.0
+
+### Minor Changes
+
+- [#169410](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/169410)
+  [`70969d8e13353`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/70969d8e13353) -
+  Optimising React UFO payload size by referncing segments tree
+
 ## 2.3.3
 
 ### Patch Changes

package/dist/cjs/common/constants.js

@@ -4,4 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.REACT_UFO_VERSION = void 0;
-var REACT_UFO_VERSION = exports.REACT_UFO_VERSION = '1.0.1';
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var REACT_UFO_VERSION = exports.REACT_UFO_VERSION = (0, _platformFeatureFlags.fg)('react-ufo-payload-segment-compressed') ? '2.0.0' : '1.0.1';

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

@@ -1,15 +1,74 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.buildSegmentTree = buildSegmentTree;
 exports.isSegmentLabel = isSegmentLabel;
+exports.labelStackStartWith = labelStackStartWith;
+exports.optimizeLabelStack = optimizeLabelStack;
 exports.sanitizeUfoName = void 0;
+exports.stringifyLabelStackFully = stringifyLabelStackFully;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _constants = require("../../../common/constants");
+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; } /* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
 var sanitizeUfoName = exports.sanitizeUfoName = function sanitizeUfoName(name) {
   return name.replace(/_/g, '-');
 };
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function isSegmentLabel(obj) {
   return obj && typeof obj.name === 'string' && typeof obj.segmentId === 'string';
+}
+function buildSegmentTree(labelStacks) {
+  var r = {
+    n: 'segment-tree-root',
+    c: {}
+  };
+  labelStacks.forEach(function (labelStack) {
+    var currentNode = r;
+    labelStack.forEach(function (label, index) {
+      var _currentNode$c;
+      var name = label.name;
+      var id = isSegmentLabel(label) ? label.segmentId : undefined;
+      var key = id !== undefined ? id.toString() : name;
+      if (currentNode.c && !currentNode.c[key]) {
+        currentNode.c[key] = {
+          n: name
+        };
+      }
+      currentNode = (_currentNode$c = currentNode.c) === null || _currentNode$c === void 0 ? void 0 : _currentNode$c[key];
+      if (index < labelStack.length - 1) {
+        currentNode.c = _objectSpread({}, currentNode.c || {});
+      }
+    });
+  });
+  return {
+    r: r
+  };
+}
+function stringifyLabelStackFully(labelStack) {
+  return labelStack.map(function (l) {
+    if (isSegmentLabel(l)) {
+      return "".concat(l.name, ":").concat(l.segmentId);
+    }
+    return l.name;
+  }).join('/');
+}
+function getLabelStackReference(labelStack) {
+  return labelStack.map(function (l) {
+    return isSegmentLabel(l) ? l.segmentId : l.name;
+  }).join('/');
+}
+function labelStackStartWith(labelStack, startWith) {
+  return stringifyLabelStackFully(labelStack).startsWith(stringifyLabelStackFully(startWith));
+}
+function optimizeLabelStack(labelStack) {
+  return _constants.REACT_UFO_VERSION === '2.0.0' ? getLabelStackReference(labelStack) : labelStack.map(function (ls) {
+    return _objectSpread({
+      n: ls.name
+    }, ls.segmentId ? {
+      s: ls.segmentId
+    } : {});
+  });
 }

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

@@ -49,17 +49,6 @@ function getUfoNameOverride(interaction) {
     return ufoName;
   }
 }
-function stringifyLabelStackFully(labelStack) {
-  return labelStack.map(function (l) {
-    if ((0, _utils.isSegmentLabel)(l)) {
-      return "".concat(l.name, ":").concat(l.segmentId);
-    }
-    return l.name;
-  }).join('/');
-}
-function labelStackStartWith(labelStack, startWith) {
-  return stringifyLabelStackFully(labelStack).startsWith(stringifyLabelStackFully(startWith));
-}
 function getEarliestLegacyStopTime(interaction, labelStack) {
   var earliestLegacyStopTime = null;
   interaction.apdex.forEach(function (a) {
@@ -67,7 +56,7 @@ function getEarliestLegacyStopTime(interaction, labelStack) {
     if (!(a !== null && a !== void 0 && a.stopTime)) {
       return;
     }
-    if (!labelStackStartWith((_a$labelStack = a.labelStack) !== null && _a$labelStack !== void 0 ? _a$labelStack : [], labelStack)) {
+    if (!(0, _utils.labelStackStartWith)((_a$labelStack = a.labelStack) !== null && _a$labelStack !== void 0 ? _a$labelStack : [], labelStack)) {
       return;
     }
     if (a.stopTime > interaction.start && ((_earliestLegacyStopTi = earliestLegacyStopTime) !== null && _earliestLegacyStopTi !== void 0 ? _earliestLegacyStopTi : a.stopTime) >= a.stopTime) {
@@ -345,18 +334,6 @@ var getTracingContextData = function getTracingContextData(interaction) {
   }
   return tracingContextData;
 };
-
-// interaction metric
-
-function optimizeLabelStack(labelStack) {
-  return labelStack.map(function (ls) {
-    return _objectSpread({
-      n: ls.name
-    }, ls.segmentId ? {
-      s: ls.segmentId
-    } : {});
-  });
-}
 function optimizeCustomData(interaction) {
   var customData = interaction.customData,
     legacyMetrics = interaction.legacyMetrics;
@@ -364,10 +341,10 @@ function optimizeCustomData(interaction) {
     var _result$get$data, _result$get;
     var labelStack = _ref2.labelStack,
       data = _ref2.data;
-    var label = stringifyLabelStackFully(labelStack);
+    var label = (0, _utils.stringifyLabelStackFully)(labelStack);
     var value = (_result$get$data = (_result$get = result.get(label)) === null || _result$get === void 0 ? void 0 : _result$get.data) !== null && _result$get$data !== void 0 ? _result$get$data : {};
     result.set(label, {
-      labelStack: optimizeLabelStack(labelStack),
+      labelStack: (0, _utils.optimizeLabelStack)(labelStack),
       data: Object.assign(value, data)
     });
     return result;
@@ -381,10 +358,10 @@ function optimizeCustomData(interaction) {
         var _Object$entries$_i = (0, _slicedToArray2.default)(_Object$entries[_i], 2),
           _key = _Object$entries$_i[0],
           value = _Object$entries$_i[1];
-        var label = stringifyLabelStackFully([]);
+        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: optimizeLabelStack([]),
+          labelStack: (0, _utils.optimizeLabelStack)([]),
           data: Object.assign(labelValue, (0, _defineProperty2.default)({}, _key, value))
         });
       }
@@ -402,11 +379,11 @@ function optimizeReactProfilerTimings(reactProfilerTimings, interactionStart) {
       actualDuration = _ref3.actualDuration,
       type = _ref3.type;
     if (labelStack && startTime >= interactionStart) {
-      var label = stringifyLabelStackFully(labelStack);
+      var label = (0, _utils.stringifyLabelStackFully)(labelStack);
       var start = Math.round(startTime);
       var end = Math.round(commitTime);
       var timing = result.get(label) || {
-        labelStack: optimizeLabelStack(labelStack),
+        labelStack: (0, _utils.optimizeLabelStack)(labelStack),
         startTime: start,
         endTime: end,
         mountCount: 0,
@@ -461,13 +438,13 @@ function optimizeHoldInfo(holdInfo, interactionStart) {
       end = hold.end,
       ignoreOnSubmit = hold.ignoreOnSubmit;
     if (labelStack && !ignoreOnSubmit && start >= interactionStart) {
-      var label = stringifyLabelStackFully([].concat((0, _toConsumableArray2.default)(labelStack), [{
+      var label = (0, _utils.stringifyLabelStackFully)([].concat((0, _toConsumableArray2.default)(labelStack), [{
         name: name
       }]));
       var startTime = Math.round(start);
       var endTime = Math.round(end);
       var timing = result.get(label) || {
-        labelStack: optimizeLabelStack([].concat((0, _toConsumableArray2.default)(labelStack), [{
+        labelStack: (0, _utils.optimizeLabelStack)([].concat((0, _toConsumableArray2.default)(labelStack), [{
           name: name
         }])),
         startTime: startTime,
@@ -494,7 +471,7 @@ function optimizeSpans(spans, interactionStart) {
       end = span.end;
     if (labelStack && start >= interactionStart) {
       result.push({
-        labelStack: optimizeLabelStack([].concat((0, _toConsumableArray2.default)(labelStack), [{
+        labelStack: (0, _utils.optimizeLabelStack)([].concat((0, _toConsumableArray2.default)(labelStack), [{
           name: name
         }])),
         startTime: Math.round(start),
@@ -518,7 +495,7 @@ function optimizeRequestInfo(requestInfo, interactionStart) {
     var endTime = networkComplete !== null && networkComplete !== void 0 ? networkComplete : end;
     if (labelStack && start >= interactionStart && endTime) {
       result.push({
-        labelStack: optimizeLabelStack([].concat((0, _toConsumableArray2.default)(labelStack), [{
+        labelStack: (0, _utils.optimizeLabelStack)([].concat((0, _toConsumableArray2.default)(labelStack), [{
           name: name
         }])),
         startTime: Math.round(startTime),
@@ -530,7 +507,7 @@ function optimizeRequestInfo(requestInfo, interactionStart) {
   return updatedRequestInfo;
 }
 function optimizeCustomTimings(customTimings, interactionStart) {
-  var updatedCustomTimings = customTimings.reduce(function (result, item) {
+  return customTimings.reduce(function (result, item) {
     Object.keys(item.data).forEach(function (key) {
       if (item.data[key].startTime >= interactionStart) {
         result.push({
@@ -544,7 +521,6 @@ function optimizeCustomTimings(customTimings, interactionStart) {
     });
     return result;
   }, []);
-  return updatedCustomTimings;
 }
 function optimizeMarks(marks) {
   return marks.map(function (_ref4) {
@@ -552,7 +528,7 @@ function optimizeMarks(marks) {
       time = _ref4.time,
       others = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
     return _objectSpread(_objectSpread({}, others), {}, {
-      labelStack: labelStack && optimizeLabelStack(labelStack),
+      labelStack: labelStack && (0, _utils.optimizeLabelStack)(labelStack),
       time: Math.round(time)
     });
   });
@@ -565,12 +541,10 @@ function optimizeApdex(apdex) {
     return _objectSpread(_objectSpread({}, others), {}, {
       stopTime: Math.round(stopTime)
     }, labelStack ? {
-      labelStack: optimizeLabelStack(labelStack)
+      labelStack: (0, _utils.optimizeLabelStack)(labelStack)
     } : {});
   });
 }
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function objectToArray() {
   var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return Object.keys(obj).reduce(function (result, key) {
@@ -579,9 +553,7 @@ function objectToArray() {
       data: obj[key]
     });
     return result;
-  },
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  []);
+  }, []);
 }
 function getBM3SubmetricsTimings(submetrics) {
   if (!submetrics) {
@@ -657,13 +629,16 @@ function createInteractionMetricsPayload(interaction, interactionId) {
   var pageVisibilityAtTTI = getPageVisibilityUpToTTI(interaction);
   var pageVisibilityAtTTAI = getPageVisibilityUpToTTAI(interaction);
   var segments = config.killswitchNestedSegments ? [] : knownSegments;
+  var segmentTree = (0, _utils.buildSegmentTree)(segments.map(function (segment) {
+    return segment.labelStack;
+  }));
   var isDetailedPayload = pageVisibilityAtTTAI === 'visible';
   var isPageLoad = type === 'page_load';
   var calculatePageVisibilityFromTheStartOfPageLoad = config.enableBetterPageVisibilityApi && isPageLoad;
   var moreAccuratePageVisibilityAtTTI = calculatePageVisibilityFromTheStartOfPageLoad ? getMoreAccuratePageVisibilityUpToTTI(interaction) : null;
   var moreAccuratePageVisibilityAtTTAI = calculatePageVisibilityFromTheStartOfPageLoad ? getMoreAccuratePageVisibilityUpToTTAI(interaction) : null;
   var labelStack = interaction.labelStack ? {
-    labelStack: optimizeLabelStack(interaction.labelStack)
+    labelStack: (0, _utils.optimizeLabelStack)(interaction.labelStack)
   } : {};
   // Page Load
   var getPageLoadInteractionMetrics = function getPageLoadInteractionMetrics() {
@@ -693,7 +668,7 @@ function createInteractionMetricsPayload(interaction, interactionId) {
         var labelStack = _ref6.labelStack,
           others = (0, _objectWithoutProperties2.default)(_ref6, _excluded3);
         return _objectSpread(_objectSpread({}, others), {}, {
-          labelStack: labelStack && optimizeLabelStack(labelStack)
+          labelStack: labelStack && (0, _utils.optimizeLabelStack)(labelStack)
         });
       }),
       holdActive: (0, _toConsumableArray2.default)(interaction.holdActive.values()),
@@ -762,11 +737,11 @@ function createInteractionMetricsPayload(interaction, interactionId) {
           apdex: optimizeApdex(interaction.apdex),
           end: Math.round(end),
           start: Math.round(start),
-          segments: segments.map(function (_ref7) {
+          segments: _constants.REACT_UFO_VERSION === '2.0.0' ? segmentTree : segments.map(function (_ref7) {
             var labelStack = _ref7.labelStack,
               others = (0, _objectWithoutProperties2.default)(_ref7, _excluded4);
             return _objectSpread(_objectSpread({}, others), {}, {
-              labelStack: optimizeLabelStack(labelStack)
+              labelStack: (0, _utils.optimizeLabelStack)(labelStack)
             });
           }),
           marks: optimizeMarks(interaction.marks),

package/dist/es2019/common/constants.js

@@ -1 +1,2 @@
-export const REACT_UFO_VERSION = '1.0.1';
+import { fg } from '@atlaskit/platform-feature-flags';
+export const REACT_UFO_VERSION = fg('react-ufo-payload-segment-compressed') ? '2.0.0' : '1.0.1';

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

@@ -1,8 +1,59 @@
+/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
+import { REACT_UFO_VERSION } from '../../../common/constants';
 export const sanitizeUfoName = name => {
   return name.replace(/_/g, '-');
 };
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isSegmentLabel(obj) {
   return obj && typeof obj.name === 'string' && typeof obj.segmentId === 'string';
+}
+export function buildSegmentTree(labelStacks) {
+  const r = {
+    n: 'segment-tree-root',
+    c: {}
+  };
+  labelStacks.forEach(labelStack => {
+    let currentNode = r;
+    labelStack.forEach((label, index) => {
+      var _currentNode$c;
+      const name = label.name;
+      const id = isSegmentLabel(label) ? label.segmentId : undefined;
+      const key = id !== undefined ? id.toString() : name;
+      if (currentNode.c && !currentNode.c[key]) {
+        currentNode.c[key] = {
+          n: name
+        };
+      }
+      currentNode = (_currentNode$c = currentNode.c) === null || _currentNode$c === void 0 ? void 0 : _currentNode$c[key];
+      if (index < labelStack.length - 1) {
+        currentNode.c = {
+          ...(currentNode.c || {})
+        };
+      }
+    });
+  });
+  return {
+    r
+  };
+}
+export function stringifyLabelStackFully(labelStack) {
+  return labelStack.map(l => {
+    if (isSegmentLabel(l)) {
+      return `${l.name}:${l.segmentId}`;
+    }
+    return l.name;
+  }).join('/');
+}
+function getLabelStackReference(labelStack) {
+  return labelStack.map(l => isSegmentLabel(l) ? l.segmentId : l.name).join('/');
+}
+export function labelStackStartWith(labelStack, startWith) {
+  return stringifyLabelStackFully(labelStack).startsWith(stringifyLabelStackFully(startWith));
+}
+export function optimizeLabelStack(labelStack) {
+  return REACT_UFO_VERSION === '2.0.0' ? getLabelStackReference(labelStack) : labelStack.map(ls => ({
+    n: ls.name,
+    ...(ls.segmentId ? {
+      s: ls.segmentId
+    } : {})
+  }));
 }

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

@@ -11,7 +11,7 @@ import * as resourceTiming from '../resource-timing';
 import { roundEpsilon } from '../round-number';
 import * as ssr from '../ssr';
 import { getVCObserver } from '../vc';
-import { isSegmentLabel, sanitizeUfoName } from './common/utils';
+import { buildSegmentTree, labelStackStartWith, optimizeLabelStack, sanitizeUfoName, stringifyLabelStackFully } from './common/utils';
 function getUfoNameOverride(interaction) {
   const {
     ufoName,
@@ -31,17 +31,6 @@ function getUfoNameOverride(interaction) {
     return ufoName;
   }
 }
-function stringifyLabelStackFully(labelStack) {
-  return labelStack.map(l => {
-    if (isSegmentLabel(l)) {
-      return `${l.name}:${l.segmentId}`;
-    }
-    return l.name;
-  }).join('/');
-}
-function labelStackStartWith(labelStack, startWith) {
-  return stringifyLabelStackFully(labelStack).startsWith(stringifyLabelStackFully(startWith));
-}
 function getEarliestLegacyStopTime(interaction, labelStack) {
   let earliestLegacyStopTime = null;
   interaction.apdex.forEach(a => {
@@ -329,17 +318,6 @@ const getTracingContextData = interaction => {
   }
   return tracingContextData;
 };
-
-// interaction metric
-
-function optimizeLabelStack(labelStack) {
-  return labelStack.map(ls => ({
-    n: ls.name,
-    ...(ls.segmentId ? {
-      s: ls.segmentId
-    } : {})
-  }));
-}
 function optimizeCustomData(interaction) {
   const {
     customData,
@@ -520,7 +498,7 @@ function optimizeRequestInfo(requestInfo, interactionStart) {
   return updatedRequestInfo;
 }
 function optimizeCustomTimings(customTimings, interactionStart) {
-  const updatedCustomTimings = customTimings.reduce((result, item) => {
+  return customTimings.reduce((result, item) => {
     Object.keys(item.data).forEach(key => {
       if (item.data[key].startTime >= interactionStart) {
         result.push({
@@ -534,7 +512,6 @@ function optimizeCustomTimings(customTimings, interactionStart) {
     });
     return result;
   }, []);
-  return updatedCustomTimings;
 }
 function optimizeMarks(marks) {
   return marks.map(({
@@ -560,8 +537,6 @@ function optimizeApdex(apdex) {
     } : {})
   }));
 }
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function objectToArray(obj = {}) {
   return Object.keys(obj).reduce((result, key) => {
     result.push({
@@ -569,9 +544,7 @@ function objectToArray(obj = {}) {
       data: obj[key]
     });
     return result;
-  },
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  []);
+  }, []);
 }
 function getBM3SubmetricsTimings(submetrics) {
   if (!submetrics) {
@@ -650,6 +623,7 @@ function createInteractionMetricsPayload(interaction, interactionId) {
   const pageVisibilityAtTTI = getPageVisibilityUpToTTI(interaction);
   const pageVisibilityAtTTAI = getPageVisibilityUpToTTAI(interaction);
   const segments = config.killswitchNestedSegments ? [] : knownSegments;
+  const segmentTree = buildSegmentTree(segments.map(segment => segment.labelStack));
   const isDetailedPayload = pageVisibilityAtTTAI === 'visible';
   const isPageLoad = type === 'page_load';
   const calculatePageVisibilityFromTheStartOfPageLoad = config.enableBetterPageVisibilityApi && isPageLoad;
@@ -764,7 +738,7 @@ function createInteractionMetricsPayload(interaction, interactionId) {
           apdex: optimizeApdex(interaction.apdex),
           end: Math.round(end),
           start: Math.round(start),
-          segments: segments.map(({
+          segments: REACT_UFO_VERSION === '2.0.0' ? segmentTree : segments.map(({
             labelStack,
             ...others
           }) => ({

package/dist/esm/common/constants.js

@@ -1 +1,2 @@
-export var REACT_UFO_VERSION = '1.0.1';
+import { fg } from '@atlaskit/platform-feature-flags';
+export var REACT_UFO_VERSION = fg('react-ufo-payload-segment-compressed') ? '2.0.0' : '1.0.1';

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

@@ -1,8 +1,63 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; }
+/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
+import { REACT_UFO_VERSION } from '../../../common/constants';
 export var sanitizeUfoName = function sanitizeUfoName(name) {
   return name.replace(/_/g, '-');
 };
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isSegmentLabel(obj) {
   return obj && typeof obj.name === 'string' && typeof obj.segmentId === 'string';
+}
+export function buildSegmentTree(labelStacks) {
+  var r = {
+    n: 'segment-tree-root',
+    c: {}
+  };
+  labelStacks.forEach(function (labelStack) {
+    var currentNode = r;
+    labelStack.forEach(function (label, index) {
+      var _currentNode$c;
+      var name = label.name;
+      var id = isSegmentLabel(label) ? label.segmentId : undefined;
+      var key = id !== undefined ? id.toString() : name;
+      if (currentNode.c && !currentNode.c[key]) {
+        currentNode.c[key] = {
+          n: name
+        };
+      }
+      currentNode = (_currentNode$c = currentNode.c) === null || _currentNode$c === void 0 ? void 0 : _currentNode$c[key];
+      if (index < labelStack.length - 1) {
+        currentNode.c = _objectSpread({}, currentNode.c || {});
+      }
+    });
+  });
+  return {
+    r: r
+  };
+}
+export function stringifyLabelStackFully(labelStack) {
+  return labelStack.map(function (l) {
+    if (isSegmentLabel(l)) {
+      return "".concat(l.name, ":").concat(l.segmentId);
+    }
+    return l.name;
+  }).join('/');
+}
+function getLabelStackReference(labelStack) {
+  return labelStack.map(function (l) {
+    return isSegmentLabel(l) ? l.segmentId : l.name;
+  }).join('/');
+}
+export function labelStackStartWith(labelStack, startWith) {
+  return stringifyLabelStackFully(labelStack).startsWith(stringifyLabelStackFully(startWith));
+}
+export function optimizeLabelStack(labelStack) {
+  return REACT_UFO_VERSION === '2.0.0' ? getLabelStackReference(labelStack) : labelStack.map(function (ls) {
+    return _objectSpread({
+      n: ls.name
+    }, ls.segmentId ? {
+      s: ls.segmentId
+    } : {});
+  });
 }

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

@@ -21,7 +21,7 @@ import * as resourceTiming from '../resource-timing';
 import { roundEpsilon } from '../round-number';
 import * as ssr from '../ssr';
 import { getVCObserver } from '../vc';
-import { isSegmentLabel, sanitizeUfoName } from './common/utils';
+import { buildSegmentTree, labelStackStartWith, optimizeLabelStack, sanitizeUfoName, stringifyLabelStackFully } from './common/utils';
 function getUfoNameOverride(interaction) {
   var ufoName = interaction.ufoName,
     apdex = interaction.apdex;
@@ -39,17 +39,6 @@ function getUfoNameOverride(interaction) {
     return ufoName;
   }
 }
-function stringifyLabelStackFully(labelStack) {
-  return labelStack.map(function (l) {
-    if (isSegmentLabel(l)) {
-      return "".concat(l.name, ":").concat(l.segmentId);
-    }
-    return l.name;
-  }).join('/');
-}
-function labelStackStartWith(labelStack, startWith) {
-  return stringifyLabelStackFully(labelStack).startsWith(stringifyLabelStackFully(startWith));
-}
 function getEarliestLegacyStopTime(interaction, labelStack) {
   var earliestLegacyStopTime = null;
   interaction.apdex.forEach(function (a) {
@@ -335,18 +324,6 @@ var getTracingContextData = function getTracingContextData(interaction) {
   }
   return tracingContextData;
 };
-
-// interaction metric
-
-function optimizeLabelStack(labelStack) {
-  return labelStack.map(function (ls) {
-    return _objectSpread({
-      n: ls.name
-    }, ls.segmentId ? {
-      s: ls.segmentId
-    } : {});
-  });
-}
 function optimizeCustomData(interaction) {
   var customData = interaction.customData,
     legacyMetrics = interaction.legacyMetrics;
@@ -520,7 +497,7 @@ function optimizeRequestInfo(requestInfo, interactionStart) {
   return updatedRequestInfo;
 }
 function optimizeCustomTimings(customTimings, interactionStart) {
-  var updatedCustomTimings = customTimings.reduce(function (result, item) {
+  return customTimings.reduce(function (result, item) {
     Object.keys(item.data).forEach(function (key) {
       if (item.data[key].startTime >= interactionStart) {
         result.push({
@@ -534,7 +511,6 @@ function optimizeCustomTimings(customTimings, interactionStart) {
     });
     return result;
   }, []);
-  return updatedCustomTimings;
 }
 function optimizeMarks(marks) {
   return marks.map(function (_ref4) {
@@ -559,8 +535,6 @@ function optimizeApdex(apdex) {
     } : {});
   });
 }
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function objectToArray() {
   var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return Object.keys(obj).reduce(function (result, key) {
@@ -569,9 +543,7 @@ function objectToArray() {
       data: obj[key]
     });
     return result;
-  },
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  []);
+  }, []);
 }
 function getBM3SubmetricsTimings(submetrics) {
   if (!submetrics) {
@@ -647,6 +619,9 @@ function createInteractionMetricsPayload(interaction, interactionId) {
   var pageVisibilityAtTTI = getPageVisibilityUpToTTI(interaction);
   var pageVisibilityAtTTAI = getPageVisibilityUpToTTAI(interaction);
   var segments = config.killswitchNestedSegments ? [] : knownSegments;
+  var segmentTree = buildSegmentTree(segments.map(function (segment) {
+    return segment.labelStack;
+  }));
   var isDetailedPayload = pageVisibilityAtTTAI === 'visible';
   var isPageLoad = type === 'page_load';
   var calculatePageVisibilityFromTheStartOfPageLoad = config.enableBetterPageVisibilityApi && isPageLoad;
@@ -752,7 +727,7 @@ function createInteractionMetricsPayload(interaction, interactionId) {
           apdex: optimizeApdex(interaction.apdex),
           end: Math.round(end),
           start: Math.round(start),
-          segments: segments.map(function (_ref7) {
+          segments: REACT_UFO_VERSION === '2.0.0' ? segmentTree : segments.map(function (_ref7) {
             var labelStack = _ref7.labelStack,
               others = _objectWithoutProperties(_ref7, _excluded4);
             return _objectSpread(_objectSpread({}, others), {}, {

package/dist/types/common/constants.d.ts

@@ -1 +1 @@
-export declare const REACT_UFO_VERSION = "1.0.1";
+export declare const REACT_UFO_VERSION: string;

package/dist/types/create-payload/common/types.d.ts

@@ -1,4 +1,4 @@
 export type OptimizedLabelStack = {
     n: string;
     s?: string;
-}[];
+}[] | string;

package/dist/types/create-payload/common/utils/index.d.ts

@@ -1,3 +1,17 @@
-import { type SegmentLabel } from '../../../interaction-context';
+import type { LabelStack, SegmentLabel } from '../../../interaction-context';
+export type SegmentItem = {
+    n: string;
+    c?: Record<string, SegmentItem>;
+};
+export type SegmentTree = {
+    r: SegmentItem;
+};
 export declare const sanitizeUfoName: (name: string) => string;
 export declare function isSegmentLabel(obj: any): obj is SegmentLabel;
+export declare function buildSegmentTree(labelStacks: LabelStack[]): SegmentTree;
+export declare function stringifyLabelStackFully(labelStack: LabelStack): string;
+export declare function labelStackStartWith(labelStack: LabelStack, startWith: LabelStack): boolean;
+export declare function optimizeLabelStack(labelStack: LabelStack): string | {
+    s?: string | undefined;
+    n: string;
+}[];