@atlaskit/react-ufo 3.3.3 → 3.4.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.4.1
+
+### Patch Changes
+
+- [#124988](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/124988)
+  [`fa5bc92ae734d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fa5bc92ae734d) -
+  Deduplicate nth-child(n) selectors produced by TTVC v3 debug info
+
+## 3.4.0
+
+### Minor Changes
+
+- [#124334](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/124334)
+  [`419c4451a0c0f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/419c4451a0c0f) -
+  Updated assets config to include different types of requests
+
 ## 3.3.3
 
 ### Patch Changes

package/dist/cjs/assets/index.js

@@ -5,7 +5,6 @@ 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"));
@@ -21,9 +20,8 @@ var CHRSummary = exports.CHRSummary = /*#__PURE__*/function () {
   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);
+      var encodedSize = asset.encodedSize || 0;
+      var type = (0, _utils.calculateTransferType)(asset.name, asset.initiatorType, asset.duration, asset.transferSize);
       if (type === null) {
         return;
       }
@@ -54,28 +52,39 @@ var CHRReporter = exports.CHRReporter = /*#__PURE__*/function () {
     (0, _defineProperty4.default)(this, "all", new CHRSummary());
     (0, _defineProperty4.default)(this, "allAtlassian", new CHRSummary());
     (0, _defineProperty4.default)(this, "preloaded", new CHRSummary());
+    (0, _defineProperty4.default)(this, "defaultAllowedTypes", ['js']);
   }
   return (0, _createClass2.default)(CHRReporter, [{
     key: "get",
-    value: function get(resourceTimings, assetsClassification) {
+    value: function get(resourceTimings, assetsConfig, SSRDoneTime) {
       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) {
+        if (resourceTimings === null) {
+          return null;
+        }
+        resourceTimings.forEach(function (entry) {
+          if (!(0, _utils.checkIfTimingsAvailable)(entry)) {
+            return;
+          }
+          if (entry.encodedSize === entry.decodedSize) {
+            // incorrectly reported size
+            return;
+          }
+          var type = (0, _utils.getTypeOfRequest)(entry);
+          if (!(assetsConfig.allowedTypes || _this.defaultAllowedTypes).includes(type)) {
+            return;
+          }
+          if (assetsConfig.classification.all) {
             _this.all.add(entry);
           }
-          if (assetsClassification.allAtlassian({
-            label: label,
+          if (assetsConfig.classification.allAtlassian({
             entry: entry
           })) {
             _this.allAtlassian.add(entry);
           }
-          if (assetsClassification.preloaded({
-            label: label,
-            entry: entry
+          if (assetsConfig.classification.preloaded({
+            entry: entry,
+            SSRDoneTime: SSRDoneTime
           })) {
             _this.preloaded.add(entry);
           }
@@ -83,11 +92,12 @@ var CHRReporter = exports.CHRReporter = /*#__PURE__*/function () {
         if (this.all.bundlesCount === 0) {
           return null;
         }
-        return {
+        var CHRData = {
           all: CHRSummary.makePayload(this.all),
           allAtlassian: CHRSummary.makePayload(this.allAtlassian),
           preloaded: CHRSummary.makePayload(this.preloaded)
         };
+        return CHRData;
       } catch (error) {
         return null;
       }

package/dist/cjs/assets/utils.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.round = exports.calculateTransferType = exports.cacheableTypes = exports.NETWORK_KEY = exports.MEMORY_KEY = exports.DISK_KEY = void 0;
+exports.round = exports.getTypeOfRequest = exports.checkIfTimingsAvailable = 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 cacheableTypes = exports.cacheableTypes = ['script', 'link', 'other'];
 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)) {
+var calculateTransferType = exports.calculateTransferType = function calculateTransferType(name, type, duration, size) {
+  if (!cacheableTypes.includes(type) && !(type === 'other' && name.includes('.js'))) {
     return null;
   }
   if ((size === undefined || size === 0) && duration === 0) {
@@ -24,6 +24,49 @@ var calculateTransferType = exports.calculateTransferType = function calculateTr
   }
   return NETWORK_KEY;
 };
+var getTypeOfRequest = exports.getTypeOfRequest = function getTypeOfRequest(_ref) {
+  var name = _ref.name,
+    type = _ref.initiatorType;
+  var category = 'other';
+  var urlWithoutQuery = name.split('?')[0];
+  switch (type) {
+    case 'script':
+      category = 'js';
+      break;
+    case 'link':
+      if (urlWithoutQuery.endsWith('.css')) {
+        category = 'css';
+      }
+      if (urlWithoutQuery.endsWith('.js')) {
+        category = 'js';
+      }
+      break;
+    case 'img':
+      category = 'image';
+      break;
+    case 'font':
+      category = 'font';
+      break;
+    default:
+      if (urlWithoutQuery.endsWith('.js')) {
+        category = 'js';
+      } else if (urlWithoutQuery.endsWith('.css')) {
+        category = 'css';
+      } else if (urlWithoutQuery.match(/\.(woff|woff2|ttf|otf)$/)) {
+        category = 'font';
+      } else if (urlWithoutQuery.match(/\.(png|jpg|jpeg|gif|svg)$/)) {
+        category = 'image';
+      }
+      break;
+  }
+  return category;
+};
+var checkIfTimingsAvailable = exports.checkIfTimingsAvailable = function checkIfTimingsAvailable(entry) {
+  if (entry.decodedSize === 0 && entry.encodedSize === 0 && entry.requestStart === 0 && entry.responseStart === 0) {
+    return false;
+  }
+  return true;
+};
 var round = exports.round = function round(n) {
   if (isNaN(n)) {
     return 0;

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

@@ -28,6 +28,7 @@ var _hiddenTiming = require("../hidden-timing");
 var initialPageLoadExtraTiming = _interopRequireWildcard(require("../initial-page-load-extra-timing"));
 var _interactionMetrics = require("../interaction-metrics");
 var resourceTiming = _interopRequireWildcard(require("../resource-timing"));
+var _resourceTimingBuffer = require("../resource-timing/common/utils/resource-timing-buffer");
 var _roundNumber = require("../round-number");
 var ssr = _interopRequireWildcard(require("../ssr"));
 var _utils = require("./common/utils");
@@ -257,18 +258,19 @@ function getSSRProperties(type) {
     'ssr:featureFlags': getSSRFeatureFlags(type)
   };
 }
-var getAssetsMetrics = function getAssetsMetrics(interaction, resourceTimings) {
+var getAssetsMetrics = function getAssetsMetrics(interaction, SSRDoneTime) {
   try {
     var config = (0, _config.getConfig)();
     var type = interaction.type;
     var allowedTypes = ['page_load', 'transition'];
-    var assetsClassification = config === null || config === void 0 ? void 0 : config.assetsClassification;
-    if (!allowedTypes.includes(type) || !assetsClassification) {
+    var assetsConfig = config === null || config === void 0 ? void 0 : config.assetsConfig;
+    if (!allowedTypes.includes(type) || !assetsConfig) {
       // Skip if: type not allowed or assetsClassification isn't configured
       return {};
     }
     var reporter = new _assets.CHRReporter();
-    var assets = reporter.get(resourceTimings, assetsClassification);
+    var resourceTimings = (0, _resourceTimingBuffer.filterResourceTimings)(interaction.start, interaction.end);
+    var assets = reporter.get(resourceTimings, assetsConfig, SSRDoneTime);
     if (assets) {
       // Only add assets in case it exists
       return {
@@ -647,7 +649,7 @@ function createInteractionMetricsPayload(_x, _x2, _x3) {
 function _createInteractionMetricsPayload() {
   _createInteractionMetricsPayload = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(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, getPageLoadInteractionMetrics, getDetailedInteractionMetrics, getPageLoadDetailedInteractionMetrics, newUFOName, resourceTimings, _yield$Promise$all, _yield$Promise$all2, vcMetrics, experimentalMetrics, payload;
+    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) {
         case 0:
@@ -674,7 +676,7 @@ function _createInteractionMetricsPayload() {
           labelStack = interaction.labelStack ? {
             labelStack: (0, _utils.optimizeLabelStack)(interaction.labelStack, (0, _constants.getReactUFOVersion)(interaction.type))
           } : {}; // Page Load
-          getPageLoadInteractionMetrics = function getPageLoadInteractionMetrics() {
+          getInitialPageLoadSSRMetrics = function getInitialPageLoadSSRMetrics() {
             var _config$ssr;
             if (!isPageLoad) {
               return {};
@@ -688,7 +690,8 @@ function _createInteractionMetricsPayload() {
               isBM3ConfigSSRDoneAsFmp: interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp,
               isUFOConfigSSRDoneAsFmp: interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp || !!(config !== null && config !== void 0 && (_config$ssr = config.ssr) !== null && _config$ssr !== void 0 && _config$ssr.getSSRDoneTime)
             });
-          }; // Detailed payload. Page visibility = visible
+          };
+          pageLoadInteractionMetrics = getInitialPageLoadSSRMetrics(); // Detailed payload. Page visibility = visible
           getDetailedInteractionMetrics = function getDetailedInteractionMetrics(resourceTimings) {
             if (experimental || window.__UFO_COMPACT_PAYLOAD__ || !isDetailedPayload) {
               return {};
@@ -731,9 +734,9 @@ function _createInteractionMetricsPayload() {
           }
           newUFOName = (0, _utils.sanitizeUfoName)(ufoName);
           resourceTimings = getResourceTimings(start, end);
-          _context.next = 23;
+          _context.next = 24;
           return Promise.all([(0, _getVcMetrics.default)(interaction), experimental ? (0, _createExperimentalInteractionMetricsPayload.getExperimentalVCMetrics)(interaction) : Promise.resolve(undefined)]);
-        case 23:
+        case 24:
           _yield$Promise$all = _context.sent;
           _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 2);
           vcMetrics = _yield$Promise$all2[0];
@@ -758,7 +761,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, resourceTimings)), 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)), 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)), {}, {
                 interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
                   namePrefix: config.namePrefix || '',
                   segmentPrefix: config.segmentPrefix || '',
@@ -790,7 +793,7 @@ function _createInteractionMetricsPayload() {
                   marks: optimizeMarks(interaction.marks, (0, _constants.getReactUFOVersion)(interaction.type)),
                   customData: optimizeCustomData(interaction),
                   reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start, (0, _constants.getReactUFOVersion)(interaction.type))
-                }, labelStack), getPageLoadInteractionMetrics()), getDetailedInteractionMetrics(resourceTimings)), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)), {}, {
+                }, labelStack), pageLoadInteractionMetrics), getDetailedInteractionMetrics(resourceTimings)), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)), {}, {
                   'metric:ttai': experimental ? regularTTAI || expTTAI : undefined,
                   'metric:experimental:ttai': expTTAI
                 }),
@@ -804,7 +807,7 @@ function _createInteractionMetricsPayload() {
           }
           payload.attributes.properties['event:sizeInKb'] = getPayloadSize(payload.attributes.properties);
           return _context.abrupt("return", payload);
-        case 31:
+        case 32:
         case "end":
           return _context.stop();
       }

package/dist/cjs/vc/vc-observer-new/get-element-name.js

@@ -61,8 +61,7 @@ function getUniqueSelector(selectorConfig, element) {
   } else if (!isSelectorUnique(potentialSelector)) {
     var parentElement = element.parentElement;
     if (parentElement) {
-      var siblingIndex = Array.from(parentElement.children).indexOf(element) + 1;
-      return "".concat(potentialSelector, ":nth-child(").concat(siblingIndex, ")");
+      return "".concat(potentialSelector, ":nth-child"); // NOTE: invalid DOM selector, but enough information for VC
     }
   }
   return potentialSelector;

package/dist/es2019/assets/index.js

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { calculateTransferType, DISK_KEY, MEMORY_KEY, NETWORK_KEY, round } from './utils';
+import { calculateTransferType, checkIfTimingsAvailable, DISK_KEY, getTypeOfRequest, MEMORY_KEY, NETWORK_KEY, round } from './utils';
 export class CHRSummary {
   constructor() {
     _defineProperty(this, "bundles", {
@@ -16,9 +16,8 @@ export class CHRSummary {
     _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);
+    const encodedSize = asset.encodedSize || 0;
+    const type = calculateTransferType(asset.name, asset.initiatorType, asset.duration, asset.transferSize);
     if (type === null) {
       return;
     }
@@ -47,22 +46,36 @@ export class CHRReporter {
     _defineProperty(this, "all", new CHRSummary());
     _defineProperty(this, "allAtlassian", new CHRSummary());
     _defineProperty(this, "preloaded", new CHRSummary());
+    _defineProperty(this, "defaultAllowedTypes", ['js']);
   }
-  get(resourceTimings, assetsClassification) {
+  get(resourceTimings, assetsConfig, SSRDoneTime) {
     try {
-      Object.entries(resourceTimings).map(([label, entry]) => {
-        if (assetsClassification.all) {
+      if (resourceTimings === null) {
+        return null;
+      }
+      resourceTimings.forEach(entry => {
+        if (!checkIfTimingsAvailable(entry)) {
+          return;
+        }
+        if (entry.encodedSize === entry.decodedSize) {
+          // incorrectly reported size
+          return;
+        }
+        const type = getTypeOfRequest(entry);
+        if (!(assetsConfig.allowedTypes || this.defaultAllowedTypes).includes(type)) {
+          return;
+        }
+        if (assetsConfig.classification.all) {
           this.all.add(entry);
         }
-        if (assetsClassification.allAtlassian({
-          label,
+        if (assetsConfig.classification.allAtlassian({
           entry
         })) {
           this.allAtlassian.add(entry);
         }
-        if (assetsClassification.preloaded({
-          label,
-          entry
+        if (assetsConfig.classification.preloaded({
+          entry,
+          SSRDoneTime
         })) {
           this.preloaded.add(entry);
         }
@@ -70,11 +83,12 @@ export class CHRReporter {
       if (this.all.bundlesCount === 0) {
         return null;
       }
-      return {
+      const CHRData = {
         all: CHRSummary.makePayload(this.all),
         allAtlassian: CHRSummary.makePayload(this.allAtlassian),
         preloaded: CHRSummary.makePayload(this.preloaded)
       };
+      return CHRData;
     } catch (error) {
       return null;
     }

package/dist/es2019/assets/utils.js

@@ -1,10 +1,10 @@
 /* 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 cacheableTypes = ['script', 'link', 'other'];
 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)) {
+export const calculateTransferType = (name, type, duration, size) => {
+  if (!cacheableTypes.includes(type) && !(type === 'other' && name.includes('.js'))) {
     return null;
   }
   if ((size === undefined || size === 0) && duration === 0) {
@@ -18,6 +18,50 @@ export const calculateTransferType = (type, duration, size) => {
   }
   return NETWORK_KEY;
 };
+export const getTypeOfRequest = ({
+  name,
+  initiatorType: type
+}) => {
+  let category = 'other';
+  const urlWithoutQuery = name.split('?')[0];
+  switch (type) {
+    case 'script':
+      category = 'js';
+      break;
+    case 'link':
+      if (urlWithoutQuery.endsWith('.css')) {
+        category = 'css';
+      }
+      if (urlWithoutQuery.endsWith('.js')) {
+        category = 'js';
+      }
+      break;
+    case 'img':
+      category = 'image';
+      break;
+    case 'font':
+      category = 'font';
+      break;
+    default:
+      if (urlWithoutQuery.endsWith('.js')) {
+        category = 'js';
+      } else if (urlWithoutQuery.endsWith('.css')) {
+        category = 'css';
+      } else if (urlWithoutQuery.match(/\.(woff|woff2|ttf|otf)$/)) {
+        category = 'font';
+      } else if (urlWithoutQuery.match(/\.(png|jpg|jpeg|gif|svg)$/)) {
+        category = 'image';
+      }
+      break;
+  }
+  return category;
+};
+export const checkIfTimingsAvailable = entry => {
+  if (entry.decodedSize === 0 && entry.encodedSize === 0 && entry.requestStart === 0 && entry.responseStart === 0) {
+    return false;
+  }
+  return true;
+};
 export const round = n => {
   if (isNaN(n)) {
     return 0;

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

@@ -13,6 +13,7 @@ import { getPageVisibilityState } from '../hidden-timing';
 import * as initialPageLoadExtraTiming from '../initial-page-load-extra-timing';
 import { interactionSpans as atlaskitInteractionSpans } from '../interaction-metrics';
 import * as resourceTiming from '../resource-timing';
+import { filterResourceTimings } from '../resource-timing/common/utils/resource-timing-buffer';
 import { roundEpsilon } from '../round-number';
 import * as ssr from '../ssr';
 import { buildSegmentTree, labelStackStartWith, optimizeLabelStack, sanitizeUfoName, stringifyLabelStackFully } from './common/utils';
@@ -234,20 +235,21 @@ function getSSRProperties(type) {
     'ssr:featureFlags': getSSRFeatureFlags(type)
   };
 }
-const getAssetsMetrics = (interaction, resourceTimings) => {
+const getAssetsMetrics = (interaction, SSRDoneTime) => {
   try {
     const config = getConfig();
     const {
       type
     } = interaction;
     const allowedTypes = ['page_load', 'transition'];
-    const assetsClassification = config === null || config === void 0 ? void 0 : config.assetsClassification;
-    if (!allowedTypes.includes(type) || !assetsClassification) {
+    const assetsConfig = config === null || config === void 0 ? void 0 : config.assetsConfig;
+    if (!allowedTypes.includes(type) || !assetsConfig) {
       // Skip if: type not allowed or assetsClassification isn't configured
       return {};
     }
     const reporter = new CHRReporter();
-    const assets = reporter.get(resourceTimings, assetsClassification);
+    const resourceTimings = filterResourceTimings(interaction.start, interaction.end);
+    const assets = reporter.get(resourceTimings, assetsConfig, SSRDoneTime);
     if (assets) {
       // Only add assets in case it exists
       return {
@@ -664,7 +666,7 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
     labelStack: optimizeLabelStack(interaction.labelStack, getReactUFOVersion(interaction.type))
   } : {};
   // Page Load
-  const getPageLoadInteractionMetrics = () => {
+  const getInitialPageLoadSSRMetrics = () => {
     var _config$ssr;
     if (!isPageLoad) {
       return {};
@@ -680,6 +682,8 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
       isUFOConfigSSRDoneAsFmp: interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp || !!(config !== null && config !== void 0 && (_config$ssr = config.ssr) !== null && _config$ssr !== void 0 && _config$ssr.getSSRDoneTime)
     };
   };
+  const pageLoadInteractionMetrics = getInitialPageLoadSSRMetrics();
+
   // Detailed payload. Page visibility = visible
   const getDetailedInteractionMetrics = resourceTimings => {
     if (experimental || window.__UFO_COMPACT_PAYLOAD__ || !isDetailedPayload) {
@@ -748,7 +752,7 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
         // root
         ...getBrowserMetadata(),
         ...getSSRProperties(type),
-        ...getAssetsMetrics(interaction, resourceTimings),
+        ...getAssetsMetrics(interaction, pageLoadInteractionMetrics === null || pageLoadInteractionMetrics === void 0 ? void 0 : pageLoadInteractionMetrics.SSRDoneTime),
         ...getPPSMetrics(interaction),
         ...getPaintMetrics(type),
         ...getNavigationMetrics(type),
@@ -790,7 +794,7 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
           customData: optimizeCustomData(interaction),
           reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start, getReactUFOVersion(interaction.type)),
           ...labelStack,
-          ...getPageLoadInteractionMetrics(),
+          ...pageLoadInteractionMetrics,
           ...getDetailedInteractionMetrics(resourceTimings),
           ...getPageLoadDetailedInteractionMetrics(),
           ...getBm3TrackerTimings(interaction),

package/dist/es2019/vc/vc-observer-new/get-element-name.js

@@ -55,8 +55,7 @@ function getUniqueSelector(selectorConfig, element) {
   } else if (!isSelectorUnique(potentialSelector)) {
     const parentElement = element.parentElement;
     if (parentElement) {
-      const siblingIndex = Array.from(parentElement.children).indexOf(element) + 1;
-      return `${potentialSelector}:nth-child(${siblingIndex})`;
+      return `${potentialSelector}:nth-child`; // NOTE: invalid DOM selector, but enough information for VC
     }
   }
   return potentialSelector;

package/dist/esm/assets/index.js

@@ -1,8 +1,7 @@
-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';
+import { calculateTransferType, checkIfTimingsAvailable, DISK_KEY, getTypeOfRequest, MEMORY_KEY, NETWORK_KEY, round } from './utils';
 export var CHRSummary = /*#__PURE__*/function () {
   function CHRSummary() {
     _classCallCheck(this, CHRSummary);
@@ -14,9 +13,8 @@ export var CHRSummary = /*#__PURE__*/function () {
   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);
+      var encodedSize = asset.encodedSize || 0;
+      var type = calculateTransferType(asset.name, asset.initiatorType, asset.duration, asset.transferSize);
       if (type === null) {
         return;
       }
@@ -47,28 +45,39 @@ export var CHRReporter = /*#__PURE__*/function () {
     _defineProperty(this, "all", new CHRSummary());
     _defineProperty(this, "allAtlassian", new CHRSummary());
     _defineProperty(this, "preloaded", new CHRSummary());
+    _defineProperty(this, "defaultAllowedTypes", ['js']);
   }
   return _createClass(CHRReporter, [{
     key: "get",
-    value: function get(resourceTimings, assetsClassification) {
+    value: function get(resourceTimings, assetsConfig, SSRDoneTime) {
       var _this = this;
       try {
-        Object.entries(resourceTimings).map(function (_ref) {
-          var _ref2 = _slicedToArray(_ref, 2),
-            label = _ref2[0],
-            entry = _ref2[1];
-          if (assetsClassification.all) {
+        if (resourceTimings === null) {
+          return null;
+        }
+        resourceTimings.forEach(function (entry) {
+          if (!checkIfTimingsAvailable(entry)) {
+            return;
+          }
+          if (entry.encodedSize === entry.decodedSize) {
+            // incorrectly reported size
+            return;
+          }
+          var type = getTypeOfRequest(entry);
+          if (!(assetsConfig.allowedTypes || _this.defaultAllowedTypes).includes(type)) {
+            return;
+          }
+          if (assetsConfig.classification.all) {
             _this.all.add(entry);
           }
-          if (assetsClassification.allAtlassian({
-            label: label,
+          if (assetsConfig.classification.allAtlassian({
             entry: entry
           })) {
             _this.allAtlassian.add(entry);
           }
-          if (assetsClassification.preloaded({
-            label: label,
-            entry: entry
+          if (assetsConfig.classification.preloaded({
+            entry: entry,
+            SSRDoneTime: SSRDoneTime
           })) {
             _this.preloaded.add(entry);
           }
@@ -76,11 +85,12 @@ export var CHRReporter = /*#__PURE__*/function () {
         if (this.all.bundlesCount === 0) {
           return null;
         }
-        return {
+        var CHRData = {
           all: CHRSummary.makePayload(this.all),
           allAtlassian: CHRSummary.makePayload(this.allAtlassian),
           preloaded: CHRSummary.makePayload(this.preloaded)
         };
+        return CHRData;
       } catch (error) {
         return null;
       }

package/dist/esm/assets/utils.js

@@ -1,10 +1,10 @@
 /* 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 cacheableTypes = ['script', 'link', 'other'];
 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)) {
+export var calculateTransferType = function calculateTransferType(name, type, duration, size) {
+  if (!cacheableTypes.includes(type) && !(type === 'other' && name.includes('.js'))) {
     return null;
   }
   if ((size === undefined || size === 0) && duration === 0) {
@@ -18,6 +18,49 @@ export var calculateTransferType = function calculateTransferType(type, duration
   }
   return NETWORK_KEY;
 };
+export var getTypeOfRequest = function getTypeOfRequest(_ref) {
+  var name = _ref.name,
+    type = _ref.initiatorType;
+  var category = 'other';
+  var urlWithoutQuery = name.split('?')[0];
+  switch (type) {
+    case 'script':
+      category = 'js';
+      break;
+    case 'link':
+      if (urlWithoutQuery.endsWith('.css')) {
+        category = 'css';
+      }
+      if (urlWithoutQuery.endsWith('.js')) {
+        category = 'js';
+      }
+      break;
+    case 'img':
+      category = 'image';
+      break;
+    case 'font':
+      category = 'font';
+      break;
+    default:
+      if (urlWithoutQuery.endsWith('.js')) {
+        category = 'js';
+      } else if (urlWithoutQuery.endsWith('.css')) {
+        category = 'css';
+      } else if (urlWithoutQuery.match(/\.(woff|woff2|ttf|otf)$/)) {
+        category = 'font';
+      } else if (urlWithoutQuery.match(/\.(png|jpg|jpeg|gif|svg)$/)) {
+        category = 'image';
+      }
+      break;
+  }
+  return category;
+};
+export var checkIfTimingsAvailable = function checkIfTimingsAvailable(entry) {
+  if (entry.decodedSize === 0 && entry.encodedSize === 0 && entry.requestStart === 0 && entry.responseStart === 0) {
+    return false;
+  }
+  return true;
+};
 export var round = function round(n) {
   if (isNaN(n)) {
     return 0;