@atlaskit/react-ufo 3.4.1 → 3.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/additional-payload/utils/lighthouse-metrics/utils/observer/index.js +8 -2
- package/dist/cjs/create-payload/index.js +136 -76
- package/dist/cjs/segment/segment.js +29 -4
- package/dist/cjs/vc/vc-observer/index.js +71 -46
- package/dist/cjs/vc/vc-observer/observers/ssr-placeholders/index.js +18 -11
- package/dist/cjs/vc/vc-observer-new/get-element-name.js +52 -64
- package/dist/cjs/vc/vc-observer-new/get-unique-element-name.js +80 -0
- package/dist/cjs/vc/vc-observer-new/metric-calculator/fy25_03/index.js +7 -2
- package/dist/cjs/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/canvas-pixel.js +6 -4
- package/dist/cjs/vc/vc-observer-new/viewport-observer/index.js +17 -9
- package/dist/es2019/additional-payload/utils/lighthouse-metrics/utils/observer/index.js +8 -2
- package/dist/es2019/create-payload/index.js +39 -3
- package/dist/es2019/segment/segment.js +29 -3
- package/dist/es2019/vc/vc-observer/index.js +39 -12
- package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/index.js +14 -7
- package/dist/es2019/vc/vc-observer-new/get-element-name.js +51 -64
- package/dist/es2019/vc/vc-observer-new/get-unique-element-name.js +74 -0
- package/dist/es2019/vc/vc-observer-new/metric-calculator/fy25_03/index.js +6 -1
- package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/canvas-pixel.js +6 -4
- package/dist/es2019/vc/vc-observer-new/viewport-observer/index.js +17 -9
- package/dist/esm/additional-payload/utils/lighthouse-metrics/utils/observer/index.js +8 -2
- package/dist/esm/create-payload/index.js +136 -76
- package/dist/esm/segment/segment.js +29 -4
- package/dist/esm/vc/vc-observer/index.js +71 -46
- package/dist/esm/vc/vc-observer/observers/ssr-placeholders/index.js +18 -11
- package/dist/esm/vc/vc-observer-new/get-element-name.js +52 -64
- package/dist/esm/vc/vc-observer-new/get-unique-element-name.js +74 -0
- package/dist/esm/vc/vc-observer-new/metric-calculator/fy25_03/index.js +6 -1
- package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/canvas-pixel.js +6 -4
- package/dist/esm/vc/vc-observer-new/viewport-observer/index.js +17 -9
- package/dist/types/interaction-context/index.d.ts +2 -0
- package/dist/types/segment/segment.d.ts +2 -1
- package/dist/types/vc/vc-observer-new/get-unique-element-name.d.ts +8 -0
- package/dist/types/vc/vc-observer-new/metric-calculator/fy25_03/index.d.ts +1 -0
- package/dist/types-ts4.5/interaction-context/index.d.ts +2 -0
- package/dist/types-ts4.5/segment/segment.d.ts +2 -1
- package/dist/types-ts4.5/vc/vc-observer-new/get-unique-element-name.d.ts +8 -0
- package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/fy25_03/index.d.ts +1 -0
- package/package.json +7 -1
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
2
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
2
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
4
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
5
4
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
5
|
+
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
6
6
|
var _excluded = ["labelStack", "time"],
|
|
7
7
|
_excluded2 = ["stopTime", "labelStack"],
|
|
8
8
|
_excluded3 = ["labelStack"],
|
|
9
9
|
_excluded4 = ["labelStack"];
|
|
10
|
-
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
11
10
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
12
11
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
12
|
+
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
13
13
|
import Bowser from 'bowser-ultralight';
|
|
14
14
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
15
15
|
import { getLighthouseMetrics } from '../additional-payload';
|
|
@@ -147,21 +147,80 @@ var getSSRSuccess = function getSSRSuccess(type) {
|
|
|
147
147
|
var getSSRFeatureFlags = function getSSRFeatureFlags(type) {
|
|
148
148
|
return type === 'page_load' ? ssr.getSSRFeatureFlags() : undefined;
|
|
149
149
|
};
|
|
150
|
-
var
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
150
|
+
var getLCP = function getLCP(end) {
|
|
151
|
+
return new Promise(function (resolve) {
|
|
152
|
+
var observer;
|
|
153
|
+
var timeout = setTimeout(function () {
|
|
154
|
+
var _observer;
|
|
155
|
+
(_observer = observer) === null || _observer === void 0 || _observer.disconnect();
|
|
156
|
+
resolve(null);
|
|
157
|
+
}, 200);
|
|
158
|
+
observer = new PerformanceObserver(function (list) {
|
|
159
|
+
var entries = Array.from(list.getEntries());
|
|
160
|
+
var lastEntry = entries.reduce(function (agg, entry) {
|
|
161
|
+
// Use the latest LCP candidate before TTAI
|
|
162
|
+
if (entry.startTime <= end && (agg === null || agg.startTime < entry.startTime)) {
|
|
163
|
+
return entry;
|
|
164
|
+
}
|
|
165
|
+
return agg;
|
|
166
|
+
}, null);
|
|
167
|
+
clearTimeout(timeout);
|
|
168
|
+
if (!lastEntry || lastEntry === null) {
|
|
169
|
+
resolve(null);
|
|
170
|
+
} else {
|
|
171
|
+
resolve(lastEntry.startTime);
|
|
172
|
+
}
|
|
173
|
+
});
|
|
174
|
+
observer.observe({
|
|
175
|
+
type: "largest-contentful-paint",
|
|
176
|
+
buffered: true
|
|
177
|
+
});
|
|
162
178
|
});
|
|
163
|
-
return metrics;
|
|
164
179
|
};
|
|
180
|
+
var getPaintMetrics = /*#__PURE__*/function () {
|
|
181
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(type, end) {
|
|
182
|
+
var metrics, lcp;
|
|
183
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
184
|
+
while (1) switch (_context.prev = _context.next) {
|
|
185
|
+
case 0:
|
|
186
|
+
if (!(type !== 'page_load')) {
|
|
187
|
+
_context.next = 2;
|
|
188
|
+
break;
|
|
189
|
+
}
|
|
190
|
+
return _context.abrupt("return", {});
|
|
191
|
+
case 2:
|
|
192
|
+
metrics = {};
|
|
193
|
+
performance.getEntriesByType('paint').forEach(function (entry) {
|
|
194
|
+
if (entry.name === 'first-paint') {
|
|
195
|
+
metrics['metric:fp'] = Math.round(entry.startTime);
|
|
196
|
+
}
|
|
197
|
+
if (entry.name === 'first-contentful-paint') {
|
|
198
|
+
metrics['metric:fcp'] = Math.round(entry.startTime);
|
|
199
|
+
}
|
|
200
|
+
});
|
|
201
|
+
if (!fg('ufo_lcp')) {
|
|
202
|
+
_context.next = 9;
|
|
203
|
+
break;
|
|
204
|
+
}
|
|
205
|
+
_context.next = 7;
|
|
206
|
+
return getLCP(end);
|
|
207
|
+
case 7:
|
|
208
|
+
lcp = _context.sent;
|
|
209
|
+
if (lcp) {
|
|
210
|
+
metrics['metric:lcp'] = Math.round(lcp);
|
|
211
|
+
}
|
|
212
|
+
case 9:
|
|
213
|
+
return _context.abrupt("return", metrics);
|
|
214
|
+
case 10:
|
|
215
|
+
case "end":
|
|
216
|
+
return _context.stop();
|
|
217
|
+
}
|
|
218
|
+
}, _callee);
|
|
219
|
+
}));
|
|
220
|
+
return function getPaintMetrics(_x, _x2) {
|
|
221
|
+
return _ref2.apply(this, arguments);
|
|
222
|
+
};
|
|
223
|
+
}();
|
|
165
224
|
var getTTAI = function getTTAI(interaction) {
|
|
166
225
|
var start = interaction.start,
|
|
167
226
|
end = interaction.end;
|
|
@@ -318,10 +377,10 @@ var getTracingContextData = function getTracingContextData(interaction) {
|
|
|
318
377
|
function optimizeCustomData(interaction) {
|
|
319
378
|
var customData = interaction.customData,
|
|
320
379
|
legacyMetrics = interaction.legacyMetrics;
|
|
321
|
-
var customDataMap = customData.reduce(function (result,
|
|
380
|
+
var customDataMap = customData.reduce(function (result, _ref3) {
|
|
322
381
|
var _result$get$data, _result$get;
|
|
323
|
-
var labelStack =
|
|
324
|
-
data =
|
|
382
|
+
var labelStack = _ref3.labelStack,
|
|
383
|
+
data = _ref3.data;
|
|
325
384
|
var label = stringifyLabelStackFully(labelStack);
|
|
326
385
|
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 : {};
|
|
327
386
|
result.set(label, {
|
|
@@ -353,12 +412,12 @@ function optimizeCustomData(interaction) {
|
|
|
353
412
|
return _toConsumableArray(customDataMap.values());
|
|
354
413
|
}
|
|
355
414
|
function optimizeReactProfilerTimings(reactProfilerTimings, interactionStart, reactUFOVersion) {
|
|
356
|
-
var reactProfilerTimingsMap = reactProfilerTimings.reduce(function (result,
|
|
357
|
-
var labelStack =
|
|
358
|
-
startTime =
|
|
359
|
-
commitTime =
|
|
360
|
-
actualDuration =
|
|
361
|
-
type =
|
|
415
|
+
var reactProfilerTimingsMap = reactProfilerTimings.reduce(function (result, _ref4) {
|
|
416
|
+
var labelStack = _ref4.labelStack,
|
|
417
|
+
startTime = _ref4.startTime,
|
|
418
|
+
commitTime = _ref4.commitTime,
|
|
419
|
+
actualDuration = _ref4.actualDuration,
|
|
420
|
+
type = _ref4.type;
|
|
362
421
|
if (labelStack && startTime >= interactionStart) {
|
|
363
422
|
var label = stringifyLabelStackFully(labelStack);
|
|
364
423
|
var start = Math.round(startTime);
|
|
@@ -504,10 +563,10 @@ function optimizeCustomTimings(customTimings, interactionStart) {
|
|
|
504
563
|
}, []);
|
|
505
564
|
}
|
|
506
565
|
function optimizeMarks(marks, reactUFOVersion) {
|
|
507
|
-
return marks.map(function (
|
|
508
|
-
var labelStack =
|
|
509
|
-
time =
|
|
510
|
-
others = _objectWithoutProperties(
|
|
566
|
+
return marks.map(function (_ref5) {
|
|
567
|
+
var labelStack = _ref5.labelStack,
|
|
568
|
+
time = _ref5.time,
|
|
569
|
+
others = _objectWithoutProperties(_ref5, _excluded);
|
|
511
570
|
return _objectSpread(_objectSpread({}, others), {}, {
|
|
512
571
|
labelStack: labelStack && optimizeLabelStack(labelStack, reactUFOVersion),
|
|
513
572
|
time: Math.round(time)
|
|
@@ -515,10 +574,10 @@ function optimizeMarks(marks, reactUFOVersion) {
|
|
|
515
574
|
});
|
|
516
575
|
}
|
|
517
576
|
function optimizeApdex(apdex, reactUFOVersion) {
|
|
518
|
-
return apdex.map(function (
|
|
519
|
-
var stopTime =
|
|
520
|
-
labelStack =
|
|
521
|
-
others = _objectWithoutProperties(
|
|
577
|
+
return apdex.map(function (_ref6) {
|
|
578
|
+
var stopTime = _ref6.stopTime,
|
|
579
|
+
labelStack = _ref6.labelStack,
|
|
580
|
+
others = _objectWithoutProperties(_ref6, _excluded2);
|
|
522
581
|
return _objectSpread(_objectSpread({}, others), {}, {
|
|
523
582
|
stopTime: Math.round(stopTime)
|
|
524
583
|
}, labelStack ? {
|
|
@@ -632,20 +691,20 @@ function getErrorCounts(interaction) {
|
|
|
632
691
|
'ufo:errors:count': interaction.errors.length
|
|
633
692
|
};
|
|
634
693
|
}
|
|
635
|
-
function createInteractionMetricsPayload(
|
|
694
|
+
function createInteractionMetricsPayload(_x3, _x4, _x5) {
|
|
636
695
|
return _createInteractionMetricsPayload.apply(this, arguments);
|
|
637
696
|
}
|
|
638
697
|
function _createInteractionMetricsPayload() {
|
|
639
|
-
_createInteractionMetricsPayload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function
|
|
698
|
+
_createInteractionMetricsPayload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(interaction, interactionId, experimental) {
|
|
640
699
|
var _window$location, _config$additionalPay;
|
|
641
|
-
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;
|
|
642
|
-
return _regeneratorRuntime.wrap(function
|
|
643
|
-
while (1) switch (
|
|
700
|
+
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;
|
|
701
|
+
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
|
|
702
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
644
703
|
case 0:
|
|
645
704
|
interactionPayloadStart = performance.now();
|
|
646
705
|
config = getConfig();
|
|
647
706
|
if (config) {
|
|
648
|
-
|
|
707
|
+
_context2.next = 4;
|
|
649
708
|
break;
|
|
650
709
|
}
|
|
651
710
|
throw Error('UFO Configuration not provided');
|
|
@@ -688,9 +747,9 @@ function _createInteractionMetricsPayload() {
|
|
|
688
747
|
var spans = [].concat(_toConsumableArray(interaction.spans), _toConsumableArray(atlaskitInteractionSpans));
|
|
689
748
|
atlaskitInteractionSpans.length = 0;
|
|
690
749
|
return {
|
|
691
|
-
errors: interaction.errors.map(function (
|
|
692
|
-
var labelStack =
|
|
693
|
-
others = _objectWithoutProperties(
|
|
750
|
+
errors: interaction.errors.map(function (_ref7) {
|
|
751
|
+
var labelStack = _ref7.labelStack,
|
|
752
|
+
others = _objectWithoutProperties(_ref7, _excluded3);
|
|
694
753
|
return _objectSpread(_objectSpread({}, others), {}, {
|
|
695
754
|
labelStack: labelStack && optimizeLabelStack(labelStack, getReactUFOVersion(interaction.type))
|
|
696
755
|
});
|
|
@@ -723,13 +782,14 @@ function _createInteractionMetricsPayload() {
|
|
|
723
782
|
}
|
|
724
783
|
newUFOName = sanitizeUfoName(ufoName);
|
|
725
784
|
resourceTimings = getResourceTimings(start, end);
|
|
726
|
-
|
|
727
|
-
return Promise.all([getVCMetrics(interaction), experimental ? getExperimentalVCMetrics(interaction) : Promise.resolve(undefined)]);
|
|
785
|
+
_context2.next = 24;
|
|
786
|
+
return Promise.all([getVCMetrics(interaction), experimental ? getExperimentalVCMetrics(interaction) : Promise.resolve(undefined), getPaintMetrics(type, end)]);
|
|
728
787
|
case 24:
|
|
729
|
-
_yield$Promise$all =
|
|
730
|
-
_yield$Promise$all2 = _slicedToArray(_yield$Promise$all,
|
|
788
|
+
_yield$Promise$all = _context2.sent;
|
|
789
|
+
_yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 3);
|
|
731
790
|
vcMetrics = _yield$Promise$all2[0];
|
|
732
791
|
experimentalMetrics = _yield$Promise$all2[1];
|
|
792
|
+
paintMetrics = _yield$Promise$all2[2];
|
|
733
793
|
payload = {
|
|
734
794
|
actionSubject: 'experience',
|
|
735
795
|
action: 'measured',
|
|
@@ -750,7 +810,7 @@ function _createInteractionMetricsPayload() {
|
|
|
750
810
|
'event:region': config.region || 'unknown',
|
|
751
811
|
'experience:key': experimental ? 'custom.experimental-interaction-metrics' : 'custom.interaction-metrics',
|
|
752
812
|
'experience:name': newUFOName
|
|
753
|
-
}, getBrowserMetadata()), getSSRProperties(type)), getAssetsMetrics(interaction, pageLoadInteractionMetrics === null || pageLoadInteractionMetrics === void 0 ? void 0 : pageLoadInteractionMetrics.SSRDoneTime)), getPPSMetrics(interaction)),
|
|
813
|
+
}, 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)), {}, {
|
|
754
814
|
interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
|
|
755
815
|
namePrefix: config.namePrefix || '',
|
|
756
816
|
segmentPrefix: config.segmentPrefix || '',
|
|
@@ -772,9 +832,9 @@ function _createInteractionMetricsPayload() {
|
|
|
772
832
|
apdex: optimizeApdex(interaction.apdex, getReactUFOVersion(interaction.type)),
|
|
773
833
|
end: Math.round(end),
|
|
774
834
|
start: Math.round(start),
|
|
775
|
-
segments: getReactUFOVersion(interaction.type) === '2.0.0' ? segmentTree : segments.map(function (
|
|
776
|
-
var labelStack =
|
|
777
|
-
others = _objectWithoutProperties(
|
|
835
|
+
segments: getReactUFOVersion(interaction.type) === '2.0.0' ? segmentTree : segments.map(function (_ref8) {
|
|
836
|
+
var labelStack = _ref8.labelStack,
|
|
837
|
+
others = _objectWithoutProperties(_ref8, _excluded4);
|
|
778
838
|
return _objectSpread(_objectSpread({}, others), {}, {
|
|
779
839
|
labelStack: optimizeLabelStack(labelStack, getReactUFOVersion(interaction.type))
|
|
780
840
|
});
|
|
@@ -795,53 +855,53 @@ function _createInteractionMetricsPayload() {
|
|
|
795
855
|
expTTAI = undefined;
|
|
796
856
|
}
|
|
797
857
|
payload.attributes.properties['event:sizeInKb'] = getPayloadSize(payload.attributes.properties);
|
|
798
|
-
return
|
|
799
|
-
case
|
|
858
|
+
return _context2.abrupt("return", payload);
|
|
859
|
+
case 33:
|
|
800
860
|
case "end":
|
|
801
|
-
return
|
|
861
|
+
return _context2.stop();
|
|
802
862
|
}
|
|
803
|
-
},
|
|
863
|
+
}, _callee2);
|
|
804
864
|
}));
|
|
805
865
|
return _createInteractionMetricsPayload.apply(this, arguments);
|
|
806
866
|
}
|
|
807
|
-
export function createPayloads(
|
|
867
|
+
export function createPayloads(_x6, _x7) {
|
|
808
868
|
return _createPayloads.apply(this, arguments);
|
|
809
869
|
}
|
|
810
870
|
function _createPayloads() {
|
|
811
|
-
_createPayloads = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function
|
|
871
|
+
_createPayloads = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(interactionId, interaction) {
|
|
812
872
|
var ufoNameOverride, modifiedInteraction, interactionMetricsPayload;
|
|
813
|
-
return _regeneratorRuntime.wrap(function
|
|
814
|
-
while (1) switch (
|
|
873
|
+
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
|
|
874
|
+
while (1) switch (_context3.prev = _context3.next) {
|
|
815
875
|
case 0:
|
|
816
876
|
ufoNameOverride = getUfoNameOverride(interaction);
|
|
817
877
|
modifiedInteraction = _objectSpread(_objectSpread({}, interaction), {}, {
|
|
818
878
|
ufoName: ufoNameOverride
|
|
819
879
|
});
|
|
820
|
-
|
|
880
|
+
_context3.next = 4;
|
|
821
881
|
return createInteractionMetricsPayload(modifiedInteraction, interactionId);
|
|
822
882
|
case 4:
|
|
823
|
-
interactionMetricsPayload =
|
|
824
|
-
return
|
|
883
|
+
interactionMetricsPayload = _context3.sent;
|
|
884
|
+
return _context3.abrupt("return", [interactionMetricsPayload]);
|
|
825
885
|
case 6:
|
|
826
886
|
case "end":
|
|
827
|
-
return
|
|
887
|
+
return _context3.stop();
|
|
828
888
|
}
|
|
829
|
-
},
|
|
889
|
+
}, _callee3);
|
|
830
890
|
}));
|
|
831
891
|
return _createPayloads.apply(this, arguments);
|
|
832
892
|
}
|
|
833
|
-
export function createExperimentalMetricsPayload(
|
|
893
|
+
export function createExperimentalMetricsPayload(_x8, _x9) {
|
|
834
894
|
return _createExperimentalMetricsPayload.apply(this, arguments);
|
|
835
895
|
}
|
|
836
896
|
function _createExperimentalMetricsPayload() {
|
|
837
|
-
_createExperimentalMetricsPayload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function
|
|
897
|
+
_createExperimentalMetricsPayload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(interactionId, interaction) {
|
|
838
898
|
var config, ufoName, rate, pageVisibilityState, result;
|
|
839
|
-
return _regeneratorRuntime.wrap(function
|
|
840
|
-
while (1) switch (
|
|
899
|
+
return _regeneratorRuntime.wrap(function _callee4$(_context4) {
|
|
900
|
+
while (1) switch (_context4.prev = _context4.next) {
|
|
841
901
|
case 0:
|
|
842
902
|
config = getConfig();
|
|
843
903
|
if (config) {
|
|
844
|
-
|
|
904
|
+
_context4.next = 3;
|
|
845
905
|
break;
|
|
846
906
|
}
|
|
847
907
|
throw Error('UFO Configuration not provided');
|
|
@@ -849,28 +909,28 @@ function _createExperimentalMetricsPayload() {
|
|
|
849
909
|
ufoName = sanitizeUfoName(interaction.ufoName);
|
|
850
910
|
rate = getExperimentalInteractionRate(ufoName, interaction.type);
|
|
851
911
|
if (coinflip(rate)) {
|
|
852
|
-
|
|
912
|
+
_context4.next = 7;
|
|
853
913
|
break;
|
|
854
914
|
}
|
|
855
|
-
return
|
|
915
|
+
return _context4.abrupt("return", null);
|
|
856
916
|
case 7:
|
|
857
917
|
pageVisibilityState = getPageVisibilityState(interaction.start, interaction.end);
|
|
858
918
|
if (!(pageVisibilityState !== 'visible')) {
|
|
859
|
-
|
|
919
|
+
_context4.next = 10;
|
|
860
920
|
break;
|
|
861
921
|
}
|
|
862
|
-
return
|
|
922
|
+
return _context4.abrupt("return", null);
|
|
863
923
|
case 10:
|
|
864
|
-
|
|
924
|
+
_context4.next = 12;
|
|
865
925
|
return createInteractionMetricsPayload(interaction, interactionId, true);
|
|
866
926
|
case 12:
|
|
867
|
-
result =
|
|
868
|
-
return
|
|
927
|
+
result = _context4.sent;
|
|
928
|
+
return _context4.abrupt("return", result);
|
|
869
929
|
case 14:
|
|
870
930
|
case "end":
|
|
871
|
-
return
|
|
931
|
+
return _context4.stop();
|
|
872
932
|
}
|
|
873
|
-
},
|
|
933
|
+
}, _callee4);
|
|
874
934
|
}));
|
|
875
935
|
return _createExperimentalMetricsPayload.apply(this, arguments);
|
|
876
936
|
}
|
|
@@ -23,16 +23,40 @@ var AsyncSegmentHighlight = /*#__PURE__*/lazy(function () {
|
|
|
23
23
|
};
|
|
24
24
|
});
|
|
25
25
|
});
|
|
26
|
+
var noopIdMap = new Map();
|
|
26
27
|
|
|
27
28
|
/** A portion of the page we apply measurement to */
|
|
28
29
|
export default function UFOSegment(_ref) {
|
|
29
30
|
var _getConfig2;
|
|
30
31
|
var segmentName = _ref.name,
|
|
31
|
-
children = _ref.children
|
|
32
|
+
children = _ref.children,
|
|
33
|
+
_ref$mode = _ref.mode,
|
|
34
|
+
mode = _ref$mode === void 0 ? 'single' : _ref$mode;
|
|
32
35
|
var parentContext = useContext(UFOInteractionContext);
|
|
36
|
+
var segmentIdMap = useMemo(function () {
|
|
37
|
+
if (!fg('platform_ufo_segment_list_mode')) {
|
|
38
|
+
// just in case we cause rerender issues, use noop map
|
|
39
|
+
return noopIdMap;
|
|
40
|
+
}
|
|
41
|
+
if (!(parentContext !== null && parentContext !== void 0 && parentContext.segmentIdMap)) {
|
|
42
|
+
return new Map();
|
|
43
|
+
}
|
|
44
|
+
return parentContext.segmentIdMap;
|
|
45
|
+
}, [parentContext]);
|
|
33
46
|
var segmentId = useMemo(function () {
|
|
34
|
-
|
|
35
|
-
|
|
47
|
+
if (!fg('platform_ufo_segment_list_mode')) {
|
|
48
|
+
return generateId();
|
|
49
|
+
}
|
|
50
|
+
if (mode === 'single') {
|
|
51
|
+
return generateId();
|
|
52
|
+
}
|
|
53
|
+
if (segmentIdMap.has(segmentName)) {
|
|
54
|
+
return segmentIdMap.get(segmentName);
|
|
55
|
+
}
|
|
56
|
+
var newSegmentId = generateId();
|
|
57
|
+
segmentIdMap.set(segmentName, newSegmentId);
|
|
58
|
+
return newSegmentId;
|
|
59
|
+
}, [mode, segmentName, segmentIdMap]);
|
|
36
60
|
var labelStack = useMemo(function () {
|
|
37
61
|
return parentContext !== null && parentContext !== void 0 && parentContext.labelStack ? [].concat(_toConsumableArray(parentContext.labelStack), [{
|
|
38
62
|
name: segmentName,
|
|
@@ -120,6 +144,7 @@ export default function UFOSegment(_ref) {
|
|
|
120
144
|
}
|
|
121
145
|
return {
|
|
122
146
|
labelStack: labelStack,
|
|
147
|
+
segmentIdMap: segmentIdMap,
|
|
123
148
|
hold: function hold() {
|
|
124
149
|
var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'unknown';
|
|
125
150
|
return this._internalHold(this.labelStack, name);
|
|
@@ -220,7 +245,7 @@ export default function UFOSegment(_ref) {
|
|
|
220
245
|
_internalHoldByID: _internalHoldByID,
|
|
221
246
|
complete: complete
|
|
222
247
|
};
|
|
223
|
-
}, [parentContext, labelStack, interactionId]);
|
|
248
|
+
}, [parentContext, labelStack, segmentIdMap, interactionId]);
|
|
224
249
|
var hasMounted = useRef(false);
|
|
225
250
|
var onRender = useCallback(function (_id, phase, actualDuration, baseDuration, startTime, commitTime) {
|
|
226
251
|
var _getConfig;
|
|
@@ -96,7 +96,7 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
96
96
|
});
|
|
97
97
|
_defineProperty(this, "getVCResult", /*#__PURE__*/function () {
|
|
98
98
|
var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref3) {
|
|
99
|
-
var start, stop, tti, prefix, ssr, vc, isEventAborted, startTime, fullPrefix, rawData, abortReason, abortReasonInfo, heatmap, heatmapNext, outOfBoundaryInfo, totalTime, componentsLog, viewport, devToolsEnabled, ratios, multiHeatmap, _VCObserver$calculate, VC, VCBox, VCEntries, totalPainted, _componentsLog, vcNext, outOfBoundary, stopTime, isMultiHeatmapEnabled, revisionsData, isCalcSpeedIndexEnabled, speedIndex;
|
|
99
|
+
var start, stop, tti, prefix, ssr, vc, isEventAborted, startTime, fullPrefix, rawData, abortReason, abortReasonInfo, heatmap, heatmapNext, outOfBoundaryInfo, totalTime, componentsLog, viewport, devToolsEnabled, ratios, multiHeatmap, _VCObserver$calculate, VC, VCBox, VCEntries, totalPainted, _componentsLog, vcNext, outOfBoundary, stopTime, isVCClean, isMultiHeatmapEnabled, revisionsData, isCalcSpeedIndexEnabled, speedIndex;
|
|
100
100
|
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
101
101
|
while (1) switch (_context.prev = _context.next) {
|
|
102
102
|
case 0:
|
|
@@ -233,31 +233,54 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
233
233
|
} catch (e) {
|
|
234
234
|
/* do nothing */
|
|
235
235
|
}
|
|
236
|
+
isVCClean = !abortReasonInfo;
|
|
236
237
|
isMultiHeatmapEnabled = !fg('platform_ufo_multiheatmap_killswitch');
|
|
237
|
-
revisionsData = isMultiHeatmapEnabled
|
|
238
|
+
revisionsData = isMultiHeatmapEnabled ? fg('platform_ufo_vc_observer_new') ? _defineProperty({}, "".concat(fullPrefix, "vc:rev"), [{
|
|
239
|
+
revision: 'fy25.01',
|
|
240
|
+
clean: isVCClean,
|
|
241
|
+
'metric:vc90': VC['90'],
|
|
242
|
+
vcDetails: Object.fromEntries(VCObserver.VCParts.map(function (key) {
|
|
243
|
+
var _VCBox$key;
|
|
244
|
+
return [key, {
|
|
245
|
+
t: VC[key],
|
|
246
|
+
e: (_VCBox$key = VCBox[key]) !== null && _VCBox$key !== void 0 ? _VCBox$key : []
|
|
247
|
+
}];
|
|
248
|
+
}))
|
|
249
|
+
}, {
|
|
250
|
+
revision: 'fy25.02',
|
|
251
|
+
clean: isVCClean,
|
|
252
|
+
'metric:vc90': vcNext.VC['90'],
|
|
253
|
+
vcDetails: Object.fromEntries(VCObserver.VCParts.map(function (key) {
|
|
254
|
+
var _vcNext$VCBox$key;
|
|
255
|
+
return [key, {
|
|
256
|
+
t: vcNext.VC[key],
|
|
257
|
+
e: (_vcNext$VCBox$key = vcNext.VCBox[key]) !== null && _vcNext$VCBox$key !== void 0 ? _vcNext$VCBox$key : []
|
|
258
|
+
}];
|
|
259
|
+
}))
|
|
260
|
+
}]) : multiHeatmap !== null ? _defineProperty({}, "".concat(fullPrefix, "vc:rev"), multiHeatmap === null || multiHeatmap === void 0 ? void 0 : multiHeatmap.getPayloadShapedData({
|
|
238
261
|
VCParts: VCObserver.VCParts.map(function (v) {
|
|
239
262
|
return parseInt(v);
|
|
240
263
|
}),
|
|
241
|
-
VCCalculationMethods: getRevisions().map(function (
|
|
242
|
-
var classifier =
|
|
264
|
+
VCCalculationMethods: getRevisions().map(function (_ref10) {
|
|
265
|
+
var classifier = _ref10.classifier;
|
|
243
266
|
return classifier.VCCalculationMethod;
|
|
244
267
|
}),
|
|
245
|
-
filterComponentsLog: getRevisions().map(function (
|
|
246
|
-
var classifier =
|
|
268
|
+
filterComponentsLog: getRevisions().map(function (_ref11) {
|
|
269
|
+
var classifier = _ref11.classifier;
|
|
247
270
|
return classifier.filterComponentsLog;
|
|
248
271
|
}),
|
|
249
272
|
isEventAborted: isEventAborted,
|
|
250
273
|
interactionStart: start,
|
|
251
274
|
ttai: stop,
|
|
252
275
|
ssr: ssr,
|
|
253
|
-
clean:
|
|
254
|
-
})) : null; // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
276
|
+
clean: isVCClean
|
|
277
|
+
})) : null : null; // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
255
278
|
isCalcSpeedIndexEnabled = fg('ufo-calc-speed-index');
|
|
256
279
|
speedIndex = _defineProperty(_defineProperty({}, "ufo:speedIndex", VCEntries.speedIndex), "ufo:next:speedIndex", vcNext.VCEntries.speedIndex);
|
|
257
280
|
return _context.abrupt("return", _objectSpread(_objectSpread(_objectSpread(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
|
|
258
281
|
'metrics:vc': VC
|
|
259
|
-
}, "".concat(fullPrefix, "vc:state"), true), "".concat(fullPrefix, "vc:clean"),
|
|
260
|
-
case
|
|
282
|
+
}, "".concat(fullPrefix, "vc:state"), true), "".concat(fullPrefix, "vc:clean"), isVCClean), "".concat(fullPrefix, "vc:dom"), VCBox), "".concat(fullPrefix, "vc:updates"), VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:size"), viewport), "".concat(fullPrefix, "vc:time"), Math.round(totalTime + (stopTime - startTime))), "".concat(fullPrefix, "vc:total"), totalPainted), "".concat(fullPrefix, "vc:ratios"), ratios), outOfBoundary), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(fullPrefix, "vc:next"), vcNext.VC), "".concat(fullPrefix, "vc:next:updates"), vcNext.VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:next:dom"), vcNext.VCBox), "".concat(fullPrefix, "vc:ignored"), _this.getIgnoredElements(componentsLog)), revisionsData), isCalcSpeedIndexEnabled ? speedIndex : {}));
|
|
283
|
+
case 25:
|
|
261
284
|
case "end":
|
|
262
285
|
return _context.stop();
|
|
263
286
|
}
|
|
@@ -270,14 +293,16 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
270
293
|
_defineProperty(this, "handleUpdate", function (rawTime, intersectionRect, targetName, element, type, ignoreReason) {
|
|
271
294
|
_this.measureStart();
|
|
272
295
|
_this.legacyHandleUpdate(rawTime, intersectionRect, targetName, element, type, ignoreReason);
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
296
|
+
if (!fg('platform_ufo_vc_observer_new')) {
|
|
297
|
+
_this.onViewportChangeDetected({
|
|
298
|
+
timestamp: rawTime,
|
|
299
|
+
intersectionRect: intersectionRect,
|
|
300
|
+
targetName: targetName,
|
|
301
|
+
element: element,
|
|
302
|
+
type: type,
|
|
303
|
+
ignoreReason: ignoreReason
|
|
304
|
+
});
|
|
305
|
+
}
|
|
281
306
|
_this.measureStop();
|
|
282
307
|
});
|
|
283
308
|
_defineProperty(this, "legacyHandleUpdate", function (rawTime, intersectionRect, targetName, element, type, ignoreReason) {
|
|
@@ -302,13 +327,13 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
302
327
|
});
|
|
303
328
|
}
|
|
304
329
|
});
|
|
305
|
-
_defineProperty(this, "onViewportChangeDetected", function (
|
|
306
|
-
var element =
|
|
307
|
-
type =
|
|
308
|
-
ignoreReason =
|
|
309
|
-
timestamp =
|
|
310
|
-
targetName =
|
|
311
|
-
intersectionRect =
|
|
330
|
+
_defineProperty(this, "onViewportChangeDetected", function (_ref13) {
|
|
331
|
+
var element = _ref13.element,
|
|
332
|
+
type = _ref13.type,
|
|
333
|
+
ignoreReason = _ref13.ignoreReason,
|
|
334
|
+
timestamp = _ref13.timestamp,
|
|
335
|
+
targetName = _ref13.targetName,
|
|
336
|
+
intersectionRect = _ref13.intersectionRect;
|
|
312
337
|
if (_this.multiHeatmap === null) {
|
|
313
338
|
return;
|
|
314
339
|
}
|
|
@@ -390,10 +415,10 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
390
415
|
var unbinds = attachAbortListeners(window, _this.viewport, _this.abortReasonCallback);
|
|
391
416
|
if ((_window = window) !== null && _window !== void 0 && _window.__SSR_ABORT_LISTENERS__) {
|
|
392
417
|
var _window2;
|
|
393
|
-
Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (
|
|
394
|
-
var
|
|
395
|
-
key =
|
|
396
|
-
time =
|
|
418
|
+
Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref14) {
|
|
419
|
+
var _ref15 = _slicedToArray(_ref14, 2),
|
|
420
|
+
key = _ref15[0],
|
|
421
|
+
time = _ref15[1];
|
|
397
422
|
if (time) {
|
|
398
423
|
_this.abortReasonCallback(key, time);
|
|
399
424
|
}
|
|
@@ -426,8 +451,8 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
426
451
|
}
|
|
427
452
|
return _createClass(VCObserver, [{
|
|
428
453
|
key: "start",
|
|
429
|
-
value: function start(
|
|
430
|
-
var startTime =
|
|
454
|
+
value: function start(_ref16) {
|
|
455
|
+
var startTime = _ref16.startTime;
|
|
431
456
|
this.active = true;
|
|
432
457
|
if (this.observers.isBrowserSupported()) {
|
|
433
458
|
this.setViewportSize();
|
|
@@ -449,12 +474,12 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
449
474
|
}, {
|
|
450
475
|
key: "getIgnoredElements",
|
|
451
476
|
value: function getIgnoredElements(componentsLog) {
|
|
452
|
-
return Object.values(componentsLog).flat().filter(function (
|
|
453
|
-
var ignoreReason =
|
|
477
|
+
return Object.values(componentsLog).flat().filter(function (_ref17) {
|
|
478
|
+
var ignoreReason = _ref17.ignoreReason;
|
|
454
479
|
return Boolean(ignoreReason);
|
|
455
|
-
}).map(function (
|
|
456
|
-
var targetName =
|
|
457
|
-
ignoreReason =
|
|
480
|
+
}).map(function (_ref18) {
|
|
481
|
+
var targetName = _ref18.targetName,
|
|
482
|
+
ignoreReason = _ref18.ignoreReason;
|
|
458
483
|
return {
|
|
459
484
|
targetName: targetName,
|
|
460
485
|
ignoreReason: ignoreReason
|
|
@@ -574,12 +599,12 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
574
599
|
}
|
|
575
600
|
}], [{
|
|
576
601
|
key: "calculateVC",
|
|
577
|
-
value: function calculateVC(
|
|
578
|
-
var heatmap =
|
|
579
|
-
|
|
580
|
-
ssr =
|
|
581
|
-
componentsLog =
|
|
582
|
-
viewport =
|
|
602
|
+
value: function calculateVC(_ref19) {
|
|
603
|
+
var heatmap = _ref19.heatmap,
|
|
604
|
+
_ref19$ssr = _ref19.ssr,
|
|
605
|
+
ssr = _ref19$ssr === void 0 ? UNUSED_SECTOR : _ref19$ssr,
|
|
606
|
+
componentsLog = _ref19.componentsLog,
|
|
607
|
+
viewport = _ref19.viewport;
|
|
583
608
|
var lastUpdate = {};
|
|
584
609
|
var totalPainted = 0;
|
|
585
610
|
if (ssr !== UNUSED_SECTOR) {
|
|
@@ -648,11 +673,11 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
648
673
|
});
|
|
649
674
|
return VCRatio;
|
|
650
675
|
}, 0);
|
|
651
|
-
var VCEntries = entries.reduce(function (acc,
|
|
676
|
+
var VCEntries = entries.reduce(function (acc, _ref20, i) {
|
|
652
677
|
var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
|
|
653
|
-
var
|
|
654
|
-
timestamp =
|
|
655
|
-
entryPainted =
|
|
678
|
+
var _ref21 = _slicedToArray(_ref20, 2),
|
|
679
|
+
timestamp = _ref21[0],
|
|
680
|
+
entryPainted = _ref21[1];
|
|
656
681
|
var currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
|
|
657
682
|
var currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
|
|
658
683
|
var logEntry = _toConsumableArray(new Set((_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(function (v) {
|