@atlaskit/react-ufo 3.1.1 → 3.1.2

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.1.2
+
+### Patch Changes
+
+- [#119178](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119178)
+  [`f0b97fc480d38`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f0b97fc480d38) -
+  dedupe DOM element selectors within VC debug data
+- [#119697](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119697)
+  [`62268803ec9e6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/62268803ec9e6) -
+  refactor logic to get react ufo version
+
 ## 3.1.1
 
 ### Patch Changes

package/dist/cjs/common/constants.js

@@ -3,7 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.REACT_UFO_VERSION = void 0;
+exports.getReactUFOVersion = void 0;
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-// eslint-disable-next-line @atlaskit/platform/no-module-level-eval
-var REACT_UFO_VERSION = exports.REACT_UFO_VERSION = (0, _platformFeatureFlags.fg)('enable-react-ufo-payload-segment-compressed') ? '2.0.0' : '1.0.1';
+var getReactUFOVersion = exports.getReactUFOVersion = function getReactUFOVersion(interactionType) {
+  if (interactionType !== 'page_load' && interactionType !== 'transition') {
+    return '1.0.1';
+  }
+
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  if (!(0, _platformFeatureFlags.fg)('enable-react-ufo-payload-segment-compressed')) {
+    return '1.0.1';
+  }
+  return '2.0.0';
+};

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

@@ -11,9 +11,8 @@ 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 */
+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; }
 var sanitizeUfoName = exports.sanitizeUfoName = function sanitizeUfoName(name) {
   return name.replace(/_/g, '-');
 };
@@ -62,8 +61,8 @@ function getLabelStackReference(labelStack) {
 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) {
+function optimizeLabelStack(labelStack, reactUFOVersion) {
+  return reactUFOVersion ? getLabelStackReference(labelStack) : labelStack.map(function (ls) {
     return _objectSpread({
       n: ls.name
     }, ls.segmentId ? {

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

@@ -393,7 +393,7 @@ function optimizeCustomData(interaction) {
     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: (0, _utils.optimizeLabelStack)(labelStack),
+      labelStack: (0, _utils.optimizeLabelStack)(labelStack, (0, _constants.getReactUFOVersion)(interaction.type)),
       data: Object.assign(value, data)
     });
     return result;
@@ -410,7 +410,7 @@ function optimizeCustomData(interaction) {
         var label = (0, _utils.stringifyLabelStackFully)([]);
         var labelValue = (_result$get$data2 = (_result$get2 = result.get(label)) === null || _result$get2 === void 0 ? void 0 : _result$get2.data) !== null && _result$get$data2 !== void 0 ? _result$get$data2 : {};
         result.set(label, {
-          labelStack: (0, _utils.optimizeLabelStack)([]),
+          labelStack: (0, _utils.optimizeLabelStack)([], (0, _constants.getReactUFOVersion)(interaction.type)),
           data: Object.assign(labelValue, (0, _defineProperty2.default)({}, _key, value))
         });
       }
@@ -420,7 +420,7 @@ function optimizeCustomData(interaction) {
   }
   return (0, _toConsumableArray2.default)(customDataMap.values());
 }
-function optimizeReactProfilerTimings(reactProfilerTimings, interactionStart) {
+function optimizeReactProfilerTimings(reactProfilerTimings, interactionStart, reactUFOVersion) {
   var reactProfilerTimingsMap = reactProfilerTimings.reduce(function (result, _ref3) {
     var labelStack = _ref3.labelStack,
       startTime = _ref3.startTime,
@@ -432,7 +432,7 @@ function optimizeReactProfilerTimings(reactProfilerTimings, interactionStart) {
       var start = Math.round(startTime);
       var end = Math.round(commitTime);
       var timing = result.get(label) || {
-        labelStack: (0, _utils.optimizeLabelStack)(labelStack),
+        labelStack: (0, _utils.optimizeLabelStack)(labelStack, reactUFOVersion),
         startTime: start,
         endTime: end,
         mountCount: 0,
@@ -479,7 +479,7 @@ function optimizeRedirects(redirects, interactionStart) {
   }, []);
   return updatedRedirects;
 }
-function optimizeHoldInfo(holdInfo, interactionStart) {
+function optimizeHoldInfo(holdInfo, interactionStart, reactUFOVersion) {
   var holdInfoMap = holdInfo.reduce(function (result, hold) {
     var labelStack = hold.labelStack,
       name = hold.name,
@@ -495,7 +495,7 @@ function optimizeHoldInfo(holdInfo, interactionStart) {
       var timing = result.get(label) || {
         labelStack: (0, _utils.optimizeLabelStack)([].concat((0, _toConsumableArray2.default)(labelStack), [{
           name: name
-        }])),
+        }]), reactUFOVersion),
         startTime: startTime,
         endTime: endTime
       };
@@ -511,7 +511,7 @@ function optimizeHoldInfo(holdInfo, interactionStart) {
   }, new Map());
   return (0, _toConsumableArray2.default)(holdInfoMap.values());
 }
-function optimizeSpans(spans, interactionStart) {
+function optimizeSpans(spans, interactionStart, reactUFOVersion) {
   var updatedSpans = spans.reduce(function (result, span) {
     var labelStack = span.labelStack,
       type = span.type,
@@ -522,7 +522,7 @@ function optimizeSpans(spans, interactionStart) {
       result.push({
         labelStack: (0, _utils.optimizeLabelStack)([].concat((0, _toConsumableArray2.default)(labelStack), [{
           name: name
-        }])),
+        }]), reactUFOVersion),
         startTime: Math.round(start),
         endTime: Math.round(end),
         type: type
@@ -532,7 +532,7 @@ function optimizeSpans(spans, interactionStart) {
   }, []);
   return updatedSpans;
 }
-function optimizeRequestInfo(requestInfo, interactionStart) {
+function optimizeRequestInfo(requestInfo, interactionStart, reactUFOVersion) {
   var updatedRequestInfo = requestInfo.reduce(function (result, reqInfo) {
     var labelStack = reqInfo.labelStack,
       name = reqInfo.name,
@@ -546,7 +546,7 @@ function optimizeRequestInfo(requestInfo, interactionStart) {
       result.push({
         labelStack: (0, _utils.optimizeLabelStack)([].concat((0, _toConsumableArray2.default)(labelStack), [{
           name: name
-        }])),
+        }]), reactUFOVersion),
         startTime: Math.round(startTime),
         endTime: Math.round(endTime)
       });
@@ -571,18 +571,18 @@ function optimizeCustomTimings(customTimings, interactionStart) {
     return result;
   }, []);
 }
-function optimizeMarks(marks) {
+function optimizeMarks(marks, reactUFOVersion) {
   return marks.map(function (_ref4) {
     var labelStack = _ref4.labelStack,
       time = _ref4.time,
       others = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
     return _objectSpread(_objectSpread({}, others), {}, {
-      labelStack: labelStack && (0, _utils.optimizeLabelStack)(labelStack),
+      labelStack: labelStack && (0, _utils.optimizeLabelStack)(labelStack, reactUFOVersion),
       time: Math.round(time)
     });
   });
 }
-function optimizeApdex(apdex) {
+function optimizeApdex(apdex, reactUFOVersion) {
   return apdex.map(function (_ref5) {
     var stopTime = _ref5.stopTime,
       labelStack = _ref5.labelStack,
@@ -590,7 +590,7 @@ function optimizeApdex(apdex) {
     return _objectSpread(_objectSpread({}, others), {}, {
       stopTime: Math.round(stopTime)
     }, labelStack ? {
-      labelStack: (0, _utils.optimizeLabelStack)(labelStack)
+      labelStack: (0, _utils.optimizeLabelStack)(labelStack, reactUFOVersion)
     } : {});
   });
 }
@@ -726,7 +726,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
   var pageVisibilityAtTTI = getPageVisibilityUpToTTI(interaction);
   var pageVisibilityAtTTAI = getPageVisibilityUpToTTAI(interaction);
   var segments = config.killswitchNestedSegments ? [] : knownSegments;
-  var segmentTree = _constants.REACT_UFO_VERSION === '2.0.0' ? (0, _utils.buildSegmentTree)(segments.map(function (segment) {
+  var segmentTree = (0, _constants.getReactUFOVersion)(interaction.type) === '2.0.0' ? (0, _utils.buildSegmentTree)(segments.map(function (segment) {
     return segment.labelStack;
   })) : {};
   var isDetailedPayload = pageVisibilityAtTTAI === 'visible';
@@ -735,7 +735,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
   var moreAccuratePageVisibilityAtTTI = calculatePageVisibilityFromTheStartOfPageLoad ? getMoreAccuratePageVisibilityUpToTTI(interaction) : null;
   var moreAccuratePageVisibilityAtTTAI = calculatePageVisibilityFromTheStartOfPageLoad ? getMoreAccuratePageVisibilityUpToTTAI(interaction) : null;
   var labelStack = interaction.labelStack ? {
-    labelStack: (0, _utils.optimizeLabelStack)(interaction.labelStack)
+    labelStack: (0, _utils.optimizeLabelStack)(interaction.labelStack, (0, _constants.getReactUFOVersion)(interaction.type))
   } : {};
   // Page Load
   var getPageLoadInteractionMetrics = function getPageLoadInteractionMetrics() {
@@ -765,14 +765,14 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
         var labelStack = _ref6.labelStack,
           others = (0, _objectWithoutProperties2.default)(_ref6, _excluded3);
         return _objectSpread(_objectSpread({}, others), {}, {
-          labelStack: labelStack && (0, _utils.optimizeLabelStack)(labelStack)
+          labelStack: labelStack && (0, _utils.optimizeLabelStack)(labelStack, (0, _constants.getReactUFOVersion)(interaction.type))
         });
       }),
       holdActive: (0, _toConsumableArray2.default)(interaction.holdActive.values()),
       redirects: optimizeRedirects(interaction.redirects, start),
-      holdInfo: optimizeHoldInfo(experimental ? interaction.holdExpInfo : interaction.holdInfo, start),
-      spans: optimizeSpans(spans, start),
-      requestInfo: optimizeRequestInfo(interaction.requestInfo, start),
+      holdInfo: optimizeHoldInfo(experimental ? interaction.holdExpInfo : interaction.holdInfo, start, (0, _constants.getReactUFOVersion)(interaction.type)),
+      spans: optimizeSpans(spans, start, (0, _constants.getReactUFOVersion)(interaction.type)),
+      requestInfo: optimizeRequestInfo(interaction.requestInfo, start, (0, _constants.getReactUFOVersion)(interaction.type)),
       customTimings: optimizeCustomTimings(interaction.customTimings, start),
       bundleEvalTimings: objectToArray(getBundleEvalTimings(start)),
       resourceTimings: objectToArray(resourceTimings)
@@ -812,8 +812,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
         'event:sizeInKb': 0,
         'event:source': {
           name: 'react-ufo/web',
-          version: _constants.REACT_UFO_VERSION,
-          payloadSource: 'platform'
+          version: (0, _constants.getReactUFOVersion)(interaction.type)
         },
         'event:region': config.region || 'unknown',
         'experience:key': experimental ? 'custom.experimental-interaction-metrics' : 'custom.interaction-metrics',
@@ -837,19 +836,19 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
           isPreviousInteractionAborted: isPreviousInteractionAborted,
           abortedByInteractionName: abortedByInteractionName,
           // performance
-          apdex: optimizeApdex(interaction.apdex),
+          apdex: optimizeApdex(interaction.apdex, (0, _constants.getReactUFOVersion)(interaction.type)),
           end: Math.round(end),
           start: Math.round(start),
-          segments: _constants.REACT_UFO_VERSION === '2.0.0' ? segmentTree : segments.map(function (_ref7) {
+          segments: (0, _constants.getReactUFOVersion)(interaction.type) === '2.0.0' ? segmentTree : segments.map(function (_ref7) {
             var labelStack = _ref7.labelStack,
               others = (0, _objectWithoutProperties2.default)(_ref7, _excluded4);
             return _objectSpread(_objectSpread({}, others), {}, {
-              labelStack: (0, _utils.optimizeLabelStack)(labelStack)
+              labelStack: (0, _utils.optimizeLabelStack)(labelStack, (0, _constants.getReactUFOVersion)(interaction.type))
             });
           }),
-          marks: optimizeMarks(interaction.marks),
+          marks: optimizeMarks(interaction.marks, (0, _constants.getReactUFOVersion)(interaction.type)),
           customData: optimizeCustomData(interaction),
-          reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start)
+          reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start, (0, _constants.getReactUFOVersion)(interaction.type))
         }, labelStack), getPageLoadInteractionMetrics()), getDetailedInteractionMetrics(resourceTimings)), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)), {}, {
           'metric:ttai': experimental ? regularTTAI || expTTAI : undefined,
           'metric:experimental:ttai': expTTAI

package/dist/cjs/create-post-interaction-log-payload/index.js

@@ -188,7 +188,7 @@ function createPostInteractionLogPayload(_ref2) {
         'event:schema': '1.0.0',
         'event:source': {
           name: 'react-ufo/web',
-          version: _constants.REACT_UFO_VERSION,
+          version: (0, _constants.getReactUFOVersion)(lastInteractionFinish.type),
           payloadSource: 'platform'
         },
         'event:region': config.region || 'unknown',

package/dist/cjs/vc/vc-observer/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.VCObserver = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -660,9 +661,9 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
           if ((VC[key] === null || VC[key] === undefined) && VCRatio >= value / 100) {
             var _componentsLog$time;
             VC[key] = time;
-            VCBox[key] = (_componentsLog$time = componentsLog[time]) === null || _componentsLog$time === void 0 ? void 0 : _componentsLog$time.map(function (v) {
+            VCBox[key] = (0, _toConsumableArray2.default)(new Set((_componentsLog$time = componentsLog[time]) === null || _componentsLog$time === void 0 ? void 0 : _componentsLog$time.map(function (v) {
               return v.targetName;
-            });
+            })));
           }
         });
         return VCRatio;
@@ -674,9 +675,9 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
           entryPainted = _ref19[1];
         var currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
         var currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
-        var logEntry = (_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(function (v) {
+        var logEntry = (0, _toConsumableArray2.default)(new Set((_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(function (v) {
           return v.targetName;
-        });
+        })));
         var ratioDelta = (currentlyPaintedRatio - ((_acc$rel$vc = (_acc$rel = acc.rel[i - 1]) === null || _acc$rel === void 0 ? void 0 : _acc$rel.vc) !== null && _acc$rel$vc !== void 0 ? _acc$rel$vc : 0)) / 100;
         if (isCalcSpeedIndexEnabled) {
           var speedIndex = timestamp * ratioDelta;

package/dist/es2019/common/constants.js

@@ -1,4 +1,12 @@
 import { fg } from '@atlaskit/platform-feature-flags';
+export const getReactUFOVersion = interactionType => {
+  if (interactionType !== 'page_load' && interactionType !== 'transition') {
+    return '1.0.1';
+  }
 
-// eslint-disable-next-line @atlaskit/platform/no-module-level-eval
-export const REACT_UFO_VERSION = fg('enable-react-ufo-payload-segment-compressed') ? '2.0.0' : '1.0.1';
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  if (!fg('enable-react-ufo-payload-segment-compressed')) {
+    return '1.0.1';
+  }
+  return '2.0.0';
+};

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

@@ -1,5 +1,3 @@
-/* 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, '-');
 };
@@ -46,8 +44,8 @@ function getLabelStackReference(labelStack) {
 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 => ({
+export function optimizeLabelStack(labelStack, reactUFOVersion) {
+  return reactUFOVersion ? getLabelStackReference(labelStack) : labelStack.map(ls => ({
     n: ls.name,
     ...(ls.segmentId ? {
       s: ls.segmentId

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

@@ -4,7 +4,7 @@ import { getLighthouseMetrics } from '../additional-payload';
 import { CHRReporter } from '../assets';
 import * as bundleEvalTiming from '../bundle-eval-timing';
 import coinflip from '../coinflip';
-import { REACT_UFO_VERSION } from '../common/constants';
+import { getReactUFOVersion } from '../common/constants';
 import { getConfig, getExperimentalInteractionRate, getUfoNameOverrides } from '../config';
 import { getExperimentalVCMetrics } from '../create-experimental-interaction-metrics-payload';
 import { getBm3Timings } from '../custom-timings';
@@ -383,7 +383,7 @@ function optimizeCustomData(interaction) {
     const label = stringifyLabelStackFully(labelStack);
     const 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: optimizeLabelStack(labelStack, getReactUFOVersion(interaction.type)),
       data: Object.assign(value, data)
     });
     return result;
@@ -395,7 +395,7 @@ function optimizeCustomData(interaction) {
         const label = stringifyLabelStackFully([]);
         const 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: optimizeLabelStack([], getReactUFOVersion(interaction.type)),
           data: Object.assign(labelValue, {
             [key]: value
           })
@@ -407,7 +407,7 @@ function optimizeCustomData(interaction) {
   }
   return [...customDataMap.values()];
 }
-function optimizeReactProfilerTimings(reactProfilerTimings, interactionStart) {
+function optimizeReactProfilerTimings(reactProfilerTimings, interactionStart, reactUFOVersion) {
   const reactProfilerTimingsMap = reactProfilerTimings.reduce((result, {
     labelStack,
     startTime,
@@ -420,7 +420,7 @@ function optimizeReactProfilerTimings(reactProfilerTimings, interactionStart) {
       const start = Math.round(startTime);
       const end = Math.round(commitTime);
       const timing = result.get(label) || {
-        labelStack: optimizeLabelStack(labelStack),
+        labelStack: optimizeLabelStack(labelStack, reactUFOVersion),
         startTime: start,
         endTime: end,
         mountCount: 0,
@@ -467,7 +467,7 @@ function optimizeRedirects(redirects, interactionStart) {
   }, []);
   return updatedRedirects;
 }
-function optimizeHoldInfo(holdInfo, interactionStart) {
+function optimizeHoldInfo(holdInfo, interactionStart, reactUFOVersion) {
   const holdInfoMap = holdInfo.reduce((result, hold) => {
     const {
       labelStack,
@@ -485,7 +485,7 @@ function optimizeHoldInfo(holdInfo, interactionStart) {
       const timing = result.get(label) || {
         labelStack: optimizeLabelStack([...labelStack, {
           name
-        }]),
+        }], reactUFOVersion),
         startTime,
         endTime
       };
@@ -501,7 +501,7 @@ function optimizeHoldInfo(holdInfo, interactionStart) {
   }, new Map());
   return [...holdInfoMap.values()];
 }
-function optimizeSpans(spans, interactionStart) {
+function optimizeSpans(spans, interactionStart, reactUFOVersion) {
   const updatedSpans = spans.reduce((result, span) => {
     const {
       labelStack,
@@ -514,7 +514,7 @@ function optimizeSpans(spans, interactionStart) {
       result.push({
         labelStack: optimizeLabelStack([...labelStack, {
           name
-        }]),
+        }], reactUFOVersion),
         startTime: Math.round(start),
         endTime: Math.round(end),
         type
@@ -524,7 +524,7 @@ function optimizeSpans(spans, interactionStart) {
   }, []);
   return updatedSpans;
 }
-function optimizeRequestInfo(requestInfo, interactionStart) {
+function optimizeRequestInfo(requestInfo, interactionStart, reactUFOVersion) {
   const updatedRequestInfo = requestInfo.reduce((result, reqInfo) => {
     const {
       labelStack,
@@ -540,7 +540,7 @@ function optimizeRequestInfo(requestInfo, interactionStart) {
       result.push({
         labelStack: optimizeLabelStack([...labelStack, {
           name
-        }]),
+        }], reactUFOVersion),
         startTime: Math.round(startTime),
         endTime: Math.round(endTime)
       });
@@ -565,18 +565,18 @@ function optimizeCustomTimings(customTimings, interactionStart) {
     return result;
   }, []);
 }
-function optimizeMarks(marks) {
+function optimizeMarks(marks, reactUFOVersion) {
   return marks.map(({
     labelStack,
     time,
     ...others
   }) => ({
     ...others,
-    labelStack: labelStack && optimizeLabelStack(labelStack),
+    labelStack: labelStack && optimizeLabelStack(labelStack, reactUFOVersion),
     time: Math.round(time)
   }));
 }
-function optimizeApdex(apdex) {
+function optimizeApdex(apdex, reactUFOVersion) {
   return apdex.map(({
     stopTime,
     labelStack,
@@ -585,7 +585,7 @@ function optimizeApdex(apdex) {
     ...others,
     stopTime: Math.round(stopTime),
     ...(labelStack ? {
-      labelStack: optimizeLabelStack(labelStack)
+      labelStack: optimizeLabelStack(labelStack, reactUFOVersion)
     } : {})
   }));
 }
@@ -723,14 +723,14 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
   const pageVisibilityAtTTI = getPageVisibilityUpToTTI(interaction);
   const pageVisibilityAtTTAI = getPageVisibilityUpToTTAI(interaction);
   const segments = config.killswitchNestedSegments ? [] : knownSegments;
-  const segmentTree = REACT_UFO_VERSION === '2.0.0' ? buildSegmentTree(segments.map(segment => segment.labelStack)) : {};
+  const segmentTree = getReactUFOVersion(interaction.type) === '2.0.0' ? buildSegmentTree(segments.map(segment => segment.labelStack)) : {};
   const isDetailedPayload = pageVisibilityAtTTAI === 'visible';
   const isPageLoad = type === 'page_load';
   const calculatePageVisibilityFromTheStartOfPageLoad = config.enableBetterPageVisibilityApi && isPageLoad;
   const moreAccuratePageVisibilityAtTTI = calculatePageVisibilityFromTheStartOfPageLoad ? getMoreAccuratePageVisibilityUpToTTI(interaction) : null;
   const moreAccuratePageVisibilityAtTTAI = calculatePageVisibilityFromTheStartOfPageLoad ? getMoreAccuratePageVisibilityUpToTTAI(interaction) : null;
   const labelStack = interaction.labelStack ? {
-    labelStack: optimizeLabelStack(interaction.labelStack)
+    labelStack: optimizeLabelStack(interaction.labelStack, getReactUFOVersion(interaction.type))
   } : {};
   // Page Load
   const getPageLoadInteractionMetrics = () => {
@@ -762,13 +762,13 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
         ...others
       }) => ({
         ...others,
-        labelStack: labelStack && optimizeLabelStack(labelStack)
+        labelStack: labelStack && optimizeLabelStack(labelStack, getReactUFOVersion(interaction.type))
       })),
       holdActive: [...interaction.holdActive.values()],
       redirects: optimizeRedirects(interaction.redirects, start),
-      holdInfo: optimizeHoldInfo(experimental ? interaction.holdExpInfo : interaction.holdInfo, start),
-      spans: optimizeSpans(spans, start),
-      requestInfo: optimizeRequestInfo(interaction.requestInfo, start),
+      holdInfo: optimizeHoldInfo(experimental ? interaction.holdExpInfo : interaction.holdInfo, start, getReactUFOVersion(interaction.type)),
+      spans: optimizeSpans(spans, start, getReactUFOVersion(interaction.type)),
+      requestInfo: optimizeRequestInfo(interaction.requestInfo, start, getReactUFOVersion(interaction.type)),
       customTimings: optimizeCustomTimings(interaction.customTimings, start),
       bundleEvalTimings: objectToArray(getBundleEvalTimings(start)),
       resourceTimings: objectToArray(resourceTimings)
@@ -808,8 +808,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
         'event:sizeInKb': 0,
         'event:source': {
           name: 'react-ufo/web',
-          version: REACT_UFO_VERSION,
-          payloadSource: 'platform'
+          version: getReactUFOVersion(interaction.type)
         },
         'event:region': config.region || 'unknown',
         'experience:key': experimental ? 'custom.experimental-interaction-metrics' : 'custom.interaction-metrics',
@@ -845,19 +844,19 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
           isPreviousInteractionAborted,
           abortedByInteractionName,
           // performance
-          apdex: optimizeApdex(interaction.apdex),
+          apdex: optimizeApdex(interaction.apdex, getReactUFOVersion(interaction.type)),
           end: Math.round(end),
           start: Math.round(start),
-          segments: REACT_UFO_VERSION === '2.0.0' ? segmentTree : segments.map(({
+          segments: getReactUFOVersion(interaction.type) === '2.0.0' ? segmentTree : segments.map(({
             labelStack,
             ...others
           }) => ({
             ...others,
-            labelStack: optimizeLabelStack(labelStack)
+            labelStack: optimizeLabelStack(labelStack, getReactUFOVersion(interaction.type))
           })),
-          marks: optimizeMarks(interaction.marks),
+          marks: optimizeMarks(interaction.marks, getReactUFOVersion(interaction.type)),
           customData: optimizeCustomData(interaction),
-          reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start),
+          reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start, getReactUFOVersion(interaction.type)),
           ...labelStack,
           ...getPageLoadInteractionMetrics(),
           ...getDetailedInteractionMetrics(resourceTimings),

package/dist/es2019/create-post-interaction-log-payload/index.js

@@ -1,5 +1,5 @@
 import coinflip from '../coinflip';
-import { REACT_UFO_VERSION } from '../common/constants';
+import { getReactUFOVersion } from '../common/constants';
 import { getConfig, getPostInteractionRate } from '../config';
 import { isSegmentLabel, sanitizeUfoName } from '../create-payload/common/utils';
 import { getPageVisibilityState } from '../hidden-timing';
@@ -168,7 +168,7 @@ export default function createPostInteractionLogPayload({
         'event:schema': '1.0.0',
         'event:source': {
           name: 'react-ufo/web',
-          version: REACT_UFO_VERSION,
+          version: getReactUFOVersion(lastInteractionFinish.type),
           payloadSource: 'platform'
         },
         'event:region': config.region || 'unknown',

package/dist/es2019/vc/vc-observer/index.js

@@ -541,7 +541,7 @@ export class VCObserver {
         if ((VC[key] === null || VC[key] === undefined) && VCRatio >= value / 100) {
           var _componentsLog$time;
           VC[key] = time;
-          VCBox[key] = (_componentsLog$time = componentsLog[time]) === null || _componentsLog$time === void 0 ? void 0 : _componentsLog$time.map(v => v.targetName);
+          VCBox[key] = [...new Set((_componentsLog$time = componentsLog[time]) === null || _componentsLog$time === void 0 ? void 0 : _componentsLog$time.map(v => v.targetName))];
         }
       });
       return VCRatio;
@@ -550,7 +550,7 @@ export class VCObserver {
       var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
       const currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
       const currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
-      const logEntry = (_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(v => v.targetName);
+      const logEntry = [...new Set((_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(v => v.targetName))];
       const ratioDelta = (currentlyPaintedRatio - ((_acc$rel$vc = (_acc$rel = acc.rel[i - 1]) === null || _acc$rel === void 0 ? void 0 : _acc$rel.vc) !== null && _acc$rel$vc !== void 0 ? _acc$rel$vc : 0)) / 100;
       if (isCalcSpeedIndexEnabled) {
         const speedIndex = timestamp * ratioDelta;

package/dist/esm/common/constants.js

@@ -1,4 +1,12 @@
 import { fg } from '@atlaskit/platform-feature-flags';
+export var getReactUFOVersion = function getReactUFOVersion(interactionType) {
+  if (interactionType !== 'page_load' && interactionType !== 'transition') {
+    return '1.0.1';
+  }
 
-// eslint-disable-next-line @atlaskit/platform/no-module-level-eval
-export var REACT_UFO_VERSION = fg('enable-react-ufo-payload-segment-compressed') ? '2.0.0' : '1.0.1';
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  if (!fg('enable-react-ufo-payload-segment-compressed')) {
+    return '1.0.1';
+  }
+  return '2.0.0';
+};

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

@@ -1,8 +1,6 @@
 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, '-');
 };
@@ -51,8 +49,8 @@ function getLabelStackReference(labelStack) {
 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) {
+export function optimizeLabelStack(labelStack, reactUFOVersion) {
+  return reactUFOVersion ? getLabelStackReference(labelStack) : labelStack.map(function (ls) {
     return _objectSpread({
       n: ls.name
     }, ls.segmentId ? {