@atlaskit/react-ufo 3.4.1 → 3.4.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.4.2
+
+### Patch Changes
+
+- [#126657](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126657)
+  [`801d3cfb7f8d0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/801d3cfb7f8d0) -
+  Added LCP to page load events
+
 ## 3.4.1
 
 ### Patch Changes

package/dist/cjs/additional-payload/utils/lighthouse-metrics/utils/observer/index.js

@@ -8,6 +8,10 @@ var _const = require("../../const");
 var _buffer = require("../buffer");
 var pe = null;
 var getObserver = function getObserver() {
+  if (typeof PerformanceObserver !== 'function') {
+    // Only instantiate the IntersectionObserver if it's supported
+    return null;
+  }
   if (pe !== null) {
     return pe;
   }
@@ -24,13 +28,15 @@ var getObserver = function getObserver() {
   return pe;
 };
 var startLSObserver = exports.startLSObserver = function startLSObserver() {
-  getObserver().observe({
+  var _getObserver;
+  (_getObserver = getObserver()) === null || _getObserver === void 0 || _getObserver.observe({
     type: _const.PerformanceObserverEntryTypes.LayoutShift,
     buffered: true
   });
 };
 var startLTObserver = exports.startLTObserver = function startLTObserver() {
-  getObserver().observe({
+  var _getObserver2;
+  (_getObserver2 = getObserver()) === null || _getObserver2 === void 0 || _getObserver2.observe({
     type: _const.PerformanceObserverEntryTypes.LongTask,
     buffered: true
   });

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

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createExperimentalMetricsPayload = createExperimentalMetricsPayload;
 exports.createPayloads = createPayloads;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _bowserUltralight = _interopRequireDefault(require("bowser-ultralight"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _additionalPayload = require("../additional-payload");
@@ -158,21 +158,80 @@ var getSSRSuccess = function getSSRSuccess(type) {
 var getSSRFeatureFlags = function getSSRFeatureFlags(type) {
   return type === 'page_load' ? ssr.getSSRFeatureFlags() : undefined;
 };
-var getPaintMetrics = function getPaintMetrics(type) {
-  if (type !== 'page_load') {
-    return {};
-  }
-  var metrics = {};
-  performance.getEntriesByType('paint').forEach(function (entry) {
-    if (entry.name === 'first-paint') {
-      metrics['metric:fp'] = Math.round(entry.startTime);
-    }
-    if (entry.name === 'first-contentful-paint') {
-      metrics['metric:fcp'] = Math.round(entry.startTime);
-    }
+var getLCP = function getLCP(end) {
+  return new Promise(function (resolve) {
+    var observer;
+    var timeout = setTimeout(function () {
+      var _observer;
+      (_observer = observer) === null || _observer === void 0 || _observer.disconnect();
+      resolve(null);
+    }, 200);
+    observer = new PerformanceObserver(function (list) {
+      var entries = Array.from(list.getEntries());
+      var lastEntry = entries.reduce(function (agg, entry) {
+        // Use the latest LCP candidate before TTAI
+        if (entry.startTime <= end && (agg === null || agg.startTime < entry.startTime)) {
+          return entry;
+        }
+        return agg;
+      }, null);
+      clearTimeout(timeout);
+      if (!lastEntry || lastEntry === null) {
+        resolve(null);
+      } else {
+        resolve(lastEntry.startTime);
+      }
+    });
+    observer.observe({
+      type: "largest-contentful-paint",
+      buffered: true
+    });
   });
-  return metrics;
 };
+var getPaintMetrics = /*#__PURE__*/function () {
+  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(type, end) {
+    var metrics, lcp;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!(type !== 'page_load')) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return", {});
+        case 2:
+          metrics = {};
+          performance.getEntriesByType('paint').forEach(function (entry) {
+            if (entry.name === 'first-paint') {
+              metrics['metric:fp'] = Math.round(entry.startTime);
+            }
+            if (entry.name === 'first-contentful-paint') {
+              metrics['metric:fcp'] = Math.round(entry.startTime);
+            }
+          });
+          if (!(0, _platformFeatureFlags.fg)('ufo_lcp')) {
+            _context.next = 9;
+            break;
+          }
+          _context.next = 7;
+          return getLCP(end);
+        case 7:
+          lcp = _context.sent;
+          if (lcp) {
+            metrics['metric:lcp'] = Math.round(lcp);
+          }
+        case 9:
+          return _context.abrupt("return", metrics);
+        case 10:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function getPaintMetrics(_x, _x2) {
+    return _ref2.apply(this, arguments);
+  };
+}();
 var getTTAI = function getTTAI(interaction) {
   var start = interaction.start,
     end = interaction.end;
@@ -329,10 +388,10 @@ var getTracingContextData = function getTracingContextData(interaction) {
 function optimizeCustomData(interaction) {
   var customData = interaction.customData,
     legacyMetrics = interaction.legacyMetrics;
-  var customDataMap = customData.reduce(function (result, _ref2) {
+  var customDataMap = customData.reduce(function (result, _ref3) {
     var _result$get$data, _result$get;
-    var labelStack = _ref2.labelStack,
-      data = _ref2.data;
+    var labelStack = _ref3.labelStack,
+      data = _ref3.data;
     var label = (0, _utils.stringifyLabelStackFully)(labelStack);
     var value = (_result$get$data = (_result$get = result.get(label)) === null || _result$get === void 0 ? void 0 : _result$get.data) !== null && _result$get$data !== void 0 ? _result$get$data : {};
     result.set(label, {
@@ -364,12 +423,12 @@ function optimizeCustomData(interaction) {
   return (0, _toConsumableArray2.default)(customDataMap.values());
 }
 function optimizeReactProfilerTimings(reactProfilerTimings, interactionStart, reactUFOVersion) {
-  var reactProfilerTimingsMap = reactProfilerTimings.reduce(function (result, _ref3) {
-    var labelStack = _ref3.labelStack,
-      startTime = _ref3.startTime,
-      commitTime = _ref3.commitTime,
-      actualDuration = _ref3.actualDuration,
-      type = _ref3.type;
+  var reactProfilerTimingsMap = reactProfilerTimings.reduce(function (result, _ref4) {
+    var labelStack = _ref4.labelStack,
+      startTime = _ref4.startTime,
+      commitTime = _ref4.commitTime,
+      actualDuration = _ref4.actualDuration,
+      type = _ref4.type;
     if (labelStack && startTime >= interactionStart) {
       var label = (0, _utils.stringifyLabelStackFully)(labelStack);
       var start = Math.round(startTime);
@@ -515,10 +574,10 @@ function optimizeCustomTimings(customTimings, interactionStart) {
   }, []);
 }
 function optimizeMarks(marks, reactUFOVersion) {
-  return marks.map(function (_ref4) {
-    var labelStack = _ref4.labelStack,
-      time = _ref4.time,
-      others = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
+  return marks.map(function (_ref5) {
+    var labelStack = _ref5.labelStack,
+      time = _ref5.time,
+      others = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
     return _objectSpread(_objectSpread({}, others), {}, {
       labelStack: labelStack && (0, _utils.optimizeLabelStack)(labelStack, reactUFOVersion),
       time: Math.round(time)
@@ -526,10 +585,10 @@ function optimizeMarks(marks, reactUFOVersion) {
   });
 }
 function optimizeApdex(apdex, reactUFOVersion) {
-  return apdex.map(function (_ref5) {
-    var stopTime = _ref5.stopTime,
-      labelStack = _ref5.labelStack,
-      others = (0, _objectWithoutProperties2.default)(_ref5, _excluded2);
+  return apdex.map(function (_ref6) {
+    var stopTime = _ref6.stopTime,
+      labelStack = _ref6.labelStack,
+      others = (0, _objectWithoutProperties2.default)(_ref6, _excluded2);
     return _objectSpread(_objectSpread({}, others), {}, {
       stopTime: Math.round(stopTime)
     }, labelStack ? {
@@ -643,20 +702,20 @@ function getErrorCounts(interaction) {
     'ufo:errors:count': interaction.errors.length
   };
 }
-function createInteractionMetricsPayload(_x, _x2, _x3) {
+function createInteractionMetricsPayload(_x3, _x4, _x5) {
   return _createInteractionMetricsPayload.apply(this, arguments);
 }
 function _createInteractionMetricsPayload() {
-  _createInteractionMetricsPayload = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(interaction, interactionId, experimental) {
+  _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, pageVisibilityAtTTI, pageVisibilityAtTTAI, segments, segmentTree, isDetailedPayload, isPageLoad, calculatePageVisibilityFromTheStartOfPageLoad, moreAccuratePageVisibilityAtTTI, moreAccuratePageVisibilityAtTTAI, labelStack, getInitialPageLoadSSRMetrics, pageLoadInteractionMetrics, getDetailedInteractionMetrics, getPageLoadDetailedInteractionMetrics, newUFOName, resourceTimings, _yield$Promise$all, _yield$Promise$all2, vcMetrics, experimentalMetrics, payload;
-    return _regenerator.default.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
+    var interactionPayloadStart, config, end, start, ufoName, knownSegments, rate, type, abortReason, routeName, featureFlags, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, 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:
           interactionPayloadStart = performance.now();
           config = (0, _config.getConfig)();
           if (config) {
-            _context.next = 4;
+            _context2.next = 4;
             break;
           }
           throw Error('UFO Configuration not provided');
@@ -699,9 +758,9 @@ function _createInteractionMetricsPayload() {
             var spans = [].concat((0, _toConsumableArray2.default)(interaction.spans), (0, _toConsumableArray2.default)(_interactionMetrics.interactionSpans));
             _interactionMetrics.interactionSpans.length = 0;
             return {
-              errors: interaction.errors.map(function (_ref6) {
-                var labelStack = _ref6.labelStack,
-                  others = (0, _objectWithoutProperties2.default)(_ref6, _excluded3);
+              errors: interaction.errors.map(function (_ref7) {
+                var labelStack = _ref7.labelStack,
+                  others = (0, _objectWithoutProperties2.default)(_ref7, _excluded3);
                 return _objectSpread(_objectSpread({}, others), {}, {
                   labelStack: labelStack && (0, _utils.optimizeLabelStack)(labelStack, (0, _constants.getReactUFOVersion)(interaction.type))
                 });
@@ -734,13 +793,14 @@ function _createInteractionMetricsPayload() {
           }
           newUFOName = (0, _utils.sanitizeUfoName)(ufoName);
           resourceTimings = getResourceTimings(start, end);
-          _context.next = 24;
-          return Promise.all([(0, _getVcMetrics.default)(interaction), experimental ? (0, _createExperimentalInteractionMetricsPayload.getExperimentalVCMetrics)(interaction) : Promise.resolve(undefined)]);
+          _context2.next = 24;
+          return Promise.all([(0, _getVcMetrics.default)(interaction), experimental ? (0, _createExperimentalInteractionMetricsPayload.getExperimentalVCMetrics)(interaction) : Promise.resolve(undefined), getPaintMetrics(type, end)]);
         case 24:
-          _yield$Promise$all = _context.sent;
-          _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 2);
+          _yield$Promise$all = _context2.sent;
+          _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 3);
           vcMetrics = _yield$Promise$all2[0];
           experimentalMetrics = _yield$Promise$all2[1];
+          paintMetrics = _yield$Promise$all2[2];
           payload = {
             actionSubject: 'experience',
             action: 'measured',
@@ -761,7 +821,7 @@ function _createInteractionMetricsPayload() {
                 'event:region': config.region || 'unknown',
                 'experience:key': experimental ? 'custom.experimental-interaction-metrics' : 'custom.interaction-metrics',
                 'experience:name': newUFOName
-              }, getBrowserMetadata()), getSSRProperties(type)), getAssetsMetrics(interaction, pageLoadInteractionMetrics === null || pageLoadInteractionMetrics === void 0 ? void 0 : pageLoadInteractionMetrics.SSRDoneTime)), getPPSMetrics(interaction)), getPaintMetrics(type)), 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)), {}, {
+              }, 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({
                   namePrefix: config.namePrefix || '',
                   segmentPrefix: config.segmentPrefix || '',
@@ -783,9 +843,9 @@ function _createInteractionMetricsPayload() {
                   apdex: optimizeApdex(interaction.apdex, (0, _constants.getReactUFOVersion)(interaction.type)),
                   end: Math.round(end),
                   start: Math.round(start),
-                  segments: (0, _constants.getReactUFOVersion)(interaction.type) === '2.0.0' ? segmentTree : segments.map(function (_ref7) {
-                    var labelStack = _ref7.labelStack,
-                      others = (0, _objectWithoutProperties2.default)(_ref7, _excluded4);
+                  segments: (0, _constants.getReactUFOVersion)(interaction.type) === '2.0.0' ? segmentTree : segments.map(function (_ref8) {
+                    var labelStack = _ref8.labelStack,
+                      others = (0, _objectWithoutProperties2.default)(_ref8, _excluded4);
                     return _objectSpread(_objectSpread({}, others), {}, {
                       labelStack: (0, _utils.optimizeLabelStack)(labelStack, (0, _constants.getReactUFOVersion)(interaction.type))
                     });
@@ -806,53 +866,53 @@ function _createInteractionMetricsPayload() {
             expTTAI = undefined;
           }
           payload.attributes.properties['event:sizeInKb'] = getPayloadSize(payload.attributes.properties);
-          return _context.abrupt("return", payload);
-        case 32:
+          return _context2.abrupt("return", payload);
+        case 33:
         case "end":
-          return _context.stop();
+          return _context2.stop();
       }
-    }, _callee);
+    }, _callee2);
   }));
   return _createInteractionMetricsPayload.apply(this, arguments);
 }
-function createPayloads(_x4, _x5) {
+function createPayloads(_x6, _x7) {
   return _createPayloads.apply(this, arguments);
 }
 function _createPayloads() {
-  _createPayloads = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(interactionId, interaction) {
+  _createPayloads = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(interactionId, interaction) {
     var ufoNameOverride, modifiedInteraction, interactionMetricsPayload;
-    return _regenerator.default.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
+    return _regenerator.default.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
         case 0:
           ufoNameOverride = getUfoNameOverride(interaction);
           modifiedInteraction = _objectSpread(_objectSpread({}, interaction), {}, {
             ufoName: ufoNameOverride
           });
-          _context2.next = 4;
+          _context3.next = 4;
           return createInteractionMetricsPayload(modifiedInteraction, interactionId);
         case 4:
-          interactionMetricsPayload = _context2.sent;
-          return _context2.abrupt("return", [interactionMetricsPayload]);
+          interactionMetricsPayload = _context3.sent;
+          return _context3.abrupt("return", [interactionMetricsPayload]);
         case 6:
         case "end":
-          return _context2.stop();
+          return _context3.stop();
       }
-    }, _callee2);
+    }, _callee3);
   }));
   return _createPayloads.apply(this, arguments);
 }
-function createExperimentalMetricsPayload(_x6, _x7) {
+function createExperimentalMetricsPayload(_x8, _x9) {
   return _createExperimentalMetricsPayload.apply(this, arguments);
 }
 function _createExperimentalMetricsPayload() {
-  _createExperimentalMetricsPayload = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(interactionId, interaction) {
+  _createExperimentalMetricsPayload = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(interactionId, interaction) {
     var config, ufoName, rate, pageVisibilityState, result;
-    return _regenerator.default.wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
+    return _regenerator.default.wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
         case 0:
           config = (0, _config.getConfig)();
           if (config) {
-            _context3.next = 3;
+            _context4.next = 3;
             break;
           }
           throw Error('UFO Configuration not provided');
@@ -860,28 +920,28 @@ function _createExperimentalMetricsPayload() {
           ufoName = (0, _utils.sanitizeUfoName)(interaction.ufoName);
           rate = (0, _config.getExperimentalInteractionRate)(ufoName, interaction.type);
           if ((0, _coinflip.default)(rate)) {
-            _context3.next = 7;
+            _context4.next = 7;
             break;
           }
-          return _context3.abrupt("return", null);
+          return _context4.abrupt("return", null);
         case 7:
           pageVisibilityState = (0, _hiddenTiming.getPageVisibilityState)(interaction.start, interaction.end);
           if (!(pageVisibilityState !== 'visible')) {
-            _context3.next = 10;
+            _context4.next = 10;
             break;
           }
-          return _context3.abrupt("return", null);
+          return _context4.abrupt("return", null);
         case 10:
-          _context3.next = 12;
+          _context4.next = 12;
           return createInteractionMetricsPayload(interaction, interactionId, true);
         case 12:
-          result = _context3.sent;
-          return _context3.abrupt("return", result);
+          result = _context4.sent;
+          return _context4.abrupt("return", result);
         case 14:
         case "end":
-          return _context3.stop();
+          return _context4.stop();
       }
-    }, _callee3);
+    }, _callee4);
   }));
   return _createExperimentalMetricsPayload.apply(this, arguments);
 }

package/dist/cjs/segment/segment.js

@@ -35,16 +35,40 @@ var AsyncSegmentHighlight = /*#__PURE__*/(0, _react.lazy)(function () {
     };
   });
 });
+var noopIdMap = new Map();
 
 /** A portion of the page we apply measurement to */
 function UFOSegment(_ref) {
   var _getConfig2;
   var segmentName = _ref.name,
-    children = _ref.children;
+    children = _ref.children,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'single' : _ref$mode;
   var parentContext = (0, _react.useContext)(_interactionContext.default);
+  var segmentIdMap = (0, _react.useMemo)(function () {
+    if (!(0, _platformFeatureFlags.fg)('platform_ufo_segment_list_mode')) {
+      // just in case we cause rerender issues, use noop map
+      return noopIdMap;
+    }
+    if (!(parentContext !== null && parentContext !== void 0 && parentContext.segmentIdMap)) {
+      return new Map();
+    }
+    return parentContext.segmentIdMap;
+  }, [parentContext]);
   var segmentId = (0, _react.useMemo)(function () {
-    return (0, _shortId.default)();
-  }, []);
+    if (!(0, _platformFeatureFlags.fg)('platform_ufo_segment_list_mode')) {
+      return (0, _shortId.default)();
+    }
+    if (mode === 'single') {
+      return (0, _shortId.default)();
+    }
+    if (segmentIdMap.has(segmentName)) {
+      return segmentIdMap.get(segmentName);
+    }
+    var newSegmentId = (0, _shortId.default)();
+    segmentIdMap.set(segmentName, newSegmentId);
+    return newSegmentId;
+  }, [mode, segmentName, segmentIdMap]);
   var labelStack = (0, _react.useMemo)(function () {
     return parentContext !== null && parentContext !== void 0 && parentContext.labelStack ? [].concat((0, _toConsumableArray2.default)(parentContext.labelStack), [{
       name: segmentName,
@@ -132,6 +156,7 @@ function UFOSegment(_ref) {
     }
     return {
       labelStack: labelStack,
+      segmentIdMap: segmentIdMap,
       hold: function hold() {
         var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'unknown';
         return this._internalHold(this.labelStack, name);
@@ -232,7 +257,7 @@ function UFOSegment(_ref) {
       _internalHoldByID: _internalHoldByID,
       complete: complete
     };
-  }, [parentContext, labelStack, interactionId]);
+  }, [parentContext, labelStack, segmentIdMap, interactionId]);
   var hasMounted = (0, _react.useRef)(false);
   var onRender = (0, _react.useCallback)(function (_id, phase, actualDuration, baseDuration, startTime, commitTime) {
     var _getConfig;