@atlaskit/react-ufo 3.13.27 → 3.14.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.14.0
+
+### Minor Changes
+
+- [#176314](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/176314)
+  [`9c32e96190532`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9c32e96190532) -
+  report memory usage via UFO
+
+## 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

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;
@@ -809,7 +809,7 @@ function _createInteractionMetricsPayload() {
             source: 'measured',
             tags: ['observability'],
             attributes: {
-              properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+              properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
                 // basic
                 'event:hostname': ((_window$location = window.location) === null || _window$location === void 0 ? void 0 : _window$location.hostname) || 'unknown',
                 'event:product': config.product,
@@ -824,8 +824,10 @@ function _createInteractionMetricsPayload() {
                 'experience:name': newUFOName
               }, (0, _platformFeatureFlags.fg)('platform_ufo_report_cpu_usage') ? {
                 'event:cpu:usage': (0, _machineUtilisation.createPressureStateReport)(interaction.start, interaction.end)
+              } : {}), (0, _platformFeatureFlags.fg)('platform_ufo_report_memory_usage') ? {
+                'event:memory:usage': (0, _machineUtilisation.createMemoryStateReport)(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 +863,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/interaction-metrics-init/index.js

@@ -87,6 +87,9 @@ function init(analyticsWebClientAsync, config) {
   if ((0, _platformFeatureFlags.fg)('platform_ufo_report_cpu_usage')) {
     (0, _machineUtilisation.initialisePressureObserver)();
   }
+  if ((0, _platformFeatureFlags.fg)('platform_ufo_report_memory_usage')) {
+    (0, _machineUtilisation.initialiseMemoryObserver)();
+  }
   (0, _config.setUFOConfig)(config);
   if ((_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled) {
     var _config$experimentalI;

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/machine-utilisation/index.js

@@ -4,33 +4,49 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.createMemoryStateReport = createMemoryStateReport;
 exports.createPressureStateReport = createPressureStateReport;
+exports.disconnectMemoryObserver = disconnectMemoryObserver;
 exports.disconnectPressureObserver = disconnectPressureObserver;
+exports.initialiseMemoryObserver = initialiseMemoryObserver;
 exports.initialisePressureObserver = initialisePressureObserver;
-exports.removeOldBufferRecords = removeOldBufferRecords;
+exports.removeOldMemoryBufferRecords = removeOldMemoryBufferRecords;
+exports.removeOldPressureBufferRecords = removeOldPressureBufferRecords;
+exports.resetMemoryRecordBuffer = resetMemoryRecordBuffer;
 exports.resetPressureRecordBuffer = resetPressureRecordBuffer;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var BUFFER_MAX_LENGTH = 1000; // ensure we don't blow up this buffer
 var pressureRecordBuffer = [];
 var pressureObserver = null;
+var memoryRecordBuffer = [];
+var memoryInterval;
 function resetPressureRecordBuffer() {
   pressureRecordBuffer.length = 0;
 }
-function removeOldBufferRecords(filter) {
+function resetMemoryRecordBuffer() {
+  memoryRecordBuffer.length = 0;
+}
+function removeOldPressureBufferRecords(filter) {
   pressureRecordBuffer = pressureRecordBuffer.filter(function (_ref) {
     var time = _ref.time;
     return time > filter;
   });
 }
+function removeOldMemoryBufferRecords(filter) {
+  memoryRecordBuffer = memoryRecordBuffer.filter(function (_ref2) {
+    var time = _ref2.time;
+    return time > filter;
+  });
+}
 function createPressureStateReport(start, end) {
   try {
     // To differentiate between the API not available, vs no PressureRecords added
     if (!('PressureObserver' in globalThis)) {
       return null;
     }
-    var pressureStateCount = pressureRecordBuffer.reduce(function (pressureReport, _ref2) {
-      var time = _ref2.time,
-        state = _ref2.state;
+    var pressureStateCount = pressureRecordBuffer.reduce(function (pressureReport, _ref3) {
+      var time = _ref3.time,
+        state = _ref3.state;
       if (time >= start && time <= end) {
         pressureReport[state] += 1;
       }
@@ -44,7 +60,7 @@ function createPressureStateReport(start, end) {
     var pressureStateTotal = Object.values(pressureStateCount).reduce(function (total, count) {
       return total + count;
     }) || 1;
-    removeOldBufferRecords(end);
+    removeOldPressureBufferRecords(end);
     return {
       count: pressureStateCount,
       percentage: {
@@ -58,24 +74,81 @@ function createPressureStateReport(start, end) {
     return null;
   }
 }
+function convertBytesToMegabytes(bytes) {
+  return Math.round(Math.round(bytes / (1024 * 1024) * 100) / 100);
+}
+function createMemoryStateReport(start, end) {
+  try {
+    if (!('memory' in performance)) {
+      return null;
+    }
+    var accumulatedMemoryUsage = memoryRecordBuffer.reduce(function (acc, snapshot) {
+      if (snapshot.time >= start && snapshot.time <= end) {
+        acc.totalJSHeapSize += snapshot.totalJSHeapSize;
+        acc.usedJSHeapSize += snapshot.usedJSHeapSize;
+        acc.snapshotCount += 1;
+      }
+      return acc;
+    }, {
+      totalJSHeapSize: 0,
+      usedJSHeapSize: 0,
+      snapshotCount: 0
+    });
+    var memoryStateReport = {
+      jsHeapSizeLimitInMB: convertBytesToMegabytes(memoryRecordBuffer[0].jsHeapSizeLimit),
+      // just use the first record, since this value always remains the same over time
+      avgTotalJSHeapSizeInMB: convertBytesToMegabytes(accumulatedMemoryUsage.totalJSHeapSize / accumulatedMemoryUsage.snapshotCount),
+      avgUsedJSHeapSizeInMB: convertBytesToMegabytes(accumulatedMemoryUsage.usedJSHeapSize / accumulatedMemoryUsage.snapshotCount)
+    };
+    removeOldMemoryBufferRecords(end);
+    return memoryStateReport;
+  } catch (_unused2) {
+    return null;
+  }
+}
 function initialisePressureObserver() {
   try {
     if ('PressureObserver' in globalThis) {
-      var _pressureObserver$obs;
       pressureObserver = new PressureObserver(function (records) {
         if (pressureRecordBuffer.length + records.length <= BUFFER_MAX_LENGTH) {
           var _pressureRecordBuffer;
           (_pressureRecordBuffer = pressureRecordBuffer).push.apply(_pressureRecordBuffer, (0, _toConsumableArray2.default)(records));
         }
       });
-      (_pressureObserver$obs = pressureObserver.observe('cpu', {
+      pressureObserver.observe('cpu', {
         sampleInterval: 100
-      })) === null || _pressureObserver$obs === void 0 || _pressureObserver$obs.catch();
+      }).catch();
     }
   } catch (err) {
     /* do nothing, this is a best efforts metric */
   }
 }
+function initialiseMemoryObserver() {
+  try {
+    // only set up the interval if `performance.memory` is available in the browser
+    if ('memory' in performance) {
+      memoryInterval = setInterval(function () {
+        // another check of `performance.memory` availability to satisfy typescript
+        if ('memory' in performance) {
+          var memory = performance.memory;
+          if (memoryRecordBuffer.length <= BUFFER_MAX_LENGTH) {
+            memoryRecordBuffer.push({
+              time: performance.now(),
+              jsHeapSizeLimit: memory.jsHeapSizeLimit,
+              totalJSHeapSize: memory.totalJSHeapSize,
+              usedJSHeapSize: memory.usedJSHeapSize
+            });
+          }
+        }
+      }, 100);
+    }
+  } catch (_unused3) {
+    /* do nothing, this is a best efforts metric */
+  }
+}
+function disconnectMemoryObserver() {
+  clearInterval(memoryInterval);
+}
 function disconnectPressureObserver() {
   var _pressureObserver;
   (_pressureObserver = pressureObserver) === null || _pressureObserver === void 0 || _pressureObserver.disconnect();

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

@@ -11,7 +11,7 @@ import { getGlobalErrorCount } from '../global-error-handler';
 import { getPageVisibilityState } from '../hidden-timing';
 import * as initialPageLoadExtraTiming from '../initial-page-load-extra-timing';
 import { interactionSpans as atlaskitInteractionSpans } from '../interaction-metrics';
-import { createPressureStateReport } from '../machine-utilisation';
+import { createMemoryStateReport, createPressureStateReport } from '../machine-utilisation';
 import * as resourceTiming from '../resource-timing';
 import { filterResourceTimings } from '../resource-timing/common/utils/resource-timing-buffer';
 import { roundEpsilon } from '../round-number';
@@ -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);
@@ -801,6 +803,9 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
         ...(fg('platform_ufo_report_cpu_usage') ? {
           'event:cpu:usage': createPressureStateReport(interaction.start, interaction.end)
         } : {}),
+        ...(fg('platform_ufo_report_memory_usage') ? {
+          'event:memory:usage': createMemoryStateReport(interaction.start, interaction.end)
+        } : {}),
         // root
         ...getBrowserMetadata(),
         ...getSSRProperties(type),
@@ -854,7 +859,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/interaction-metrics-init/index.js

@@ -5,7 +5,7 @@ import { experimentalVC, sinkExperimentalHandler } from '../create-experimental-
 import { setupHiddenTimingCapture } from '../hidden-timing';
 import { postInteractionLog, sinkInteractionHandler, sinkPostInteractionLogHandler } from '../interaction-metrics';
 import { getPerformanceObserver } from '../interactions-performance-observer';
-import { initialisePressureObserver } from '../machine-utilisation';
+import { initialiseMemoryObserver, initialisePressureObserver } from '../machine-utilisation';
 import { getVCObserver } from '../vc';
 import scheduleIdleCallback from './schedule-idle-callback';
 let initialized = false;
@@ -77,6 +77,9 @@ export function init(analyticsWebClientAsync, config) {
   if (fg('platform_ufo_report_cpu_usage')) {
     initialisePressureObserver();
   }
+  if (fg('platform_ufo_report_memory_usage')) {
+    initialiseMemoryObserver();
+  }
   setUFOConfig(config);
   if ((_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled) {
     var _config$experimentalI;

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/machine-utilisation/index.js

@@ -1,14 +1,24 @@
 const BUFFER_MAX_LENGTH = 1000; // ensure we don't blow up this buffer
 let pressureRecordBuffer = [];
 let pressureObserver = null;
+let memoryRecordBuffer = [];
+let memoryInterval;
 export function resetPressureRecordBuffer() {
   pressureRecordBuffer.length = 0;
 }
-export function removeOldBufferRecords(filter) {
+export function resetMemoryRecordBuffer() {
+  memoryRecordBuffer.length = 0;
+}
+export function removeOldPressureBufferRecords(filter) {
   pressureRecordBuffer = pressureRecordBuffer.filter(({
     time
   }) => time > filter);
 }
+export function removeOldMemoryBufferRecords(filter) {
+  memoryRecordBuffer = memoryRecordBuffer.filter(({
+    time
+  }) => time > filter);
+}
 export function createPressureStateReport(start, end) {
   try {
     // To differentiate between the API not available, vs no PressureRecords added
@@ -30,7 +40,7 @@ export function createPressureStateReport(start, end) {
       critical: 0
     });
     const pressureStateTotal = Object.values(pressureStateCount).reduce((total, count) => total + count) || 1;
-    removeOldBufferRecords(end);
+    removeOldPressureBufferRecords(end);
     return {
       count: pressureStateCount,
       percentage: {
@@ -44,23 +54,80 @@ export function createPressureStateReport(start, end) {
     return null;
   }
 }
+function convertBytesToMegabytes(bytes) {
+  return Math.round(Math.round(bytes / (1024 * 1024) * 100) / 100);
+}
+export function createMemoryStateReport(start, end) {
+  try {
+    if (!('memory' in performance)) {
+      return null;
+    }
+    const accumulatedMemoryUsage = memoryRecordBuffer.reduce((acc, snapshot) => {
+      if (snapshot.time >= start && snapshot.time <= end) {
+        acc.totalJSHeapSize += snapshot.totalJSHeapSize;
+        acc.usedJSHeapSize += snapshot.usedJSHeapSize;
+        acc.snapshotCount += 1;
+      }
+      return acc;
+    }, {
+      totalJSHeapSize: 0,
+      usedJSHeapSize: 0,
+      snapshotCount: 0
+    });
+    const memoryStateReport = {
+      jsHeapSizeLimitInMB: convertBytesToMegabytes(memoryRecordBuffer[0].jsHeapSizeLimit),
+      // just use the first record, since this value always remains the same over time
+      avgTotalJSHeapSizeInMB: convertBytesToMegabytes(accumulatedMemoryUsage.totalJSHeapSize / accumulatedMemoryUsage.snapshotCount),
+      avgUsedJSHeapSizeInMB: convertBytesToMegabytes(accumulatedMemoryUsage.usedJSHeapSize / accumulatedMemoryUsage.snapshotCount)
+    };
+    removeOldMemoryBufferRecords(end);
+    return memoryStateReport;
+  } catch {
+    return null;
+  }
+}
 export function initialisePressureObserver() {
   try {
     if ('PressureObserver' in globalThis) {
-      var _pressureObserver$obs;
       pressureObserver = new PressureObserver(records => {
         if (pressureRecordBuffer.length + records.length <= BUFFER_MAX_LENGTH) {
           pressureRecordBuffer.push(...records);
         }
       });
-      (_pressureObserver$obs = pressureObserver.observe('cpu', {
+      pressureObserver.observe('cpu', {
         sampleInterval: 100
-      })) === null || _pressureObserver$obs === void 0 ? void 0 : _pressureObserver$obs.catch();
+      }).catch();
     }
   } catch (err) {
     /* do nothing, this is a best efforts metric */
   }
 }
+export function initialiseMemoryObserver() {
+  try {
+    // only set up the interval if `performance.memory` is available in the browser
+    if ('memory' in performance) {
+      memoryInterval = setInterval(() => {
+        // another check of `performance.memory` availability to satisfy typescript
+        if ('memory' in performance) {
+          const memory = performance.memory;
+          if (memoryRecordBuffer.length <= BUFFER_MAX_LENGTH) {
+            memoryRecordBuffer.push({
+              time: performance.now(),
+              jsHeapSizeLimit: memory.jsHeapSizeLimit,
+              totalJSHeapSize: memory.totalJSHeapSize,
+              usedJSHeapSize: memory.usedJSHeapSize
+            });
+          }
+        }
+      }, 100);
+    }
+  } catch {
+    /* do nothing, this is a best efforts metric */
+  }
+}
+export function disconnectMemoryObserver() {
+  clearInterval(memoryInterval);
+}
 export function disconnectPressureObserver() {
   var _pressureObserver;
   (_pressureObserver = pressureObserver) === null || _pressureObserver === void 0 ? void 0 : _pressureObserver.disconnect();

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

@@ -23,7 +23,7 @@ import { getGlobalErrorCount } from '../global-error-handler';
 import { getPageVisibilityState } from '../hidden-timing';
 import * as initialPageLoadExtraTiming from '../initial-page-load-extra-timing';
 import { interactionSpans as atlaskitInteractionSpans } from '../interaction-metrics';
-import { createPressureStateReport } from '../machine-utilisation';
+import { createMemoryStateReport, createPressureStateReport } from '../machine-utilisation';
 import * as resourceTiming from '../resource-timing';
 import { filterResourceTimings } from '../resource-timing/common/utils/resource-timing-buffer';
 import { roundEpsilon } from '../round-number';
@@ -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;
@@ -799,7 +799,7 @@ function _createInteractionMetricsPayload() {
             source: 'measured',
             tags: ['observability'],
             attributes: {
-              properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+              properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
                 // basic
                 'event:hostname': ((_window$location = window.location) === null || _window$location === void 0 ? void 0 : _window$location.hostname) || 'unknown',
                 'event:product': config.product,
@@ -814,8 +814,10 @@ function _createInteractionMetricsPayload() {
                 'experience:name': newUFOName
               }, fg('platform_ufo_report_cpu_usage') ? {
                 'event:cpu:usage': createPressureStateReport(interaction.start, interaction.end)
+              } : {}), fg('platform_ufo_report_memory_usage') ? {
+                'event:memory:usage': createMemoryStateReport(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 +853,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/interaction-metrics-init/index.js

@@ -6,7 +6,7 @@ import { experimentalVC, sinkExperimentalHandler } from '../create-experimental-
 import { setupHiddenTimingCapture } from '../hidden-timing';
 import { postInteractionLog, sinkInteractionHandler, sinkPostInteractionLogHandler } from '../interaction-metrics';
 import { getPerformanceObserver } from '../interactions-performance-observer';
-import { initialisePressureObserver } from '../machine-utilisation';
+import { initialiseMemoryObserver, initialisePressureObserver } from '../machine-utilisation';
 import { getVCObserver } from '../vc';
 import scheduleIdleCallback from './schedule-idle-callback';
 var initialized = false;
@@ -78,6 +78,9 @@ export function init(analyticsWebClientAsync, config) {
   if (fg('platform_ufo_report_cpu_usage')) {
     initialisePressureObserver();
   }
+  if (fg('platform_ufo_report_memory_usage')) {
+    initialiseMemoryObserver();
+  }
   setUFOConfig(config);
   if ((_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled) {
     var _config$experimentalI;