@atlaskit/react-ufo 2.14.3 → 2.16.0

package/dist/esm/assets/index.js

@@ -0,0 +1,89 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { calculateTransferType, DISK_KEY, MEMORY_KEY, NETWORK_KEY, round } from './utils';
+export var CHRSummary = /*#__PURE__*/function () {
+  function CHRSummary() {
+    _classCallCheck(this, CHRSummary);
+    _defineProperty(this, "bundles", _defineProperty(_defineProperty(_defineProperty({}, MEMORY_KEY, 0), DISK_KEY, 0), NETWORK_KEY, 0));
+    _defineProperty(this, "bundlesCount", 0);
+    _defineProperty(this, "size", _defineProperty(_defineProperty(_defineProperty({}, MEMORY_KEY, 0), DISK_KEY, 0), NETWORK_KEY, 0));
+    _defineProperty(this, "sizeTotal", 0);
+  }
+  return _createClass(CHRSummary, [{
+    key: "add",
+    value: function add(asset) {
+      var size = 'size' in asset ? asset.size : undefined;
+      var encodedSize = 'encodedSize' in asset ? Number(asset.encodedSize) : 0;
+      var type = calculateTransferType(asset.type, asset.duration, size);
+      if (type === null) {
+        return;
+      }
+      this.bundles[type] += 1;
+      this.bundlesCount += 1;
+      this.size[type] += encodedSize;
+      this.sizeTotal += encodedSize;
+    }
+  }], [{
+    key: "makePayload",
+    value: function makePayload(summary) {
+      var size = summary.size,
+        bundlesCount = summary.bundlesCount,
+        sizeTotal = summary.sizeTotal;
+      var cachedSize = size[MEMORY_KEY] + size[DISK_KEY];
+      var sizeRatio = round(cachedSize / summary.sizeTotal);
+      return {
+        size: sizeTotal,
+        chr: sizeRatio,
+        count: bundlesCount
+      };
+    }
+  }]);
+}();
+export var CHRReporter = /*#__PURE__*/function () {
+  function CHRReporter() {
+    _classCallCheck(this, CHRReporter);
+    _defineProperty(this, "all", new CHRSummary());
+    _defineProperty(this, "allAtlassian", new CHRSummary());
+    _defineProperty(this, "preloaded", new CHRSummary());
+  }
+  return _createClass(CHRReporter, [{
+    key: "get",
+    value: function get(resourceTimings, assetsClassification) {
+      var _this = this;
+      try {
+        Object.entries(resourceTimings).map(function (_ref) {
+          var _ref2 = _slicedToArray(_ref, 2),
+            label = _ref2[0],
+            entry = _ref2[1];
+          if (assetsClassification.all) {
+            _this.all.add(entry);
+          }
+          if (assetsClassification.allAtlassian({
+            label: label,
+            entry: entry
+          })) {
+            _this.allAtlassian.add(entry);
+          }
+          if (assetsClassification.preloaded({
+            label: label,
+            entry: entry
+          })) {
+            _this.preloaded.add(entry);
+          }
+        });
+        if (this.all.bundlesCount === 0) {
+          return null;
+        }
+        return {
+          all: CHRSummary.makePayload(this.all),
+          allAtlassian: CHRSummary.makePayload(this.allAtlassian),
+          preloaded: CHRSummary.makePayload(this.preloaded)
+        };
+      } catch (error) {
+        return null;
+      }
+    }
+  }]);
+}();

package/dist/esm/assets/utils.js

@@ -0,0 +1,26 @@
+/* Borrowed from https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/performance/browser-metrics/src/plugins/timings/resource.ts */
+export var cacheableTypes = ['script', 'link'];
+export var MEMORY_KEY = 'mem';
+export var DISK_KEY = 'disk';
+export var NETWORK_KEY = 'net';
+export var calculateTransferType = function calculateTransferType(type, duration, size) {
+  if (!cacheableTypes.includes(type)) {
+    return null;
+  }
+  if ((size === undefined || size === 0) && duration === 0) {
+    return MEMORY_KEY;
+  }
+  if (size === 0 && duration > 0) {
+    return DISK_KEY;
+  }
+  if (size === undefined) {
+    return null;
+  }
+  return NETWORK_KEY;
+};
+export var round = function round(n) {
+  if (isNaN(n)) {
+    return 0;
+  }
+  return Math.round(n * 10000) / 10000;
+};

package/dist/esm/common/assets/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -11,6 +11,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import Bowser from 'bowser-ultralight';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getLighthouseMetrics } from '../additional-payload';
+import { CHRReporter } from '../assets';
 import * as bundleEvalTiming from '../bundle-eval-timing';
 import coinflip from '../coinflip';
 import { REACT_UFO_VERSION } from '../common/constants';
@@ -211,6 +212,16 @@ var getVCMetrics = function getVCMetrics(interaction) {
   if (interactionStatus.originalInteractionStatus !== 'SUCCEEDED' || pageVisibilityUpToTTAI !== 'visible') {
     return result;
   }
+  if (fg('ufo_vc_multiheatmap')) {
+    var _result;
+    (_result = result["".concat(prefix, ":vc:rev")]) === null || _result === void 0 || _result.forEach(function (element) {
+      var _element$vcDetails;
+      if ((_element$vcDetails = element.vcDetails) !== null && _element$vcDetails !== void 0 && (_element$vcDetails = _element$vcDetails['90']) !== null && _element$vcDetails !== void 0 && _element$vcDetails.t) {
+        var _element$vcDetails$;
+        element['metric:vc90'] = (_element$vcDetails$ = element.vcDetails['90']) === null || _element$vcDetails$ === void 0 ? void 0 : _element$vcDetails$.t;
+      }
+    });
+  }
   return _objectSpread(_objectSpread({}, result), {}, {
     'metric:vc90': VC['90']
   });
@@ -294,6 +305,31 @@ function getSSRProperties(type) {
     'ssr:featureFlags': getSSRFeatureFlags(type)
   };
 }
+var getAssetsMetrics = function getAssetsMetrics(interaction, resourceTimings) {
+  try {
+    var config = getConfig();
+    var type = interaction.type;
+    var isCHREnabled = fg('ufo_chr_config');
+    var allowedTypes = ['page_load', 'transition'];
+    var assetsClassification = config === null || config === void 0 ? void 0 : config.assetsClassification;
+    if (!isCHREnabled || !allowedTypes.includes(type) || !assetsClassification) {
+      // Skip if: FG disabled, not allowed type or assetsClassification isn't configured
+      return {};
+    }
+    var reporter = new CHRReporter();
+    var assets = reporter.get(resourceTimings, assetsClassification);
+    if (assets) {
+      // Only add assets in case it exists
+      return {
+        'event:assets': assets
+      };
+    }
+    return {};
+  } catch (error) {
+    // Skip CHR in case of error
+    return {};
+  }
+};
 var getBrowserMetadata = function getBrowserMetadata() {
   var data = {};
   var now = new Date();
@@ -708,7 +744,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
     });
   };
   // Detailed payload. Page visibility = visible
-  var getDetailedInteractionMetrics = function getDetailedInteractionMetrics() {
+  var getDetailedInteractionMetrics = function getDetailedInteractionMetrics(resourceTimings) {
     if (experimental || window.__UFO_COMPACT_PAYLOAD__ || !isDetailedPayload) {
       return {};
     }
@@ -729,7 +765,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
       requestInfo: optimizeRequestInfo(interaction.requestInfo, start),
       customTimings: optimizeCustomTimings(interaction.customTimings, start),
       bundleEvalTimings: objectToArray(getBundleEvalTimings(start)),
-      resourceTimings: objectToArray(getResourceTimings(start, end))
+      resourceTimings: objectToArray(resourceTimings)
     };
   };
   // Page load & detailed payload
@@ -750,6 +786,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
     regularTTAI = getTTAI(interaction);
   }
   var newUFOName = sanitizeUfoName(ufoName);
+  var resourceTimings = getResourceTimings(start, end);
   var payload = {
     actionSubject: 'experience',
     action: 'measured',
@@ -757,7 +794,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
     source: 'measured',
     tags: ['observability'],
     attributes: {
-      properties: _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({
         // basic
         'event:hostname': ((_window$location = window.location) === null || _window$location === void 0 ? void 0 : _window$location.hostname) || 'unknown',
         'event:product': config.product,
@@ -771,7 +808,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
         'event:region': config.region || 'unknown',
         'experience:key': experimental ? 'custom.experimental-interaction-metrics' : 'custom.interaction-metrics',
         'experience:name': newUFOName
-      }, getBrowserMetadata()), getSSRProperties(type)), getPPSMetrics(interaction)), getPaintMetrics(type)), getNavigationMetrics(type)), getVCMetrics(interaction)), experimental ? getExperimentalVCMetrics(interaction) : undefined), (_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, resourceTimings)), getPPSMetrics(interaction)), getPaintMetrics(type)), getNavigationMetrics(type)), getVCMetrics(interaction)), experimental ? getExperimentalVCMetrics(interaction) : undefined), (_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 || '',
@@ -803,7 +840,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
           marks: optimizeMarks(interaction.marks),
           customData: optimizeCustomData(interaction),
           reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start)
-        }, labelStack), getPageLoadInteractionMetrics()), getDetailedInteractionMetrics()), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)), {}, {
+        }, labelStack), getPageLoadInteractionMetrics()), getDetailedInteractionMetrics(resourceTimings)), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)), {}, {
           'metric:ttai': experimental ? regularTTAI || expTTAI : undefined,
           'metric:experimental:ttai': expTTAI
         }),

package/dist/esm/experience-trace-id-context/index.js

@@ -31,4 +31,8 @@ export var getActiveTraceHttpRequestHeaders = function getActiveTraceHttpRequest
     traceId = _state$context.traceId,
     spanId = _state$context.spanId;
   return makeTraceHttpRequestHeaders(traceId, spanId);
+};
+export var getActiveTraceAsQueryParams = function getActiveTraceAsQueryParams(_url) {
+  var traceHeaders = getActiveTraceHttpRequestHeaders(_url);
+  return traceHeaders ? new URLSearchParams(traceHeaders).toString().toLowerCase() : null;
 };

package/dist/esm/segment/segment.js

@@ -5,6 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { lazy, Profiler, Suspense, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { unstable_NormalPriority as NormalPriority, unstable_scheduleCallback as scheduleCallback } from 'scheduler';
 import { v4 as createUUID } from 'uuid';
+import { fg } from '@atlaskit/platform-feature-flags';
 import coinflip from '../coinflip';
 import { getConfig, getInteractionRate } from '../config';
 import { getActiveTrace, setInteractionActiveTrace } from '../experience-trace-id-context';
@@ -42,7 +43,9 @@ export default function UFOSegment(_ref) {
   }, [parentContext, segmentName, segmentId]);
   var interactionId = useContext(UFOInteractionIDContext);
   var interactionContext = useMemo(function () {
-    addSegment(labelStack);
+    if (!fg('platform-ufo-add-segment-use-effect')) {
+      addSegment(labelStack);
+    }
     var lastCompleteEndTime = 0;
     function complete() {
       var endTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : performance.now();
@@ -221,6 +224,9 @@ export default function UFOSegment(_ref) {
     }
   }, [interactionContext]);
   useEffect(function () {
+    if (fg('platform-ufo-add-segment-use-effect')) {
+      addSegment(labelStack);
+    }
     return function () {
       removeSegment(labelStack);
     };

package/dist/esm/vc/vc-observer/heatmap/heatmap.js

@@ -0,0 +1,257 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var UNUSED_SECTOR = 0;
+export var MultiRevisionHeatmap = /*#__PURE__*/function () {
+  function MultiRevisionHeatmap(_ref) {
+    var _this = this;
+    var viewport = _ref.viewport,
+      revisions = _ref.revisions,
+      arraySize = _ref.arraySize,
+      devToolsEnabled = _ref.devToolsEnabled;
+    _classCallCheck(this, MultiRevisionHeatmap);
+    _defineProperty(this, "arraySize", {
+      w: 200,
+      h: 200
+    });
+    _defineProperty(this, "mapPixelsToHeatmap", function (left, top, width, height) {
+      var _this$viewport = _this.viewport,
+        w = _this$viewport.w,
+        h = _this$viewport.h;
+      var l = Math.floor(left / w * _this.arraySize.w);
+      var t = Math.floor(top / h * _this.arraySize.h);
+      var r = Math.ceil((left + width) / w * _this.arraySize.w);
+      var b = Math.ceil((top + height) / h * _this.arraySize.h);
+
+      // correct values to min - 0, max - arraySize
+      var result = {
+        l: Math.max(0, l),
+        t: Math.max(0, t),
+        r: Math.min(_this.arraySize.w, r),
+        b: Math.min(_this.arraySize.h, b)
+      };
+      return result;
+    });
+    _defineProperty(this, "getElementRatio", function (mappedValues) {
+      var r = mappedValues.r,
+        l = mappedValues.l,
+        b = mappedValues.b,
+        t = mappedValues.t;
+      return (r - l) * (b - t) / (_this.arraySize.w * _this.arraySize.h);
+    });
+    this.viewport = viewport;
+    this.revisions = revisions;
+    if (arraySize) {
+      this.arraySize = arraySize;
+    }
+    this.heatmaps = new Array(revisions.length);
+    this.componentsLogs = new Array(revisions.length);
+    this.vcRatios = new Array(revisions.length);
+    this.devToolsEnabled = devToolsEnabled || false;
+    revisions.forEach(function (_ref2, i) {
+      _objectDestructuringEmpty(_ref2);
+      _this.heatmaps[i] = _this.getCleanHeatmap();
+      _this.componentsLogs[i] = {};
+      _this.vcRatios[i] = {};
+    });
+  }
+  return _createClass(MultiRevisionHeatmap, [{
+    key: "handleUpdate",
+    value: function handleUpdate(_ref3) {
+      var _this2 = this;
+      var time = _ref3.time,
+        type = _ref3.type,
+        classification = _ref3.classification,
+        intersectionRect = _ref3.intersectionRect,
+        element = _ref3.element,
+        targetName = _ref3.targetName,
+        ignoreReason = _ref3.ignoreReason,
+        onError = _ref3.onError;
+      var mappedValues = this.mapPixelsToHeatmap(intersectionRect.left, intersectionRect.top, intersectionRect.width, intersectionRect.height);
+      var result = this.applyChangesToHeatMap(mappedValues, time, classification);
+      if (result !== true) {
+        onError(result);
+      }
+      var componentRatio = this.getElementRatio(mappedValues);
+      this.revisions.forEach(function (_, i) {
+        if (classification[i]) {
+          _this2.vcRatios[i][targetName] = componentRatio;
+        }
+        if (!_this2.componentsLogs[i][time]) {
+          _this2.componentsLogs[i][time] = [];
+        }
+        _this2.componentsLogs[i][time].push({
+          __debug__element: _this2.devToolsEnabled ? new WeakRef(element) : null,
+          intersectionRect: intersectionRect,
+          targetName: targetName,
+          ignoreReason: ignoreReason
+        });
+      });
+    }
+  }, {
+    key: "getData",
+    value: function getData() {
+      return {
+        heatmaps: this.heatmaps
+      };
+    }
+  }, {
+    key: "getPayloadShapedData",
+    value: function getPayloadShapedData(args) {
+      var result = this.processData(args);
+      var payload = this.revisions.map(function (rev, i) {
+        var vcDetails = {};
+        args.VCParts.forEach(function (VCPart) {
+          vcDetails[VCPart] = {
+            t: result[i].VC[VCPart] || 0,
+            e: Array.from(result[i].VCBox[VCPart] || [])
+          };
+        });
+        return {
+          revision: rev.name,
+          vcDetails: vcDetails,
+          clean: args.clean,
+          'metric:vc90': null // will be set or not in the payload generator
+        };
+      });
+      return payload;
+    }
+  }, {
+    key: "processData",
+    value: function processData(_ref4) {
+      var _this3 = this;
+      var VCParts = _ref4.VCParts,
+        VCCalculationMethods = _ref4.VCCalculationMethods,
+        _ref4$ssr = _ref4.ssr,
+        ssr = _ref4$ssr === void 0 ? UNUSED_SECTOR : _ref4$ssr;
+      return this.heatmaps.map(function (heatmap, i) {
+        var lastUpdate = {};
+        var totalPainted = 0;
+        var componentsLog = _this3.componentsLogs[i];
+        if (ssr !== UNUSED_SECTOR) {
+          var _window$document;
+          var element = {
+            __debug__element: new WeakRef((_window$document = window.document) === null || _window$document === void 0 ? void 0 : _window$document.body),
+            intersectionRect: {
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              x: 0,
+              y: 0,
+              width: _this3.viewport.w,
+              height: _this3.viewport.h,
+              toJSON: function toJSON() {
+                return {};
+              }
+            },
+            targetName: 'SSR'
+          };
+          if (!componentsLog[ssr]) {
+            componentsLog[ssr] = [];
+          }
+          componentsLog[ssr].push(element);
+        }
+        for (var _i = 0; _i < heatmap.length; _i++) {
+          var rounded = Math.floor(heatmap[_i] === UNUSED_SECTOR && ssr !== UNUSED_SECTOR ? ssr : heatmap[_i]);
+          totalPainted += rounded !== UNUSED_SECTOR ? 1 : 0;
+          if (rounded !== UNUSED_SECTOR) {
+            lastUpdate[rounded] = lastUpdate[rounded] ? lastUpdate[rounded] + 1 : 1;
+          }
+        }
+        var entries = Object.entries(lastUpdate).map(function (a) {
+          return [parseInt(a[0], 10), a[1]];
+        }).sort(function (a, b) {
+          return a[0] > b[0] ? 1 : -1;
+        });
+        var _VCCalculationMethods = VCCalculationMethods[i]({
+            VCParts: VCParts,
+            componentsLog: componentsLog,
+            entries: entries,
+            totalPainted: totalPainted
+          }),
+          VC = _VCCalculationMethods.VC,
+          VCBox = _VCCalculationMethods.VCBox;
+        var VCEntries = entries.reduce(function (acc, _ref5, i) {
+          var _acc$abs, _componentsLog$timest;
+          var _ref6 = _slicedToArray(_ref5, 2),
+            timestamp = _ref6[0],
+            entryPainted = _ref6[1];
+          var currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
+          var currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
+          var logEntry = (_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(function (v) {
+            return v.targetName;
+          });
+          acc.abs.push([timestamp, currentlyPainted]);
+          acc.rel.push({
+            time: timestamp,
+            vc: currentlyPaintedRatio,
+            elements: logEntry
+          });
+          return acc;
+        }, {
+          abs: [],
+          rel: []
+        });
+        return {
+          VC: VC,
+          VCBox: VCBox,
+          VCEntries: VCEntries,
+          totalPainted: totalPainted
+        };
+      });
+    }
+  }, {
+    key: "applyChangesToHeatMap",
+    value: function applyChangesToHeatMap(a, time, classification) {
+      var l = a.l,
+        t = a.t,
+        r = a.r,
+        b = a.b;
+      var size = classification.length;
+      for (var row = t; row < b; row++) {
+        if (this.heatmaps[0][row] === undefined) {
+          try {
+            return {
+              error: "index - ".concat(row),
+              time: time
+            };
+          } catch (e) {
+            return {
+              error: 'row error',
+              time: time
+            };
+          }
+        } else {
+          for (var heatmapIndex = 0; heatmapIndex < size; heatmapIndex++) {
+            if (classification[heatmapIndex]) {
+              this.heatmaps[heatmapIndex].fill(time, this.getIndex(l, row), this.getIndex(r, row));
+            }
+          }
+        }
+      }
+      return true;
+    }
+  }, {
+    key: "getIndex",
+    value: function getIndex(x, y) {
+      return x + this.arraySize.w * y;
+    }
+  }, {
+    key: "getCleanHeatmap",
+    value: function getCleanHeatmap() {
+      return new Uint32Array(this.arraySize.w * this.arraySize.h);
+    }
+  }], [{
+    key: "makeVCReturnObj",
+    value: function makeVCReturnObj(VCParts) {
+      var vc = {};
+      VCParts.forEach(function (v) {
+        vc[v] = null;
+      });
+      return vc;
+    }
+  }]);
+}();