@atlaskit/emoji 64.6.0 → 64.7.1

package/dist/esm/api/EmojiRepository.js

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

package/dist/esm/api/EmojiResource.js

@@ -96,7 +96,11 @@ export var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
 
         ufoExperiences['emoji-resource-fetched'].getInstance(providerType).failure({
           metadata: {
-            reason: reason
+            reason: reason,
+            source: 'EmojiProvider',
+            data: {
+              providerUrl: provider.url
+            }
           }
         });
       });
@@ -185,6 +189,10 @@ export var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
   }, {
     key: "loadStoredTone",
     value: function loadStoredTone() {
+      if (typeof window === 'undefined') {
+        return undefined;
+      }
+
       var storedToneString = window.localStorage.getItem(selectedToneStorageKey);
 
       if (storedToneString) {
@@ -498,6 +506,10 @@ export var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
     value: function setSelectedTone(tone) {
       this.selectedTone = tone;
 
+      if (typeof window === 'undefined') {
+        return;
+      }
+
       if (storageAvailable('localStorage')) {
         try {
           window.localStorage.setItem(selectedToneStorageKey, tone ? tone.toString() : '');

package/dist/esm/api/EmojiUtils.js

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

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

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

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

@@ -8,15 +8,16 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["placeholderSize"],
-    _excluded2 = ["children", "placeholderSize"];
+    _excluded2 = ["children"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { PureComponent } from 'react';
 import { isMediaEmoji } from '../../util/type-helpers';
+import { UfoEmojiTimings } from '../../types';
 import debug from '../../util/logger';
 import Emoji from './Emoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
@@ -24,6 +25,7 @@ import { UfoErrorBoundary } from './UfoErrorBoundary';
 import { sampledUfoRenderedEmoji, ufoExperiences, useSampledUFOComponentExperience } from '../../util/analytics';
 import { SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
 import { EmojiContext } from '../../context/EmojiContext';
+import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
 
 /**
  * Renders an emoji from a cached image, if required.
@@ -36,8 +38,15 @@ export var CachingEmoji = function CachingEmoji(props) {
 
 
   useSampledUFOComponentExperience(ufoExperiences['emoji-rendered'].getInstance(emojiProps.emoji.id || emojiProps.emoji.shortName), SAMPLING_RATE_EMOJI_RENDERED_EXP, {
-    source: 'caching-emoji'
+    source: 'caching-emoji',
+    emoji: emojiProps.emoji.shortName
   });
+  useEffect(function () {
+    if (!hasUfoMarked(sampledUfoRenderedEmoji(emojiProps.emoji), 'fmp')) {
+      sampledUfoRenderedEmoji(emojiProps.emoji).markFMP();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
 
   var emojiNode = function emojiNode() {
     if (isMediaEmoji(props.emoji)) {
@@ -71,7 +80,12 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "handleLoadError", function (_emojiId) {
       sampledUfoRenderedEmoji(_emojiId).failure({
         metadata: {
-          reason: 'load error'
+          reason: 'load error',
+          source: 'CachingMediaEmoji',
+          emoji: {
+            id: _emojiId.id,
+            shortName: _emojiId.shortName
+          }
         }
       });
 
@@ -90,11 +104,6 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
   }
 
   _createClass(CachingMediaEmoji, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      sampledUfoRenderedEmoji(this.props.emoji).markFMP();
-    }
-  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
       var _this$state$cachedEmo;
@@ -123,11 +132,14 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
       }
 
       debug('Loading image via media cache', emoji.shortName);
+      sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.MEDIA_START);
       emojiProvider.getMediaEmojiDescriptionURLWithInlineToken(emoji).then(function (cachedEmoji) {
         _this2.setState({
           cachedEmoji: cachedEmoji,
           invalidImage: false
         });
+
+        sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.MEDIA_END);
       }).catch(function () {
         _this2.setState({
           cachedEmoji: undefined,
@@ -136,7 +148,15 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
 
         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
+              }
+            }
           }
         });
       });
@@ -150,7 +170,6 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
 
       var _this$props = this.props,
           children = _this$props.children,
-          placeholderSize = _this$props.placeholderSize,
           otherProps = _objectWithoutProperties(_this$props, _excluded2);
 
       var emojiComponent;
@@ -163,13 +182,13 @@ export 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.createElement(EmojiPlaceholder, {
-          size: fitToHeight || _placeholderSize,
+          size: fitToHeight || placeholderSize,
           shortName: shortName,
           showTooltip: showTooltip,
           representation: representation

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

@@ -10,7 +10,8 @@ import { emojiDeleteButton, deleteButton } from './styles';
 var DeleteButton = function DeleteButton(props) {
   return jsx("span", {
     css: deleteButton,
-    className: emojiDeleteButton
+    className: emojiDeleteButton,
+    "data-testid": "emoji-delete-button"
   }, jsx(Button, {
     iconBefore: jsx(CrossCircleIcon, {
       label: deleteEmojiLabel,

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

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 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; }
@@ -7,14 +8,18 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
-import { deleteEmojiLabel } from '../../util/constants';
+import { deleteEmojiLabel, SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
 import { isImageRepresentation, isMediaRepresentation, isSpriteRepresentation, toEmojiId } from '../../util/type-helpers';
+import { UfoEmojiTimings } from '../../types';
 import { leftClick } from '../../util/mouse';
 import DeleteButton from './DeleteButton';
 import { emojiContainer, emojiNodeStyles, commonSelectedStyles, selectOnHoverStyles, emojiSprite, emojiMainStyle, emojiStyles, emojiImage } from './styles';
-import { sampledUfoRenderedEmoji } from '../../util/analytics';
+import { sampledUfoRenderedEmoji, ufoExperiences, useSampledUFOComponentExperience } from '../../util/analytics';
+import { isIntersectionObserverSupported } from '../../util/browser-support';
+import { useInView } from '../../util/useInView';
+import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
 
 var handleMouseDown = function handleMouseDown(props, event) {
   // Clicked emoji delete button
@@ -78,9 +83,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) {
+export var SpriteEmoji = function SpriteEmoji(props) {
   var emoji = props.emoji,
       fitToHeight = props.fitToHeight,
       selected = props.selected,
@@ -111,11 +117,9 @@ var renderAsSprite = function renderAsSprite(props) {
     backgroundSize: "".concat(sprite.column * 100, "% ").concat(sprite.row * 100, "%")
   }, sizing);
 
-  var emojiNode = jsx("span", {
-    className: emojiSprite,
-    style: style
-  }, "\xA0");
   return jsx("span", {
+    "data-testid": "sprite-emoji-".concat(emoji.shortName),
+    "data-emoji-type": "sprite",
     tabIndex: shouldBeInteractive ? 0 : undefined,
     role: shouldBeInteractive ? 'button' : undefined,
     css: emojiContainer,
@@ -131,11 +135,13 @@ var renderAsSprite = function renderAsSprite(props) {
     },
     "aria-label": emoji.shortName,
     title: showTooltip ? emoji.shortName : ''
-  }, emojiNode);
+  }, jsx("span", {
+    className: emojiSprite,
+    style: style
+  }, "\xA0"));
 }; // Keep as pure functional component, see renderAsSprite.
 
-
-var renderAsImage = function renderAsImage(props) {
+export var ImageEmoji = function ImageEmoji(props) {
   var emoji = props.emoji,
       fitToHeight = props.fitToHeight,
       selected = props.selected,
@@ -144,6 +150,15 @@ var renderAsImage = function renderAsImage(props) {
       showTooltip = props.showTooltip,
       showDelete = props.showDelete,
       shouldBeInteractive = props.shouldBeInteractive;
+
+  var _useInView = useInView({
+    triggerOnce: true
+  }),
+      _useInView2 = _slicedToArray(_useInView, 2),
+      ref = _useInView2[0],
+      inView = _useInView2[1];
+
+  var ufoExp = sampledUfoRenderedEmoji(emoji);
   var classes = "".concat(emojiMainStyle, " ").concat(emojiNodeStyles, " ").concat(selected ? commonSelectedStyles : '', " ").concat(selectOnHover ? selectOnHoverStyles : '', " ").concat(emojiImage, " ").concat(className ? className : '');
   var width;
   var height;
@@ -184,17 +199,43 @@ var renderAsImage = function renderAsImage(props) {
     handleImageError(props, event);
   };
 
-  var onLoad = function onLoad() {
-    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 = useCallback(function () {
+    var mountedMark = ufoExp.metrics.marks.find(function (mark) {
+      return mark.name === UfoEmojiTimings.MOUNTED_END;
+    });
+    ufoExp.mark(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 (!hasUfoMarked(ufoExp, UfoEmojiTimings.ONLOAD_START)) {
+      markStartLoadFromMountedTime();
+    }
+
+    if (!hasUfoMarked(ufoExp, UfoEmojiTimings.ONLOAD_END)) {
+      ufoExp.mark(UfoEmojiTimings.ONLOAD_END);
+    }
+
+    ufoExp.success({
+      metadata: {
+        IBSupported: isIntersectionObserverSupported
+      }
+    });
+  };
 
+  var onBeforeLoad = useCallback(function () {
+    if (!hasUfoMarked(ufoExp, UfoEmojiTimings.ONLOAD_START)) {
+      ufoExp.mark(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.
+
+  useEffect(function () {
+    if (inView) {
+      onBeforeLoad();
+    }
+  }, [inView, onBeforeLoad]);
   var emojiNode = jsx("img", _extends({
-    // @ts-ignore
+    //@ts-ignore
     loading: "lazy",
     src: src,
     key: src,
@@ -210,6 +251,8 @@ var renderAsImage = function renderAsImage(props) {
     onLoad: onLoad
   }, sizing));
   return jsx("span", {
+    "data-testid": "image-emoji-".concat(emoji.shortName),
+    "data-emoji-type": "image",
     css: emojiStyles,
     tabIndex: shouldBeInteractive ? 0 : undefined,
     role: shouldBeInteractive ? 'button' : undefined,
@@ -224,17 +267,34 @@ var renderAsImage = function renderAsImage(props) {
       handleMouseMove(props, event);
     },
     "aria-label": emoji.shortName,
-    title: showTooltip ? emoji.shortName : ''
+    title: showTooltip ? emoji.shortName : '',
+    ref: ref
   }, deleteButton, emojiNode);
 };
-
 export 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
+
+  useSampledUFOComponentExperience(ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), SAMPLING_RATE_EMOJI_RENDERED_EXP, {
+    source: 'emoji',
+    emoji: emoji.shortName
+  });
+  useEffect(function () {
+    var ufoExp = sampledUfoRenderedEmoji(emoji);
+
+    if (!hasUfoMarked(ufoExp, 'fmp')) {
+      ufoExp.markFMP();
+    }
+
+    if (!hasUfoMarked(ufoExp, UfoEmojiTimings.MOUNTED_END)) {
+      ufoExp.mark(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 (isSpriteRepresentation(emoji.representation)) {
-    return renderAsSprite(props);
+    return jsx(SpriteEmoji, props);
   }
 
-  return renderAsImage(props);
+  return jsx(ImageEmoji, props);
 };
 export default Emoji;

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

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

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

@@ -48,6 +48,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
 
 
@@ -67,7 +71,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();
     }
@@ -80,6 +88,10 @@ var Popup = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      if (typeof window === 'undefined') {
+        return;
+      }
+
       window.removeEventListener('resize', this.handleResize);
 
       if (this.popup) {
@@ -105,6 +117,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) {
@@ -119,6 +135,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/esm/components/common/RecordSelectionDefault.js

@@ -18,7 +18,19 @@ export var createRecordSelectionDefault = function createRecordSelectionDefault(
           ufoExperiences['emoji-selection-recorded'].success();
         }).catch(function () {
           fireAnalytics && fireAnalytics(recordFailed);
-          ufoExperiences['emoji-selection-recorded'].failure();
+          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/esm/components/common/ResourcedEmoji.js

@@ -14,7 +14,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
-import { defaultEmojiHeight, SAMPLING_RATE_EMOJI_RENDERED_EXP_RESOURCEEMOJI } from '../../util/constants';
+import { defaultEmojiHeight, SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
 import EmojiPlaceholder from './EmojiPlaceholder';
 import LoadingEmojiComponent from './LoadingEmojiComponent';
 import { sampledUfoRenderedEmoji, ufoExperiences } from '../../util/analytics';
@@ -51,10 +51,11 @@ var ResourcedEmoji = /*#__PURE__*/function (_LoadingEmojiComponen) {
     });
 
     sampledUfoRenderedEmoji(props.emojiId).start({
-      samplingRate: SAMPLING_RATE_EMOJI_RENDERED_EXP_RESOURCEEMOJI
+      samplingRate: SAMPLING_RATE_EMOJI_RENDERED_EXP
     });
     ufoExperiences['emoji-rendered'].getInstance(props.emojiId.id || props.emojiId.shortName).addMetadata({
-      source: 'resourced-emoji'
+      source: 'resourced-emoji',
+      emoji: props.emojiId.shortName
     });
     return _this;
   }
@@ -62,7 +63,16 @@ var ResourcedEmoji = /*#__PURE__*/function (_LoadingEmojiComponen) {
   _createClass(ResourcedEmoji, [{
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      sampledUfoRenderedEmoji(this.props.emojiId).abort();
+      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/esm/components/common/ResourcedEmojiComponent.js

@@ -14,10 +14,12 @@ import React from 'react';
 import { Component } from 'react';
 import { defaultEmojiHeight } from '../../util/constants';
 import { isPromise } from '../../util/type-helpers';
+import { UfoEmojiTimings } from '../../types';
 import CachingEmoji from './CachingEmoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
 import { sampledUfoRenderedEmoji } from '../../util/analytics';
 import LegacyEmojiContextProvider from '../../context/LegacyEmojiContextProvider';
+import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
 
 var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
   _inherits(ResourcedEmojiComponent, _Component);
@@ -46,6 +48,7 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
       var _this2 = this;
 
       var foundEmoji = emojiProvider.findByEmojiId(emojiId);
+      sampledUfoRenderedEmoji(emojiId).mark(UfoEmojiTimings.METADATA_START);
 
       if (isPromise(foundEmoji)) {
         this.setState({
@@ -59,11 +62,20 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
               loaded: true
             });
 
+            sampledUfoRenderedEmoji(emojiId).mark(UfoEmojiTimings.METADATA_END);
+
             if (!emoji) {
               // emoji is undefined
               sampledUfoRenderedEmoji(emojiId).failure({
                 metadata: {
-                  reason: 'failed to find'
+                  reason: 'failed to find',
+                  source: 'ResourcedEmojiComponent',
+                  data: {
+                    emoji: {
+                      id: emojiId.id,
+                      shortName: emojiId.shortName
+                    }
+                  }
                 }
               });
             }
@@ -71,12 +83,20 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
         }).catch(function () {
           sampledUfoRenderedEmoji(emojiId).failure({
             metadata: {
-              reason: 'failed to load'
+              reason: 'failed to load',
+              source: 'ResourcedEmojiComponent',
+              data: {
+                emoji: {
+                  id: emojiId.id,
+                  shortName: emojiId.shortName
+                }
+              }
             }
           });
         });
       } else {
-        // loaded
+        sampledUfoRenderedEmoji(emojiId).mark(UfoEmojiTimings.METADATA_END); // loaded
+
         this.setState({
           emoji: foundEmoji,
           loaded: true
@@ -99,6 +119,13 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
     value: function componentWillUnmount() {
       this.ready = false;
     }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (!hasUfoMarked(sampledUfoRenderedEmoji(this.props.emojiId), UfoEmojiTimings.FMP_END)) {
+        sampledUfoRenderedEmoji(this.props.emojiId).markFMP();
+      }
+    }
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {

package/dist/esm/components/common/UfoErrorBoundary.js

@@ -4,6 +4,12 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -22,10 +28,30 @@ export var UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
 
   _createClass(UfoErrorBoundary, [{
     key: "componentDidCatch",
-    value: function componentDidCatch() {
-      this.props.experiences.forEach(function (e) {
-        return e.failure();
-      });
+    value: function componentDidCatch(error, errorInfo) {
+      var _iterator = _createForOfIteratorHelper(this.props.experiences),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var exp = _step.value;
+          exp.failure({
+            metadata: {
+              source: 'UfoErrorBoundary',
+              reason: 'error',
+              error: {
+                name: error.name,
+                message: error.message,
+                infoStack: errorInfo.componentStack
+              }
+            }
+          });
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
     }
   }, {
     key: "render",