@atlaskit/react-ufo 4.15.2 → 4.15.3
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 +7 -0
- package/dist/cjs/create-payload/index.js +1 -1
- package/dist/cjs/ssr/index.js +103 -8
- package/dist/es2019/create-payload/index.js +1 -1
- package/dist/es2019/ssr/index.js +103 -8
- package/dist/esm/create-payload/index.js +1 -1
- package/dist/esm/ssr/index.js +102 -8
- package/dist/types/ssr/index.d.ts +1 -0
- package/dist/types-ts4.5/ssr/index.d.ts +1 -0
- package/package.json +4 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @atlaskit/ufo-interaction-ignore
|
|
2
2
|
|
|
3
|
+
## 4.15.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`bf14a236a3255`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bf14a236a3255) -
|
|
8
|
+
Platformise SSR edge timings within UFO
|
|
9
|
+
|
|
3
10
|
## 4.15.2
|
|
4
11
|
|
|
5
12
|
### Patch Changes
|
|
@@ -8,7 +8,7 @@ if(cohortingCustomData&&cohortingCustomData.size>0){var _interaction$labelSta,_c
|
|
|
8
8
|
try{return acc+item.cssRules.length;}catch(e){return acc;}},0);var styleElements=doc.querySelectorAll('style').length;var styleProps=doc.querySelectorAll('[style]');var styleDeclarations=Array.from(doc.querySelectorAll('[style]')).reduce(function(acc,item){try{if('style'in item){return acc+item.style.length;}else{return acc;}}catch(e){return acc;}},0);return{'ufo:stylesheets':stylesheetCount,'ufo:styleElements':styleElements,'ufo:styleProps':styleProps.length,'ufo:styleDeclarations':styleDeclarations,'ufo:cssrules':cssrules};}catch(e){return{};}}var regularTTAI;var expTTAI;function getErrorCounts(interaction){return{'ufo:errors:globalCount':(0,_globalErrorHandler.getGlobalErrorCount)(),'ufo:errors:count':interaction.errors.length};}function createInteractionMetricsPayload(_x,_x2,_x3,_x4,_x5){return _createInteractionMetricsPayload.apply(this,arguments);}function _createInteractionMetricsPayload(){_createInteractionMetricsPayload=(0,_asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee(interaction,interactionId,experimental,criticalPayloadCount,vcMetrics){var _window$location,_config$additionalPay;var interactionPayloadStart,config,end,start,ufoName,knownSegments,rate,type,abortReason,routeName,featureFlags,previousInteractionName,isPreviousInteractionAborted,abortedByInteractionName,responsiveness,unknownElementName,unknownElementHierarchy,hydration,pageVisibilityAtTTI,pageVisibilityAtTTAI,segments,segmentTree,isDetailedPayload,isPageLoad,calculatePageVisibilityFromTheStartOfPageLoad,moreAccuratePageVisibilityAtTTI,moreAccuratePageVisibilityAtTTAI,labelStack,getInitialPageLoadSSRMetrics,pageLoadInteractionMetrics,getDetailedInteractionMetrics,getPageLoadDetailedInteractionMetrics,newUFOName,resourceTimings,_yield$Promise$all,_yield$Promise$all2,finalVCMetrics,experimentalMetrics,paintMetrics,batteryInfo,getReactHydrationStats,payload,size,vcRev,rawData,rawDataSize;return _regenerator.default.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:interactionPayloadStart=performance.now();config=(0,_config.getConfig)();if(config){_context.next=4;break;}throw Error('UFO Configuration not provided');case 4:end=interaction.end,start=interaction.start,ufoName=interaction.ufoName,knownSegments=interaction.knownSegments,rate=interaction.rate,type=interaction.type,abortReason=interaction.abortReason,routeName=interaction.routeName,featureFlags=interaction.featureFlags,previousInteractionName=interaction.previousInteractionName,isPreviousInteractionAborted=interaction.isPreviousInteractionAborted,abortedByInteractionName=interaction.abortedByInteractionName,responsiveness=interaction.responsiveness,unknownElementName=interaction.unknownElementName,unknownElementHierarchy=interaction.unknownElementHierarchy,hydration=interaction.hydration;pageVisibilityAtTTI=getPageVisibilityUpToTTI(interaction);pageVisibilityAtTTAI=(0,_getPageVisibilityUpToTtai.default)(interaction);segments=!(0,_platformFeatureFlags.fg)('platform_ufo_remove_deprecated_config_fields')&&config.killswitchNestedSegments?[]:knownSegments;segmentTree=(0,_getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type)==='2.0.0'?(0,_utils.buildSegmentTree)(segments.map(function(segment){return segment.labelStack;})):{};isDetailedPayload=pageVisibilityAtTTAI==='visible';isPageLoad=type==='page_load';calculatePageVisibilityFromTheStartOfPageLoad=config.enableBetterPageVisibilityApi&&isPageLoad;moreAccuratePageVisibilityAtTTI=calculatePageVisibilityFromTheStartOfPageLoad?getMoreAccuratePageVisibilityUpToTTI(interaction):null;moreAccuratePageVisibilityAtTTAI=calculatePageVisibilityFromTheStartOfPageLoad?(0,_getMoreAccuratePageVisibilityUpToTtai.getMoreAccuratePageVisibilityUpToTTAI)(interaction):null;labelStack=interaction.labelStack?{labelStack:(0,_utils.optimizeLabelStack)(interaction.labelStack,(0,_getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type))}:{};// Page Load
|
|
9
9
|
getInitialPageLoadSSRMetrics=function getInitialPageLoadSSRMetrics(){var _config$ssr;if(!isPageLoad){return{};}var config=(0,_config.getConfig)();var SSRDoneTimeValue=(0,_getSsrDoneTimeValue.default)(config);var SSRDoneTime=SSRDoneTimeValue!==undefined?{SSRDoneTime:Math.round(SSRDoneTimeValue)}:{};var isBM3ConfigSSRDoneAsFmp=interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp;var isUFOConfigSSRDoneAsFmp=interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp||!!(config!==null&&config!==void 0&&(_config$ssr=config.ssr)!==null&&_config$ssr!==void 0&&_config$ssr.getSSRDoneTime);if(!experimental&&(isBM3ConfigSSRDoneAsFmp||isUFOConfigSSRDoneAsFmp)&&SSRDoneTimeValue!==undefined){try{performance.mark("FMP",{startTime:SSRDoneTimeValue,detail:{devtools:{dataType:'marker'}}});}catch(e){}}return _objectSpread(_objectSpread({},SSRDoneTime),{},{isBM3ConfigSSRDoneAsFmp:isBM3ConfigSSRDoneAsFmp,isUFOConfigSSRDoneAsFmp:isUFOConfigSSRDoneAsFmp});};pageLoadInteractionMetrics=getInitialPageLoadSSRMetrics();// Detailed payload. Page visibility = visible
|
|
10
10
|
getDetailedInteractionMetrics=function getDetailedInteractionMetrics(resourceTimings){if(experimental||window.__UFO_COMPACT_PAYLOAD__||!isDetailedPayload){return{};}var spans=[].concat((0,_toConsumableArray2.default)(interaction.spans),(0,_toConsumableArray2.default)(_interactionMetrics.interactionSpans));_interactionMetrics.interactionSpans.length=0;return{errors:interaction.errors.map(function(_ref2){var labelStack=_ref2.labelStack,others=(0,_objectWithoutProperties2.default)(_ref2,_excluded);return _objectSpread(_objectSpread({},others),{},{labelStack:labelStack&&(0,_utils.optimizeLabelStack)(labelStack,(0,_getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type))});}),holdActive:(0,_toConsumableArray2.default)(interaction.holdActive.values()),redirects:optimizeRedirects(interaction.redirects,start),holdInfo:(0,_optimizeHoldInfo.optimizeHoldInfo)(experimental?interaction.holdExpInfo:interaction.holdInfo,start,(0,_getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type)),spans:(0,_optimizeSpans.optimizeSpans)(spans,start,(0,_getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type)),requestInfo:(0,_optimizeRequestInfo.optimizeRequestInfo)(interaction.requestInfo,start,(0,_getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type)),customTimings:(0,_optimizeCustomTimings.optimizeCustomTimings)(interaction.customTimings,start),bundleEvalTimings:objectToArray(getBundleEvalTimings(start)),resourceTimings:objectToArray(resourceTimings)};};// Page load & detailed payload
|
|
11
|
-
getPageLoadDetailedInteractionMetrics=function getPageLoadDetailedInteractionMetrics(){var _config$
|
|
11
|
+
getPageLoadDetailedInteractionMetrics=function getPageLoadDetailedInteractionMetrics(){var _config$ssr3;if(!isPageLoad||!isDetailedPayload){return{};}var initialPageLoadExtraTimings=objectToArray(initialPageLoadExtraTiming.getTimings());var config=(0,_config.getConfig)();if((0,_platformFeatureFlags.fg)('platform_ufo_default_ssr_edge_timings')){var _config$ssr2;return{initialPageLoadExtraTimings:initialPageLoadExtraTimings,SSRTimings:config!==null&&config!==void 0&&(_config$ssr2=config.ssr)!==null&&_config$ssr2!==void 0&&_config$ssr2.getSSRTimings?[].concat((0,_toConsumableArray2.default)(config.ssr.getSSRTimings()),(0,_toConsumableArray2.default)(objectToArray(ssr.getSSRTimings()))):objectToArray(ssr.getSSRTimings())};}return{initialPageLoadExtraTimings:initialPageLoadExtraTimings,SSRTimings:config!==null&&config!==void 0&&(_config$ssr3=config.ssr)!==null&&_config$ssr3!==void 0&&_config$ssr3.getSSRTimings?config.ssr.getSSRTimings():objectToArray(ssr.getSSRTimings())};};if(experimental){expTTAI=(0,_getTtai.default)(interaction);}else{regularTTAI=(0,_getTtai.default)(interaction);}newUFOName=(0,_utils.sanitizeUfoName)(ufoName);resourceTimings=getResourceTimings(start,end);_context.t0=Promise;_context.t1=vcMetrics;if(_context.t1){_context.next=28;break;}_context.next=27;return(0,_getVcMetrics.default)(interaction);case 27:_context.t1=_context.sent;case 28:_context.t2=_context.t1;_context.t3=experimental?(0,_createExperimentalInteractionMetricsPayload.getExperimentalVCMetrics)(interaction):Promise.resolve(undefined);_context.t4=(0,_getPaintMetrics.getPaintMetricsToLegacyFormat)(type,end);_context.t5=(0,_getBatteryInfo.getBatteryInfoToLegacyFormat)();_context.t6=[_context.t2,_context.t3,_context.t4,_context.t5];_context.next=35;return _context.t0.all.call(_context.t0,_context.t6);case 35:_yield$Promise$all=_context.sent;_yield$Promise$all2=(0,_slicedToArray2.default)(_yield$Promise$all,4);finalVCMetrics=_yield$Promise$all2[0];experimentalMetrics=_yield$Promise$all2[1];paintMetrics=_yield$Promise$all2[2];batteryInfo=_yield$Promise$all2[3];if(!experimental){(0,_addPerformanceMeasures.addPerformanceMeasures)(interaction.start,(0,_toConsumableArray2.default)((finalVCMetrics===null||finalVCMetrics===void 0?void 0:finalVCMetrics['ufo:vc:rev'])||[]));}getReactHydrationStats=function getReactHydrationStats(){if(!hydration){return{};}return{hydration:hydration};};payload={actionSubject:'experience',action:'measured',eventType:'operational',source:'measured',tags:['observability'],attributes:{properties:_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({// basic
|
|
12
12
|
'event:hostname':((_window$location=window.location)===null||_window$location===void 0?void 0:_window$location.hostname)||'unknown','event:product':config.product,'event:schema':'1.0.0','event:sizeInKb':0,'event:source':{name:'react-ufo/web',version:(0,_getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type)},'event:region':config.region||'unknown','experience:key':experimental?'custom.experimental-interaction-metrics':'custom.interaction-metrics','experience:name':newUFOName,// Include CPU usage monitoring data
|
|
13
13
|
'event:cpu:usage':(0,_machineUtilisation.createPressureStateReport)(interaction.start,interaction.end),'event:memory:usage':(0,_machineUtilisation.createMemoryStateReport)(interaction.start,interaction.end)},criticalPayloadCount!==undefined?{'ufo:multipayload':true,'ufo:criticalPayloadCount':criticalPayloadCount}:{}),(0,_getBrowserMetadata.getBrowserMetadataToLegacyFormat)()),batteryInfo),getSSRProperties(type)),getAssetsMetrics(interaction,pageLoadInteractionMetrics===null||pageLoadInteractionMetrics===void 0?void 0:pageLoadInteractionMetrics.SSRDoneTime)),getPPSMetrics(interaction)),paintMetrics),(0,_getNavigationMetrics.getNavigationMetricsToLegacyFormat)(type)),finalVCMetrics),experimentalMetrics),(_config$additionalPay=config.additionalPayloadData)===null||_config$additionalPay===void 0?void 0:_config$additionalPay.call(config,interaction)),getTracingContextData(interaction)),getStylesheetMetrics()),getErrorCounts(interaction)),getReactHydrationStats()),{},{interactionMetrics:_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({namePrefix:config.namePrefix||'',segmentPrefix:config.segmentPrefix||'',interactionId:interactionId,pageVisibilityAtTTI:pageVisibilityAtTTI,pageVisibilityAtTTAI:pageVisibilityAtTTAI,experimental__pageVisibilityAtTTI:moreAccuratePageVisibilityAtTTI,experimental__pageVisibilityAtTTAI:moreAccuratePageVisibilityAtTTAI,// raw interaction metrics
|
|
14
14
|
rate:rate,routeName:routeName,type:type,abortReason:abortReason,featureFlags:featureFlags,previousInteractionName:previousInteractionName,isPreviousInteractionAborted:isPreviousInteractionAborted,abortedByInteractionName:abortedByInteractionName,// performance
|
package/dist/cjs/ssr/index.js
CHANGED
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.configure = configure;
|
|
8
|
+
exports.getEdgeTimingsIncludingCloudfront = getEdgeTimingsIncludingCloudfront;
|
|
8
9
|
exports.getSSRDoneTime = getSSRDoneTime;
|
|
9
10
|
exports.getSSRFeatureFlags = getSSRFeatureFlags;
|
|
10
11
|
exports.getSSRPhaseSuccess = getSSRPhaseSuccess;
|
|
@@ -12,10 +13,9 @@ exports.getSSRSuccess = getSSRSuccess;
|
|
|
12
13
|
exports.getSSRTimings = getSSRTimings;
|
|
13
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
14
15
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
16
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
15
17
|
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; }
|
|
16
18
|
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) { (0, _defineProperty2.default)(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; }
|
|
17
|
-
//
|
|
18
|
-
|
|
19
19
|
var NESTED_METRIC_SEPARATOR = '/';
|
|
20
20
|
function filterEntry(entry) {
|
|
21
21
|
return !(!entry || (0, _typeof2.default)(entry) !== 'object' || entry.startTime < 0 || entry.duration < 0);
|
|
@@ -39,16 +39,111 @@ var config;
|
|
|
39
39
|
function configure(ssrConfig) {
|
|
40
40
|
config = ssrConfig;
|
|
41
41
|
}
|
|
42
|
+
function getPerformanceNavigationTiming() {
|
|
43
|
+
var _performance$getEntri;
|
|
44
|
+
// getEntriesByType doesn't change the returned type based on the given type key
|
|
45
|
+
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
|
46
|
+
return (_performance$getEntri = performance.getEntriesByType('navigation')) === null || _performance$getEntri === void 0 ? void 0 : _performance$getEntri[0];
|
|
47
|
+
}
|
|
48
|
+
function getServerTimingsByName() {
|
|
49
|
+
var _getPerformanceNaviga, _getPerformanceNaviga2;
|
|
50
|
+
var serverTimingsByName = Object.fromEntries((_getPerformanceNaviga = (_getPerformanceNaviga2 = getPerformanceNavigationTiming()) === null || _getPerformanceNaviga2 === void 0 || (_getPerformanceNaviga2 = _getPerformanceNaviga2.serverTiming) === null || _getPerformanceNaviga2 === void 0 ? void 0 : _getPerformanceNaviga2.map(function (timing) {
|
|
51
|
+
return [timing.name, timing];
|
|
52
|
+
})) !== null && _getPerformanceNaviga !== void 0 ? _getPerformanceNaviga : []);
|
|
53
|
+
return serverTimingsByName;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/**
|
|
57
|
+
* If we have the edge's view of ttfb and the clients view as well, then we should take the gap between them as
|
|
58
|
+
* the offset to use foe edge start time.
|
|
59
|
+
* This will simulate the network delays between the client and the edge as an edge startTime increase
|
|
60
|
+
*/
|
|
61
|
+
function getEdgeOffset(edgeTtfb) {
|
|
62
|
+
var _getPerformanceNaviga3;
|
|
63
|
+
var clientTtfb = (_getPerformanceNaviga3 = getPerformanceNavigationTiming()) === null || _getPerformanceNaviga3 === void 0 ? void 0 : _getPerformanceNaviga3.responseStart;
|
|
64
|
+
if (edgeTtfb == null || clientTtfb == null) {
|
|
65
|
+
return 0;
|
|
66
|
+
}
|
|
67
|
+
return clientTtfb - edgeTtfb;
|
|
68
|
+
}
|
|
69
|
+
function getEdgeTimingsIncludingCloudfront() {
|
|
70
|
+
var _serverTimingsByName$, _serverTimingsByName$2, _serverTimingsByName$3, _serverTimingsByName$4, _serverTimingsByName$5, _serverTimingsByName$6, _serverTimingsByName$7, _serverTimingsByName$8, _serverTimingsByName$9;
|
|
71
|
+
var serverTimingsByName = getServerTimingsByName();
|
|
72
|
+
var edgeTotalDuration = (_serverTimingsByName$ = (_serverTimingsByName$2 = serverTimingsByName['cdn-downstream-fbl']) === null || _serverTimingsByName$2 === void 0 ? void 0 : _serverTimingsByName$2.duration) !== null && _serverTimingsByName$ !== void 0 ? _serverTimingsByName$ : (_serverTimingsByName$3 = serverTimingsByName['atl-edge']) === null || _serverTimingsByName$3 === void 0 ? void 0 : _serverTimingsByName$3.duration;
|
|
73
|
+
if (!edgeTotalDuration) {
|
|
74
|
+
return null;
|
|
75
|
+
}
|
|
76
|
+
var edgeOffset = getEdgeOffset(edgeTotalDuration);
|
|
77
|
+
var cfInternalDuration = (((_serverTimingsByName$4 = serverTimingsByName['cdn-upstream-dns']) === null || _serverTimingsByName$4 === void 0 ? void 0 : _serverTimingsByName$4.duration) || 0) + (((_serverTimingsByName$5 = serverTimingsByName['cdn-upstream-connect']) === null || _serverTimingsByName$5 === void 0 ? void 0 : _serverTimingsByName$5.duration) || 0);
|
|
78
|
+
var cfUpstreamDuration = (((_serverTimingsByName$6 = serverTimingsByName['cdn-upstream-fbl']) === null || _serverTimingsByName$6 === void 0 ? void 0 : _serverTimingsByName$6.duration) || 0) - cfInternalDuration;
|
|
79
|
+
var cfDownstreamDuration = (((_serverTimingsByName$7 = serverTimingsByName['cdn-downstream-fbl']) === null || _serverTimingsByName$7 === void 0 ? void 0 : _serverTimingsByName$7.duration) || 0) - (((_serverTimingsByName$8 = serverTimingsByName['cdn-upstream-fbl']) === null || _serverTimingsByName$8 === void 0 ? void 0 : _serverTimingsByName$8.duration) || 0);
|
|
80
|
+
var atlEdgeDuration = (_serverTimingsByName$9 = serverTimingsByName['atl-edge']) === null || _serverTimingsByName$9 === void 0 ? void 0 : _serverTimingsByName$9.duration;
|
|
81
|
+
var cfToAtlEdgeNetworkDuration = cfUpstreamDuration - atlEdgeDuration;
|
|
82
|
+
var edgeTimings = {
|
|
83
|
+
edge: {
|
|
84
|
+
startTime: edgeOffset,
|
|
85
|
+
duration: edgeTotalDuration
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
if (typeof serverTimingsByName['cdn-downstream-fbl'] !== 'undefined') {
|
|
89
|
+
var _serverTimingsByName$0;
|
|
90
|
+
edgeTimings['edge/cf'] = {
|
|
91
|
+
startTime: edgeOffset,
|
|
92
|
+
duration: (_serverTimingsByName$0 = serverTimingsByName['cdn-downstream-fbl']) === null || _serverTimingsByName$0 === void 0 ? void 0 : _serverTimingsByName$0.duration
|
|
93
|
+
};
|
|
94
|
+
edgeTimings['edge/cf/internal'] = {
|
|
95
|
+
startTime: edgeOffset,
|
|
96
|
+
duration: cfInternalDuration
|
|
97
|
+
};
|
|
98
|
+
edgeTimings['edge/cf/upstream'] = {
|
|
99
|
+
startTime: edgeOffset + cfInternalDuration,
|
|
100
|
+
duration: cfUpstreamDuration
|
|
101
|
+
};
|
|
102
|
+
edgeTimings['edge/cf/downstream'] = {
|
|
103
|
+
startTime: edgeOffset + cfInternalDuration + cfUpstreamDuration,
|
|
104
|
+
duration: cfDownstreamDuration
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
if (typeof serverTimingsByName['atl-edge'] !== 'undefined') {
|
|
108
|
+
var _serverTimingsByName$1;
|
|
109
|
+
edgeTimings['edge/atl-edge'] = {
|
|
110
|
+
startTime: edgeOffset + cfInternalDuration + cfToAtlEdgeNetworkDuration,
|
|
111
|
+
duration: atlEdgeDuration
|
|
112
|
+
};
|
|
113
|
+
edgeTimings['edge/atl-edge/internal'] = {
|
|
114
|
+
startTime: edgeOffset + cfInternalDuration + cfToAtlEdgeNetworkDuration,
|
|
115
|
+
duration: (_serverTimingsByName$1 = serverTimingsByName['atl-edge-internal']) === null || _serverTimingsByName$1 === void 0 ? void 0 : _serverTimingsByName$1.duration
|
|
116
|
+
};
|
|
117
|
+
edgeTimings['edge/atl-edge/ttfb'] = {
|
|
118
|
+
startTime: edgeOffset + cfInternalDuration + cfToAtlEdgeNetworkDuration,
|
|
119
|
+
duration: atlEdgeDuration
|
|
120
|
+
};
|
|
121
|
+
edgeTimings['edge/cf/upstream/network'] = {
|
|
122
|
+
startTime: edgeOffset + cfInternalDuration,
|
|
123
|
+
duration: cfToAtlEdgeNetworkDuration
|
|
124
|
+
};
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// we need a timer here to prevent UFO pipeline from shifting SSR timers to start at 0
|
|
128
|
+
(edgeTimings === null || edgeTimings === void 0 ? void 0 : edgeTimings.edge) && edgeOffset && Object.assign(edgeTimings, {
|
|
129
|
+
'client-network': {
|
|
130
|
+
startTime: 0,
|
|
131
|
+
duration: edgeOffset
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
return edgeTimings;
|
|
135
|
+
}
|
|
42
136
|
function getSSRTimings() {
|
|
43
137
|
var _config;
|
|
44
|
-
|
|
45
|
-
|
|
138
|
+
var defaultSSRTimings = {};
|
|
139
|
+
if ((0, _platformFeatureFlags.fg)('platform_ufo_default_ssr_edge_timings')) {
|
|
140
|
+
defaultSSRTimings = getEdgeTimingsIncludingCloudfront();
|
|
46
141
|
}
|
|
47
|
-
var
|
|
48
|
-
if (
|
|
49
|
-
|
|
142
|
+
var configTimings = {};
|
|
143
|
+
if (typeof ((_config = config) === null || _config === void 0 ? void 0 : _config.getTimings) === 'function') {
|
|
144
|
+
configTimings = config.getTimings();
|
|
50
145
|
}
|
|
51
|
-
var ssrTimings = Object.entries(
|
|
146
|
+
var ssrTimings = Object.entries(_objectSpread(_objectSpread({}, configTimings), defaultSSRTimings)).reduce(function (acc, entry) {
|
|
52
147
|
if (filterEntry(entry[1])) {
|
|
53
148
|
acc[mapKey(entry[0])] = mapEntry(entry[1]);
|
|
54
149
|
}
|
|
@@ -8,7 +8,7 @@ if(cohortingCustomData&&cohortingCustomData.size>0){var _interaction$labelSta,_c
|
|
|
8
8
|
try{return acc+item.cssRules.length;}catch(e){return acc;}},0);const styleElements=doc.querySelectorAll('style').length;const styleProps=doc.querySelectorAll('[style]');const styleDeclarations=Array.from(doc.querySelectorAll('[style]')).reduce((acc,item)=>{try{if('style'in item){return acc+item.style.length;}else{return acc;}}catch(e){return acc;}},0);return{'ufo:stylesheets':stylesheetCount,'ufo:styleElements':styleElements,'ufo:styleProps':styleProps.length,'ufo:styleDeclarations':styleDeclarations,'ufo:cssrules':cssrules};}catch(e){return{};}}let regularTTAI;let expTTAI;function getErrorCounts(interaction){return{'ufo:errors:globalCount':getGlobalErrorCount(),'ufo:errors:count':interaction.errors.length};}async function createInteractionMetricsPayload(interaction,interactionId,experimental,criticalPayloadCount,vcMetrics){var _window$location,_config$additionalPay;const interactionPayloadStart=performance.now();const config=getConfig();if(!config){throw Error('UFO Configuration not provided');}const{end,start,ufoName,knownSegments,rate,type,abortReason,routeName,featureFlags,previousInteractionName,isPreviousInteractionAborted,abortedByInteractionName,responsiveness,unknownElementName,unknownElementHierarchy,hydration}=interaction;const pageVisibilityAtTTI=getPageVisibilityUpToTTI(interaction);const pageVisibilityAtTTAI=getPageVisibilityUpToTTAI(interaction);const segments=!fg('platform_ufo_remove_deprecated_config_fields')&&config.killswitchNestedSegments?[]:knownSegments;const segmentTree=getReactUFOPayloadVersion(interaction.type)==='2.0.0'?buildSegmentTree(segments.map(segment=>segment.labelStack)):{};const isDetailedPayload=pageVisibilityAtTTAI==='visible';const isPageLoad=type==='page_load';const calculatePageVisibilityFromTheStartOfPageLoad=config.enableBetterPageVisibilityApi&&isPageLoad;const moreAccuratePageVisibilityAtTTI=calculatePageVisibilityFromTheStartOfPageLoad?getMoreAccuratePageVisibilityUpToTTI(interaction):null;const moreAccuratePageVisibilityAtTTAI=calculatePageVisibilityFromTheStartOfPageLoad?getMoreAccuratePageVisibilityUpToTTAI(interaction):null;const labelStack=interaction.labelStack?{labelStack:optimizeLabelStack(interaction.labelStack,getReactUFOPayloadVersion(interaction.type))}:{};// Page Load
|
|
9
9
|
const getInitialPageLoadSSRMetrics=()=>{var _config$ssr;if(!isPageLoad){return{};}const config=getConfig();const SSRDoneTimeValue=getSSRDoneTimeValue(config);const SSRDoneTime=SSRDoneTimeValue!==undefined?{SSRDoneTime:Math.round(SSRDoneTimeValue)}:{};const isBM3ConfigSSRDoneAsFmp=interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp;const isUFOConfigSSRDoneAsFmp=interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp||!!(config!==null&&config!==void 0&&(_config$ssr=config.ssr)!==null&&_config$ssr!==void 0&&_config$ssr.getSSRDoneTime);if(!experimental&&(isBM3ConfigSSRDoneAsFmp||isUFOConfigSSRDoneAsFmp)&&SSRDoneTimeValue!==undefined){try{performance.mark(`FMP`,{startTime:SSRDoneTimeValue,detail:{devtools:{dataType:'marker'}}});}catch(e){}}return{...SSRDoneTime,isBM3ConfigSSRDoneAsFmp,isUFOConfigSSRDoneAsFmp};};const pageLoadInteractionMetrics=getInitialPageLoadSSRMetrics();// Detailed payload. Page visibility = visible
|
|
10
10
|
const getDetailedInteractionMetrics=resourceTimings=>{if(experimental||window.__UFO_COMPACT_PAYLOAD__||!isDetailedPayload){return{};}const spans=[...interaction.spans,...atlaskitInteractionSpans];atlaskitInteractionSpans.length=0;return{errors:interaction.errors.map(({labelStack,...others})=>({...others,labelStack:labelStack&&optimizeLabelStack(labelStack,getReactUFOPayloadVersion(interaction.type))})),holdActive:[...interaction.holdActive.values()],redirects:optimizeRedirects(interaction.redirects,start),holdInfo:optimizeHoldInfo(experimental?interaction.holdExpInfo:interaction.holdInfo,start,getReactUFOPayloadVersion(interaction.type)),spans:optimizeSpans(spans,start,getReactUFOPayloadVersion(interaction.type)),requestInfo:optimizeRequestInfo(interaction.requestInfo,start,getReactUFOPayloadVersion(interaction.type)),customTimings:optimizeCustomTimings(interaction.customTimings,start),bundleEvalTimings:objectToArray(getBundleEvalTimings(start)),resourceTimings:objectToArray(resourceTimings)};};// Page load & detailed payload
|
|
11
|
-
const getPageLoadDetailedInteractionMetrics=()=>{var _config$
|
|
11
|
+
const getPageLoadDetailedInteractionMetrics=()=>{var _config$ssr3;if(!isPageLoad||!isDetailedPayload){return{};}const initialPageLoadExtraTimings=objectToArray(initialPageLoadExtraTiming.getTimings());const config=getConfig();if(fg('platform_ufo_default_ssr_edge_timings')){var _config$ssr2;return{initialPageLoadExtraTimings,SSRTimings:config!==null&&config!==void 0&&(_config$ssr2=config.ssr)!==null&&_config$ssr2!==void 0&&_config$ssr2.getSSRTimings?[...config.ssr.getSSRTimings(),...objectToArray(ssr.getSSRTimings())]:objectToArray(ssr.getSSRTimings())};}return{initialPageLoadExtraTimings,SSRTimings:config!==null&&config!==void 0&&(_config$ssr3=config.ssr)!==null&&_config$ssr3!==void 0&&_config$ssr3.getSSRTimings?config.ssr.getSSRTimings():objectToArray(ssr.getSSRTimings())};};if(experimental){expTTAI=getTTAI(interaction);}else{regularTTAI=getTTAI(interaction);}const newUFOName=sanitizeUfoName(ufoName);const resourceTimings=getResourceTimings(start,end);const[finalVCMetrics,experimentalMetrics,paintMetrics,batteryInfo]=await Promise.all([vcMetrics||(await getVCMetrics(interaction)),experimental?getExperimentalVCMetrics(interaction):Promise.resolve(undefined),getPaintMetricsToLegacyFormat(type,end),getBatteryInfoToLegacyFormat()]);if(!experimental){addPerformanceMeasures(interaction.start,[...((finalVCMetrics===null||finalVCMetrics===void 0?void 0:finalVCMetrics['ufo:vc:rev'])||[])]);}const getReactHydrationStats=()=>{if(!hydration){return{};}return{hydration};};const payload={actionSubject:'experience',action:'measured',eventType:'operational',source:'measured',tags:['observability'],attributes:{properties:{// basic
|
|
12
12
|
'event:hostname':((_window$location=window.location)===null||_window$location===void 0?void 0:_window$location.hostname)||'unknown','event:product':config.product,'event:schema':'1.0.0','event:sizeInKb':0,'event:source':{name:'react-ufo/web',version:getReactUFOPayloadVersion(interaction.type)},'event:region':config.region||'unknown','experience:key':experimental?'custom.experimental-interaction-metrics':'custom.interaction-metrics','experience:name':newUFOName,// Include CPU usage monitoring data
|
|
13
13
|
'event:cpu:usage':createPressureStateReport(interaction.start,interaction.end),'event:memory:usage':createMemoryStateReport(interaction.start,interaction.end),...(criticalPayloadCount!==undefined?{'ufo:multipayload':true,'ufo:criticalPayloadCount':criticalPayloadCount}:{}),// root
|
|
14
14
|
...getBrowserMetadataToLegacyFormat(),...batteryInfo,...getSSRProperties(type),...getAssetsMetrics(interaction,pageLoadInteractionMetrics===null||pageLoadInteractionMetrics===void 0?void 0:pageLoadInteractionMetrics.SSRDoneTime),...getPPSMetrics(interaction),...paintMetrics,...getNavigationMetricsToLegacyFormat(type),...finalVCMetrics,...experimentalMetrics,...((_config$additionalPay=config.additionalPayloadData)===null||_config$additionalPay===void 0?void 0:_config$additionalPay.call(config,interaction)),...getTracingContextData(interaction),...getStylesheetMetrics(),...getErrorCounts(interaction),...getReactHydrationStats(),interactionMetrics:{namePrefix:config.namePrefix||'',segmentPrefix:config.segmentPrefix||'',interactionId,pageVisibilityAtTTI,pageVisibilityAtTTAI,experimental__pageVisibilityAtTTI:moreAccuratePageVisibilityAtTTI,experimental__pageVisibilityAtTTAI:moreAccuratePageVisibilityAtTTAI,// raw interaction metrics
|
package/dist/es2019/ssr/index.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
2
|
const NESTED_METRIC_SEPARATOR = '/';
|
|
4
3
|
function filterEntry(entry) {
|
|
5
4
|
return !(!entry || typeof entry !== 'object' || entry.startTime < 0 || entry.duration < 0);
|
|
@@ -24,16 +23,112 @@ let config;
|
|
|
24
23
|
export function configure(ssrConfig) {
|
|
25
24
|
config = ssrConfig;
|
|
26
25
|
}
|
|
26
|
+
function getPerformanceNavigationTiming() {
|
|
27
|
+
var _performance$getEntri;
|
|
28
|
+
// getEntriesByType doesn't change the returned type based on the given type key
|
|
29
|
+
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
|
30
|
+
return (_performance$getEntri = performance.getEntriesByType('navigation')) === null || _performance$getEntri === void 0 ? void 0 : _performance$getEntri[0];
|
|
31
|
+
}
|
|
32
|
+
function getServerTimingsByName() {
|
|
33
|
+
var _getPerformanceNaviga, _getPerformanceNaviga2, _getPerformanceNaviga3;
|
|
34
|
+
const serverTimingsByName = Object.fromEntries((_getPerformanceNaviga = (_getPerformanceNaviga2 = getPerformanceNavigationTiming()) === null || _getPerformanceNaviga2 === void 0 ? void 0 : (_getPerformanceNaviga3 = _getPerformanceNaviga2.serverTiming) === null || _getPerformanceNaviga3 === void 0 ? void 0 : _getPerformanceNaviga3.map(timing => [timing.name, timing])) !== null && _getPerformanceNaviga !== void 0 ? _getPerformanceNaviga : []);
|
|
35
|
+
return serverTimingsByName;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* If we have the edge's view of ttfb and the clients view as well, then we should take the gap between them as
|
|
40
|
+
* the offset to use foe edge start time.
|
|
41
|
+
* This will simulate the network delays between the client and the edge as an edge startTime increase
|
|
42
|
+
*/
|
|
43
|
+
function getEdgeOffset(edgeTtfb) {
|
|
44
|
+
var _getPerformanceNaviga4;
|
|
45
|
+
const clientTtfb = (_getPerformanceNaviga4 = getPerformanceNavigationTiming()) === null || _getPerformanceNaviga4 === void 0 ? void 0 : _getPerformanceNaviga4.responseStart;
|
|
46
|
+
if (edgeTtfb == null || clientTtfb == null) {
|
|
47
|
+
return 0;
|
|
48
|
+
}
|
|
49
|
+
return clientTtfb - edgeTtfb;
|
|
50
|
+
}
|
|
51
|
+
export function getEdgeTimingsIncludingCloudfront() {
|
|
52
|
+
var _serverTimingsByName$, _serverTimingsByName$2, _serverTimingsByName$3, _serverTimingsByName$4, _serverTimingsByName$5, _serverTimingsByName$6, _serverTimingsByName$7, _serverTimingsByName$8, _serverTimingsByName$9;
|
|
53
|
+
const serverTimingsByName = getServerTimingsByName();
|
|
54
|
+
const edgeTotalDuration = (_serverTimingsByName$ = (_serverTimingsByName$2 = serverTimingsByName['cdn-downstream-fbl']) === null || _serverTimingsByName$2 === void 0 ? void 0 : _serverTimingsByName$2.duration) !== null && _serverTimingsByName$ !== void 0 ? _serverTimingsByName$ : (_serverTimingsByName$3 = serverTimingsByName['atl-edge']) === null || _serverTimingsByName$3 === void 0 ? void 0 : _serverTimingsByName$3.duration;
|
|
55
|
+
if (!edgeTotalDuration) {
|
|
56
|
+
return null;
|
|
57
|
+
}
|
|
58
|
+
const edgeOffset = getEdgeOffset(edgeTotalDuration);
|
|
59
|
+
const cfInternalDuration = (((_serverTimingsByName$4 = serverTimingsByName['cdn-upstream-dns']) === null || _serverTimingsByName$4 === void 0 ? void 0 : _serverTimingsByName$4.duration) || 0) + (((_serverTimingsByName$5 = serverTimingsByName['cdn-upstream-connect']) === null || _serverTimingsByName$5 === void 0 ? void 0 : _serverTimingsByName$5.duration) || 0);
|
|
60
|
+
const cfUpstreamDuration = (((_serverTimingsByName$6 = serverTimingsByName['cdn-upstream-fbl']) === null || _serverTimingsByName$6 === void 0 ? void 0 : _serverTimingsByName$6.duration) || 0) - cfInternalDuration;
|
|
61
|
+
const cfDownstreamDuration = (((_serverTimingsByName$7 = serverTimingsByName['cdn-downstream-fbl']) === null || _serverTimingsByName$7 === void 0 ? void 0 : _serverTimingsByName$7.duration) || 0) - (((_serverTimingsByName$8 = serverTimingsByName['cdn-upstream-fbl']) === null || _serverTimingsByName$8 === void 0 ? void 0 : _serverTimingsByName$8.duration) || 0);
|
|
62
|
+
const atlEdgeDuration = (_serverTimingsByName$9 = serverTimingsByName['atl-edge']) === null || _serverTimingsByName$9 === void 0 ? void 0 : _serverTimingsByName$9.duration;
|
|
63
|
+
const cfToAtlEdgeNetworkDuration = cfUpstreamDuration - atlEdgeDuration;
|
|
64
|
+
const edgeTimings = {
|
|
65
|
+
edge: {
|
|
66
|
+
startTime: edgeOffset,
|
|
67
|
+
duration: edgeTotalDuration
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
if (typeof serverTimingsByName['cdn-downstream-fbl'] !== 'undefined') {
|
|
71
|
+
var _serverTimingsByName$0;
|
|
72
|
+
edgeTimings['edge/cf'] = {
|
|
73
|
+
startTime: edgeOffset,
|
|
74
|
+
duration: (_serverTimingsByName$0 = serverTimingsByName['cdn-downstream-fbl']) === null || _serverTimingsByName$0 === void 0 ? void 0 : _serverTimingsByName$0.duration
|
|
75
|
+
};
|
|
76
|
+
edgeTimings['edge/cf/internal'] = {
|
|
77
|
+
startTime: edgeOffset,
|
|
78
|
+
duration: cfInternalDuration
|
|
79
|
+
};
|
|
80
|
+
edgeTimings['edge/cf/upstream'] = {
|
|
81
|
+
startTime: edgeOffset + cfInternalDuration,
|
|
82
|
+
duration: cfUpstreamDuration
|
|
83
|
+
};
|
|
84
|
+
edgeTimings['edge/cf/downstream'] = {
|
|
85
|
+
startTime: edgeOffset + cfInternalDuration + cfUpstreamDuration,
|
|
86
|
+
duration: cfDownstreamDuration
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
if (typeof serverTimingsByName['atl-edge'] !== 'undefined') {
|
|
90
|
+
var _serverTimingsByName$1;
|
|
91
|
+
edgeTimings['edge/atl-edge'] = {
|
|
92
|
+
startTime: edgeOffset + cfInternalDuration + cfToAtlEdgeNetworkDuration,
|
|
93
|
+
duration: atlEdgeDuration
|
|
94
|
+
};
|
|
95
|
+
edgeTimings['edge/atl-edge/internal'] = {
|
|
96
|
+
startTime: edgeOffset + cfInternalDuration + cfToAtlEdgeNetworkDuration,
|
|
97
|
+
duration: (_serverTimingsByName$1 = serverTimingsByName['atl-edge-internal']) === null || _serverTimingsByName$1 === void 0 ? void 0 : _serverTimingsByName$1.duration
|
|
98
|
+
};
|
|
99
|
+
edgeTimings['edge/atl-edge/ttfb'] = {
|
|
100
|
+
startTime: edgeOffset + cfInternalDuration + cfToAtlEdgeNetworkDuration,
|
|
101
|
+
duration: atlEdgeDuration
|
|
102
|
+
};
|
|
103
|
+
edgeTimings['edge/cf/upstream/network'] = {
|
|
104
|
+
startTime: edgeOffset + cfInternalDuration,
|
|
105
|
+
duration: cfToAtlEdgeNetworkDuration
|
|
106
|
+
};
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
// we need a timer here to prevent UFO pipeline from shifting SSR timers to start at 0
|
|
110
|
+
(edgeTimings === null || edgeTimings === void 0 ? void 0 : edgeTimings.edge) && edgeOffset && Object.assign(edgeTimings, {
|
|
111
|
+
'client-network': {
|
|
112
|
+
startTime: 0,
|
|
113
|
+
duration: edgeOffset
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
return edgeTimings;
|
|
117
|
+
}
|
|
27
118
|
export function getSSRTimings() {
|
|
28
119
|
var _config;
|
|
29
|
-
|
|
30
|
-
|
|
120
|
+
let defaultSSRTimings = {};
|
|
121
|
+
if (fg('platform_ufo_default_ssr_edge_timings')) {
|
|
122
|
+
defaultSSRTimings = getEdgeTimingsIncludingCloudfront();
|
|
31
123
|
}
|
|
32
|
-
|
|
33
|
-
if (
|
|
34
|
-
|
|
124
|
+
let configTimings = {};
|
|
125
|
+
if (typeof ((_config = config) === null || _config === void 0 ? void 0 : _config.getTimings) === 'function') {
|
|
126
|
+
configTimings = config.getTimings();
|
|
35
127
|
}
|
|
36
|
-
const ssrTimings = Object.entries(
|
|
128
|
+
const ssrTimings = Object.entries({
|
|
129
|
+
...configTimings,
|
|
130
|
+
...defaultSSRTimings
|
|
131
|
+
}).reduce((acc, entry) => {
|
|
37
132
|
if (filterEntry(entry[1])) {
|
|
38
133
|
acc[mapKey(entry[0])] = mapEntry(entry[1]);
|
|
39
134
|
}
|
|
@@ -8,7 +8,7 @@ if(cohortingCustomData&&cohortingCustomData.size>0){var _interaction$labelSta,_c
|
|
|
8
8
|
try{return acc+item.cssRules.length;}catch(e){return acc;}},0);var styleElements=doc.querySelectorAll('style').length;var styleProps=doc.querySelectorAll('[style]');var styleDeclarations=Array.from(doc.querySelectorAll('[style]')).reduce(function(acc,item){try{if('style'in item){return acc+item.style.length;}else{return acc;}}catch(e){return acc;}},0);return{'ufo:stylesheets':stylesheetCount,'ufo:styleElements':styleElements,'ufo:styleProps':styleProps.length,'ufo:styleDeclarations':styleDeclarations,'ufo:cssrules':cssrules};}catch(e){return{};}}var regularTTAI;var expTTAI;function getErrorCounts(interaction){return{'ufo:errors:globalCount':getGlobalErrorCount(),'ufo:errors:count':interaction.errors.length};}function createInteractionMetricsPayload(_x,_x2,_x3,_x4,_x5){return _createInteractionMetricsPayload.apply(this,arguments);}function _createInteractionMetricsPayload(){_createInteractionMetricsPayload=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(interaction,interactionId,experimental,criticalPayloadCount,vcMetrics){var _window$location,_config$additionalPay;var interactionPayloadStart,config,end,start,ufoName,knownSegments,rate,type,abortReason,routeName,featureFlags,previousInteractionName,isPreviousInteractionAborted,abortedByInteractionName,responsiveness,unknownElementName,unknownElementHierarchy,hydration,pageVisibilityAtTTI,pageVisibilityAtTTAI,segments,segmentTree,isDetailedPayload,isPageLoad,calculatePageVisibilityFromTheStartOfPageLoad,moreAccuratePageVisibilityAtTTI,moreAccuratePageVisibilityAtTTAI,labelStack,getInitialPageLoadSSRMetrics,pageLoadInteractionMetrics,getDetailedInteractionMetrics,getPageLoadDetailedInteractionMetrics,newUFOName,resourceTimings,_yield$Promise$all,_yield$Promise$all2,finalVCMetrics,experimentalMetrics,paintMetrics,batteryInfo,getReactHydrationStats,payload,size,vcRev,rawData,rawDataSize;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:interactionPayloadStart=performance.now();config=getConfig();if(config){_context.next=4;break;}throw Error('UFO Configuration not provided');case 4:end=interaction.end,start=interaction.start,ufoName=interaction.ufoName,knownSegments=interaction.knownSegments,rate=interaction.rate,type=interaction.type,abortReason=interaction.abortReason,routeName=interaction.routeName,featureFlags=interaction.featureFlags,previousInteractionName=interaction.previousInteractionName,isPreviousInteractionAborted=interaction.isPreviousInteractionAborted,abortedByInteractionName=interaction.abortedByInteractionName,responsiveness=interaction.responsiveness,unknownElementName=interaction.unknownElementName,unknownElementHierarchy=interaction.unknownElementHierarchy,hydration=interaction.hydration;pageVisibilityAtTTI=getPageVisibilityUpToTTI(interaction);pageVisibilityAtTTAI=getPageVisibilityUpToTTAI(interaction);segments=!fg('platform_ufo_remove_deprecated_config_fields')&&config.killswitchNestedSegments?[]:knownSegments;segmentTree=getReactUFOPayloadVersion(interaction.type)==='2.0.0'?buildSegmentTree(segments.map(function(segment){return segment.labelStack;})):{};isDetailedPayload=pageVisibilityAtTTAI==='visible';isPageLoad=type==='page_load';calculatePageVisibilityFromTheStartOfPageLoad=config.enableBetterPageVisibilityApi&&isPageLoad;moreAccuratePageVisibilityAtTTI=calculatePageVisibilityFromTheStartOfPageLoad?getMoreAccuratePageVisibilityUpToTTI(interaction):null;moreAccuratePageVisibilityAtTTAI=calculatePageVisibilityFromTheStartOfPageLoad?getMoreAccuratePageVisibilityUpToTTAI(interaction):null;labelStack=interaction.labelStack?{labelStack:optimizeLabelStack(interaction.labelStack,getReactUFOPayloadVersion(interaction.type))}:{};// Page Load
|
|
9
9
|
getInitialPageLoadSSRMetrics=function getInitialPageLoadSSRMetrics(){var _config$ssr;if(!isPageLoad){return{};}var config=getConfig();var SSRDoneTimeValue=getSSRDoneTimeValue(config);var SSRDoneTime=SSRDoneTimeValue!==undefined?{SSRDoneTime:Math.round(SSRDoneTimeValue)}:{};var isBM3ConfigSSRDoneAsFmp=interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp;var isUFOConfigSSRDoneAsFmp=interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp||!!(config!==null&&config!==void 0&&(_config$ssr=config.ssr)!==null&&_config$ssr!==void 0&&_config$ssr.getSSRDoneTime);if(!experimental&&(isBM3ConfigSSRDoneAsFmp||isUFOConfigSSRDoneAsFmp)&&SSRDoneTimeValue!==undefined){try{performance.mark("FMP",{startTime:SSRDoneTimeValue,detail:{devtools:{dataType:'marker'}}});}catch(e){}}return _objectSpread(_objectSpread({},SSRDoneTime),{},{isBM3ConfigSSRDoneAsFmp:isBM3ConfigSSRDoneAsFmp,isUFOConfigSSRDoneAsFmp:isUFOConfigSSRDoneAsFmp});};pageLoadInteractionMetrics=getInitialPageLoadSSRMetrics();// Detailed payload. Page visibility = visible
|
|
10
10
|
getDetailedInteractionMetrics=function getDetailedInteractionMetrics(resourceTimings){if(experimental||window.__UFO_COMPACT_PAYLOAD__||!isDetailedPayload){return{};}var spans=[].concat(_toConsumableArray(interaction.spans),_toConsumableArray(atlaskitInteractionSpans));atlaskitInteractionSpans.length=0;return{errors:interaction.errors.map(function(_ref2){var labelStack=_ref2.labelStack,others=_objectWithoutProperties(_ref2,_excluded);return _objectSpread(_objectSpread({},others),{},{labelStack:labelStack&&optimizeLabelStack(labelStack,getReactUFOPayloadVersion(interaction.type))});}),holdActive:_toConsumableArray(interaction.holdActive.values()),redirects:optimizeRedirects(interaction.redirects,start),holdInfo:optimizeHoldInfo(experimental?interaction.holdExpInfo:interaction.holdInfo,start,getReactUFOPayloadVersion(interaction.type)),spans:optimizeSpans(spans,start,getReactUFOPayloadVersion(interaction.type)),requestInfo:optimizeRequestInfo(interaction.requestInfo,start,getReactUFOPayloadVersion(interaction.type)),customTimings:optimizeCustomTimings(interaction.customTimings,start),bundleEvalTimings:objectToArray(getBundleEvalTimings(start)),resourceTimings:objectToArray(resourceTimings)};};// Page load & detailed payload
|
|
11
|
-
getPageLoadDetailedInteractionMetrics=function getPageLoadDetailedInteractionMetrics(){var _config$
|
|
11
|
+
getPageLoadDetailedInteractionMetrics=function getPageLoadDetailedInteractionMetrics(){var _config$ssr3;if(!isPageLoad||!isDetailedPayload){return{};}var initialPageLoadExtraTimings=objectToArray(initialPageLoadExtraTiming.getTimings());var config=getConfig();if(fg('platform_ufo_default_ssr_edge_timings')){var _config$ssr2;return{initialPageLoadExtraTimings:initialPageLoadExtraTimings,SSRTimings:config!==null&&config!==void 0&&(_config$ssr2=config.ssr)!==null&&_config$ssr2!==void 0&&_config$ssr2.getSSRTimings?[].concat(_toConsumableArray(config.ssr.getSSRTimings()),_toConsumableArray(objectToArray(ssr.getSSRTimings()))):objectToArray(ssr.getSSRTimings())};}return{initialPageLoadExtraTimings:initialPageLoadExtraTimings,SSRTimings:config!==null&&config!==void 0&&(_config$ssr3=config.ssr)!==null&&_config$ssr3!==void 0&&_config$ssr3.getSSRTimings?config.ssr.getSSRTimings():objectToArray(ssr.getSSRTimings())};};if(experimental){expTTAI=getTTAI(interaction);}else{regularTTAI=getTTAI(interaction);}newUFOName=sanitizeUfoName(ufoName);resourceTimings=getResourceTimings(start,end);_context.t0=Promise;_context.t1=vcMetrics;if(_context.t1){_context.next=28;break;}_context.next=27;return getVCMetrics(interaction);case 27:_context.t1=_context.sent;case 28:_context.t2=_context.t1;_context.t3=experimental?getExperimentalVCMetrics(interaction):Promise.resolve(undefined);_context.t4=getPaintMetricsToLegacyFormat(type,end);_context.t5=getBatteryInfoToLegacyFormat();_context.t6=[_context.t2,_context.t3,_context.t4,_context.t5];_context.next=35;return _context.t0.all.call(_context.t0,_context.t6);case 35:_yield$Promise$all=_context.sent;_yield$Promise$all2=_slicedToArray(_yield$Promise$all,4);finalVCMetrics=_yield$Promise$all2[0];experimentalMetrics=_yield$Promise$all2[1];paintMetrics=_yield$Promise$all2[2];batteryInfo=_yield$Promise$all2[3];if(!experimental){addPerformanceMeasures(interaction.start,_toConsumableArray((finalVCMetrics===null||finalVCMetrics===void 0?void 0:finalVCMetrics['ufo:vc:rev'])||[]));}getReactHydrationStats=function getReactHydrationStats(){if(!hydration){return{};}return{hydration:hydration};};payload={actionSubject:'experience',action:'measured',eventType:'operational',source:'measured',tags:['observability'],attributes:{properties:_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({// basic
|
|
12
12
|
'event:hostname':((_window$location=window.location)===null||_window$location===void 0?void 0:_window$location.hostname)||'unknown','event:product':config.product,'event:schema':'1.0.0','event:sizeInKb':0,'event:source':{name:'react-ufo/web',version:getReactUFOPayloadVersion(interaction.type)},'event:region':config.region||'unknown','experience:key':experimental?'custom.experimental-interaction-metrics':'custom.interaction-metrics','experience:name':newUFOName,// Include CPU usage monitoring data
|
|
13
13
|
'event:cpu:usage':createPressureStateReport(interaction.start,interaction.end),'event:memory:usage':createMemoryStateReport(interaction.start,interaction.end)},criticalPayloadCount!==undefined?{'ufo:multipayload':true,'ufo:criticalPayloadCount':criticalPayloadCount}:{}),getBrowserMetadataToLegacyFormat()),batteryInfo),getSSRProperties(type)),getAssetsMetrics(interaction,pageLoadInteractionMetrics===null||pageLoadInteractionMetrics===void 0?void 0:pageLoadInteractionMetrics.SSRDoneTime)),getPPSMetrics(interaction)),paintMetrics),getNavigationMetricsToLegacyFormat(type)),finalVCMetrics),experimentalMetrics),(_config$additionalPay=config.additionalPayloadData)===null||_config$additionalPay===void 0?void 0:_config$additionalPay.call(config,interaction)),getTracingContextData(interaction)),getStylesheetMetrics()),getErrorCounts(interaction)),getReactHydrationStats()),{},{interactionMetrics:_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({namePrefix:config.namePrefix||'',segmentPrefix:config.segmentPrefix||'',interactionId:interactionId,pageVisibilityAtTTI:pageVisibilityAtTTI,pageVisibilityAtTTAI:pageVisibilityAtTTAI,experimental__pageVisibilityAtTTI:moreAccuratePageVisibilityAtTTI,experimental__pageVisibilityAtTTAI:moreAccuratePageVisibilityAtTTAI,// raw interaction metrics
|
|
14
14
|
rate:rate,routeName:routeName,type:type,abortReason:abortReason,featureFlags:featureFlags,previousInteractionName:previousInteractionName,isPreviousInteractionAborted:isPreviousInteractionAborted,abortedByInteractionName:abortedByInteractionName,// performance
|
package/dist/esm/ssr/index.js
CHANGED
|
@@ -2,8 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
import _typeof from "@babel/runtime/helpers/typeof";
|
|
3
3
|
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; }
|
|
4
4
|
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; }
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
6
|
var NESTED_METRIC_SEPARATOR = '/';
|
|
8
7
|
function filterEntry(entry) {
|
|
9
8
|
return !(!entry || _typeof(entry) !== 'object' || entry.startTime < 0 || entry.duration < 0);
|
|
@@ -27,16 +26,111 @@ var config;
|
|
|
27
26
|
export function configure(ssrConfig) {
|
|
28
27
|
config = ssrConfig;
|
|
29
28
|
}
|
|
29
|
+
function getPerformanceNavigationTiming() {
|
|
30
|
+
var _performance$getEntri;
|
|
31
|
+
// getEntriesByType doesn't change the returned type based on the given type key
|
|
32
|
+
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
|
33
|
+
return (_performance$getEntri = performance.getEntriesByType('navigation')) === null || _performance$getEntri === void 0 ? void 0 : _performance$getEntri[0];
|
|
34
|
+
}
|
|
35
|
+
function getServerTimingsByName() {
|
|
36
|
+
var _getPerformanceNaviga, _getPerformanceNaviga2;
|
|
37
|
+
var serverTimingsByName = Object.fromEntries((_getPerformanceNaviga = (_getPerformanceNaviga2 = getPerformanceNavigationTiming()) === null || _getPerformanceNaviga2 === void 0 || (_getPerformanceNaviga2 = _getPerformanceNaviga2.serverTiming) === null || _getPerformanceNaviga2 === void 0 ? void 0 : _getPerformanceNaviga2.map(function (timing) {
|
|
38
|
+
return [timing.name, timing];
|
|
39
|
+
})) !== null && _getPerformanceNaviga !== void 0 ? _getPerformanceNaviga : []);
|
|
40
|
+
return serverTimingsByName;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* If we have the edge's view of ttfb and the clients view as well, then we should take the gap between them as
|
|
45
|
+
* the offset to use foe edge start time.
|
|
46
|
+
* This will simulate the network delays between the client and the edge as an edge startTime increase
|
|
47
|
+
*/
|
|
48
|
+
function getEdgeOffset(edgeTtfb) {
|
|
49
|
+
var _getPerformanceNaviga3;
|
|
50
|
+
var clientTtfb = (_getPerformanceNaviga3 = getPerformanceNavigationTiming()) === null || _getPerformanceNaviga3 === void 0 ? void 0 : _getPerformanceNaviga3.responseStart;
|
|
51
|
+
if (edgeTtfb == null || clientTtfb == null) {
|
|
52
|
+
return 0;
|
|
53
|
+
}
|
|
54
|
+
return clientTtfb - edgeTtfb;
|
|
55
|
+
}
|
|
56
|
+
export function getEdgeTimingsIncludingCloudfront() {
|
|
57
|
+
var _serverTimingsByName$, _serverTimingsByName$2, _serverTimingsByName$3, _serverTimingsByName$4, _serverTimingsByName$5, _serverTimingsByName$6, _serverTimingsByName$7, _serverTimingsByName$8, _serverTimingsByName$9;
|
|
58
|
+
var serverTimingsByName = getServerTimingsByName();
|
|
59
|
+
var edgeTotalDuration = (_serverTimingsByName$ = (_serverTimingsByName$2 = serverTimingsByName['cdn-downstream-fbl']) === null || _serverTimingsByName$2 === void 0 ? void 0 : _serverTimingsByName$2.duration) !== null && _serverTimingsByName$ !== void 0 ? _serverTimingsByName$ : (_serverTimingsByName$3 = serverTimingsByName['atl-edge']) === null || _serverTimingsByName$3 === void 0 ? void 0 : _serverTimingsByName$3.duration;
|
|
60
|
+
if (!edgeTotalDuration) {
|
|
61
|
+
return null;
|
|
62
|
+
}
|
|
63
|
+
var edgeOffset = getEdgeOffset(edgeTotalDuration);
|
|
64
|
+
var cfInternalDuration = (((_serverTimingsByName$4 = serverTimingsByName['cdn-upstream-dns']) === null || _serverTimingsByName$4 === void 0 ? void 0 : _serverTimingsByName$4.duration) || 0) + (((_serverTimingsByName$5 = serverTimingsByName['cdn-upstream-connect']) === null || _serverTimingsByName$5 === void 0 ? void 0 : _serverTimingsByName$5.duration) || 0);
|
|
65
|
+
var cfUpstreamDuration = (((_serverTimingsByName$6 = serverTimingsByName['cdn-upstream-fbl']) === null || _serverTimingsByName$6 === void 0 ? void 0 : _serverTimingsByName$6.duration) || 0) - cfInternalDuration;
|
|
66
|
+
var cfDownstreamDuration = (((_serverTimingsByName$7 = serverTimingsByName['cdn-downstream-fbl']) === null || _serverTimingsByName$7 === void 0 ? void 0 : _serverTimingsByName$7.duration) || 0) - (((_serverTimingsByName$8 = serverTimingsByName['cdn-upstream-fbl']) === null || _serverTimingsByName$8 === void 0 ? void 0 : _serverTimingsByName$8.duration) || 0);
|
|
67
|
+
var atlEdgeDuration = (_serverTimingsByName$9 = serverTimingsByName['atl-edge']) === null || _serverTimingsByName$9 === void 0 ? void 0 : _serverTimingsByName$9.duration;
|
|
68
|
+
var cfToAtlEdgeNetworkDuration = cfUpstreamDuration - atlEdgeDuration;
|
|
69
|
+
var edgeTimings = {
|
|
70
|
+
edge: {
|
|
71
|
+
startTime: edgeOffset,
|
|
72
|
+
duration: edgeTotalDuration
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
if (typeof serverTimingsByName['cdn-downstream-fbl'] !== 'undefined') {
|
|
76
|
+
var _serverTimingsByName$0;
|
|
77
|
+
edgeTimings['edge/cf'] = {
|
|
78
|
+
startTime: edgeOffset,
|
|
79
|
+
duration: (_serverTimingsByName$0 = serverTimingsByName['cdn-downstream-fbl']) === null || _serverTimingsByName$0 === void 0 ? void 0 : _serverTimingsByName$0.duration
|
|
80
|
+
};
|
|
81
|
+
edgeTimings['edge/cf/internal'] = {
|
|
82
|
+
startTime: edgeOffset,
|
|
83
|
+
duration: cfInternalDuration
|
|
84
|
+
};
|
|
85
|
+
edgeTimings['edge/cf/upstream'] = {
|
|
86
|
+
startTime: edgeOffset + cfInternalDuration,
|
|
87
|
+
duration: cfUpstreamDuration
|
|
88
|
+
};
|
|
89
|
+
edgeTimings['edge/cf/downstream'] = {
|
|
90
|
+
startTime: edgeOffset + cfInternalDuration + cfUpstreamDuration,
|
|
91
|
+
duration: cfDownstreamDuration
|
|
92
|
+
};
|
|
93
|
+
}
|
|
94
|
+
if (typeof serverTimingsByName['atl-edge'] !== 'undefined') {
|
|
95
|
+
var _serverTimingsByName$1;
|
|
96
|
+
edgeTimings['edge/atl-edge'] = {
|
|
97
|
+
startTime: edgeOffset + cfInternalDuration + cfToAtlEdgeNetworkDuration,
|
|
98
|
+
duration: atlEdgeDuration
|
|
99
|
+
};
|
|
100
|
+
edgeTimings['edge/atl-edge/internal'] = {
|
|
101
|
+
startTime: edgeOffset + cfInternalDuration + cfToAtlEdgeNetworkDuration,
|
|
102
|
+
duration: (_serverTimingsByName$1 = serverTimingsByName['atl-edge-internal']) === null || _serverTimingsByName$1 === void 0 ? void 0 : _serverTimingsByName$1.duration
|
|
103
|
+
};
|
|
104
|
+
edgeTimings['edge/atl-edge/ttfb'] = {
|
|
105
|
+
startTime: edgeOffset + cfInternalDuration + cfToAtlEdgeNetworkDuration,
|
|
106
|
+
duration: atlEdgeDuration
|
|
107
|
+
};
|
|
108
|
+
edgeTimings['edge/cf/upstream/network'] = {
|
|
109
|
+
startTime: edgeOffset + cfInternalDuration,
|
|
110
|
+
duration: cfToAtlEdgeNetworkDuration
|
|
111
|
+
};
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// we need a timer here to prevent UFO pipeline from shifting SSR timers to start at 0
|
|
115
|
+
(edgeTimings === null || edgeTimings === void 0 ? void 0 : edgeTimings.edge) && edgeOffset && Object.assign(edgeTimings, {
|
|
116
|
+
'client-network': {
|
|
117
|
+
startTime: 0,
|
|
118
|
+
duration: edgeOffset
|
|
119
|
+
}
|
|
120
|
+
});
|
|
121
|
+
return edgeTimings;
|
|
122
|
+
}
|
|
30
123
|
export function getSSRTimings() {
|
|
31
124
|
var _config;
|
|
32
|
-
|
|
33
|
-
|
|
125
|
+
var defaultSSRTimings = {};
|
|
126
|
+
if (fg('platform_ufo_default_ssr_edge_timings')) {
|
|
127
|
+
defaultSSRTimings = getEdgeTimingsIncludingCloudfront();
|
|
34
128
|
}
|
|
35
|
-
var
|
|
36
|
-
if (
|
|
37
|
-
|
|
129
|
+
var configTimings = {};
|
|
130
|
+
if (typeof ((_config = config) === null || _config === void 0 ? void 0 : _config.getTimings) === 'function') {
|
|
131
|
+
configTimings = config.getTimings();
|
|
38
132
|
}
|
|
39
|
-
var ssrTimings = Object.entries(
|
|
133
|
+
var ssrTimings = Object.entries(_objectSpread(_objectSpread({}, configTimings), defaultSSRTimings)).reduce(function (acc, entry) {
|
|
40
134
|
if (filterEntry(entry[1])) {
|
|
41
135
|
acc[mapKey(entry[0])] = mapEntry(entry[1]);
|
|
42
136
|
}
|
|
@@ -41,6 +41,7 @@ export type SSRConfig = {
|
|
|
41
41
|
getTimings?: () => ReportedTimings | null;
|
|
42
42
|
};
|
|
43
43
|
export declare function configure(ssrConfig: SSRConfig): void;
|
|
44
|
+
export declare function getEdgeTimingsIncludingCloudfront(): ReportedTimings | null;
|
|
44
45
|
export declare function getSSRTimings(): ReportedTimings;
|
|
45
46
|
export declare function getSSRSuccess(): boolean;
|
|
46
47
|
export declare function getSSRPhaseSuccess(): {
|
|
@@ -41,6 +41,7 @@ export type SSRConfig = {
|
|
|
41
41
|
getTimings?: () => ReportedTimings | null;
|
|
42
42
|
};
|
|
43
43
|
export declare function configure(ssrConfig: SSRConfig): void;
|
|
44
|
+
export declare function getEdgeTimingsIncludingCloudfront(): ReportedTimings | null;
|
|
44
45
|
export declare function getSSRTimings(): ReportedTimings;
|
|
45
46
|
export declare function getSSRSuccess(): boolean;
|
|
46
47
|
export declare function getSSRPhaseSuccess(): {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/react-ufo",
|
|
3
|
-
"version": "4.15.
|
|
3
|
+
"version": "4.15.3",
|
|
4
4
|
"description": "Parts of React UFO that are publicly available",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -110,6 +110,9 @@
|
|
|
110
110
|
"platform_ufo_disable_vcnext_observations": {
|
|
111
111
|
"type": "boolean"
|
|
112
112
|
},
|
|
113
|
+
"platform_ufo_default_ssr_edge_timings": {
|
|
114
|
+
"type": "boolean"
|
|
115
|
+
},
|
|
113
116
|
"platform_ufo_remove_ssr_placeholder_in_ttvc_v4": {
|
|
114
117
|
"type": "boolean"
|
|
115
118
|
},
|