@atlaskit/react-ufo 3.4.1 → 3.4.3

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

@@ -1,15 +1,15 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 var _excluded = ["labelStack", "time"],
   _excluded2 = ["stopTime", "labelStack"],
   _excluded3 = ["labelStack"],
   _excluded4 = ["labelStack"];
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 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; }
 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; }
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import Bowser from 'bowser-ultralight';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getLighthouseMetrics } from '../additional-payload';
@@ -147,21 +147,80 @@ var getSSRSuccess = function getSSRSuccess(type) {
 var getSSRFeatureFlags = function getSSRFeatureFlags(type) {
   return type === 'page_load' ? ssr.getSSRFeatureFlags() : undefined;
 };
-var getPaintMetrics = function getPaintMetrics(type) {
-  if (type !== 'page_load') {
-    return {};
-  }
-  var metrics = {};
-  performance.getEntriesByType('paint').forEach(function (entry) {
-    if (entry.name === 'first-paint') {
-      metrics['metric:fp'] = Math.round(entry.startTime);
-    }
-    if (entry.name === 'first-contentful-paint') {
-      metrics['metric:fcp'] = Math.round(entry.startTime);
-    }
+var getLCP = function getLCP(end) {
+  return new Promise(function (resolve) {
+    var observer;
+    var timeout = setTimeout(function () {
+      var _observer;
+      (_observer = observer) === null || _observer === void 0 || _observer.disconnect();
+      resolve(null);
+    }, 200);
+    observer = new PerformanceObserver(function (list) {
+      var entries = Array.from(list.getEntries());
+      var lastEntry = entries.reduce(function (agg, entry) {
+        // Use the latest LCP candidate before TTAI
+        if (entry.startTime <= end && (agg === null || agg.startTime < entry.startTime)) {
+          return entry;
+        }
+        return agg;
+      }, null);
+      clearTimeout(timeout);
+      if (!lastEntry || lastEntry === null) {
+        resolve(null);
+      } else {
+        resolve(lastEntry.startTime);
+      }
+    });
+    observer.observe({
+      type: 'largest-contentful-paint',
+      buffered: true
+    });
   });
-  return metrics;
 };
+var getPaintMetrics = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(type, end) {
+    var metrics, lcp;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!(type !== 'page_load')) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return", {});
+        case 2:
+          metrics = {};
+          performance.getEntriesByType('paint').forEach(function (entry) {
+            if (entry.name === 'first-paint') {
+              metrics['metric:fp'] = Math.round(entry.startTime);
+            }
+            if (entry.name === 'first-contentful-paint') {
+              metrics['metric:fcp'] = Math.round(entry.startTime);
+            }
+          });
+          if (!fg('ufo_lcp')) {
+            _context.next = 9;
+            break;
+          }
+          _context.next = 7;
+          return getLCP(end);
+        case 7:
+          lcp = _context.sent;
+          if (lcp) {
+            metrics['metric:lcp'] = Math.round(lcp);
+          }
+        case 9:
+          return _context.abrupt("return", metrics);
+        case 10:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function getPaintMetrics(_x, _x2) {
+    return _ref2.apply(this, arguments);
+  };
+}();
 var getTTAI = function getTTAI(interaction) {
   var start = interaction.start,
     end = interaction.end;
@@ -318,10 +377,10 @@ var getTracingContextData = function getTracingContextData(interaction) {
 function optimizeCustomData(interaction) {
   var customData = interaction.customData,
     legacyMetrics = interaction.legacyMetrics;
-  var customDataMap = customData.reduce(function (result, _ref2) {
+  var customDataMap = customData.reduce(function (result, _ref3) {
     var _result$get$data, _result$get;
-    var labelStack = _ref2.labelStack,
-      data = _ref2.data;
+    var labelStack = _ref3.labelStack,
+      data = _ref3.data;
     var label = stringifyLabelStackFully(labelStack);
     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 : {};
     result.set(label, {
@@ -353,12 +412,12 @@ function optimizeCustomData(interaction) {
   return _toConsumableArray(customDataMap.values());
 }
 function optimizeReactProfilerTimings(reactProfilerTimings, interactionStart, reactUFOVersion) {
-  var reactProfilerTimingsMap = reactProfilerTimings.reduce(function (result, _ref3) {
-    var labelStack = _ref3.labelStack,
-      startTime = _ref3.startTime,
-      commitTime = _ref3.commitTime,
-      actualDuration = _ref3.actualDuration,
-      type = _ref3.type;
+  var reactProfilerTimingsMap = reactProfilerTimings.reduce(function (result, _ref4) {
+    var labelStack = _ref4.labelStack,
+      startTime = _ref4.startTime,
+      commitTime = _ref4.commitTime,
+      actualDuration = _ref4.actualDuration,
+      type = _ref4.type;
     if (labelStack && startTime >= interactionStart) {
       var label = stringifyLabelStackFully(labelStack);
       var start = Math.round(startTime);
@@ -504,10 +563,10 @@ function optimizeCustomTimings(customTimings, interactionStart) {
   }, []);
 }
 function optimizeMarks(marks, reactUFOVersion) {
-  return marks.map(function (_ref4) {
-    var labelStack = _ref4.labelStack,
-      time = _ref4.time,
-      others = _objectWithoutProperties(_ref4, _excluded);
+  return marks.map(function (_ref5) {
+    var labelStack = _ref5.labelStack,
+      time = _ref5.time,
+      others = _objectWithoutProperties(_ref5, _excluded);
     return _objectSpread(_objectSpread({}, others), {}, {
       labelStack: labelStack && optimizeLabelStack(labelStack, reactUFOVersion),
       time: Math.round(time)
@@ -515,10 +574,10 @@ function optimizeMarks(marks, reactUFOVersion) {
   });
 }
 function optimizeApdex(apdex, reactUFOVersion) {
-  return apdex.map(function (_ref5) {
-    var stopTime = _ref5.stopTime,
-      labelStack = _ref5.labelStack,
-      others = _objectWithoutProperties(_ref5, _excluded2);
+  return apdex.map(function (_ref6) {
+    var stopTime = _ref6.stopTime,
+      labelStack = _ref6.labelStack,
+      others = _objectWithoutProperties(_ref6, _excluded2);
     return _objectSpread(_objectSpread({}, others), {}, {
       stopTime: Math.round(stopTime)
     }, labelStack ? {
@@ -632,20 +691,20 @@ function getErrorCounts(interaction) {
     'ufo:errors:count': interaction.errors.length
   };
 }
-function createInteractionMetricsPayload(_x, _x2, _x3) {
+function createInteractionMetricsPayload(_x3, _x4, _x5) {
   return _createInteractionMetricsPayload.apply(this, arguments);
 }
 function _createInteractionMetricsPayload() {
-  _createInteractionMetricsPayload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(interaction, interactionId, experimental) {
+  _createInteractionMetricsPayload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(interaction, interactionId, experimental) {
     var _window$location, _config$additionalPay;
-    var interactionPayloadStart, config, end, start, ufoName, knownSegments, rate, type, abortReason, routeName, featureFlags, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, pageVisibilityAtTTI, pageVisibilityAtTTAI, segments, segmentTree, isDetailedPayload, isPageLoad, calculatePageVisibilityFromTheStartOfPageLoad, moreAccuratePageVisibilityAtTTI, moreAccuratePageVisibilityAtTTAI, labelStack, getInitialPageLoadSSRMetrics, pageLoadInteractionMetrics, getDetailedInteractionMetrics, getPageLoadDetailedInteractionMetrics, newUFOName, resourceTimings, _yield$Promise$all, _yield$Promise$all2, vcMetrics, experimentalMetrics, payload;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
+    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;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
         case 0:
           interactionPayloadStart = performance.now();
           config = getConfig();
           if (config) {
-            _context.next = 4;
+            _context2.next = 4;
             break;
           }
           throw Error('UFO Configuration not provided');
@@ -688,9 +747,9 @@ function _createInteractionMetricsPayload() {
             var spans = [].concat(_toConsumableArray(interaction.spans), _toConsumableArray(atlaskitInteractionSpans));
             atlaskitInteractionSpans.length = 0;
             return {
-              errors: interaction.errors.map(function (_ref6) {
-                var labelStack = _ref6.labelStack,
-                  others = _objectWithoutProperties(_ref6, _excluded3);
+              errors: interaction.errors.map(function (_ref7) {
+                var labelStack = _ref7.labelStack,
+                  others = _objectWithoutProperties(_ref7, _excluded3);
                 return _objectSpread(_objectSpread({}, others), {}, {
                   labelStack: labelStack && optimizeLabelStack(labelStack, getReactUFOVersion(interaction.type))
                 });
@@ -723,13 +782,14 @@ function _createInteractionMetricsPayload() {
           }
           newUFOName = sanitizeUfoName(ufoName);
           resourceTimings = getResourceTimings(start, end);
-          _context.next = 24;
-          return Promise.all([getVCMetrics(interaction), experimental ? getExperimentalVCMetrics(interaction) : Promise.resolve(undefined)]);
+          _context2.next = 24;
+          return Promise.all([getVCMetrics(interaction), experimental ? getExperimentalVCMetrics(interaction) : Promise.resolve(undefined), getPaintMetrics(type, end)]);
         case 24:
-          _yield$Promise$all = _context.sent;
-          _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 2);
+          _yield$Promise$all = _context2.sent;
+          _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 3);
           vcMetrics = _yield$Promise$all2[0];
           experimentalMetrics = _yield$Promise$all2[1];
+          paintMetrics = _yield$Promise$all2[2];
           payload = {
             actionSubject: 'experience',
             action: 'measured',
@@ -750,7 +810,7 @@ function _createInteractionMetricsPayload() {
                 'event:region': config.region || 'unknown',
                 'experience:key': experimental ? 'custom.experimental-interaction-metrics' : 'custom.interaction-metrics',
                 'experience:name': newUFOName
-              }, getBrowserMetadata()), getSSRProperties(type)), getAssetsMetrics(interaction, pageLoadInteractionMetrics === null || pageLoadInteractionMetrics === void 0 ? void 0 : pageLoadInteractionMetrics.SSRDoneTime)), getPPSMetrics(interaction)), getPaintMetrics(type)), getNavigationMetrics(type)), vcMetrics), experimentalMetrics), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), getStylesheetMetrics()), getErrorCounts(interaction)), {}, {
+              }, 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)), {}, {
                 interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
                   namePrefix: config.namePrefix || '',
                   segmentPrefix: config.segmentPrefix || '',
@@ -772,9 +832,9 @@ function _createInteractionMetricsPayload() {
                   apdex: optimizeApdex(interaction.apdex, getReactUFOVersion(interaction.type)),
                   end: Math.round(end),
                   start: Math.round(start),
-                  segments: getReactUFOVersion(interaction.type) === '2.0.0' ? segmentTree : segments.map(function (_ref7) {
-                    var labelStack = _ref7.labelStack,
-                      others = _objectWithoutProperties(_ref7, _excluded4);
+                  segments: getReactUFOVersion(interaction.type) === '2.0.0' ? segmentTree : segments.map(function (_ref8) {
+                    var labelStack = _ref8.labelStack,
+                      others = _objectWithoutProperties(_ref8, _excluded4);
                     return _objectSpread(_objectSpread({}, others), {}, {
                       labelStack: optimizeLabelStack(labelStack, getReactUFOVersion(interaction.type))
                     });
@@ -795,53 +855,53 @@ function _createInteractionMetricsPayload() {
             expTTAI = undefined;
           }
           payload.attributes.properties['event:sizeInKb'] = getPayloadSize(payload.attributes.properties);
-          return _context.abrupt("return", payload);
-        case 32:
+          return _context2.abrupt("return", payload);
+        case 33:
         case "end":
-          return _context.stop();
+          return _context2.stop();
       }
-    }, _callee);
+    }, _callee2);
   }));
   return _createInteractionMetricsPayload.apply(this, arguments);
 }
-export function createPayloads(_x4, _x5) {
+export function createPayloads(_x6, _x7) {
   return _createPayloads.apply(this, arguments);
 }
 function _createPayloads() {
-  _createPayloads = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(interactionId, interaction) {
+  _createPayloads = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(interactionId, interaction) {
     var ufoNameOverride, modifiedInteraction, interactionMetricsPayload;
-    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
         case 0:
           ufoNameOverride = getUfoNameOverride(interaction);
           modifiedInteraction = _objectSpread(_objectSpread({}, interaction), {}, {
             ufoName: ufoNameOverride
           });
-          _context2.next = 4;
+          _context3.next = 4;
           return createInteractionMetricsPayload(modifiedInteraction, interactionId);
         case 4:
-          interactionMetricsPayload = _context2.sent;
-          return _context2.abrupt("return", [interactionMetricsPayload]);
+          interactionMetricsPayload = _context3.sent;
+          return _context3.abrupt("return", [interactionMetricsPayload]);
         case 6:
         case "end":
-          return _context2.stop();
+          return _context3.stop();
       }
-    }, _callee2);
+    }, _callee3);
   }));
   return _createPayloads.apply(this, arguments);
 }
-export function createExperimentalMetricsPayload(_x6, _x7) {
+export function createExperimentalMetricsPayload(_x8, _x9) {
   return _createExperimentalMetricsPayload.apply(this, arguments);
 }
 function _createExperimentalMetricsPayload() {
-  _createExperimentalMetricsPayload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(interactionId, interaction) {
+  _createExperimentalMetricsPayload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(interactionId, interaction) {
     var config, ufoName, rate, pageVisibilityState, result;
-    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
         case 0:
           config = getConfig();
           if (config) {
-            _context3.next = 3;
+            _context4.next = 3;
             break;
           }
           throw Error('UFO Configuration not provided');
@@ -849,28 +909,28 @@ function _createExperimentalMetricsPayload() {
           ufoName = sanitizeUfoName(interaction.ufoName);
           rate = getExperimentalInteractionRate(ufoName, interaction.type);
           if (coinflip(rate)) {
-            _context3.next = 7;
+            _context4.next = 7;
             break;
           }
-          return _context3.abrupt("return", null);
+          return _context4.abrupt("return", null);
         case 7:
           pageVisibilityState = getPageVisibilityState(interaction.start, interaction.end);
           if (!(pageVisibilityState !== 'visible')) {
-            _context3.next = 10;
+            _context4.next = 10;
             break;
           }
-          return _context3.abrupt("return", null);
+          return _context4.abrupt("return", null);
         case 10:
-          _context3.next = 12;
+          _context4.next = 12;
           return createInteractionMetricsPayload(interaction, interactionId, true);
         case 12:
-          result = _context3.sent;
-          return _context3.abrupt("return", result);
+          result = _context4.sent;
+          return _context4.abrupt("return", result);
         case 14:
         case "end":
-          return _context3.stop();
+          return _context4.stop();
       }
-    }, _callee3);
+    }, _callee4);
   }));
   return _createExperimentalMetricsPayload.apply(this, arguments);
 }

package/dist/esm/segment/segment.js

@@ -23,16 +23,40 @@ var AsyncSegmentHighlight = /*#__PURE__*/lazy(function () {
     };
   });
 });
+var noopIdMap = new Map();
 
 /** A portion of the page we apply measurement to */
 export default function UFOSegment(_ref) {
   var _getConfig2;
   var segmentName = _ref.name,
-    children = _ref.children;
+    children = _ref.children,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'single' : _ref$mode;
   var parentContext = useContext(UFOInteractionContext);
+  var segmentIdMap = useMemo(function () {
+    if (!fg('platform_ufo_segment_list_mode')) {
+      // just in case we cause rerender issues, use noop map
+      return noopIdMap;
+    }
+    if (!(parentContext !== null && parentContext !== void 0 && parentContext.segmentIdMap)) {
+      return new Map();
+    }
+    return parentContext.segmentIdMap;
+  }, [parentContext]);
   var segmentId = useMemo(function () {
-    return generateId();
-  }, []);
+    if (!fg('platform_ufo_segment_list_mode')) {
+      return generateId();
+    }
+    if (mode === 'single') {
+      return generateId();
+    }
+    if (segmentIdMap.has(segmentName)) {
+      return segmentIdMap.get(segmentName);
+    }
+    var newSegmentId = generateId();
+    segmentIdMap.set(segmentName, newSegmentId);
+    return newSegmentId;
+  }, [mode, segmentName, segmentIdMap]);
   var labelStack = useMemo(function () {
     return parentContext !== null && parentContext !== void 0 && parentContext.labelStack ? [].concat(_toConsumableArray(parentContext.labelStack), [{
       name: segmentName,
@@ -120,6 +144,7 @@ export default function UFOSegment(_ref) {
     }
     return {
       labelStack: labelStack,
+      segmentIdMap: segmentIdMap,
       hold: function hold() {
         var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'unknown';
         return this._internalHold(this.labelStack, name);
@@ -220,7 +245,7 @@ export default function UFOSegment(_ref) {
       _internalHoldByID: _internalHoldByID,
       complete: complete
     };
-  }, [parentContext, labelStack, interactionId]);
+  }, [parentContext, labelStack, segmentIdMap, interactionId]);
   var hasMounted = useRef(false);
   var onRender = useCallback(function (_id, phase, actualDuration, baseDuration, startTime, commitTime) {
     var _getConfig;

package/dist/esm/vc/index.js

@@ -8,6 +8,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getConfig } from '../config';
+import { VCObserverNOOP } from './no-op-vc-observer';
 import { VCObserver } from './vc-observer';
 import VCObserverNew from './vc-observer-new';
 var VCObserverWrapper = /*#__PURE__*/function () {
@@ -15,7 +16,6 @@ var VCObserverWrapper = /*#__PURE__*/function () {
     var _getConfig;
     var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     _classCallCheck(this, VCObserverWrapper);
-    this.oldVCObserver = new VCObserver(opts);
     this.newVCObserver = null;
     var isNewVCObserverEnabled = fg('platform_ufo_vc_observer_new') || ((_getConfig = getConfig()) === null || _getConfig === void 0 || (_getConfig = _getConfig.vc) === null || _getConfig === void 0 ? void 0 : _getConfig.enableVCObserverNew);
     if (isNewVCObserverEnabled) {
@@ -23,6 +23,7 @@ var VCObserverWrapper = /*#__PURE__*/function () {
         selectorConfig: opts.selectorConfig
       });
     }
+    this.oldVCObserver = new VCObserver(opts);
   }
   return _createClass(VCObserverWrapper, [{
     key: "start",
@@ -106,10 +107,29 @@ var VCObserverWrapper = /*#__PURE__*/function () {
     }
   }]);
 }();
+var isReactSSR = Boolean(process.env.REACT_SSR);
+var isServer = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.__SERVER__);
+function isEnvironmentSupported() {
+  // SSR environment aren't supported
+  if (isReactSSR || isServer) {
+    return false;
+  }
+
+  // Legacy browsers that doesn't support WeakRef
+  // aren't valid
+  if (typeof (globalThis === null || globalThis === void 0 ? void 0 : globalThis.WeakRef) !== 'function') {
+    return false;
+  }
+  if (typeof (globalThis === null || globalThis === void 0 ? void 0 : globalThis.MutationObserver) !== 'function' || typeof (globalThis === null || globalThis === void 0 ? void 0 : globalThis.IntersectionObserver) !== 'function' || typeof (globalThis === null || globalThis === void 0 ? void 0 : globalThis.PerformanceObserver) !== 'function') {
+    return false;
+  }
+  return true;
+}
 export var getVCObserver = function getVCObserver() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   if (!globalThis.__vcObserver) {
-    globalThis.__vcObserver = new VCObserverWrapper(opts);
+    var shouldMockVCObserver = !isEnvironmentSupported();
+    globalThis.__vcObserver = shouldMockVCObserver ? new VCObserverNOOP() : new VCObserverWrapper(opts);
   }
   return globalThis.__vcObserver;
 };

package/dist/esm/vc/no-op-vc-observer.js

@@ -0,0 +1,37 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+// This class should be used on scenarios where VC can not be calculate
+// such as: SSR environment and legacy browsers
+export var VCObserverNOOP = /*#__PURE__*/function () {
+  function VCObserverNOOP() {
+    _classCallCheck(this, VCObserverNOOP);
+  }
+  return _createClass(VCObserverNOOP, [{
+    key: "start",
+    value: function start(startArg) {}
+  }, {
+    key: "stop",
+    value: function stop() {}
+  }, {
+    key: "getVCRawData",
+    value: function getVCRawData() {
+      return null;
+    }
+  }, {
+    key: "getVCResult",
+    value: function getVCResult(param) {
+      return Promise.resolve({
+        'ufo:vc:noop': true
+      });
+    }
+  }, {
+    key: "setSSRElement",
+    value: function setSSRElement(element) {}
+  }, {
+    key: "setReactRootRenderStart",
+    value: function setReactRootRenderStart(startTime) {}
+  }, {
+    key: "setReactRootRenderStop",
+    value: function setReactRootRenderStop(stopTime) {}
+  }]);
+}();