@atlaskit/react-ufo 3.13.26 → 3.13.28

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.13.28
+
+### Patch Changes
+
+- [#173121](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/173121)
+  [`0d5a766d0f501`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d5a766d0f501) -
+  Track unknown interactions elements
+
+## 3.13.27
+
+### Patch Changes
+
+- [#175316](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175316)
+  [`a2a93696df1b8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a2a93696df1b8) -
+  Add extra non-visual attributes to UFO ignore list
+- [#173438](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/173438)
+  [`03117ec2ea74c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/03117ec2ea74c) -
+  Update README
+
 ## 3.13.26
 
 ### Patch Changes

package/README.md

@@ -10,7 +10,7 @@ Parts of React UFO that need to be scoped within @atlaskit
 
 In one terminal:
 
-```
+```shell
 cd platform && nvm use && yarn
 yarn start:rspack react-ufo
 ```
@@ -19,7 +19,7 @@ This will start the dev server, accessible via http://localhost:9000.
 
 Then in a separate terminal:
 
-```
+```shell
 cd platform && nvm use
 yarn test:integration packages/react-ufo/atlaskit/__tests__/ --retries 0 --reporter list --reuse-dev-server --project=desktop-chromium --max-failures=0
 ```
@@ -35,6 +35,6 @@ increase the following:
 
 Example:
 
-```
+```shell
 yarn test:integration packages/react-ufo/atlaskit/__tests__/playwright/base.spec.ts --retries 0 --reporter list --reuse-dev-server --project=desktop-chromium --max-failures=0 --repeat-each 50 --workers 50
 ```

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

@@ -709,7 +709,7 @@ function createInteractionMetricsPayload(_x3, _x4, _x5) {
 function _createInteractionMetricsPayload() {
   _createInteractionMetricsPayload = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(interaction, interactionId, experimental) {
     var _window$location, _config$additionalPay;
-    var interactionPayloadStart, config, end, start, ufoName, knownSegments, rate, type, abortReason, routeName, featureFlags, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, responsiveness, pageVisibilityAtTTI, pageVisibilityAtTTAI, segments, segmentTree, isDetailedPayload, isPageLoad, calculatePageVisibilityFromTheStartOfPageLoad, moreAccuratePageVisibilityAtTTI, moreAccuratePageVisibilityAtTTAI, labelStack, getInitialPageLoadSSRMetrics, pageLoadInteractionMetrics, getDetailedInteractionMetrics, getPageLoadDetailedInteractionMetrics, newUFOName, resourceTimings, _yield$Promise$all, _yield$Promise$all2, vcMetrics, experimentalMetrics, paintMetrics, payload;
+    var interactionPayloadStart, config, end, start, ufoName, knownSegments, rate, type, abortReason, routeName, featureFlags, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, responsiveness, unknownElementName, unknownElementHierarchy, pageVisibilityAtTTI, pageVisibilityAtTTAI, segments, segmentTree, isDetailedPayload, isPageLoad, calculatePageVisibilityFromTheStartOfPageLoad, moreAccuratePageVisibilityAtTTI, moreAccuratePageVisibilityAtTTAI, labelStack, getInitialPageLoadSSRMetrics, pageLoadInteractionMetrics, getDetailedInteractionMetrics, getPageLoadDetailedInteractionMetrics, newUFOName, resourceTimings, _yield$Promise$all, _yield$Promise$all2, vcMetrics, experimentalMetrics, paintMetrics, payload;
     return _regenerator.default.wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
@@ -721,7 +721,7 @@ function _createInteractionMetricsPayload() {
           }
           throw Error('UFO Configuration not provided');
         case 4:
-          end = interaction.end, start = interaction.start, ufoName = interaction.ufoName, knownSegments = interaction.knownSegments, rate = interaction.rate, type = interaction.type, abortReason = interaction.abortReason, routeName = interaction.routeName, featureFlags = interaction.featureFlags, previousInteractionName = interaction.previousInteractionName, isPreviousInteractionAborted = interaction.isPreviousInteractionAborted, abortedByInteractionName = interaction.abortedByInteractionName, responsiveness = interaction.responsiveness;
+          end = interaction.end, start = interaction.start, ufoName = interaction.ufoName, knownSegments = interaction.knownSegments, rate = interaction.rate, type = interaction.type, abortReason = interaction.abortReason, routeName = interaction.routeName, featureFlags = interaction.featureFlags, previousInteractionName = interaction.previousInteractionName, isPreviousInteractionAborted = interaction.isPreviousInteractionAborted, abortedByInteractionName = interaction.abortedByInteractionName, responsiveness = interaction.responsiveness, unknownElementName = interaction.unknownElementName, unknownElementHierarchy = interaction.unknownElementHierarchy;
           pageVisibilityAtTTI = getPageVisibilityUpToTTI(interaction);
           pageVisibilityAtTTAI = (0, _getPageVisibilityUpToTtai.default)(interaction);
           segments = config.killswitchNestedSegments ? [] : knownSegments;
@@ -825,7 +825,7 @@ function _createInteractionMetricsPayload() {
               }, (0, _platformFeatureFlags.fg)('platform_ufo_report_cpu_usage') ? {
                 'event:cpu:usage': (0, _machineUtilisation.createPressureStateReport)(interaction.start, interaction.end)
               } : {}), getBrowserMetadata()), getSSRProperties(type)), getAssetsMetrics(interaction, pageLoadInteractionMetrics === null || pageLoadInteractionMetrics === void 0 ? void 0 : pageLoadInteractionMetrics.SSRDoneTime)), getPPSMetrics(interaction)), paintMetrics), getNavigationMetrics(type)), vcMetrics), experimentalMetrics), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), getStylesheetMetrics()), getErrorCounts(interaction)), {}, {
-                interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+                interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
                   namePrefix: config.namePrefix || '',
                   segmentPrefix: config.segmentPrefix || '',
                   interactionId: interactionId,
@@ -861,7 +861,11 @@ function _createInteractionMetricsPayload() {
                 } : {}), labelStack), pageLoadInteractionMetrics), getDetailedInteractionMetrics(resourceTimings)), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)), {}, {
                   'metric:ttai': experimental ? regularTTAI || expTTAI : undefined,
                   'metric:experimental:ttai': expTTAI
-                }),
+                }, unknownElementName ? {
+                  unknownElementName: unknownElementName
+                } : {}), unknownElementHierarchy ? {
+                  unknownElementHierarchy: unknownElementHierarchy
+                } : {}),
                 'ufo:payloadTime': (0, _roundNumber.roundEpsilon)(performance.now() - interactionPayloadStart)
               })
             }

package/dist/cjs/interactions-performance-observer/index.js

@@ -6,13 +6,67 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.setInteractionPerformanceEvent = exports.getPerformanceObserver = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _interactionMetrics = require("../interaction-metrics");
+var _getUniqueElementName = _interopRequireDefault(require("../vc/vc-observer-new/get-unique-element-name"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 var performanceEventObserver;
+var selectorConfig = {
+  id: true,
+  testId: true,
+  role: true,
+  className: true
+};
+function getTestIdName(memoizedProps) {
+  if (memoizedProps['data-testid']) {
+    return "[data-testid=".concat(memoizedProps['data-testid'], "]");
+  } else if (memoizedProps['data-test-id']) {
+    return "[data-test-id=".concat(memoizedProps['data-testid'], "]");
+  }
+  return null;
+}
+function getReactComponentHierarchy(element) {
+  var componentHierarchy = [];
+  // Function to traverse up the fiber tree
+  function traverseFiber(fiber) {
+    var currentFiber = fiber;
+    while (currentFiber) {
+      if (currentFiber.type) {
+        // Check if there's a display name or a function name
+        var componentName = currentFiber.type.displayName || currentFiber.type.name;
+        // checking when component name is bigger than the minimized name produced by react
+        if (componentName && componentName.length > 2 && !componentName.includes('Listener') && !componentName.includes('Provider')) {
+          componentHierarchy.push(componentName);
+        }
+        if (componentName === 'UFOSegment') {
+          break;
+        }
+      }
+      if (currentFiber.memoizedProps) {
+        var dataIdInfo = getTestIdName(currentFiber.memoizedProps);
+        if (dataIdInfo) {
+          componentHierarchy.push(dataIdInfo);
+          currentFiber = null;
+          continue;
+        }
+      }
+      currentFiber = currentFiber.return;
+    }
+  }
+  // Access the reactFiber node from the HTML element
+  var reactFiberKey = Object.keys(element).find(function (key) {
+    return key.startsWith('__reactFiber$');
+  });
+  if (reactFiberKey) {
+    var fiber = element[reactFiberKey];
+    traverseFiber(fiber);
+  }
+  return componentHierarchy.reverse().join(' > ');
+}
 var getPerformanceObserver = exports.getPerformanceObserver = function getPerformanceObserver() {
   performanceEventObserver = performanceEventObserver || new PerformanceObserver(function (entries) {
     var list = entries.getEntries();
@@ -47,5 +101,12 @@ var setInteractionPerformanceEvent = exports.setInteractionPerformanceEvent = fu
     // it means the interaction start time is not accurate, we assign
     // this value which will match the timestamp in the event
     interaction.start = Math.min(interaction.start, entry.startTime);
+    if (interaction.ufoName === 'unknown' && (0, _platformFeatureFlags.fg)('platform_ufo_enable_unknown_interactions_elements')) {
+      if (entry.target) {
+        var componentHierarchy = getReactComponentHierarchy(entry.target);
+        interaction.unknownElementHierarchy = componentHierarchy;
+      }
+      interaction.unknownElementName = (0, _getUniqueElementName.default)(selectorConfig, entry.target);
+    }
   }
 };

package/dist/cjs/vc/vc-observer-new/metric-calculator/fy25_03/index.js

@@ -25,7 +25,7 @@ var CONSIDERED_ENTRY_TYPE = ['mutation:child-element', 'mutation:element', 'muta
 var KNOWN_ATTRIBUTES_THAT_DOES_NOT_CAUSE_LAYOUT_SHIFTS = exports.KNOWN_ATTRIBUTES_THAT_DOES_NOT_CAUSE_LAYOUT_SHIFTS = ['data-drop-target-for-element', 'draggable'];
 
 // Common aria attributes that don't cause visual layout shifts
-var NON_VISUAL_ARIA_ATTRIBUTES = exports.NON_VISUAL_ARIA_ATTRIBUTES = ['aria-label', 'aria-labelledby', 'aria-describedby', 'aria-hidden', 'aria-expanded', 'aria-controls', 'aria-selected', 'aria-checked', 'aria-disabled', 'aria-required', 'aria-current', 'aria-haspopup', 'aria-pressed', 'aria-live'];
+var NON_VISUAL_ARIA_ATTRIBUTES = exports.NON_VISUAL_ARIA_ATTRIBUTES = ['aria-label', 'aria-labelledby', 'aria-describedby', 'aria-hidden', 'aria-expanded', 'aria-controls', 'aria-selected', 'aria-checked', 'aria-disabled', 'aria-required', 'aria-current', 'aria-haspopup', 'aria-pressed', 'aria-atomic', 'aria-live'];
 var VCCalculator_FY25_03 = exports.default = /*#__PURE__*/function (_AbstractVCCalculator) {
   function VCCalculator_FY25_03() {
     (0, _classCallCheck2.default)(this, VCCalculator_FY25_03);
@@ -47,7 +47,7 @@ var VCCalculator_FY25_03 = exports.default = /*#__PURE__*/function (_AbstractVCC
         if (attributeName === 'data-aui-version' && (0, _platformFeatureFlags.fg)('platform_ufo_filter_out_aui_attribute_changes')) {
           return false;
         }
-        if (attributeName === 'data-testid' || attributeName === 'data-vc' || attributeName === 'data-ssr-placeholder' || attributeName === 'data-ssr-placeholder-replace' || attributeName === 'data-vc-nvs' || attributeName === 'data-media-vc-wrapper' || attributeName === 'data-auto-scrollable' || attributeName === 'id' || attributeName === 'tabindex' || NON_VISUAL_ARIA_ATTRIBUTES.includes(attributeName)) {
+        if (attributeName === 'data-testid' || attributeName === 'data-vc' || attributeName === 'data-ssr-placeholder' || attributeName === 'data-ssr-placeholder-replace' || attributeName === 'data-vc-nvs' || attributeName === 'data-media-vc-wrapper' || (attributeName === 'data-renderer-start-pos' || attributeName === 'data-table-local-id' || attributeName === 'spellcheck') && (0, _platformFeatureFlags.fg)('platform_ufo_ignore_extra_attributes') || attributeName === 'data-auto-scrollable' || attributeName === 'id' || attributeName === 'tabindex' || NON_VISUAL_ARIA_ATTRIBUTES.includes(attributeName)) {
           return false;
         }
         return true;

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

@@ -700,7 +700,9 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
     previousInteractionName,
     isPreviousInteractionAborted,
     abortedByInteractionName,
-    responsiveness
+    responsiveness,
+    unknownElementName,
+    unknownElementHierarchy
   } = interaction;
   const pageVisibilityAtTTI = getPageVisibilityUpToTTI(interaction);
   const pageVisibilityAtTTAI = getPageVisibilityUpToTTAI(interaction);
@@ -854,7 +856,13 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
           ...getPageLoadDetailedInteractionMetrics(),
           ...getBm3TrackerTimings(interaction),
           'metric:ttai': experimental ? regularTTAI || expTTAI : undefined,
-          'metric:experimental:ttai': expTTAI
+          'metric:experimental:ttai': expTTAI,
+          ...(unknownElementName ? {
+            unknownElementName
+          } : {}),
+          ...(unknownElementHierarchy ? {
+            unknownElementHierarchy
+          } : {})
         },
         'ufo:payloadTime': roundEpsilon(performance.now() - interactionPayloadStart)
       }

package/dist/es2019/interactions-performance-observer/index.js

@@ -1,5 +1,57 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getActiveInteraction } from '../interaction-metrics';
+import getElementName from '../vc/vc-observer-new/get-unique-element-name';
 let performanceEventObserver;
+const selectorConfig = {
+  id: true,
+  testId: true,
+  role: true,
+  className: true
+};
+function getTestIdName(memoizedProps) {
+  if (memoizedProps['data-testid']) {
+    return `[data-testid=${memoizedProps['data-testid']}]`;
+  } else if (memoizedProps['data-test-id']) {
+    return `[data-test-id=${memoizedProps['data-testid']}]`;
+  }
+  return null;
+}
+function getReactComponentHierarchy(element) {
+  const componentHierarchy = [];
+  // Function to traverse up the fiber tree
+  function traverseFiber(fiber) {
+    let currentFiber = fiber;
+    while (currentFiber) {
+      if (currentFiber.type) {
+        // Check if there's a display name or a function name
+        const componentName = currentFiber.type.displayName || currentFiber.type.name;
+        // checking when component name is bigger than the minimized name produced by react
+        if (componentName && componentName.length > 2 && !componentName.includes('Listener') && !componentName.includes('Provider')) {
+          componentHierarchy.push(componentName);
+        }
+        if (componentName === 'UFOSegment') {
+          break;
+        }
+      }
+      if (currentFiber.memoizedProps) {
+        const dataIdInfo = getTestIdName(currentFiber.memoizedProps);
+        if (dataIdInfo) {
+          componentHierarchy.push(dataIdInfo);
+          currentFiber = null;
+          continue;
+        }
+      }
+      currentFiber = currentFiber.return;
+    }
+  }
+  // Access the reactFiber node from the HTML element
+  const reactFiberKey = Object.keys(element).find(key => key.startsWith('__reactFiber$'));
+  if (reactFiberKey) {
+    const fiber = element[reactFiberKey];
+    traverseFiber(fiber);
+  }
+  return componentHierarchy.reverse().join(' > ');
+}
 export const getPerformanceObserver = () => {
   performanceEventObserver = performanceEventObserver || new PerformanceObserver(entries => {
     const list = entries.getEntries();
@@ -26,5 +78,12 @@ export const setInteractionPerformanceEvent = entry => {
     // it means the interaction start time is not accurate, we assign
     // this value which will match the timestamp in the event
     interaction.start = Math.min(interaction.start, entry.startTime);
+    if (interaction.ufoName === 'unknown' && fg('platform_ufo_enable_unknown_interactions_elements')) {
+      if (entry.target) {
+        const componentHierarchy = getReactComponentHierarchy(entry.target);
+        interaction.unknownElementHierarchy = componentHierarchy;
+      }
+      interaction.unknownElementName = getElementName(selectorConfig, entry.target);
+    }
   }
 };

package/dist/es2019/vc/vc-observer-new/metric-calculator/fy25_03/index.js

@@ -11,7 +11,7 @@ const CONSIDERED_ENTRY_TYPE = ['mutation:child-element', 'mutation:element', 'mu
 export const KNOWN_ATTRIBUTES_THAT_DOES_NOT_CAUSE_LAYOUT_SHIFTS = ['data-drop-target-for-element', 'draggable'];
 
 // Common aria attributes that don't cause visual layout shifts
-export const NON_VISUAL_ARIA_ATTRIBUTES = ['aria-label', 'aria-labelledby', 'aria-describedby', 'aria-hidden', 'aria-expanded', 'aria-controls', 'aria-selected', 'aria-checked', 'aria-disabled', 'aria-required', 'aria-current', 'aria-haspopup', 'aria-pressed', 'aria-live'];
+export const NON_VISUAL_ARIA_ATTRIBUTES = ['aria-label', 'aria-labelledby', 'aria-describedby', 'aria-hidden', 'aria-expanded', 'aria-controls', 'aria-selected', 'aria-checked', 'aria-disabled', 'aria-required', 'aria-current', 'aria-haspopup', 'aria-pressed', 'aria-atomic', 'aria-live'];
 export default class VCCalculator_FY25_03 extends AbstractVCCalculatorBase {
   constructor() {
     super(REVISION_NO);
@@ -29,7 +29,7 @@ export default class VCCalculator_FY25_03 extends AbstractVCCalculatorBase {
       if (attributeName === 'data-aui-version' && fg('platform_ufo_filter_out_aui_attribute_changes')) {
         return false;
       }
-      if (attributeName === 'data-testid' || attributeName === 'data-vc' || attributeName === 'data-ssr-placeholder' || attributeName === 'data-ssr-placeholder-replace' || attributeName === 'data-vc-nvs' || attributeName === 'data-media-vc-wrapper' || attributeName === 'data-auto-scrollable' || attributeName === 'id' || attributeName === 'tabindex' || NON_VISUAL_ARIA_ATTRIBUTES.includes(attributeName)) {
+      if (attributeName === 'data-testid' || attributeName === 'data-vc' || attributeName === 'data-ssr-placeholder' || attributeName === 'data-ssr-placeholder-replace' || attributeName === 'data-vc-nvs' || attributeName === 'data-media-vc-wrapper' || (attributeName === 'data-renderer-start-pos' || attributeName === 'data-table-local-id' || attributeName === 'spellcheck') && fg('platform_ufo_ignore_extra_attributes') || attributeName === 'data-auto-scrollable' || attributeName === 'id' || attributeName === 'tabindex' || NON_VISUAL_ARIA_ATTRIBUTES.includes(attributeName)) {
         return false;
       }
       return true;

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

@@ -699,7 +699,7 @@ function createInteractionMetricsPayload(_x3, _x4, _x5) {
 function _createInteractionMetricsPayload() {
   _createInteractionMetricsPayload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(interaction, interactionId, experimental) {
     var _window$location, _config$additionalPay;
-    var interactionPayloadStart, config, end, start, ufoName, knownSegments, rate, type, abortReason, routeName, featureFlags, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, responsiveness, pageVisibilityAtTTI, pageVisibilityAtTTAI, segments, segmentTree, isDetailedPayload, isPageLoad, calculatePageVisibilityFromTheStartOfPageLoad, moreAccuratePageVisibilityAtTTI, moreAccuratePageVisibilityAtTTAI, labelStack, getInitialPageLoadSSRMetrics, pageLoadInteractionMetrics, getDetailedInteractionMetrics, getPageLoadDetailedInteractionMetrics, newUFOName, resourceTimings, _yield$Promise$all, _yield$Promise$all2, vcMetrics, experimentalMetrics, paintMetrics, payload;
+    var interactionPayloadStart, config, end, start, ufoName, knownSegments, rate, type, abortReason, routeName, featureFlags, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, responsiveness, unknownElementName, unknownElementHierarchy, pageVisibilityAtTTI, pageVisibilityAtTTAI, segments, segmentTree, isDetailedPayload, isPageLoad, calculatePageVisibilityFromTheStartOfPageLoad, moreAccuratePageVisibilityAtTTI, moreAccuratePageVisibilityAtTTAI, labelStack, getInitialPageLoadSSRMetrics, pageLoadInteractionMetrics, getDetailedInteractionMetrics, getPageLoadDetailedInteractionMetrics, newUFOName, resourceTimings, _yield$Promise$all, _yield$Promise$all2, vcMetrics, experimentalMetrics, paintMetrics, payload;
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
@@ -711,7 +711,7 @@ function _createInteractionMetricsPayload() {
           }
           throw Error('UFO Configuration not provided');
         case 4:
-          end = interaction.end, start = interaction.start, ufoName = interaction.ufoName, knownSegments = interaction.knownSegments, rate = interaction.rate, type = interaction.type, abortReason = interaction.abortReason, routeName = interaction.routeName, featureFlags = interaction.featureFlags, previousInteractionName = interaction.previousInteractionName, isPreviousInteractionAborted = interaction.isPreviousInteractionAborted, abortedByInteractionName = interaction.abortedByInteractionName, responsiveness = interaction.responsiveness;
+          end = interaction.end, start = interaction.start, ufoName = interaction.ufoName, knownSegments = interaction.knownSegments, rate = interaction.rate, type = interaction.type, abortReason = interaction.abortReason, routeName = interaction.routeName, featureFlags = interaction.featureFlags, previousInteractionName = interaction.previousInteractionName, isPreviousInteractionAborted = interaction.isPreviousInteractionAborted, abortedByInteractionName = interaction.abortedByInteractionName, responsiveness = interaction.responsiveness, unknownElementName = interaction.unknownElementName, unknownElementHierarchy = interaction.unknownElementHierarchy;
           pageVisibilityAtTTI = getPageVisibilityUpToTTI(interaction);
           pageVisibilityAtTTAI = getPageVisibilityUpToTTAI(interaction);
           segments = config.killswitchNestedSegments ? [] : knownSegments;
@@ -815,7 +815,7 @@ function _createInteractionMetricsPayload() {
               }, fg('platform_ufo_report_cpu_usage') ? {
                 'event:cpu:usage': createPressureStateReport(interaction.start, interaction.end)
               } : {}), getBrowserMetadata()), getSSRProperties(type)), getAssetsMetrics(interaction, pageLoadInteractionMetrics === null || pageLoadInteractionMetrics === void 0 ? void 0 : pageLoadInteractionMetrics.SSRDoneTime)), getPPSMetrics(interaction)), paintMetrics), getNavigationMetrics(type)), vcMetrics), experimentalMetrics), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), getStylesheetMetrics()), getErrorCounts(interaction)), {}, {
-                interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+                interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
                   namePrefix: config.namePrefix || '',
                   segmentPrefix: config.segmentPrefix || '',
                   interactionId: interactionId,
@@ -851,7 +851,11 @@ function _createInteractionMetricsPayload() {
                 } : {}), labelStack), pageLoadInteractionMetrics), getDetailedInteractionMetrics(resourceTimings)), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)), {}, {
                   'metric:ttai': experimental ? regularTTAI || expTTAI : undefined,
                   'metric:experimental:ttai': expTTAI
-                }),
+                }, unknownElementName ? {
+                  unknownElementName: unknownElementName
+                } : {}), unknownElementHierarchy ? {
+                  unknownElementHierarchy: unknownElementHierarchy
+                } : {}),
                 'ufo:payloadTime': roundEpsilon(performance.now() - interactionPayloadStart)
               })
             }

package/dist/esm/interactions-performance-observer/index.js

@@ -4,8 +4,62 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getActiveInteraction } from '../interaction-metrics';
+import getElementName from '../vc/vc-observer-new/get-unique-element-name';
 var performanceEventObserver;
+var selectorConfig = {
+  id: true,
+  testId: true,
+  role: true,
+  className: true
+};
+function getTestIdName(memoizedProps) {
+  if (memoizedProps['data-testid']) {
+    return "[data-testid=".concat(memoizedProps['data-testid'], "]");
+  } else if (memoizedProps['data-test-id']) {
+    return "[data-test-id=".concat(memoizedProps['data-testid'], "]");
+  }
+  return null;
+}
+function getReactComponentHierarchy(element) {
+  var componentHierarchy = [];
+  // Function to traverse up the fiber tree
+  function traverseFiber(fiber) {
+    var currentFiber = fiber;
+    while (currentFiber) {
+      if (currentFiber.type) {
+        // Check if there's a display name or a function name
+        var componentName = currentFiber.type.displayName || currentFiber.type.name;
+        // checking when component name is bigger than the minimized name produced by react
+        if (componentName && componentName.length > 2 && !componentName.includes('Listener') && !componentName.includes('Provider')) {
+          componentHierarchy.push(componentName);
+        }
+        if (componentName === 'UFOSegment') {
+          break;
+        }
+      }
+      if (currentFiber.memoizedProps) {
+        var dataIdInfo = getTestIdName(currentFiber.memoizedProps);
+        if (dataIdInfo) {
+          componentHierarchy.push(dataIdInfo);
+          currentFiber = null;
+          continue;
+        }
+      }
+      currentFiber = currentFiber.return;
+    }
+  }
+  // Access the reactFiber node from the HTML element
+  var reactFiberKey = Object.keys(element).find(function (key) {
+    return key.startsWith('__reactFiber$');
+  });
+  if (reactFiberKey) {
+    var fiber = element[reactFiberKey];
+    traverseFiber(fiber);
+  }
+  return componentHierarchy.reverse().join(' > ');
+}
 export var getPerformanceObserver = function getPerformanceObserver() {
   performanceEventObserver = performanceEventObserver || new PerformanceObserver(function (entries) {
     var list = entries.getEntries();
@@ -40,5 +94,12 @@ export var setInteractionPerformanceEvent = function setInteractionPerformanceEv
     // it means the interaction start time is not accurate, we assign
     // this value which will match the timestamp in the event
     interaction.start = Math.min(interaction.start, entry.startTime);
+    if (interaction.ufoName === 'unknown' && fg('platform_ufo_enable_unknown_interactions_elements')) {
+      if (entry.target) {
+        var componentHierarchy = getReactComponentHierarchy(entry.target);
+        interaction.unknownElementHierarchy = componentHierarchy;
+      }
+      interaction.unknownElementName = getElementName(selectorConfig, entry.target);
+    }
   }
 };

package/dist/esm/vc/vc-observer-new/metric-calculator/fy25_03/index.js

@@ -18,7 +18,7 @@ var CONSIDERED_ENTRY_TYPE = ['mutation:child-element', 'mutation:element', 'muta
 export var KNOWN_ATTRIBUTES_THAT_DOES_NOT_CAUSE_LAYOUT_SHIFTS = ['data-drop-target-for-element', 'draggable'];
 
 // Common aria attributes that don't cause visual layout shifts
-export var NON_VISUAL_ARIA_ATTRIBUTES = ['aria-label', 'aria-labelledby', 'aria-describedby', 'aria-hidden', 'aria-expanded', 'aria-controls', 'aria-selected', 'aria-checked', 'aria-disabled', 'aria-required', 'aria-current', 'aria-haspopup', 'aria-pressed', 'aria-live'];
+export var NON_VISUAL_ARIA_ATTRIBUTES = ['aria-label', 'aria-labelledby', 'aria-describedby', 'aria-hidden', 'aria-expanded', 'aria-controls', 'aria-selected', 'aria-checked', 'aria-disabled', 'aria-required', 'aria-current', 'aria-haspopup', 'aria-pressed', 'aria-atomic', 'aria-live'];
 var VCCalculator_FY25_03 = /*#__PURE__*/function (_AbstractVCCalculator) {
   function VCCalculator_FY25_03() {
     _classCallCheck(this, VCCalculator_FY25_03);
@@ -40,7 +40,7 @@ var VCCalculator_FY25_03 = /*#__PURE__*/function (_AbstractVCCalculator) {
         if (attributeName === 'data-aui-version' && fg('platform_ufo_filter_out_aui_attribute_changes')) {
           return false;
         }
-        if (attributeName === 'data-testid' || attributeName === 'data-vc' || attributeName === 'data-ssr-placeholder' || attributeName === 'data-ssr-placeholder-replace' || attributeName === 'data-vc-nvs' || attributeName === 'data-media-vc-wrapper' || attributeName === 'data-auto-scrollable' || attributeName === 'id' || attributeName === 'tabindex' || NON_VISUAL_ARIA_ATTRIBUTES.includes(attributeName)) {
+        if (attributeName === 'data-testid' || attributeName === 'data-vc' || attributeName === 'data-ssr-placeholder' || attributeName === 'data-ssr-placeholder-replace' || attributeName === 'data-vc-nvs' || attributeName === 'data-media-vc-wrapper' || (attributeName === 'data-renderer-start-pos' || attributeName === 'data-table-local-id' || attributeName === 'spellcheck') && fg('platform_ufo_ignore_extra_attributes') || attributeName === 'data-auto-scrollable' || attributeName === 'id' || attributeName === 'tabindex' || NON_VISUAL_ARIA_ATTRIBUTES.includes(attributeName)) {
           return false;
         }
         return true;

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

@@ -161,6 +161,8 @@ export interface InteractionMetrics {
     vc?: VCRawDataType | null;
     experimentalTTAI?: number;
     experimentalVC90?: number;
+    unknownElementName?: string;
+    unknownElementHierarchy?: string;
 }
 export type LoadProfilerEventInfo = {
     identifier: string;