@atlaskit/react-ufo 2.15.0 → 2.16.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 2.16.0
+
+### Minor Changes
+
+- [#109616](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109616)
+  [`5feb3a695a6d9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5feb3a695a6d9) -
+  Add Assets API to rUFO
+
 ## 2.15.0
 
 ### Minor Changes

package/dist/cjs/assets/index.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CHRSummary = exports.CHRReporter = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty4 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _utils = require("./utils");
+var CHRSummary = exports.CHRSummary = /*#__PURE__*/function () {
+  function CHRSummary() {
+    (0, _classCallCheck2.default)(this, CHRSummary);
+    (0, _defineProperty4.default)(this, "bundles", (0, _defineProperty4.default)((0, _defineProperty4.default)((0, _defineProperty4.default)({}, _utils.MEMORY_KEY, 0), _utils.DISK_KEY, 0), _utils.NETWORK_KEY, 0));
+    (0, _defineProperty4.default)(this, "bundlesCount", 0);
+    (0, _defineProperty4.default)(this, "size", (0, _defineProperty4.default)((0, _defineProperty4.default)((0, _defineProperty4.default)({}, _utils.MEMORY_KEY, 0), _utils.DISK_KEY, 0), _utils.NETWORK_KEY, 0));
+    (0, _defineProperty4.default)(this, "sizeTotal", 0);
+  }
+  return (0, _createClass2.default)(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 = (0, _utils.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[_utils.MEMORY_KEY] + size[_utils.DISK_KEY];
+      var sizeRatio = (0, _utils.round)(cachedSize / summary.sizeTotal);
+      return {
+        size: sizeTotal,
+        chr: sizeRatio,
+        count: bundlesCount
+      };
+    }
+  }]);
+}();
+var CHRReporter = exports.CHRReporter = /*#__PURE__*/function () {
+  function CHRReporter() {
+    (0, _classCallCheck2.default)(this, CHRReporter);
+    (0, _defineProperty4.default)(this, "all", new CHRSummary());
+    (0, _defineProperty4.default)(this, "allAtlassian", new CHRSummary());
+    (0, _defineProperty4.default)(this, "preloaded", new CHRSummary());
+  }
+  return (0, _createClass2.default)(CHRReporter, [{
+    key: "get",
+    value: function get(resourceTimings, assetsClassification) {
+      var _this = this;
+      try {
+        Object.entries(resourceTimings).map(function (_ref) {
+          var _ref2 = (0, _slicedToArray2.default)(_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/cjs/assets/utils.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.round = exports.calculateTransferType = exports.cacheableTypes = exports.NETWORK_KEY = exports.MEMORY_KEY = exports.DISK_KEY = void 0;
+/* Borrowed from https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/performance/browser-metrics/src/plugins/timings/resource.ts */
+var cacheableTypes = exports.cacheableTypes = ['script', 'link'];
+var MEMORY_KEY = exports.MEMORY_KEY = 'mem';
+var DISK_KEY = exports.DISK_KEY = 'disk';
+var NETWORK_KEY = exports.NETWORK_KEY = 'net';
+var calculateTransferType = exports.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;
+};
+var round = exports.round = function round(n) {
+  if (isNaN(n)) {
+    return 0;
+  }
+  return Math.round(n * 10000) / 10000;
+};

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -14,6 +14,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _bowserUltralight = _interopRequireDefault(require("bowser-ultralight"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _additionalPayload = require("../additional-payload");
+var _assets = require("../assets");
 var bundleEvalTiming = _interopRequireWildcard(require("../bundle-eval-timing"));
 var _coinflip = _interopRequireDefault(require("../coinflip"));
 var _constants = require("../common/constants");
@@ -315,6 +316,31 @@ function getSSRProperties(type) {
     'ssr:featureFlags': getSSRFeatureFlags(type)
   };
 }
+var getAssetsMetrics = function getAssetsMetrics(interaction, resourceTimings) {
+  try {
+    var config = (0, _config.getConfig)();
+    var type = interaction.type;
+    var isCHREnabled = (0, _platformFeatureFlags.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 _assets.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();
@@ -729,7 +755,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 {};
     }
@@ -750,7 +776,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
@@ -771,6 +797,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
     regularTTAI = getTTAI(interaction);
   }
   var newUFOName = (0, _utils.sanitizeUfoName)(ufoName);
+  var resourceTimings = getResourceTimings(start, end);
   var payload = {
     actionSubject: 'experience',
     action: 'measured',
@@ -778,7 +805,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,
@@ -792,7 +819,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 ? (0, _createExperimentalInteractionMetricsPayload.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 ? (0, _createExperimentalInteractionMetricsPayload.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 || '',
@@ -824,7 +851,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/cjs/vc/vc-observer/heatmap/heatmap.js

@@ -130,6 +130,7 @@ var MultiRevisionHeatmap = exports.MultiRevisionHeatmap = /*#__PURE__*/function
     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) {
@@ -172,26 +173,14 @@ var MultiRevisionHeatmap = exports.MultiRevisionHeatmap = /*#__PURE__*/function
         }).sort(function (a, b) {
           return a[0] > b[0] ? 1 : -1;
         });
-        var VC = MultiRevisionHeatmap.makeVCReturnObj(VCParts);
-        var VCBox = MultiRevisionHeatmap.makeVCReturnObj(VCParts);
-        entries.reduce(function () {
-          var acc = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-          var v = arguments.length > 1 ? arguments[1] : undefined;
-          var VCRatio = v[1] / totalPainted + acc;
-          var time = v[0];
-          VCParts.forEach(function (value) {
-            if ((VC[value] === null || VC[value] === undefined) && VCRatio >= value / 100) {
-              var _componentsLog$time;
-              VC[value] = time;
-              VCBox[value] = new Set();
-              (_componentsLog$time = componentsLog[time]) === null || _componentsLog$time === void 0 || _componentsLog$time.forEach(function (v) {
-                var _VCBox$value;
-                return (_VCBox$value = VCBox[value]) === null || _VCBox$value === void 0 ? void 0 : _VCBox$value.add(v.targetName);
-              });
-            }
-          });
-          return VCRatio;
-        }, 0);
+        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 = (0, _slicedToArray2.default)(_ref5, 2),

package/dist/cjs/vc/vc-observer/index.js

@@ -256,6 +256,10 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         VCParts: VCObserver.VCParts.map(function (v) {
           return parseInt(v);
         }),
+        VCCalculationMethods: (0, _revisions.getRevisions)().map(function (_ref8) {
+          var classifier = _ref8.classifier;
+          return classifier.VCCalculationMethod;
+        }),
         ssr: ssr,
         clean: !abortReasonInfo
       })) : null;
@@ -302,13 +306,13 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         });
       }
     });
-    (0, _defineProperty2.default)(this, "onViewportChangeDetected", function (_ref9) {
-      var element = _ref9.element,
-        type = _ref9.type,
-        ignoreReason = _ref9.ignoreReason,
-        timestamp = _ref9.timestamp,
-        targetName = _ref9.targetName,
-        intersectionRect = _ref9.intersectionRect;
+    (0, _defineProperty2.default)(this, "onViewportChangeDetected", function (_ref10) {
+      var element = _ref10.element,
+        type = _ref10.type,
+        ignoreReason = _ref10.ignoreReason,
+        timestamp = _ref10.timestamp,
+        targetName = _ref10.targetName,
+        intersectionRect = _ref10.intersectionRect;
       if (_this.multiHeatmap === null) {
         return;
       }
@@ -390,10 +394,10 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
       var unbinds = (0, _attachAbortListeners.attachAbortListeners)(window, _this.viewport, _this.abortReasonCallback);
       if ((_window = window) !== null && _window !== void 0 && _window.__SSR_ABORT_LISTENERS__) {
         var _window2;
-        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref10) {
-          var _ref11 = (0, _slicedToArray2.default)(_ref10, 2),
-            key = _ref11[0],
-            time = _ref11[1];
+        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref11) {
+          var _ref12 = (0, _slicedToArray2.default)(_ref11, 2),
+            key = _ref12[0],
+            time = _ref12[1];
           if (time) {
             _this.abortReasonCallback(key, time);
           }
@@ -428,8 +432,8 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
   }
   return (0, _createClass2.default)(VCObserver, [{
     key: "start",
-    value: function start(_ref12) {
-      var startTime = _ref12.startTime;
+    value: function start(_ref13) {
+      var startTime = _ref13.startTime;
       this.active = true;
       if (this.observers.isBrowserSupported()) {
         this.setViewportSize();
@@ -451,12 +455,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
   }, {
     key: "getIgnoredElements",
     value: function getIgnoredElements(componentsLog) {
-      return Object.values(componentsLog).flat().filter(function (_ref13) {
-        var ignoreReason = _ref13.ignoreReason;
+      return Object.values(componentsLog).flat().filter(function (_ref14) {
+        var ignoreReason = _ref14.ignoreReason;
         return Boolean(ignoreReason);
-      }).map(function (_ref14) {
-        var targetName = _ref14.targetName,
-          ignoreReason = _ref14.ignoreReason;
+      }).map(function (_ref15) {
+        var targetName = _ref15.targetName,
+          ignoreReason = _ref15.ignoreReason;
         return {
           targetName: targetName,
           ignoreReason: ignoreReason
@@ -577,12 +581,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
     }
   }], [{
     key: "calculateVC",
-    value: function calculateVC(_ref15) {
-      var heatmap = _ref15.heatmap,
-        _ref15$ssr = _ref15.ssr,
-        ssr = _ref15$ssr === void 0 ? UNUSED_SECTOR : _ref15$ssr,
-        componentsLog = _ref15.componentsLog,
-        viewport = _ref15.viewport;
+    value: function calculateVC(_ref16) {
+      var heatmap = _ref16.heatmap,
+        _ref16$ssr = _ref16.ssr,
+        ssr = _ref16$ssr === void 0 ? UNUSED_SECTOR : _ref16$ssr,
+        componentsLog = _ref16.componentsLog,
+        viewport = _ref16.viewport;
       var lastUpdate = {};
       var totalPainted = 0;
       if (ssr !== UNUSED_SECTOR) {
@@ -651,11 +655,11 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         });
         return VCRatio;
       }, 0);
-      var VCEntries = entries.reduce(function (acc, _ref16, i) {
+      var VCEntries = entries.reduce(function (acc, _ref17, i) {
         var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
-        var _ref17 = (0, _slicedToArray2.default)(_ref16, 2),
-          timestamp = _ref17[0],
-          entryPainted = _ref17[1];
+        var _ref18 = (0, _slicedToArray2.default)(_ref17, 2),
+          timestamp = _ref18[0],
+          entryPainted = _ref18[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) {

package/dist/cjs/vc/vc-observer/revisions/ViewportUpdateClassifier.js

@@ -19,6 +19,14 @@ var ViewportUpdateClassifier = exports.ViewportUpdateClassifier = /*#__PURE__*/f
     (0, _defineProperty2.default)(this, "__combinedFilters", []);
   }
   return (0, _createClass2.default)(ViewportUpdateClassifier, [{
+    key: "VCCalculationMethod",
+    value: function VCCalculationMethod(_) {
+      return {
+        VC: {},
+        VCBox: {}
+      };
+    }
+  }, {
     key: "mergeConfig",
     value: function mergeConfig() {
       var _this = this;

package/dist/cjs/vc/vc-observer/revisions/fy24_01.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.revFY24_01Classifier = exports.FY24_01Classifier = void 0;
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
@@ -34,6 +34,38 @@ var FY24_01Classifier = exports.FY24_01Classifier = /*#__PURE__*/function (_View
     return _this;
   }
   (0, _inherits2.default)(FY24_01Classifier, _ViewportUpdateClassi);
-  return (0, _createClass2.default)(FY24_01Classifier);
+  return (0, _createClass2.default)(FY24_01Classifier, [{
+    key: "VCCalculationMethod",
+    value: function VCCalculationMethod(_ref2) {
+      var VCParts = _ref2.VCParts,
+        entries = _ref2.entries,
+        totalPainted = _ref2.totalPainted,
+        componentsLog = _ref2.componentsLog;
+      var VC = {};
+      var VCBox = {};
+      entries.reduce(function () {
+        var acc = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+        var v = arguments.length > 1 ? arguments[1] : undefined;
+        var VCRatio = v[1] / totalPainted + acc;
+        var time = v[0];
+        VCParts.forEach(function (value) {
+          if ((VC[value] === null || VC[value] === undefined) && VCRatio >= value / 100) {
+            var _componentsLog$time;
+            VC[value] = time;
+            VCBox[value] = new Set();
+            (_componentsLog$time = componentsLog[time]) === null || _componentsLog$time === void 0 || _componentsLog$time.forEach(function (v) {
+              var _VCBox$value;
+              return (_VCBox$value = VCBox[value]) === null || _VCBox$value === void 0 ? void 0 : _VCBox$value.add(v.targetName);
+            });
+          }
+        });
+        return VCRatio;
+      }, 0);
+      return {
+        VC: VC,
+        VCBox: VCBox
+      };
+    }
+  }]);
 }(_ViewportUpdateClassifier.ViewportUpdateClassifier);
 var revFY24_01Classifier = exports.revFY24_01Classifier = new FY24_01Classifier();

package/dist/es2019/assets/index.js

@@ -0,0 +1,82 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { calculateTransferType, DISK_KEY, MEMORY_KEY, NETWORK_KEY, round } from './utils';
+export class CHRSummary {
+  constructor() {
+    _defineProperty(this, "bundles", {
+      [MEMORY_KEY]: 0,
+      [DISK_KEY]: 0,
+      [NETWORK_KEY]: 0
+    });
+    _defineProperty(this, "bundlesCount", 0);
+    _defineProperty(this, "size", {
+      [MEMORY_KEY]: 0,
+      [DISK_KEY]: 0,
+      [NETWORK_KEY]: 0
+    });
+    _defineProperty(this, "sizeTotal", 0);
+  }
+  add(asset) {
+    const size = 'size' in asset ? asset.size : undefined;
+    const encodedSize = 'encodedSize' in asset ? Number(asset.encodedSize) : 0;
+    const 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;
+  }
+  static makePayload(summary) {
+    const {
+      size,
+      bundlesCount,
+      sizeTotal
+    } = summary;
+    const cachedSize = size[MEMORY_KEY] + size[DISK_KEY];
+    const sizeRatio = round(cachedSize / summary.sizeTotal);
+    return {
+      size: sizeTotal,
+      chr: sizeRatio,
+      count: bundlesCount
+    };
+  }
+}
+export class CHRReporter {
+  constructor() {
+    _defineProperty(this, "all", new CHRSummary());
+    _defineProperty(this, "allAtlassian", new CHRSummary());
+    _defineProperty(this, "preloaded", new CHRSummary());
+  }
+  get(resourceTimings, assetsClassification) {
+    try {
+      Object.entries(resourceTimings).map(([label, entry]) => {
+        if (assetsClassification.all) {
+          this.all.add(entry);
+        }
+        if (assetsClassification.allAtlassian({
+          label,
+          entry
+        })) {
+          this.allAtlassian.add(entry);
+        }
+        if (assetsClassification.preloaded({
+          label,
+          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/es2019/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 const cacheableTypes = ['script', 'link'];
+export const MEMORY_KEY = 'mem';
+export const DISK_KEY = 'disk';
+export const NETWORK_KEY = 'net';
+export const 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 const round = n => {
+  if (isNaN(n)) {
+    return 0;
+  }
+  return Math.round(n * 10000) / 10000;
+};

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

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

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

@@ -1,6 +1,7 @@
 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';
@@ -298,6 +299,33 @@ function getSSRProperties(type) {
     'ssr:featureFlags': getSSRFeatureFlags(type)
   };
 }
+const getAssetsMetrics = (interaction, resourceTimings) => {
+  try {
+    const config = getConfig();
+    const {
+      type
+    } = interaction;
+    const isCHREnabled = fg('ufo_chr_config');
+    const allowedTypes = ['page_load', 'transition'];
+    const 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 {};
+    }
+    const reporter = new CHRReporter();
+    const 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 {};
+  }
+};
 const getBrowserMetadata = () => {
   const data = {};
   const now = new Date();
@@ -723,7 +751,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
     };
   };
   // Detailed payload. Page visibility = visible
-  const getDetailedInteractionMetrics = () => {
+  const getDetailedInteractionMetrics = resourceTimings => {
     if (experimental || window.__UFO_COMPACT_PAYLOAD__ || !isDetailedPayload) {
       return {};
     }
@@ -744,7 +772,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
@@ -765,6 +793,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
     regularTTAI = getTTAI(interaction);
   }
   const newUFOName = sanitizeUfoName(ufoName);
+  const resourceTimings = getResourceTimings(start, end);
   const payload = {
     actionSubject: 'experience',
     action: 'measured',
@@ -789,6 +818,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
         // root
         ...getBrowserMetadata(),
         ...getSSRProperties(type),
+        ...getAssetsMetrics(interaction, resourceTimings),
         ...getPPSMetrics(interaction),
         ...getPaintMetrics(type),
         ...getNavigationMetrics(type),
@@ -831,7 +861,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
           reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start),
           ...labelStack,
           ...getPageLoadInteractionMetrics(),
-          ...getDetailedInteractionMetrics(),
+          ...getDetailedInteractionMetrics(resourceTimings),
           ...getPageLoadDetailedInteractionMetrics(),
           ...getBm3TrackerTimings(interaction),
           'metric:ttai': experimental ? regularTTAI || expTTAI : undefined,