@atlaskit/react-ufo 2.4.6 → 2.5.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 2.5.0
+
+### Minor Changes
+
+- [#176642](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/176642)
+  [`66ae71c3d1e72`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/66ae71c3d1e72) -
+  Revert "AFO-3080: NO-ISSUE Experimental UFO holds and TTAI - 2nd iteration"
+
+### Patch Changes
+
+- [#174793](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/174793)
+  [`abbfbb3b49665`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/abbfbb3b49665) -
+  remove VC observations after TTAI
+- Updated dependencies
+
+## 2.4.7
+
+### Patch Changes
+
+- [#175818](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/175818)
+  [`1401a5646d271`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1401a5646d271) -
+  Add experimentalTTAI and experimentalVC90 to custom.post-interaction-log
+- [#173211](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/173211)
+  [`202bc8df0c75a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/202bc8df0c75a) -
+  Experimental UFO holds, VC90 and TTAI metrics
+- [#175826](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/175826)
+  [`b5c5bf59d1cff`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b5c5bf59d1cff) -
+  add rate limiting to experimental interaction metrics
+
 ## 2.4.6
 
 ### Patch Changes

package/dist/cjs/common/constants.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.REACT_UFO_VERSION = void 0;
 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';
+var REACT_UFO_VERSION = exports.REACT_UFO_VERSION = (0, _platformFeatureFlags.fg)('enable-react-ufo-payload-segment-compressed') ? '2.0.0' : '1.0.1';

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

@@ -58,10 +58,7 @@ function removeCascadingParentTimingReport(reactProfilerTimings) {
     if (parentSegmentId) {
       var parentTimings = timingIndex.get(parentSegmentId);
       var filteredParentTimings = parentTimings === null || parentTimings === void 0 ? void 0 : parentTimings.filter(function (parentTiming) {
-        if (parentTiming.startTime === timing.startTime && parentTiming.actualDuration === timing.actualDuration) {
-          return false;
-        }
-        return true;
+        return !(parentTiming.startTime === timing.startTime && parentTiming.actualDuration === timing.actualDuration);
       });
       if (filteredParentTimings) {
         timingIndex.set(parentSegmentId, filteredParentTimings);

package/dist/cjs/interaction-metrics/index.js

@@ -482,7 +482,7 @@ var finishInteraction = function finishInteraction(id, data) {
   (0, _experienceTraceIdContext.clearActiveTrace)();
   callCleanUpCallbacks(data);
   if ((_getConfig3 = (0, _config.getConfig)()) !== null && _getConfig3 !== void 0 && (_getConfig3 = _getConfig3.vc) !== null && _getConfig3 !== void 0 && _getConfig3.stopVCAtInteractionFinish) {
-    data.vc = (0, _vc.getVCObserver)().getVCRawData();
+    data.vc = (0, _vc.getVCObserver)().getVCRawData(data.end);
   }
   remove(id);
   PreviousInteractionLog.name = data.ufoName || 'unknown';

package/dist/cjs/interaction-metrics/post-interaction-log.js

@@ -151,7 +151,9 @@ var PostInteractionLog = exports.default = /*#__PURE__*/function () {
         abortReason = _ref2.abortReason,
         abortedByInteractionName = _ref2.abortedByInteractionName,
         routeName = _ref2.routeName,
-        type = _ref2.type;
+        type = _ref2.type,
+        experimentalTTAI = _ref2.experimentalTTAI,
+        experimentalVC90 = _ref2.experimentalVC90;
       this.lastInteractionFinish = {
         ufoName: ufoName,
         start: start,
@@ -160,7 +162,9 @@ var PostInteractionLog = exports.default = /*#__PURE__*/function () {
         abortReason: abortReason,
         abortedByInteractionName: abortedByInteractionName,
         routeName: routeName,
-        type: type
+        type: type,
+        experimentalTTAI: experimentalTTAI,
+        experimentalVC90: experimentalVC90
       };
       var timeout = ((_getConfig = (0, _config.getConfig)()) === null || _getConfig === void 0 ? void 0 : _getConfig.timeWindowForLateMutationsInMilliseconds) || POST_INTERACTION_LOG_SEND_DEFAULT_TIMEOUT;
       this.sinkTimeoutId = window.setTimeout(function () {

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

@@ -10,6 +10,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _attachAbortListeners = require("./attachAbortListeners");
 var _getViewport = require("./getViewport");
 var _observers = require("./observers");
@@ -70,7 +71,7 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
       var info = _this.abortReason.info !== '' ? " ".concat(_this.abortReason.info) : '';
       return "".concat(_this.abortReason.reason).concat(info);
     });
-    (0, _defineProperty2.default)(this, "getVCRawData", function () {
+    (0, _defineProperty2.default)(this, "getVCRawData", function (stopTime) {
       _this.measureStart();
       if (!_this.active) {
         _this.measureStop();
@@ -79,6 +80,20 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
       _this.stop();
       var abortReasonInfo = _this.getAbortReasonInfo();
       _this.measureStop();
+      var componentsLog = {};
+      if (stopTime && (0, _platformFeatureFlags.fg)('ufo-remove-vc-component-observations-after-ttai')) {
+        Object.entries(_this.componentsLog).forEach(function (_ref3) {
+          var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+            _timestamp = _ref4[0],
+            value = _ref4[1];
+          var timestamp = Number(_timestamp);
+          if (stopTime > timestamp) {
+            componentsLog[timestamp] = value;
+          }
+        });
+      } else {
+        componentsLog = _objectSpread({}, _this.componentsLog);
+      }
       return {
         abortReasonInfo: abortReasonInfo,
         abortReason: _objectSpread({}, _this.abortReason),
@@ -86,25 +101,25 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         heatmapNext: _this.heatmapNext,
         outOfBoundaryInfo: _this.outOfBoundaryInfo,
         totalTime: Math.round(_this.totalTime + _this.observers.getTotalTime()),
-        componentsLog: _objectSpread({}, _this.componentsLog),
+        componentsLog: componentsLog,
         viewport: _objectSpread({}, _this.viewport),
         oldDomUpdatesEnabled: _this.oldDomUpdatesEnabled,
         devToolsEnabled: _this.devToolsEnabled,
         ratios: _this.vcRatios
       };
     });
-    (0, _defineProperty2.default)(this, "getVCResult", function (_ref3) {
+    (0, _defineProperty2.default)(this, "getVCResult", function (_ref5) {
       var _objectSpread2, _objectSpread3;
-      var start = _ref3.start,
-        stop = _ref3.stop,
-        tti = _ref3.tti,
-        prefix = _ref3.prefix,
-        ssr = _ref3.ssr,
-        vc = _ref3.vc;
+      var start = _ref5.start,
+        stop = _ref5.stop,
+        tti = _ref5.tti,
+        prefix = _ref5.prefix,
+        ssr = _ref5.ssr,
+        vc = _ref5.vc;
       var startTime = performance.now();
       // add local measurement
       var fullPrefix = prefix !== undefined && prefix !== '' ? "".concat(prefix, ":") : '';
-      var rawData = vc !== undefined ? vc : _this.getVCRawData();
+      var rawData = vc !== undefined ? vc : _this.getVCRawData(stop);
       if (rawData === null) {
         return {};
       }
@@ -119,14 +134,14 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         devToolsEnabled = rawData.devToolsEnabled,
         ratios = rawData.ratios;
       if (abortReasonInfo !== null && abortReason.blocking) {
-        var _ref4;
+        var _ref6;
         // exposing data to devtools
         try {
           if (devToolsEnabled && !_this.isPostInteraction) {
             window.__vcNotAvailableReason = abortReasonInfo;
           }
         } catch (e) {}
-        return _ref4 = {}, (0, _defineProperty2.default)(_ref4, "".concat(fullPrefix, "vc:state"), false), (0, _defineProperty2.default)(_ref4, "".concat(fullPrefix, "vc:abort:reason"), abortReasonInfo), (0, _defineProperty2.default)(_ref4, "".concat(fullPrefix, "vc:abort:timestamp"), abortReason.timestamp), _ref4;
+        return _ref6 = {}, (0, _defineProperty2.default)(_ref6, "".concat(fullPrefix, "vc:state"), false), (0, _defineProperty2.default)(_ref6, "".concat(fullPrefix, "vc:abort:reason"), abortReasonInfo), (0, _defineProperty2.default)(_ref6, "".concat(fullPrefix, "vc:abort:timestamp"), abortReason.timestamp), _ref6;
       }
       var _VCObserver$calculate = VCObserver.calculateVC({
           heatmap: heatmap,
@@ -281,10 +296,10 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
       var unbinds = (0, _attachAbortListeners.attachAbortListeners)(window, _this.viewport, _this.abortReasonCallback);
       if ((_window = window) !== null && _window !== void 0 && _window.__SSR_ABORT_LISTENERS__) {
         var _window2;
-        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref6) {
-          var _ref7 = (0, _slicedToArray2.default)(_ref6, 2),
-            key = _ref7[0],
-            time = _ref7[1];
+        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref8) {
+          var _ref9 = (0, _slicedToArray2.default)(_ref8, 2),
+            key = _ref9[0],
+            time = _ref9[1];
           if (time) {
             _this.abortReasonCallback(key, time);
           }
@@ -312,8 +327,8 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
   }
   (0, _createClass2.default)(VCObserver, [{
     key: "start",
-    value: function start(_ref8) {
-      var startTime = _ref8.startTime;
+    value: function start(_ref10) {
+      var startTime = _ref10.startTime;
       this.active = true;
       if (this.observers.isBrowserSupported()) {
         this.setViewportSize();
@@ -335,12 +350,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
   }, {
     key: "getIgnoredElements",
     value: function getIgnoredElements(componentsLog) {
-      return Object.values(componentsLog).flat().filter(function (_ref9) {
-        var ignoreReason = _ref9.ignoreReason;
+      return Object.values(componentsLog).flat().filter(function (_ref11) {
+        var ignoreReason = _ref11.ignoreReason;
         return Boolean(ignoreReason);
-      }).map(function (_ref10) {
-        var targetName = _ref10.targetName,
-          ignoreReason = _ref10.ignoreReason;
+      }).map(function (_ref12) {
+        var targetName = _ref12.targetName,
+          ignoreReason = _ref12.ignoreReason;
         return {
           targetName: targetName,
           ignoreReason: ignoreReason
@@ -461,12 +476,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
     }
   }], [{
     key: "calculateVC",
-    value: function calculateVC(_ref11) {
-      var heatmap = _ref11.heatmap,
-        _ref11$ssr = _ref11.ssr,
-        ssr = _ref11$ssr === void 0 ? UNUSED_SECTOR : _ref11$ssr,
-        componentsLog = _ref11.componentsLog,
-        viewport = _ref11.viewport;
+    value: function calculateVC(_ref13) {
+      var heatmap = _ref13.heatmap,
+        _ref13$ssr = _ref13.ssr,
+        ssr = _ref13$ssr === void 0 ? UNUSED_SECTOR : _ref13$ssr,
+        componentsLog = _ref13.componentsLog,
+        viewport = _ref13.viewport;
       var lastUpdate = {};
       var totalPainted = 0;
       if (ssr !== UNUSED_SECTOR) {
@@ -526,11 +541,11 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         });
         return VCRatio;
       }, 0);
-      var VCEntries = entries.reduce(function (acc, _ref12, i) {
+      var VCEntries = entries.reduce(function (acc, _ref14, i) {
         var _acc$abs, _componentsLog$timest;
-        var _ref13 = (0, _slicedToArray2.default)(_ref12, 2),
-          timestamp = _ref13[0],
-          entryPainted = _ref13[1];
+        var _ref15 = (0, _slicedToArray2.default)(_ref14, 2),
+          timestamp = _ref15[0],
+          entryPainted = _ref15[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) {

package/dist/es2019/common/constants.js

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

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

@@ -47,10 +47,7 @@ function removeCascadingParentTimingReport(reactProfilerTimings) {
     if (parentSegmentId) {
       const parentTimings = timingIndex.get(parentSegmentId);
       const filteredParentTimings = parentTimings === null || parentTimings === void 0 ? void 0 : parentTimings.filter(parentTiming => {
-        if (parentTiming.startTime === timing.startTime && parentTiming.actualDuration === timing.actualDuration) {
-          return false;
-        }
-        return true;
+        return !(parentTiming.startTime === timing.startTime && parentTiming.actualDuration === timing.actualDuration);
       });
       if (filteredParentTimings) {
         timingIndex.set(parentSegmentId, filteredParentTimings);

package/dist/es2019/interaction-metrics/index.js

@@ -411,7 +411,7 @@ const finishInteraction = (id, data, endTime = performance.now()) => {
   clearActiveTrace();
   callCleanUpCallbacks(data);
   if ((_getConfig3 = getConfig()) !== null && _getConfig3 !== void 0 && (_getConfig3$vc = _getConfig3.vc) !== null && _getConfig3$vc !== void 0 && _getConfig3$vc.stopVCAtInteractionFinish) {
-    data.vc = getVCObserver().getVCRawData();
+    data.vc = getVCObserver().getVCRawData(data.end);
   }
   remove(id);
   PreviousInteractionLog.name = data.ufoName || 'unknown';

package/dist/es2019/interaction-metrics/post-interaction-log.js

@@ -121,7 +121,9 @@ export default class PostInteractionLog {
     abortReason,
     abortedByInteractionName,
     routeName,
-    type
+    type,
+    experimentalTTAI,
+    experimentalVC90
   }) {
     var _getConfig;
     this.lastInteractionFinish = {
@@ -132,7 +134,9 @@ export default class PostInteractionLog {
       abortReason,
       abortedByInteractionName,
       routeName,
-      type
+      type,
+      experimentalTTAI,
+      experimentalVC90
     };
     const timeout = ((_getConfig = getConfig()) === null || _getConfig === void 0 ? void 0 : _getConfig.timeWindowForLateMutationsInMilliseconds) || POST_INTERACTION_LOG_SEND_DEFAULT_TIMEOUT;
     this.sinkTimeoutId = window.setTimeout(() => {

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

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { attachAbortListeners } from './attachAbortListeners';
 import { getViewportHeight, getViewportWidth } from './getViewport';
 import { Observers } from './observers';
@@ -51,7 +52,7 @@ export class VCObserver {
       const info = this.abortReason.info !== '' ? ` ${this.abortReason.info}` : '';
       return `${this.abortReason.reason}${info}`;
     });
-    _defineProperty(this, "getVCRawData", () => {
+    _defineProperty(this, "getVCRawData", stopTime => {
       this.measureStart();
       if (!this.active) {
         this.measureStop();
@@ -60,6 +61,19 @@ export class VCObserver {
       this.stop();
       const abortReasonInfo = this.getAbortReasonInfo();
       this.measureStop();
+      let componentsLog = {};
+      if (stopTime && fg('ufo-remove-vc-component-observations-after-ttai')) {
+        Object.entries(this.componentsLog).forEach(([_timestamp, value]) => {
+          const timestamp = Number(_timestamp);
+          if (stopTime > timestamp) {
+            componentsLog[timestamp] = value;
+          }
+        });
+      } else {
+        componentsLog = {
+          ...this.componentsLog
+        };
+      }
       return {
         abortReasonInfo,
         abortReason: {
@@ -69,9 +83,7 @@ export class VCObserver {
         heatmapNext: this.heatmapNext,
         outOfBoundaryInfo: this.outOfBoundaryInfo,
         totalTime: Math.round(this.totalTime + this.observers.getTotalTime()),
-        componentsLog: {
-          ...this.componentsLog
-        },
+        componentsLog,
         viewport: {
           ...this.viewport
         },
@@ -91,7 +103,7 @@ export class VCObserver {
       const startTime = performance.now();
       // add local measurement
       const fullPrefix = prefix !== undefined && prefix !== '' ? `${prefix}:` : '';
-      const rawData = vc !== undefined ? vc : this.getVCRawData();
+      const rawData = vc !== undefined ? vc : this.getVCRawData(stop);
       if (rawData === null) {
         return {};
       }

package/dist/esm/common/constants.js

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

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

@@ -51,10 +51,7 @@ function removeCascadingParentTimingReport(reactProfilerTimings) {
     if (parentSegmentId) {
       var parentTimings = timingIndex.get(parentSegmentId);
       var filteredParentTimings = parentTimings === null || parentTimings === void 0 ? void 0 : parentTimings.filter(function (parentTiming) {
-        if (parentTiming.startTime === timing.startTime && parentTiming.actualDuration === timing.actualDuration) {
-          return false;
-        }
-        return true;
+        return !(parentTiming.startTime === timing.startTime && parentTiming.actualDuration === timing.actualDuration);
       });
       if (filteredParentTimings) {
         timingIndex.set(parentSegmentId, filteredParentTimings);

package/dist/esm/interaction-metrics/index.js

@@ -439,7 +439,7 @@ var finishInteraction = function finishInteraction(id, data) {
   clearActiveTrace();
   callCleanUpCallbacks(data);
   if ((_getConfig3 = getConfig()) !== null && _getConfig3 !== void 0 && (_getConfig3 = _getConfig3.vc) !== null && _getConfig3 !== void 0 && _getConfig3.stopVCAtInteractionFinish) {
-    data.vc = getVCObserver().getVCRawData();
+    data.vc = getVCObserver().getVCRawData(data.end);
   }
   remove(id);
   PreviousInteractionLog.name = data.ufoName || 'unknown';

package/dist/esm/interaction-metrics/post-interaction-log.js

@@ -144,7 +144,9 @@ var PostInteractionLog = /*#__PURE__*/function () {
         abortReason = _ref2.abortReason,
         abortedByInteractionName = _ref2.abortedByInteractionName,
         routeName = _ref2.routeName,
-        type = _ref2.type;
+        type = _ref2.type,
+        experimentalTTAI = _ref2.experimentalTTAI,
+        experimentalVC90 = _ref2.experimentalVC90;
       this.lastInteractionFinish = {
         ufoName: ufoName,
         start: start,
@@ -153,7 +155,9 @@ var PostInteractionLog = /*#__PURE__*/function () {
         abortReason: abortReason,
         abortedByInteractionName: abortedByInteractionName,
         routeName: routeName,
-        type: type
+        type: type,
+        experimentalTTAI: experimentalTTAI,
+        experimentalVC90: experimentalVC90
       };
       var timeout = ((_getConfig = getConfig()) === null || _getConfig === void 0 ? void 0 : _getConfig.timeWindowForLateMutationsInMilliseconds) || POST_INTERACTION_LOG_SEND_DEFAULT_TIMEOUT;
       this.sinkTimeoutId = window.setTimeout(function () {

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

@@ -6,6 +6,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["__debug__element"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { fg } from '@atlaskit/platform-feature-flags';
 import { attachAbortListeners } from './attachAbortListeners';
 import { getViewportHeight, getViewportWidth } from './getViewport';
 import { Observers } from './observers';
@@ -63,7 +64,7 @@ export var VCObserver = /*#__PURE__*/function () {
       var info = _this.abortReason.info !== '' ? " ".concat(_this.abortReason.info) : '';
       return "".concat(_this.abortReason.reason).concat(info);
     });
-    _defineProperty(this, "getVCRawData", function () {
+    _defineProperty(this, "getVCRawData", function (stopTime) {
       _this.measureStart();
       if (!_this.active) {
         _this.measureStop();
@@ -72,6 +73,20 @@ export var VCObserver = /*#__PURE__*/function () {
       _this.stop();
       var abortReasonInfo = _this.getAbortReasonInfo();
       _this.measureStop();
+      var componentsLog = {};
+      if (stopTime && fg('ufo-remove-vc-component-observations-after-ttai')) {
+        Object.entries(_this.componentsLog).forEach(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 2),
+            _timestamp = _ref4[0],
+            value = _ref4[1];
+          var timestamp = Number(_timestamp);
+          if (stopTime > timestamp) {
+            componentsLog[timestamp] = value;
+          }
+        });
+      } else {
+        componentsLog = _objectSpread({}, _this.componentsLog);
+      }
       return {
         abortReasonInfo: abortReasonInfo,
         abortReason: _objectSpread({}, _this.abortReason),
@@ -79,25 +94,25 @@ export var VCObserver = /*#__PURE__*/function () {
         heatmapNext: _this.heatmapNext,
         outOfBoundaryInfo: _this.outOfBoundaryInfo,
         totalTime: Math.round(_this.totalTime + _this.observers.getTotalTime()),
-        componentsLog: _objectSpread({}, _this.componentsLog),
+        componentsLog: componentsLog,
         viewport: _objectSpread({}, _this.viewport),
         oldDomUpdatesEnabled: _this.oldDomUpdatesEnabled,
         devToolsEnabled: _this.devToolsEnabled,
         ratios: _this.vcRatios
       };
     });
-    _defineProperty(this, "getVCResult", function (_ref3) {
+    _defineProperty(this, "getVCResult", function (_ref5) {
       var _objectSpread2, _objectSpread3;
-      var start = _ref3.start,
-        stop = _ref3.stop,
-        tti = _ref3.tti,
-        prefix = _ref3.prefix,
-        ssr = _ref3.ssr,
-        vc = _ref3.vc;
+      var start = _ref5.start,
+        stop = _ref5.stop,
+        tti = _ref5.tti,
+        prefix = _ref5.prefix,
+        ssr = _ref5.ssr,
+        vc = _ref5.vc;
       var startTime = performance.now();
       // add local measurement
       var fullPrefix = prefix !== undefined && prefix !== '' ? "".concat(prefix, ":") : '';
-      var rawData = vc !== undefined ? vc : _this.getVCRawData();
+      var rawData = vc !== undefined ? vc : _this.getVCRawData(stop);
       if (rawData === null) {
         return {};
       }
@@ -112,14 +127,14 @@ export var VCObserver = /*#__PURE__*/function () {
         devToolsEnabled = rawData.devToolsEnabled,
         ratios = rawData.ratios;
       if (abortReasonInfo !== null && abortReason.blocking) {
-        var _ref4;
+        var _ref6;
         // exposing data to devtools
         try {
           if (devToolsEnabled && !_this.isPostInteraction) {
             window.__vcNotAvailableReason = abortReasonInfo;
           }
         } catch (e) {}
-        return _ref4 = {}, _defineProperty(_ref4, "".concat(fullPrefix, "vc:state"), false), _defineProperty(_ref4, "".concat(fullPrefix, "vc:abort:reason"), abortReasonInfo), _defineProperty(_ref4, "".concat(fullPrefix, "vc:abort:timestamp"), abortReason.timestamp), _ref4;
+        return _ref6 = {}, _defineProperty(_ref6, "".concat(fullPrefix, "vc:state"), false), _defineProperty(_ref6, "".concat(fullPrefix, "vc:abort:reason"), abortReasonInfo), _defineProperty(_ref6, "".concat(fullPrefix, "vc:abort:timestamp"), abortReason.timestamp), _ref6;
       }
       var _VCObserver$calculate = VCObserver.calculateVC({
           heatmap: heatmap,
@@ -274,10 +289,10 @@ export var VCObserver = /*#__PURE__*/function () {
       var unbinds = attachAbortListeners(window, _this.viewport, _this.abortReasonCallback);
       if ((_window = window) !== null && _window !== void 0 && _window.__SSR_ABORT_LISTENERS__) {
         var _window2;
-        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref6) {
-          var _ref7 = _slicedToArray(_ref6, 2),
-            key = _ref7[0],
-            time = _ref7[1];
+        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref8) {
+          var _ref9 = _slicedToArray(_ref8, 2),
+            key = _ref9[0],
+            time = _ref9[1];
           if (time) {
             _this.abortReasonCallback(key, time);
           }
@@ -305,8 +320,8 @@ export var VCObserver = /*#__PURE__*/function () {
   }
   _createClass(VCObserver, [{
     key: "start",
-    value: function start(_ref8) {
-      var startTime = _ref8.startTime;
+    value: function start(_ref10) {
+      var startTime = _ref10.startTime;
       this.active = true;
       if (this.observers.isBrowserSupported()) {
         this.setViewportSize();
@@ -328,12 +343,12 @@ export var VCObserver = /*#__PURE__*/function () {
   }, {
     key: "getIgnoredElements",
     value: function getIgnoredElements(componentsLog) {
-      return Object.values(componentsLog).flat().filter(function (_ref9) {
-        var ignoreReason = _ref9.ignoreReason;
+      return Object.values(componentsLog).flat().filter(function (_ref11) {
+        var ignoreReason = _ref11.ignoreReason;
         return Boolean(ignoreReason);
-      }).map(function (_ref10) {
-        var targetName = _ref10.targetName,
-          ignoreReason = _ref10.ignoreReason;
+      }).map(function (_ref12) {
+        var targetName = _ref12.targetName,
+          ignoreReason = _ref12.ignoreReason;
         return {
           targetName: targetName,
           ignoreReason: ignoreReason
@@ -454,12 +469,12 @@ export var VCObserver = /*#__PURE__*/function () {
     }
   }], [{
     key: "calculateVC",
-    value: function calculateVC(_ref11) {
-      var heatmap = _ref11.heatmap,
-        _ref11$ssr = _ref11.ssr,
-        ssr = _ref11$ssr === void 0 ? UNUSED_SECTOR : _ref11$ssr,
-        componentsLog = _ref11.componentsLog,
-        viewport = _ref11.viewport;
+    value: function calculateVC(_ref13) {
+      var heatmap = _ref13.heatmap,
+        _ref13$ssr = _ref13.ssr,
+        ssr = _ref13$ssr === void 0 ? UNUSED_SECTOR : _ref13$ssr,
+        componentsLog = _ref13.componentsLog,
+        viewport = _ref13.viewport;
       var lastUpdate = {};
       var totalPainted = 0;
       if (ssr !== UNUSED_SECTOR) {
@@ -519,11 +534,11 @@ export var VCObserver = /*#__PURE__*/function () {
         });
         return VCRatio;
       }, 0);
-      var VCEntries = entries.reduce(function (acc, _ref12, i) {
+      var VCEntries = entries.reduce(function (acc, _ref14, i) {
         var _acc$abs, _componentsLog$timest;
-        var _ref13 = _slicedToArray(_ref12, 2),
-          timestamp = _ref13[0],
-          entryPainted = _ref13[1];
+        var _ref15 = _slicedToArray(_ref14, 2),
+          timestamp = _ref15[0],
+          entryPainted = _ref15[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) {

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

@@ -150,6 +150,8 @@ export interface InteractionMetrics {
     trace: TraceIdContext | null;
     legacyMetrics?: BM3Event[];
     vc?: VCRawDataType | null;
+    experimentalTTAI?: number;
+    experimentalVC90?: number;
 }
 export type LoadProfilerEventInfo = {
     identifier: string;
@@ -191,7 +193,7 @@ export type BM3Event = {
     pageVisibleState?: string;
     type: string;
 };
-export type LastInteractionFinishInfo = Pick<InteractionMetrics, 'ufoName' | 'start' | 'end' | 'id' | 'abortReason' | 'abortedByInteractionName' | 'routeName' | 'type'>;
+export type LastInteractionFinishInfo = Pick<InteractionMetrics, 'ufoName' | 'start' | 'end' | 'id' | 'abortReason' | 'abortedByInteractionName' | 'routeName' | 'type' | 'experimentalVC90' | 'experimentalTTAI'>;
 export type PostInteractionLogOutput = {
     lastInteractionFinish: LastInteractionFinishInfo;
     reactProfilerTimings?: ReactProfilerTiming[];

package/dist/types/create-post-interaction-log-payload/index.d.ts

@@ -30,6 +30,8 @@ export default function createPostInteractionLogPayload({ lastInteractionFinish,
                     abortReason?: import("../common").AbortReasonType | undefined;
                     abortedByInteractionName?: string | undefined;
                     routeName: string | null;
+                    experimentalVC90?: number | undefined;
+                    experimentalTTAI?: number | undefined;
                 };
                 revisedEndTime: number;
                 revisedTtai: number;

package/dist/types/interaction-metrics/post-interaction-log.d.ts

@@ -61,7 +61,7 @@ export default class PostInteractionLog {
      * Basic details about the finished interaction will be recorded
      * A timeout will be setup to send the post interaction observation after some time.
      */
-    onInteractionComplete({ ufoName, start, end, id, abortReason, abortedByInteractionName, routeName, type, }: LastInteractionFinishInfo): void;
+    onInteractionComplete({ ufoName, start, end, id, abortReason, abortedByInteractionName, routeName, type, experimentalTTAI, experimentalVC90, }: LastInteractionFinishInfo): void;
     /**
      * This fn should be invoked when a React render happens after interaction has finished
      */

package/dist/types/vc/vc-observer/index.d.ts

@@ -48,7 +48,7 @@ export declare class VCObserver {
     }): void;
     stop(): void;
     getAbortReasonInfo: () => string | null;
-    getVCRawData: () => VCRawDataType | null;
+    getVCRawData: (stopTime?: number) => VCRawDataType | null;
     getIgnoredElements(componentsLog: ComponentsLogType): {
         targetName: string;
         ignoreReason: VCIgnoreReason | undefined;

package/dist/types-ts4.5/common/common/types.d.ts

@@ -150,6 +150,8 @@ export interface InteractionMetrics {
     trace: TraceIdContext | null;
     legacyMetrics?: BM3Event[];
     vc?: VCRawDataType | null;
+    experimentalTTAI?: number;
+    experimentalVC90?: number;
 }
 export type LoadProfilerEventInfo = {
     identifier: string;
@@ -191,7 +193,7 @@ export type BM3Event = {
     pageVisibleState?: string;
     type: string;
 };
-export type LastInteractionFinishInfo = Pick<InteractionMetrics, 'ufoName' | 'start' | 'end' | 'id' | 'abortReason' | 'abortedByInteractionName' | 'routeName' | 'type'>;
+export type LastInteractionFinishInfo = Pick<InteractionMetrics, 'ufoName' | 'start' | 'end' | 'id' | 'abortReason' | 'abortedByInteractionName' | 'routeName' | 'type' | 'experimentalVC90' | 'experimentalTTAI'>;
 export type PostInteractionLogOutput = {
     lastInteractionFinish: LastInteractionFinishInfo;
     reactProfilerTimings?: ReactProfilerTiming[];

package/dist/types-ts4.5/create-post-interaction-log-payload/index.d.ts

@@ -30,6 +30,8 @@ export default function createPostInteractionLogPayload({ lastInteractionFinish,
                     abortReason?: import("../common").AbortReasonType | undefined;
                     abortedByInteractionName?: string | undefined;
                     routeName: string | null;
+                    experimentalVC90?: number | undefined;
+                    experimentalTTAI?: number | undefined;
                 };
                 revisedEndTime: number;
                 revisedTtai: number;

package/dist/types-ts4.5/interaction-metrics/post-interaction-log.d.ts

@@ -61,7 +61,7 @@ export default class PostInteractionLog {
      * Basic details about the finished interaction will be recorded
      * A timeout will be setup to send the post interaction observation after some time.
      */
-    onInteractionComplete({ ufoName, start, end, id, abortReason, abortedByInteractionName, routeName, type, }: LastInteractionFinishInfo): void;
+    onInteractionComplete({ ufoName, start, end, id, abortReason, abortedByInteractionName, routeName, type, experimentalTTAI, experimentalVC90, }: LastInteractionFinishInfo): void;
     /**
      * This fn should be invoked when a React render happens after interaction has finished
      */

package/dist/types-ts4.5/vc/vc-observer/index.d.ts

@@ -48,7 +48,7 @@ export declare class VCObserver {
     }): void;
     stop(): void;
     getAbortReasonInfo: () => string | null;
-    getVCRawData: () => VCRawDataType | null;
+    getVCRawData: (stopTime?: number) => VCRawDataType | null;
     getIgnoredElements(componentsLog: ComponentsLogType): {
         targetName: string;
         ignoreReason: VCIgnoreReason | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "2.4.6",
+	"version": "2.5.0",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -73,7 +73,7 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/interaction-context": "^2.1.4",
+		"@atlaskit/interaction-context": "^2.2.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0",
@@ -136,11 +136,14 @@
 		"platform-ufo-vc-observe-attributes": {
 			"type": "boolean"
 		},
-		"react-ufo-payload-segment-compressed": {
+		"enable-react-ufo-payload-segment-compressed": {
 			"type": "boolean"
 		},
 		"ufo_capture_stylesheet_metrics": {
 			"type": "boolean"
+		},
+		"ufo-remove-vc-component-observations-after-ttai": {
+			"type": "boolean"
 		}
 	}
 }