@atlaskit/react-ufo 4.5.12 → 4.6.1

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

@@ -5,6 +5,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SSRPlaceholderHandlers } from '../vc-observer/observers/ssr-placeholders';
 import EntriesTimeline from './entries-timeline';
 import _getElementName from './get-element-name';
@@ -68,18 +69,27 @@ var VCObserverNew = /*#__PURE__*/function () {
         if (element) {
           elementName = _this.getElementName(element);
         }
+        var data = {
+          type: type,
+          elementName: elementName,
+          rect: rect,
+          previousRect: previousRect,
+          visible: visible,
+          attributeName: mutationData === null || mutationData === void 0 ? void 0 : mutationData.attributeName,
+          oldValue: mutationData === null || mutationData === void 0 ? void 0 : mutationData.oldValue,
+          newValue: mutationData === null || mutationData === void 0 ? void 0 : mutationData.newValue
+        };
+        if (element && _this.isPostInteraction && fg('platform_ufo_enable_late_mutation_label_stacks')) {
+          var labelStacks = getLabelStacks(element);
+          if (labelStacks) {
+            Object.assign(data, {
+              labelStacks: labelStacks
+            });
+          }
+        }
         _this.entriesTimeline.push({
           time: time,
-          data: {
-            type: type,
-            elementName: elementName,
-            rect: rect,
-            previousRect: previousRect,
-            visible: visible,
-            attributeName: mutationData === null || mutationData === void 0 ? void 0 : mutationData.attributeName,
-            oldValue: mutationData === null || mutationData === void 0 ? void 0 : mutationData.oldValue,
-            newValue: mutationData === null || mutationData === void 0 ? void 0 : mutationData.newValue
-          }
+          data: data
         });
       },
       // Pass SSR context to ViewportObserver
@@ -302,4 +312,57 @@ var VCObserverNew = /*#__PURE__*/function () {
     }
   }]);
 }();
-export { VCObserverNew as default };
+export { VCObserverNew as default };
+function labelStackFromFiber(fiber) {
+  var _fiber$child;
+  var value = fiber === null || fiber === void 0 || (_fiber$child = fiber.child) === null || _fiber$child === void 0 || (_fiber$child = _fiber$child.memoizedProps) === null || _fiber$child === void 0 ? void 0 : _fiber$child.value;
+  return Array.isArray(value === null || value === void 0 ? void 0 : value.labelStack) ? value.labelStack : [];
+}
+function labelStackToString(labelStack) {
+  return labelStack.map(function (label) {
+    return label.name;
+  }).join('/');
+}
+function labelStackToSegment(labelStack) {
+  var segmentIndex = -1;
+  for (var i = labelStack.length - 1; i >= 0; i--) {
+    if (labelStack[i].segmentId) {
+      segmentIndex = i;
+      break;
+    }
+  }
+  return labelStack.slice(0, segmentIndex + 1).map(function (label) {
+    return label.name;
+  }).join('/');
+}
+function traverseFiber(fiber) {
+  var segment = 'unknown';
+  var labelStackString = 'unknown';
+  var currentFiber = fiber;
+  while (currentFiber) {
+    if (currentFiber.type) {
+      var componentName = currentFiber.type.displayName || currentFiber.type.name;
+      if (componentName === 'UFOSegment' || componentName === 'UFOLabel') {
+        var labelStack = labelStackFromFiber(currentFiber);
+        labelStackString = labelStackToString(labelStack) || 'unknown';
+        segment = labelStackToSegment(labelStack) || 'unknown';
+        break;
+      }
+    }
+    currentFiber = currentFiber.return;
+  }
+  return {
+    segment: segment,
+    labelStack: labelStackString
+  };
+}
+function getLabelStacks(element) {
+  var reactFiberKey = Object.keys(element).find(function (key) {
+    return key.startsWith('__reactFiber$');
+  });
+  if (!reactFiberKey) {
+    return null;
+  }
+  var fiber = element[reactFiberKey];
+  return fiber ? traverseFiber(fiber) : null;
+}

package/dist/esm/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js

@@ -11,6 +11,9 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import { fg } from '@atlaskit/platform-feature-flags';
+import getPageVisibilityUpToTTAI from '../../../create-payload/utils/get-page-visibility-up-to-ttai';
+import { getInteractionId } from '../../../interaction-id-context';
+import { interactions } from '../../../interaction-metrics/common/constants';
 import { cssIssueOccurrence } from '../viewport-observer/utils/track-display-content-occurrence';
 import { calculateTTVCPercentilesWithDebugInfo } from './percentile-calc';
 import getViewportHeight from './utils/get-viewport-height';
@@ -76,12 +79,35 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
       }
       return ratios;
     }
+  }, {
+    key: "getLabelStacks",
+    value: function getLabelStacks(filteredEntries) {
+      var labelStacks = {};
+      var _iterator3 = _createForOfIteratorHelper(filteredEntries),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var _entry2 = _step3.value;
+          if ('elementName' in _entry2.data && _entry2.data.labelStacks) {
+            labelStacks[_entry2.data.elementName] = {
+              segment: _entry2.data.labelStacks.segment,
+              labelStack: _entry2.data.labelStacks.labelStack
+            };
+          }
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      return labelStacks;
+    }
   }, {
     key: "calculateWithDebugInfo",
     value: function () {
       var _calculateWithDebugInfo = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason, allEntries, include3p) {
         var _window, _window2, _window3, _window5;
-        var percentiles, viewportEntries, vcLogs, vcDetails, percentileIndex, entryDataBuffer, _iterator3, _step3, _entry2, time, viewportPercentage, entries, elementNames, previousResult, i, percentile, enhancedVcLogs, shouldCalculate3p, shouldCalculateDebugDetails, sortedVcLogs, maxViewportPercentageAtTime, maxSoFar, _iterator4, _step4, log, getBiggestPreviousViewportPercentage, ignoredEntriesByTime, _iterator5, _step5, _entry3, _ignoredEntriesByTime, viewportData, timestamp, additionalVcLogs, _iterator6, _step6, _step6$value, _timestamp, ignoredEntries, _viewportPercentage, v3RevisionDebugDetails, _window4, _window4$__ufo_devtoo, _window6, _window6$__on_ufo_vc_;
+        var percentiles, viewportEntries, vcLogs, vcDetails, percentileIndex, entryDataBuffer, _iterator4, _step4, _entry3, time, viewportPercentage, entries, elementNames, previousResult, i, percentile, enhancedVcLogs, shouldCalculate3p, shouldCalculateDebugDetails, sortedVcLogs, maxViewportPercentageAtTime, maxSoFar, _iterator5, _step5, log, getBiggestPreviousViewportPercentage, ignoredEntriesByTime, _iterator6, _step6, _entry4, _ignoredEntriesByTime, _viewportData$rect, _viewportData$previou, viewportData, timestamp, additionalVcLogs, _iterator7, _step7, _step7$value, _timestamp, ignoredEntries, _viewportPercentage, v3RevisionDebugDetails, _activeInteractionId$, activeInteractionId, activeInteraction, pageVisibilityUpToTTAI, isBackgrounded, _window4, _window4$__ufo_devtoo, _window6, _window6$__on_ufo_vc_;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -109,16 +135,16 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
                 _context.next = 29;
                 break;
               }
-              _iterator3 = _createForOfIteratorHelper(vcLogs);
+              _iterator4 = _createForOfIteratorHelper(vcLogs);
               _context.prev = 11;
-              _iterator3.s();
+              _iterator4.s();
             case 13:
-              if ((_step3 = _iterator3.n()).done) {
+              if ((_step4 = _iterator4.n()).done) {
                 _context.next = 21;
                 break;
               }
-              _entry2 = _step3.value;
-              time = _entry2.time, viewportPercentage = _entry2.viewportPercentage, entries = _entry2.entries; // Only process entries if we haven't reached all percentiles
+              _entry3 = _step4.value;
+              time = _entry3.time, viewportPercentage = _entry3.viewportPercentage, entries = _entry3.entries; // Only process entries if we haven't reached all percentiles
               if (!(percentileIndex >= percentiles.length)) {
                 _context.next = 18;
                 break;
@@ -155,10 +181,10 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
             case 23:
               _context.prev = 23;
               _context.t0 = _context["catch"](11);
-              _iterator3.e(_context.t0);
+              _iterator4.e(_context.t0);
             case 26:
               _context.prev = 26;
-              _iterator3.f();
+              _iterator4.f();
               return _context.finish(26);
             case 29:
               // Fill in any missing percentiles with the last known values
@@ -175,7 +201,15 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
                 }
               }
               enhancedVcLogs = vcLogs ? vcLogs.map(function (log) {
-                return _objectSpread(_objectSpread({}, log), {}, {
+                return _objectSpread(_objectSpread(_objectSpread({}, log), fg('platform_ufo_serialise_ttvc_v3_debug_data') && {
+                  entries: log.entries.map(function (entry) {
+                    var _entry$rect, _entry$previousRect;
+                    return _objectSpread(_objectSpread({}, entry), {}, {
+                      rect: (_entry$rect = entry.rect) === null || _entry$rect === void 0 ? void 0 : _entry$rect.toJSON(),
+                      previousRect: (_entry$previousRect = entry.previousRect) === null || _entry$previousRect === void 0 ? void 0 : _entry$previousRect.toJSON()
+                    });
+                  })
+                }), {}, {
                   viewportPercentage: log.viewportPercentage
                 });
               }) : []; // If 3p metric enabled - calculate the debug details
@@ -188,10 +222,10 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
                 }); // Pre-calculate max viewport percentage up to each time for efficient lookups
                 maxViewportPercentageAtTime = new Map();
                 maxSoFar = 0;
-                _iterator4 = _createForOfIteratorHelper(sortedVcLogs);
+                _iterator5 = _createForOfIteratorHelper(sortedVcLogs);
                 try {
-                  for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-                    log = _step4.value;
+                  for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+                    log = _step5.value;
                     if (log.viewportPercentage !== null) {
                       maxSoFar = Math.max(maxSoFar, log.viewportPercentage);
                       maxViewportPercentageAtTime.set(log.time, maxSoFar);
@@ -200,9 +234,9 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
 
                   // Helper function to find the biggest previous viewport percentage
                 } catch (err) {
-                  _iterator4.e(err);
+                  _iterator5.e(err);
                 } finally {
-                  _iterator4.f();
+                  _iterator5.f();
                 }
                 getBiggestPreviousViewportPercentage = function getBiggestPreviousViewportPercentage(targetTime) {
                   // Binary search for the largest time <= targetTime
@@ -221,17 +255,20 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
                   return result >= 0 ? maxViewportPercentageAtTime.get(sortedVcLogs[result].time) || null : null;
                 }; // Group ignored entries by timestamp
                 ignoredEntriesByTime = new Map();
-                _iterator5 = _createForOfIteratorHelper(allEntries);
+                _iterator6 = _createForOfIteratorHelper(allEntries);
                 try {
-                  for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-                    _entry3 = _step5.value;
-                    if ('rect' in _entry3.data && !this.isEntryIncluded(_entry3, include3p)) {
-                      viewportData = _entry3.data;
-                      timestamp = Math.round(_entry3.time);
+                  for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+                    _entry4 = _step6.value;
+                    if ('rect' in _entry4.data && !this.isEntryIncluded(_entry4, include3p)) {
+                      viewportData = _entry4.data;
+                      timestamp = Math.round(_entry4.time);
                       if (!ignoredEntriesByTime.has(timestamp)) {
                         ignoredEntriesByTime.set(timestamp, []);
                       }
-                      (_ignoredEntriesByTime = ignoredEntriesByTime.get(timestamp)) === null || _ignoredEntriesByTime === void 0 || _ignoredEntriesByTime.push(_objectSpread(_objectSpread({}, viewportData), {}, {
+                      (_ignoredEntriesByTime = ignoredEntriesByTime.get(timestamp)) === null || _ignoredEntriesByTime === void 0 || _ignoredEntriesByTime.push(_objectSpread(_objectSpread(_objectSpread({}, viewportData), fg('platform_ufo_serialise_ttvc_v3_debug_data') && {
+                        rect: (_viewportData$rect = viewportData.rect) === null || _viewportData$rect === void 0 ? void 0 : _viewportData$rect.toJSON(),
+                        previousRect: (_viewportData$previou = viewportData.previousRect) === null || _viewportData$previou === void 0 ? void 0 : _viewportData$previou.toJSON()
+                      }), {}, {
                         ignoreReason: viewportData.visible ? viewportData.type : 'not-visible'
                       }));
                     }
@@ -239,15 +276,15 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
 
                   // Add ignored entries to vcLogs
                 } catch (err) {
-                  _iterator5.e(err);
+                  _iterator6.e(err);
                 } finally {
-                  _iterator5.f();
+                  _iterator6.f();
                 }
                 additionalVcLogs = [];
-                _iterator6 = _createForOfIteratorHelper(ignoredEntriesByTime);
+                _iterator7 = _createForOfIteratorHelper(ignoredEntriesByTime);
                 try {
-                  for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-                    _step6$value = _slicedToArray(_step6.value, 2), _timestamp = _step6$value[0], ignoredEntries = _step6$value[1];
+                  for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+                    _step7$value = _slicedToArray(_step7.value, 2), _timestamp = _step7$value[0], ignoredEntries = _step7$value[1];
                     if (ignoredEntries.length > 0) {
                       _viewportPercentage = getBiggestPreviousViewportPercentage(_timestamp);
                       additionalVcLogs.push({
@@ -260,9 +297,9 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
 
                   // Combine and sort all vcLogs
                 } catch (err) {
-                  _iterator6.e(err);
+                  _iterator7.e(err);
                 } finally {
-                  _iterator6.f();
+                  _iterator7.f();
                 }
                 enhancedVcLogs = [].concat(_toConsumableArray(enhancedVcLogs), additionalVcLogs).sort(function (a, b) {
                   return a.time - b.time;
@@ -272,13 +309,28 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
               // Only create debug details if callbacks exist
               v3RevisionDebugDetails = null;
               if (shouldCalculateDebugDetails) {
-                v3RevisionDebugDetails = {
-                  revision: this.revisionNo,
-                  isClean: isVCClean,
-                  abortReason: dirtyReason,
-                  vcLogs: enhancedVcLogs,
-                  interactionId: interactionId
-                };
+                if (fg('platform_ufo_unify_abort_status_in_ttvc_debug_data')) {
+                  // NOTE: using this instead of directly calling `getActiveInteraction()` to get around circular dependencies
+                  activeInteractionId = getInteractionId();
+                  activeInteraction = interactions.get((_activeInteractionId$ = activeInteractionId.current) !== null && _activeInteractionId$ !== void 0 ? _activeInteractionId$ : '');
+                  pageVisibilityUpToTTAI = activeInteraction ? getPageVisibilityUpToTTAI(activeInteraction) : null;
+                  isBackgrounded = pageVisibilityUpToTTAI !== 'visible';
+                  v3RevisionDebugDetails = {
+                    revision: this.revisionNo,
+                    isClean: isVCClean && !(activeInteraction !== null && activeInteraction !== void 0 && activeInteraction.abortReason) && !isBackgrounded,
+                    abortReason: isBackgrounded ? 'browser_backgrounded' : dirtyReason !== null && dirtyReason !== void 0 ? dirtyReason : activeInteraction === null || activeInteraction === void 0 ? void 0 : activeInteraction.abortReason,
+                    vcLogs: enhancedVcLogs,
+                    interactionId: interactionId
+                  };
+                } else {
+                  v3RevisionDebugDetails = {
+                    revision: this.revisionNo,
+                    isClean: isVCClean,
+                    abortReason: dirtyReason,
+                    vcLogs: enhancedVcLogs,
+                    interactionId: interactionId
+                  };
+                }
               }
 
               // Handle devtool callback
@@ -362,11 +414,14 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
                 vcDetails: vcDetails !== null && vcDetails !== void 0 ? vcDetails : undefined
               };
               result.ratios = this.calculateRatios(filteredEntries);
+              if (isPostInteraction) {
+                result.labelStacks = this.getLabelStacks(filteredEntries);
+              }
               if (fg('platform_ufo_display_content_track_occurrence')) {
                 result.displayContentsOccurrence = cssIssueOccurrence;
               }
               return _context2.abrupt("return", result);
-            case 14:
+            case 15:
             case "end":
               return _context2.stop();
           }

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

@@ -90,6 +90,10 @@ export type ResponsivenessMetric = {
     visuallyComplete?: number;
     totalBlockingTime?: number;
 };
+export type MinorInteraction = {
+    name: string;
+    startTime: DOMHighResTimeStamp;
+};
 export interface InteractionMetrics {
     id: string;
     start: number;
@@ -170,6 +174,7 @@ export interface InteractionMetrics {
     unknownElementHierarchy?: string;
     hold3pActive?: Map<string, HoldActive>;
     hold3pInfo?: HoldInfo[];
+    minorInteractions?: MinorInteraction[];
 }
 export type LoadProfilerEventInfo = {
     identifier: string;

package/dist/types/common/react-ufo-payload-schema.d.ts

@@ -1,7 +1,7 @@
 import { type createPayloads } from '../create-payload';
 import { type LabelStack } from '../interaction-context';
 import { type VCObserver } from '../vc/vc-observer';
-import type { AbortReasonType, ApdexType, HoldActive, InteractionError, InteractionType, SegmentInfo } from './common/types';
+import type { AbortReasonType, ApdexType, HoldActive, InteractionError, InteractionType, MinorInteraction, SegmentInfo } from './common/types';
 import type { RevisionPayload } from './vc/types';
 type ExtractPromise<T> = T extends Promise<infer U> ? U : never;
 export type PageVisibility = 'hidden' | 'mixed' | 'visible';
@@ -158,6 +158,7 @@ export type ReactUFOPayload = {
                 holdActive: HoldActive[];
                 unknownElementName?: string;
                 unknownElementHierarchy?: string;
+                minorInteractions?: MinorInteraction[];
             };
             'ufo:vc:rev': RevisionPayload;
             'ufo:vc:ratios': Record<string, number>;
@@ -200,6 +201,8 @@ export type LateMutation = {
     time: number;
     element: string;
     viewportHeatmapPercentage: number;
+    segment?: string;
+    labelStack?: string;
 };
 export type PostInteractionLogPayload = {
     actionSubject: 'experience';

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

@@ -14,6 +14,12 @@ export type VCAbortReasonType = {
 export type VCRatioType = {
     [elementName: string]: number;
 };
+export type VCLabelStacks = {
+    [elementName: string]: {
+        segment: string;
+        labelStack: string;
+    };
+};
 export type VCRawDataType = {
     abortReasonInfo: string | null;
     abortReason: VCAbortReasonType;
@@ -114,6 +120,7 @@ export type RevisionPayloadEntry = {
     clean: boolean;
     vcDetails?: RevisionPayloadVCDetails;
     ratios?: VCRatioType;
+    labelStacks?: VCLabelStacks;
     abortReason?: VCAbortReason | null;
     abortTimestamp?: number;
     displayContentsOccurrence?: number;

package/dist/types/config/index.d.ts

@@ -59,6 +59,7 @@ export type ReactHydrationStats = {
 export type Config = {
     readonly enabled?: boolean;
     readonly interactionTimeout?: Record<string, number>;
+    readonly minorInteractions?: string[];
     readonly doNotAbortActivePressInteraction?: string[];
     readonly doNotAbortActivePressInteractionOnTransition?: string[];
     readonly awaitBM3TTI?: string[];
@@ -165,6 +166,7 @@ type ValidTypingMethod = (typeof validTypingMethods)[number];
 export declare function getTypingPerformanceTracingMethod(): ValidTypingMethod;
 export declare function getAwaitBM3TTIList(): string[];
 export declare function getUfoNameOverrides(): UFONameOverride | undefined;
+export declare function getMinorInteractions(): string[] | undefined;
 export declare function getDoNotAbortActivePressInteraction(): string[] | undefined;
 export declare function getDoNotAbortActivePressInteractionOnTransition(): string[] | undefined;
 export declare const CLEANUP_TIMEOUT: number;