@atlaskit/react-ufo 4.1.10 → 4.1.11

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 4.1.11
+
+### Patch Changes
+
+- [`690db8120453b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/690db8120453b) -
+  Grouped reactUFO spans for chrome devtools
+
 ## 4.1.10
 
 ### Patch Changes

package/dist/cjs/interaction-metrics/index.js

@@ -235,10 +235,23 @@ function addCustomTiming(interactionId, labelStack, data) {
           endTime = timingData.endTime;
         try {
           // for Firefox 102 and older
-          performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack, key), " [custom_timing]"), {
-            start: startTime,
-            end: endTime
-          });
+          if ((0, _platformFeatureFlags.fg)('ufo_chrome_devtools_uplift')) {
+            performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack, key), " [custom_timing]"), {
+              start: startTime,
+              end: endTime,
+              detail: {
+                devtools: {
+                  track: '🛸 reactUFO detailed timings',
+                  color: 'tertiary-light'
+                }
+              }
+            });
+          } else {
+            performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack, key), " [custom_timing]"), {
+              start: startTime,
+              end: endTime
+            });
+          }
         } catch (e) {
           // do nothing
         }
@@ -295,10 +308,23 @@ function addSpan(interactionId, type, name, labelStack, start) {
     if (isPerformanceTracingEnabled()) {
       try {
         // for Firefox 102 and older
-        performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack, name), " [").concat(type, "]"), {
-          start: start,
-          end: end
-        });
+        if ((0, _platformFeatureFlags.fg)('ufo_chrome_devtools_uplift')) {
+          performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack, name), " [").concat(type, "]"), {
+            start: start,
+            end: end,
+            detail: {
+              devtools: {
+                track: '🛸 reactUFO detailed timings',
+                color: 'secondary'
+              }
+            }
+          });
+        } else {
+          performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack, name), " [").concat(type, "]"), {
+            start: start,
+            end: end
+          });
+        }
       } catch (e) {
         // do nothing
       }
@@ -321,10 +347,23 @@ function addSpanToAll(type, name, labelStack, start) {
   if (isPerformanceTracingEnabled()) {
     try {
       // for Firefox 102 and older
-      performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack, name), " [").concat(type, "]"), {
-        start: start,
-        end: end
-      });
+      if ((0, _platformFeatureFlags.fg)('ufo_chrome_devtools_uplift')) {
+        performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack, name), " [").concat(type, "]"), {
+          start: start,
+          end: end,
+          detail: {
+            devtools: {
+              track: '🛸 reactUFO detailed timings',
+              color: 'secondary'
+            }
+          }
+        });
+      } else {
+        performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack, name), " [").concat(type, "]"), {
+          start: start,
+          end: end
+        });
+      }
     } catch (e) {
       // do nothing
     }
@@ -385,10 +424,23 @@ function addHold(interactionId, labelStack, name, experimental) {
       if (isPerformanceTracingEnabled()) {
         try {
           // for Firefox 102 and older
-          performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack, name), " [hold]"), {
-            start: start,
-            end: end
-          });
+          if ((0, _platformFeatureFlags.fg)('ufo_chrome_devtools_uplift')) {
+            performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack, name), " [hold]"), {
+              start: start,
+              end: end,
+              detail: {
+                devtools: {
+                  track: '🛸 reactUFO detailed timings',
+                  color: 'secondary-light'
+                }
+              }
+            });
+          } else {
+            performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack, name), " [hold]"), {
+              start: start,
+              end: end
+            });
+          }
         } catch (e) {
           // do nothing
         }
@@ -515,10 +567,23 @@ function addProfilerTimings(interactionId, labelStack, type, actualDuration, bas
   if (isPerformanceTracingEnabled()) {
     try {
       // for Firefox 102 and older
-      performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack), " [react-profiler] ").concat(type), {
-        start: startTime,
-        duration: actualDuration
-      });
+      if ((0, _platformFeatureFlags.fg)('ufo_chrome_devtools_uplift')) {
+        performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack), " [react-profiler] ").concat(type), {
+          start: startTime,
+          duration: actualDuration,
+          detail: {
+            devtools: {
+              track: '🛸 reactUFO detailed timings',
+              color: 'secondary-dark'
+            }
+          }
+        });
+      } else {
+        performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack), " [react-profiler] ").concat(type), {
+          start: startTime,
+          duration: actualDuration
+        });
+      }
     } catch (e) {
       // do nothing
     }
@@ -555,10 +620,24 @@ function finishInteraction(id, data) {
   data.end = endTime;
   try {
     // for Firefox 102 and older
-    performance.measure("\uD83D\uDEF8 [".concat(data.type, "] ").concat(data.ufoName, " [ttai]"), {
-      start: data.start,
-      end: data.end
-    });
+    if ((0, _platformFeatureFlags.fg)('ufo_chrome_devtools_uplift')) {
+      performance.measure("\uD83D\uDEF8 [".concat(data.type, "] ").concat(data.ufoName, " [ttai]"), {
+        start: data.start,
+        end: data.end,
+        detail: {
+          devtools: {
+            track: 'main metrics',
+            trackGroup: '🛸 reactUFO metrics',
+            color: 'tertiary'
+          }
+        }
+      });
+    } else {
+      performance.measure("\uD83D\uDEF8 [".concat(data.type, "] ").concat(data.ufoName, " [ttai]"), {
+        start: data.start,
+        end: data.end
+      });
+    }
   } catch (e) {
     // do nothing
   }
@@ -607,10 +686,23 @@ function finishInteraction(id, data) {
             labelStack = _step3$value$.labelStack,
             start = _step3$value$.start,
             end = _step3$value$.end;
-          performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack), " [segment_ttai]"), {
-            start: start,
-            end: end
-          });
+          if ((0, _platformFeatureFlags.fg)('ufo_chrome_devtools_uplift')) {
+            performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack), " [segment_ttai]"), {
+              start: start,
+              end: end,
+              detail: {
+                devtools: {
+                  track: '🛸 reactUFO detailed timings',
+                  color: 'secondary-dark'
+                }
+              }
+            });
+          } else {
+            performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack), " [segment_ttai]"), {
+              start: start,
+              end: end
+            });
+          }
         }
       } catch (err) {
         _iterator3.e(err);
@@ -940,12 +1032,27 @@ function addApdexToAll(apdex) {
   _constants.interactions.forEach(function (interaction, key) {
     interaction.apdex.push(apdex);
     try {
-      var _apdex$startTime;
       // for Firefox 102 and older
-      performance.measure("\uD83D\uDEF8 ".concat(apdex.key, " [bm3_tti]"), {
-        start: (_apdex$startTime = apdex.startTime) !== null && _apdex$startTime !== void 0 ? _apdex$startTime : interaction.start,
-        end: apdex.stopTime
-      });
+      if ((0, _platformFeatureFlags.fg)('ufo_chrome_devtools_uplift')) {
+        var _apdex$startTime;
+        performance.measure("\uD83D\uDEF8 ".concat(apdex.key, " [bm3_tti]"), {
+          start: (_apdex$startTime = apdex.startTime) !== null && _apdex$startTime !== void 0 ? _apdex$startTime : interaction.start,
+          end: apdex.stopTime,
+          detail: {
+            devtools: {
+              track: 'main metrics',
+              trackGroup: '🛸 reactUFO metrics',
+              color: 'primary-dark'
+            }
+          }
+        });
+      } else {
+        var _apdex$startTime2;
+        performance.measure("\uD83D\uDEF8 ".concat(apdex.key, " [bm3_tti]"), {
+          start: (_apdex$startTime2 = apdex.startTime) !== null && _apdex$startTime2 !== void 0 ? _apdex$startTime2 : interaction.start,
+          end: apdex.stopTime
+        });
+      }
     } catch (e) {
       // do nothing
     }
@@ -959,12 +1066,27 @@ function addApdex(interactionId, apdexInfo) {
   if (interaction != null) {
     interaction.apdex.push(apdexInfo);
     try {
-      var _apdexInfo$startTime;
       // for Firefox 102 and older
-      performance.measure("\uD83D\uDEF8 ".concat(apdexInfo.key, " [bm3_tti]"), {
-        start: (_apdexInfo$startTime = apdexInfo.startTime) !== null && _apdexInfo$startTime !== void 0 ? _apdexInfo$startTime : interaction.start,
-        end: apdexInfo.stopTime
-      });
+      if ((0, _platformFeatureFlags.fg)('ufo_chrome_devtools_uplift')) {
+        var _apdexInfo$startTime;
+        performance.measure("\uD83D\uDEF8 ".concat(apdexInfo.key, " [bm3_tti]"), {
+          start: (_apdexInfo$startTime = apdexInfo.startTime) !== null && _apdexInfo$startTime !== void 0 ? _apdexInfo$startTime : interaction.start,
+          end: apdexInfo.stopTime,
+          detail: {
+            devtools: {
+              track: 'main metrics',
+              trackGroup: '🛸 reactUFO metrics',
+              color: 'primary-dark'
+            }
+          }
+        });
+      } else {
+        var _apdexInfo$startTime2;
+        performance.measure("\uD83D\uDEF8 ".concat(apdexInfo.key, " [bm3_tti]"), {
+          start: (_apdexInfo$startTime2 = apdexInfo.startTime) !== null && _apdexInfo$startTime2 !== void 0 ? _apdexInfo$startTime2 : interaction.start,
+          end: apdexInfo.stopTime
+        });
+      }
     } catch (e) {
       // do nothing
     }
@@ -1027,12 +1149,26 @@ function addRedirect(interactionId, fromUfoName, nextUfoName, nextRouteName, tim
     if (isPerformanceTracingEnabled()) {
       var prevRedirect = interaction.redirects.at(-2);
       try {
-        var _prevRedirect$time;
         // for Firefox 102 and older
-        performance.measure("\uD83D\uDEF8 ".concat(nextUfoName, " [redirect]"), {
-          start: (_prevRedirect$time = prevRedirect === null || prevRedirect === void 0 ? void 0 : prevRedirect.time) !== null && _prevRedirect$time !== void 0 ? _prevRedirect$time : interaction.start,
-          end: time
-        });
+        if ((0, _platformFeatureFlags.fg)('ufo_chrome_devtools_uplift')) {
+          var _prevRedirect$time;
+          performance.measure("\uD83D\uDEF8 ".concat(nextUfoName, " [redirect]"), {
+            start: (_prevRedirect$time = prevRedirect === null || prevRedirect === void 0 ? void 0 : prevRedirect.time) !== null && _prevRedirect$time !== void 0 ? _prevRedirect$time : interaction.start,
+            end: time,
+            detail: {
+              devtools: {
+                track: '🛸 reactUFO detailed timings',
+                color: 'tertiary'
+              }
+            }
+          });
+        } else {
+          var _prevRedirect$time2;
+          performance.measure("\uD83D\uDEF8 ".concat(nextUfoName, " [redirect]"), {
+            start: (_prevRedirect$time2 = prevRedirect === null || prevRedirect === void 0 ? void 0 : prevRedirect.time) !== null && _prevRedirect$time2 !== void 0 ? _prevRedirect$time2 : interaction.start,
+            end: time
+          });
+        }
       } catch (e) {
         // do nothing
       }

package/dist/cjs/vc/index.js

@@ -14,6 +14,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _config = require("../config");
 var _noOpVcObserver = require("./no-op-vc-observer");
 var _vcObserver = require("./vc-observer");
@@ -168,16 +169,17 @@ var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
               _context.t1 = [];
             case 16:
               v3Result = _context.t1;
+              (0, _platformFeatureFlags.fg)('ufo_chrome_devtools_uplift') && this.addPerformanceMeasures(param.start, [].concat((0, _toConsumableArray2.default)((v1v2Result === null || v1v2Result === void 0 ? void 0 : v1v2Result['ufo:vc:rev']) || []), (0, _toConsumableArray2.default)(v3Result !== null && v3Result !== void 0 ? v3Result : [])));
               if (v3Result) {
-                _context.next = 19;
+                _context.next = 20;
                 break;
               }
               return _context.abrupt("return", v1v2Result !== null && v1v2Result !== void 0 ? v1v2Result : {});
-            case 19:
+            case 20:
               return _context.abrupt("return", _objectSpread(_objectSpread({}, v1v2Result), {}, {
                 'ufo:vc:rev': [].concat((0, _toConsumableArray2.default)((_ref2 = v1v2Result === null || v1v2Result === void 0 ? void 0 : v1v2Result['ufo:vc:rev']) !== null && _ref2 !== void 0 ? _ref2 : []), (0, _toConsumableArray2.default)(v3Result !== null && v3Result !== void 0 ? v3Result : []))
               }));
-            case 20:
+            case 21:
             case "end":
               return _context.stop();
           }
@@ -214,6 +216,48 @@ var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
     value: function collectSSRPlaceholders() {
       this.ssrPlaceholderHandler.collectExistingPlaceholders();
     }
+  }, {
+    key: "addPerformanceMeasures",
+    value: function addPerformanceMeasures(start, measures) {
+      try {
+        measures.forEach(function (entry) {
+          var _entry$vcDetails;
+          if (!entry || !entry.vcDetails) {
+            return;
+          }
+          var VCParts = Object.keys(entry.vcDetails);
+          performance.measure("VC90 (".concat(entry.revision, ")"), {
+            start: start,
+            duration: (_entry$vcDetails = entry.vcDetails) === null || _entry$vcDetails === void 0 || (_entry$vcDetails = _entry$vcDetails['90']) === null || _entry$vcDetails === void 0 ? void 0 : _entry$vcDetails.t,
+            detail: {
+              devtools: {
+                track: "main metrics",
+                trackGroup: '🛸 reactUFO metrics',
+                color: 'tertiary'
+              }
+            }
+          });
+          VCParts.forEach(function (key) {
+            var _entry$vcDetails2;
+            var duration = (_entry$vcDetails2 = entry.vcDetails) === null || _entry$vcDetails2 === void 0 ? void 0 : _entry$vcDetails2[key].t;
+            if (typeof duration !== 'number') {
+              return;
+            }
+            performance.measure("VC".concat(key), {
+              start: start,
+              duration: duration,
+              detail: {
+                devtools: {
+                  track: "VC ".concat(entry.revision),
+                  trackGroup: '🛸 reactUFO metrics',
+                  color: key === '90' ? 'tertiary' : 'primary-light'
+                }
+              }
+            });
+          });
+        });
+      } catch (error) {}
+    }
   }]);
 }(); // Some products set this variable to indicate it is running in SSR
 var isServer = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.__SERVER__);

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

@@ -13,6 +13,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _config = require("../../config");
 var _interactionMetrics = require("../../interaction-metrics");
 var _attachAbortListeners = require("./attachAbortListeners");
@@ -184,29 +185,35 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
                     if (isTTVCv1Disabled) {
                       var duration = vcNext.VC[key];
                       if (duration !== null && duration !== undefined) {
-                        performance.measure("VC".concat(key), {
-                          start: start,
-                          duration: duration
-                        });
-                        performance.measure("VC_Next".concat(key), {
-                          start: start,
-                          duration: duration
-                        });
+                        if (!(0, _platformFeatureFlags.fg)('ufo_chrome_devtools_uplift')) {
+                          performance.measure("VC".concat(key), {
+                            start: start,
+                            duration: duration
+                          });
+                          performance.measure("VC_Next".concat(key), {
+                            start: start,
+                            duration: duration
+                          });
+                        }
                       }
                     } else {
                       var ttvcV1duration = VC[key];
                       if (ttvcV1duration !== null && ttvcV1duration !== undefined) {
-                        performance.measure("VC".concat(key), {
-                          start: start,
-                          duration: ttvcV1duration
-                        });
+                        if (!(0, _platformFeatureFlags.fg)('ufo_chrome_devtools_uplift')) {
+                          performance.measure("VC".concat(key), {
+                            start: start,
+                            duration: ttvcV1duration
+                          });
+                        }
                       }
                       var ttvcV2duration = vcNext.VC[key];
                       if (ttvcV2duration !== null && ttvcV2duration !== undefined) {
-                        performance.measure("VC_Next".concat(key), {
-                          start: start,
-                          duration: ttvcV2duration
-                        });
+                        if (!(0, _platformFeatureFlags.fg)('ufo_chrome_devtools_uplift')) {
+                          performance.measure("VC_Next".concat(key), {
+                            start: start,
+                            duration: ttvcV2duration
+                          });
+                        }
                       }
                     }
                   });