@atlaskit/emoji 64.6.0 → 64.7.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/emoji
 
+## 64.7.1
+
+### Patch Changes
+
+- [`6e01776f0b7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6e01776f0b7) - remove placeholder when lazy load emoji
+- [`6e01776f0b7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6e01776f0b7) - fix placeholder issue in lazy loaded emoji by removing it and re-write the anlytics tracking around it
+- [`c3f9e9bce1c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c3f9e9bce1c) - Add custom information to failure and abort events for UFO experiences
+- Updated dependencies
+
+## 64.7.0
+
+### Minor Changes
+
+- [`2b241314079`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2b241314079) - improve lazy load emoji with placeholder and improved analtyics tracking
+
+## 64.6.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 64.6.0
 
 ### Minor Changes

package/dist/cjs/api/EmojiRepository.js

@@ -307,6 +307,10 @@ var EmojiRepository = /*#__PURE__*/function () {
       // frequent category being shown in the picker).
 
       if (this.dynamicCategoryList.indexOf(_constants.frequentCategory) === -1) {
+        if (typeof window === 'undefined') {
+          return;
+        }
+
         window.setTimeout(function () {
           _this2.dynamicCategoryList.push(_constants.frequentCategory);
         });

package/dist/cjs/api/EmojiResource.js

@@ -123,7 +123,11 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
 
         _analytics.ufoExperiences['emoji-resource-fetched'].getInstance(providerType).failure({
           metadata: {
-            reason: reason
+            reason: reason,
+            source: 'EmojiProvider',
+            data: {
+              providerUrl: provider.url
+            }
           }
         });
       });
@@ -212,6 +216,10 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
   }, {
     key: "loadStoredTone",
     value: function loadStoredTone() {
+      if (typeof window === 'undefined') {
+        return undefined;
+      }
+
       var storedToneString = window.localStorage.getItem(_constants.selectedToneStorageKey);
 
       if (storedToneString) {
@@ -525,6 +533,10 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
     value: function setSelectedTone(tone) {
       this.selectedTone = tone;
 
+      if (typeof window === 'undefined') {
+        return;
+      }
+
       if ((0, _storageAvailable.default)('localStorage')) {
         try {
           window.localStorage.setItem(_constants.selectedToneStorageKey, tone ? tone.toString() : '');

package/dist/cjs/api/EmojiUtils.js

@@ -64,6 +64,10 @@ var calculateScale = function calculateScale(getRatio) {
 };
 
 var getPixelRatio = function getPixelRatio() {
+  if (typeof window === 'undefined') {
+    return 0;
+  }
+
   return window.devicePixelRatio;
 };
 

package/dist/cjs/api/internal/UsageFrequencyTracker.js

@@ -150,7 +150,10 @@ var Gateway = /*#__PURE__*/function () {
         }
       };
 
-      window.setTimeout(wrappedFunc);
+      if (typeof window !== 'undefined') {
+        window.setTimeout(wrappedFunc);
+      }
+
       return true;
     }
   }, {

package/dist/cjs/components/common/CachingEmoji.js

@@ -31,6 +31,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _typeHelpers = require("../../util/type-helpers");
 
+var _types = require("../../types");
+
 var _logger = _interopRequireDefault(require("../../util/logger"));
 
 var _Emoji = _interopRequireDefault(require("./Emoji"));
@@ -45,8 +47,10 @@ var _constants = require("../../util/constants");
 
 var _EmojiContext = require("../../context/EmojiContext");
 
+var _ufoExperiences = require("../../util/analytics/ufoExperiences");
+
 var _excluded = ["placeholderSize"],
-    _excluded2 = ["children", "placeholderSize"];
+    _excluded2 = ["children"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -66,8 +70,15 @@ var CachingEmoji = function CachingEmoji(props) {
       emojiProps = (0, _objectWithoutProperties2.default)(props, _excluded); // start emoji rendered experience, it may have already started earlier in ResourcedEmoji
 
   (0, _analytics.useSampledUFOComponentExperience)(_analytics.ufoExperiences['emoji-rendered'].getInstance(emojiProps.emoji.id || emojiProps.emoji.shortName), _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP, {
-    source: 'caching-emoji'
+    source: 'caching-emoji',
+    emoji: emojiProps.emoji.shortName
   });
+  (0, _react.useEffect)(function () {
+    if (!(0, _ufoExperiences.hasUfoMarked)((0, _analytics.sampledUfoRenderedEmoji)(emojiProps.emoji), 'fmp')) {
+      (0, _analytics.sampledUfoRenderedEmoji)(emojiProps.emoji).markFMP();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
 
   var emojiNode = function emojiNode() {
     if ((0, _typeHelpers.isMediaEmoji)(props.emoji)) {
@@ -102,7 +113,12 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleLoadError", function (_emojiId) {
       (0, _analytics.sampledUfoRenderedEmoji)(_emojiId).failure({
         metadata: {
-          reason: 'load error'
+          reason: 'load error',
+          source: 'CachingMediaEmoji',
+          emoji: {
+            id: _emojiId.id,
+            shortName: _emojiId.shortName
+          }
         }
       });
 
@@ -120,11 +136,6 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
   }
 
   (0, _createClass2.default)(CachingMediaEmoji, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      (0, _analytics.sampledUfoRenderedEmoji)(this.props.emoji).markFMP();
-    }
-  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
       var _this$state$cachedEmo;
@@ -153,11 +164,14 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
       }
 
       (0, _logger.default)('Loading image via media cache', emoji.shortName);
+      (0, _analytics.sampledUfoRenderedEmoji)(emoji).mark(_types.UfoEmojiTimings.MEDIA_START);
       emojiProvider.getMediaEmojiDescriptionURLWithInlineToken(emoji).then(function (cachedEmoji) {
         _this2.setState({
           cachedEmoji: cachedEmoji,
           invalidImage: false
         });
+
+        (0, _analytics.sampledUfoRenderedEmoji)(emoji).mark(_types.UfoEmojiTimings.MEDIA_END);
       }).catch(function () {
         _this2.setState({
           cachedEmoji: undefined,
@@ -166,7 +180,15 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
 
         (0, _analytics.sampledUfoRenderedEmoji)(emoji).failure({
           metadata: {
-            reason: 'failed to load media emoji'
+            reason: 'failed to load media emoji',
+            source: 'CachingMediaEmoji',
+            data: {
+              emoji: {
+                id: emoji.id,
+                shortName: emoji.shortName,
+                name: emoji.name
+              }
+            }
           }
         });
       });
@@ -179,7 +201,6 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
           invalidImage = _this$state.invalidImage;
       var _this$props = this.props,
           children = _this$props.children,
-          placeholderSize = _this$props.placeholderSize,
           otherProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded2);
       var emojiComponent;
 
@@ -191,13 +212,13 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
       } else {
         var _this$props2 = this.props,
             emoji = _this$props2.emoji,
-            _placeholderSize = _this$props2.placeholderSize,
+            placeholderSize = _this$props2.placeholderSize,
             showTooltip = _this$props2.showTooltip,
             fitToHeight = _this$props2.fitToHeight;
         var shortName = emoji.shortName,
             representation = emoji.representation;
         emojiComponent = /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder.default, {
-          size: fitToHeight || _placeholderSize,
+          size: fitToHeight || placeholderSize,
           shortName: shortName,
           showTooltip: showTooltip,
           representation: representation

package/dist/cjs/components/common/DeleteButton.js

@@ -25,7 +25,8 @@ var _styles = require("./styles");
 var DeleteButton = function DeleteButton(props) {
   return (0, _core.jsx)("span", {
     css: _styles.deleteButton,
-    className: _styles.emojiDeleteButton
+    className: _styles.emojiDeleteButton,
+    "data-testid": "emoji-delete-button"
   }, (0, _core.jsx)(_customThemeButton.default, {
     iconBefore: (0, _core.jsx)(_crossCircle.default, {
       label: _constants.deleteEmojiLabel,

package/dist/cjs/components/common/Emoji.js

@@ -2,18 +2,22 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Emoji = void 0;
+exports.default = exports.SpriteEmoji = exports.ImageEmoji = exports.Emoji = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _core = require("@emotion/core");
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _EmojiUtils = require("../../api/EmojiUtils");
 
@@ -21,6 +25,8 @@ var _constants = require("../../util/constants");
 
 var _typeHelpers = require("../../util/type-helpers");
 
+var _types = require("../../types");
+
 var _mouse = require("../../util/mouse");
 
 var _DeleteButton = _interopRequireDefault(require("./DeleteButton"));
@@ -29,6 +35,16 @@ var _styles = require("./styles");
 
 var _analytics = require("../../util/analytics");
 
+var _browserSupport = require("../../util/browser-support");
+
+var _useInView3 = require("../../util/useInView");
+
+var _ufoExperiences = require("../../util/analytics/ufoExperiences");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -95,9 +111,10 @@ var handleImageError = function handleImageError(props, event) {
   }
 }; // Pure functional components are used in favour of class based components, due to the performance!
 // When rendering 1500+ emoji using class based components had a significant impact.
+// TODO: add UFO tracking for sprite emoji
 
 
-var renderAsSprite = function renderAsSprite(props) {
+var SpriteEmoji = function SpriteEmoji(props) {
   var emoji = props.emoji,
       fitToHeight = props.fitToHeight,
       selected = props.selected,
@@ -128,11 +145,9 @@ var renderAsSprite = function renderAsSprite(props) {
     backgroundSize: "".concat(sprite.column * 100, "% ").concat(sprite.row * 100, "%")
   }, sizing);
 
-  var emojiNode = (0, _core.jsx)("span", {
-    className: _styles.emojiSprite,
-    style: style
-  }, "\xA0");
   return (0, _core.jsx)("span", {
+    "data-testid": "sprite-emoji-".concat(emoji.shortName),
+    "data-emoji-type": "sprite",
     tabIndex: shouldBeInteractive ? 0 : undefined,
     role: shouldBeInteractive ? 'button' : undefined,
     css: _styles.emojiContainer,
@@ -148,11 +163,16 @@ var renderAsSprite = function renderAsSprite(props) {
     },
     "aria-label": emoji.shortName,
     title: showTooltip ? emoji.shortName : ''
-  }, emojiNode);
+  }, (0, _core.jsx)("span", {
+    className: _styles.emojiSprite,
+    style: style
+  }, "\xA0"));
 }; // Keep as pure functional component, see renderAsSprite.
 
 
-var renderAsImage = function renderAsImage(props) {
+exports.SpriteEmoji = SpriteEmoji;
+
+var ImageEmoji = function ImageEmoji(props) {
   var emoji = props.emoji,
       fitToHeight = props.fitToHeight,
       selected = props.selected,
@@ -161,6 +181,15 @@ var renderAsImage = function renderAsImage(props) {
       showTooltip = props.showTooltip,
       showDelete = props.showDelete,
       shouldBeInteractive = props.shouldBeInteractive;
+
+  var _useInView = (0, _useInView3.useInView)({
+    triggerOnce: true
+  }),
+      _useInView2 = (0, _slicedToArray2.default)(_useInView, 2),
+      ref = _useInView2[0],
+      inView = _useInView2[1];
+
+  var ufoExp = (0, _analytics.sampledUfoRenderedEmoji)(emoji);
   var classes = "".concat(_styles.emojiMainStyle, " ").concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(_styles.emojiImage, " ").concat(className ? className : '');
   var width;
   var height;
@@ -201,17 +230,43 @@ var renderAsImage = function renderAsImage(props) {
     handleImageError(props, event);
   };
 
-  var onLoad = function onLoad() {
-    (0, _analytics.sampledUfoRenderedEmoji)(emoji).success();
-  }; // Pass src attribute as key to force React to rerender img node since browser does not
-  // change preview image until loaded
-  // We currently have the following error: property 'loading' does not exist on type 'DetailedHTMLProps<ImgHTMLAttributes, HTMLImageElement>'
-  // The fix for this was added as a part of @types/react@16.9.20 - https://github.com/facebook/react/issues/16942
-  // TODO: remove @ts-ignore for the <img> below when the @types/react will be bumped from v16.8.0 to v16.9.20 or higher.
+  var markStartLoadFromMountedTime = (0, _react.useCallback)(function () {
+    var mountedMark = ufoExp.metrics.marks.find(function (mark) {
+      return mark.name === _types.UfoEmojiTimings.MOUNTED_END;
+    });
+    ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_START, mountedMark === null || mountedMark === void 0 ? void 0 : mountedMark.time);
+  }, [ufoExp]);
 
+  var onLoad = function onLoad() {
+    // onload could trigger before onBeforeLoad when emojis in viewport at start, so we need to mark onload start manually.
+    if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.ONLOAD_START)) {
+      markStartLoadFromMountedTime();
+    }
+
+    if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.ONLOAD_END)) {
+      ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_END);
+    }
+
+    ufoExp.success({
+      metadata: {
+        IBSupported: _browserSupport.isIntersectionObserverSupported
+      }
+    });
+  };
 
+  var onBeforeLoad = (0, _react.useCallback)(function () {
+    if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.ONLOAD_START)) {
+      ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_START);
+    }
+  }, [ufoExp]); // because of the lack of browser support of on before load natively, used IntersectionObserver helper hook to mimic the before load time mark for UFO.
+
+  (0, _react.useEffect)(function () {
+    if (inView) {
+      onBeforeLoad();
+    }
+  }, [inView, onBeforeLoad]);
   var emojiNode = (0, _core.jsx)("img", (0, _extends2.default)({
-    // @ts-ignore
+    //@ts-ignore
     loading: "lazy",
     src: src,
     key: src,
@@ -227,6 +282,8 @@ var renderAsImage = function renderAsImage(props) {
     onLoad: onLoad
   }, sizing));
   return (0, _core.jsx)("span", {
+    "data-testid": "image-emoji-".concat(emoji.shortName),
+    "data-emoji-type": "image",
     css: _styles.emojiStyles,
     tabIndex: shouldBeInteractive ? 0 : undefined,
     role: shouldBeInteractive ? 'button' : undefined,
@@ -241,18 +298,38 @@ var renderAsImage = function renderAsImage(props) {
       handleMouseMove(props, event);
     },
     "aria-label": emoji.shortName,
-    title: showTooltip ? emoji.shortName : ''
+    title: showTooltip ? emoji.shortName : '',
+    ref: ref
   }, deleteButton, emojiNode);
 };
 
+exports.ImageEmoji = ImageEmoji;
+
 var Emoji = function Emoji(props) {
-  var emoji = props.emoji; // TODO: We always prefer render as image as having accessibility issues with sprite representation
+  var emoji = props.emoji; // start emoji rendered experience, it may have already started earlier in ResourcedEmoji or CachingEmoji
+
+  (0, _analytics.useSampledUFOComponentExperience)(_analytics.ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP, {
+    source: 'emoji',
+    emoji: emoji.shortName
+  });
+  (0, _react.useEffect)(function () {
+    var ufoExp = (0, _analytics.sampledUfoRenderedEmoji)(emoji);
+
+    if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, 'fmp')) {
+      ufoExp.markFMP();
+    }
+
+    if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.MOUNTED_END)) {
+      ufoExp.mark(_types.UfoEmojiTimings.MOUNTED_END);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []); // TODO: We always prefer render as image as having accessibility issues with sprite representation
 
   if ((0, _typeHelpers.isSpriteRepresentation)(emoji.representation)) {
-    return renderAsSprite(props);
+    return (0, _core.jsx)(SpriteEmoji, props);
   }
 
-  return renderAsImage(props);
+  return (0, _core.jsx)(ImageEmoji, props);
 };
 
 exports.Emoji = Emoji;

package/dist/cjs/components/common/EmojiPlaceholder.js

@@ -41,6 +41,7 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
     height: "".concat(height, "px")
   };
   return (0, _core.jsx)("span", {
+    "data-testid": "emoji-placeholder-".concat(shortName),
     "aria-label": shortName,
     className: _styles.placeholder,
     css: _styles.placeholderContainer,

package/dist/cjs/components/common/Popup.js

@@ -67,6 +67,10 @@ var Popup = /*#__PURE__*/function (_PureComponent) {
       if (_this.debounced) {
         clearTimeout(_this.debounced);
         _this.debounced = null;
+      }
+
+      if (typeof window === 'undefined') {
+        return;
       } // Timeout set to 30ms as to not throttle IE11
 
 
@@ -85,7 +89,11 @@ var Popup = /*#__PURE__*/function (_PureComponent) {
       this.popup = document.createElement('div');
       document.body.appendChild(this.popup);
       this.popup.style.position = 'absolute';
-      window.addEventListener('resize', this.handleResize);
+
+      if (typeof window !== 'undefined') {
+        window.addEventListener('resize', this.handleResize);
+      }
+
       this.applyAbsolutePosition();
       this.renderContent();
     }
@@ -98,6 +106,10 @@ var Popup = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      if (typeof window === 'undefined') {
+        return;
+      }
+
       window.removeEventListener('resize', this.handleResize);
 
       if (this.popup) {
@@ -124,6 +136,10 @@ var Popup = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "applyAbovePosition",
     value: function applyAbovePosition() {
+      if (typeof window === 'undefined') {
+        return;
+      }
+
       var targetNode = getTargetNode(this.props.target);
 
       if (targetNode && this.popup) {
@@ -138,6 +154,10 @@ var Popup = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "applyAbsolutePosition",
     value: function applyAbsolutePosition() {
+      if (typeof window === 'undefined') {
+        return;
+      }
+
       if (this.props.relativePosition === 'above') {
         this.applyAbovePosition();
       } else if (this.props.relativePosition === 'below') {

package/dist/cjs/components/common/RecordSelectionDefault.js

@@ -28,7 +28,19 @@ var createRecordSelectionDefault = function createRecordSelectionDefault(provide
         }).catch(function () {
           fireAnalytics && fireAnalytics(_analytics.recordFailed);
 
-          _analytics.ufoExperiences['emoji-selection-recorded'].failure();
+          _analytics.ufoExperiences['emoji-selection-recorded'].failure({
+            metadata: {
+              reason: 'recordSelection error',
+              source: 'RecordSelectionDefault',
+              data: {
+                emoji: {
+                  id: emoji.id,
+                  name: emoji.name,
+                  shortName: emoji.shortName
+                }
+              }
+            }
+          });
         });
       }
     } finally {

package/dist/cjs/components/common/ResourcedEmoji.js

@@ -77,11 +77,12 @@ var ResourcedEmoji = /*#__PURE__*/function (_LoadingEmojiComponen) {
       asyncLoadedComponent: ResourcedEmoji.AsyncLoadedComponent
     });
     (0, _analytics.sampledUfoRenderedEmoji)(props.emojiId).start({
-      samplingRate: _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP_RESOURCEEMOJI
+      samplingRate: _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP
     });
 
     _analytics.ufoExperiences['emoji-rendered'].getInstance(props.emojiId.id || props.emojiId.shortName).addMetadata({
-      source: 'resourced-emoji'
+      source: 'resourced-emoji',
+      emoji: props.emojiId.shortName
     });
 
     return _this;
@@ -90,7 +91,16 @@ var ResourcedEmoji = /*#__PURE__*/function (_LoadingEmojiComponen) {
   (0, _createClass2.default)(ResourcedEmoji, [{
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      (0, _analytics.sampledUfoRenderedEmoji)(this.props.emojiId).abort();
+      (0, _analytics.sampledUfoRenderedEmoji)(this.props.emojiId).abort({
+        metadata: {
+          source: 'ResourcedEmoji',
+          reason: 'unmount',
+          data: {
+            emojiId: this.props.emojiId.id,
+            shortName: this.props.emojiId.shortName
+          }
+        }
+      });
     }
   }, {
     key: "asyncLoadComponent",

package/dist/cjs/components/common/ResourcedEmojiComponent.js

@@ -29,6 +29,8 @@ var _constants = require("../../util/constants");
 
 var _typeHelpers = require("../../util/type-helpers");
 
+var _types = require("../../types");
+
 var _CachingEmoji = _interopRequireDefault(require("./CachingEmoji"));
 
 var _EmojiPlaceholder = _interopRequireDefault(require("./EmojiPlaceholder"));
@@ -37,6 +39,8 @@ var _analytics = require("../../util/analytics");
 
 var _LegacyEmojiContextProvider = _interopRequireDefault(require("../../context/LegacyEmojiContextProvider"));
 
+var _ufoExperiences = require("../../util/analytics/ufoExperiences");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -69,6 +73,7 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
       var _this2 = this;
 
       var foundEmoji = emojiProvider.findByEmojiId(emojiId);
+      (0, _analytics.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_START);
 
       if ((0, _typeHelpers.isPromise)(foundEmoji)) {
         this.setState({
@@ -82,11 +87,20 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
               loaded: true
             });
 
+            (0, _analytics.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_END);
+
             if (!emoji) {
               // emoji is undefined
               (0, _analytics.sampledUfoRenderedEmoji)(emojiId).failure({
                 metadata: {
-                  reason: 'failed to find'
+                  reason: 'failed to find',
+                  source: 'ResourcedEmojiComponent',
+                  data: {
+                    emoji: {
+                      id: emojiId.id,
+                      shortName: emojiId.shortName
+                    }
+                  }
                 }
               });
             }
@@ -94,12 +108,20 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
         }).catch(function () {
           (0, _analytics.sampledUfoRenderedEmoji)(emojiId).failure({
             metadata: {
-              reason: 'failed to load'
+              reason: 'failed to load',
+              source: 'ResourcedEmojiComponent',
+              data: {
+                emoji: {
+                  id: emojiId.id,
+                  shortName: emojiId.shortName
+                }
+              }
             }
           });
         });
       } else {
-        // loaded
+        (0, _analytics.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_END); // loaded
+
         this.setState({
           emoji: foundEmoji,
           loaded: true
@@ -122,6 +144,13 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
     value: function componentWillUnmount() {
       this.ready = false;
     }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (!(0, _ufoExperiences.hasUfoMarked)((0, _analytics.sampledUfoRenderedEmoji)(this.props.emojiId), _types.UfoEmojiTimings.FMP_END)) {
+        (0, _analytics.sampledUfoRenderedEmoji)(this.props.emojiId).markFMP();
+      }
+    }
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {