@atlaskit/react-ufo 3.13.27 → 3.14.0

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

@@ -2,24 +2,35 @@ import _toConsumableArray from "@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;
 export function resetPressureRecordBuffer() {
   pressureRecordBuffer.length = 0;
 }
-export function removeOldBufferRecords(filter) {
+export function resetMemoryRecordBuffer() {
+  memoryRecordBuffer.length = 0;
+}
+export function removeOldPressureBufferRecords(filter) {
   pressureRecordBuffer = pressureRecordBuffer.filter(function (_ref) {
     var time = _ref.time;
     return time > filter;
   });
 }
+export function removeOldMemoryBufferRecords(filter) {
+  memoryRecordBuffer = memoryRecordBuffer.filter(function (_ref2) {
+    var time = _ref2.time;
+    return time > filter;
+  });
+}
 export 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;
       }
@@ -33,7 +44,7 @@ export 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: {
@@ -47,24 +58,81 @@ 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;
+    }
+    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;
+  }
+}
 export 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, _toConsumableArray(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 */
   }
 }
+export 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 */
+  }
+}
+export function disconnectMemoryObserver() {
+  clearInterval(memoryInterval);
+}
 export function disconnectPressureObserver() {
   var _pressureObserver;
   (_pressureObserver = pressureObserver) === null || _pressureObserver === void 0 || _pressureObserver.disconnect();

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;