@atlaskit/reactions 21.3.2 → 21.4.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/reactions
 
+## 21.4.0
+
+### Minor Changes
+
+- [`34155ee7563`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34155ee7563) - add sampling for 2 ufo experiences to reduce volume of analytics
+
+### Patch Changes
+
+- Updated dependencies
+
+## 21.3.4
+
+### Patch Changes
+
+- [`c3f9e9bce1c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c3f9e9bce1c) - Add custom information to failure and abort events for UFO experiences
+- Updated dependencies
+
+## 21.3.3
+
+### Patch Changes
+
+- [`7f1dd280229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7f1dd280229) - Fix styling issue in the reaction emoji while hovering on it for the first time
+
 ## 21.3.2
 
 ### Patch Changes

package/dist/cjs/analytics/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SAMPLING_RATE_REACTIONS_RENDERED_EXP = void 0;
+// This rate is used in fetching emoji resource
+var SAMPLING_RATE_REACTIONS_RENDERED_EXP = 0.02;
+exports.SAMPLING_RATE_REACTIONS_RENDERED_EXP = SAMPLING_RATE_REACTIONS_RENDERED_EXP;

package/dist/cjs/analytics/ufo.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ReactionsRendered = exports.ReactionsRemove = exports.ReactionsAdd = exports.ReactionDetailsFetch = exports.PickerRender = exports.ExperienceName = exports.ComponentName = void 0;
+exports.sampledReactionsRendered = exports.ReactionsRendered = exports.ReactionsRemove = exports.ReactionsAdd = exports.ReactionDetailsFetch = exports.PickerRender = exports.ExperienceName = exports.ComponentName = void 0;
 
 var _ufo = require("@atlaskit/ufo");
 
+var _emoji = require("@atlaskit/emoji");
+
 /**
  * Helper method for create the config type for an individual/Concurrent experience
  * @param componentName
@@ -78,4 +80,10 @@ var ReactionDetailsFetch = new _ufo.ConcurrentExperience(ExperienceName.REACTION
 
 exports.ReactionDetailsFetch = ReactionDetailsFetch;
 var ReactionsRemove = new _ufo.ConcurrentExperience(ExperienceName.REACTION_REMOVED, createExperienceConfig(ComponentName.REACTIONS, _ufo.ExperienceTypes.Experience, _ufo.ExperiencePerformanceTypes.InlineResult));
-exports.ReactionsRemove = ReactionsRemove;
+exports.ReactionsRemove = ReactionsRemove;
+
+var sampledReactionsRendered = function sampledReactionsRendered(instanceId) {
+  return (0, _emoji.withSampling)(ReactionsRendered.getInstance(instanceId));
+};
+
+exports.sampledReactionsRendered = sampledReactionsRendered;

package/dist/cjs/components/Counter.js

@@ -26,6 +26,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/design-system/no-banned-imports
 var counterTestId = 'counter-container';
 exports.counterTestId = counterTestId;
 var countStyle = (0, _core.css)({

package/dist/cjs/components/ReactionPicker.js

@@ -189,7 +189,12 @@ var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
     value: function componentWillUnmount() {
       document.removeEventListener('click', this.handleClickOutside);
 
-      _analytics.UFO.PickerRender.abort();
+      _analytics.UFO.PickerRender.abort({
+        metadata: {
+          source: 'Reaction-Picker',
+          reason: 'unmount'
+        }
+      });
     }
   }, {
     key: "close",
@@ -199,7 +204,13 @@ var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
         showFullPicker: false
       }, function () {
         // ufo abort reaction experience
-        _analytics.UFO.PickerRender.abort();
+        _analytics.UFO.PickerRender.abort({
+          metadata: {
+            emojiId: _emojiId,
+            source: 'Reaction-Picker',
+            reason: 'close dialog'
+          }
+        });
       });
     }
   }, {

package/dist/cjs/components/ReactionTooltip.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,12 +9,12 @@ exports.ReactionTooltip = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _core = require("@emotion/core");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
-var _react = _interopRequireWildcard(require("react"));
-
 var _reactIntlNext = require("react-intl-next");
 
 var _tokens = require("@atlaskit/tokens");
@@ -25,10 +23,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _i18n = require("./i18n");
 
-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; }
-
 /** @jsx jsx */
 var verticalMargin = 5;
 var tooltipStyle = (0, _core.css)({
@@ -64,12 +58,7 @@ var ReactionTooltip = function ReactionTooltip(_ref) {
   var emojiName = _ref.emojiName,
       children = _ref.children,
       users = _ref.reaction.users;
-
-  if (!users || users.length === 0) {
-    return (0, _core.jsx)(_react.Fragment, null, _react.default.Children.only(children));
-  }
-
-  var content = (0, _core.jsx)("div", {
+  var content = !users || users.length === 0 ? null : (0, _core.jsx)("div", {
     css: tooltipStyle
   }, (0, _core.jsx)("ul", null, emojiName ? (0, _core.jsx)("li", {
     css: emojiNameStyle

package/dist/cjs/components/Reactions.js

@@ -50,7 +50,7 @@ var reactionStyle = (0, _core.css)({
   // top margin of 2px to allow spacing between rows when wrapped (paired with top margin in reactionsStyle)
   margin: '2px 4px 0 4px'
 });
-var reactionsStyle = (0, _core.css)({
+var wrapperStyle = (0, _core.css)({
   display: 'flex',
   flexWrap: 'wrap',
   position: 'relative',
@@ -58,7 +58,7 @@ var reactionsStyle = (0, _core.css)({
   borderRadius: '15px',
   // To allow to row spacing of 2px on wrap, and 0px on first row
   marginTop: '-2px',
-  '& > :first-of-type': {
+  '> :first-of-type > :first-child': {
     marginLeft: 0
   }
 });
@@ -177,7 +177,7 @@ var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureComponent) {
     key: "render",
     value: function render() {
       return (0, _core.jsx)("div", {
-        css: reactionsStyle
+        css: wrapperStyle
       }, this.props.reactions.map(this.renderReaction), this.renderPicker());
     }
   }]);

package/dist/cjs/components/UfoErrorBoundary.js

@@ -41,14 +41,24 @@ var UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
 
   (0, _createClass2.default)(UfoErrorBoundary, [{
     key: "componentDidCatch",
-    value: function componentDidCatch() {
+    value: function componentDidCatch(error, errorInfo) {
       var _iterator = _createForOfIteratorHelper(this.props.experiences),
           _step;
 
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var e = _step.value;
-          e.failure();
+          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);

package/dist/cjs/containers/ConnectedReactionsView.js

@@ -34,9 +34,10 @@ var ReactionsView = function ReactionsView(props) {
   var experienceInstance = (0, _react.useRef)();
   var ari = props.ari,
       createAnalyticsEvent = props.createAnalyticsEvent,
-      store = props.store;
+      store = props.store,
+      containerAri = props.containerAri;
   (0, _react.useEffect)(function () {
-    experienceInstance.current = _ReactionsStore.ufoExperiences.render.getInstance(ari);
+    experienceInstance.current = _ReactionsStore.ufoExperiences.render(ari);
   }, [ari]);
   (0, _react.useEffect)(function () {
     Promise.resolve(store).then(function (_store) {
@@ -47,16 +48,23 @@ var ReactionsView = function ReactionsView(props) {
   }, [createAnalyticsEvent, store]); // abort when component gets unmounted
 
   (0, _react.useEffect)(function () {
-    return function () {
+    return function cleanup() {
       var _experienceInstance$c;
 
-      (_experienceInstance$c = experienceInstance.current) === null || _experienceInstance$c === void 0 ? void 0 : _experienceInstance$c.abort();
+      (_experienceInstance$c = experienceInstance.current) === null || _experienceInstance$c === void 0 ? void 0 : _experienceInstance$c.abort({
+        metadata: {
+          source: 'Connected-Reactions-View',
+          data: {
+            ari: ari,
+            containerAri: containerAri
+          },
+          reason: 'unmount'
+        }
+      });
     };
-  }, [experienceInstance]);
+  }, [experienceInstance, containerAri, ari]);
 
   var renderChildren = function renderChildren(innerProps) {
-    var containerAri = props.containerAri,
-        ari = props.ari;
     return /*#__PURE__*/_react.default.createElement(_analyticsNamespacedContext.FabricElementsAnalyticsContext, {
       data: {
         containerAri: containerAri,

package/dist/cjs/store/ReactionsStore.js

@@ -23,6 +23,10 @@ var _batched = require("./batched");
 
 var utils = _interopRequireWildcard(require("./utils"));
 
+var _constants = require("../analytics/constants");
+
+var _ufo = require("../analytics/ufo");
+
 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; }
@@ -46,9 +50,11 @@ var ufoExperiences = {
   remove: Analytics.UFO.ReactionsRemove,
 
   /**
-   * Experience when the list of reactions gets rendered
+   * Experience when the list of reactions gets rendered with sampling
    */
-  render: Analytics.UFO.ReactionsRendered,
+  render: function render(instanceId) {
+    return (0, _ufo.sampledReactionsRendered)(instanceId);
+  },
 
   /**
    * Experience when a reaction details gets fetched
@@ -166,7 +172,15 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
 
           exp.failure({
             metadata: {
-              error: error
+              error: error,
+              source: 'Reaction-Store',
+              data: {
+                containerAri: containerAri,
+                ari: ari,
+                emojiId: emojiId,
+                metadata: _this.metadata
+              },
+              reason: 'addReaction fetch failed'
             }
           });
         }
@@ -191,7 +205,15 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
         // ufo add reaction failure
         exp.failure({
           metadata: {
-            error: error
+            error: error,
+            source: 'Reaction-Store',
+            data: {
+              containerAri: containerAri,
+              ari: ari,
+              emojiId: emojiId,
+              metadata: _this.metadata
+            },
+            reason: 'deleteReaction fetch failed'
           }
         });
       });
@@ -204,11 +226,14 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
        * TODO:
        * All reactions are usually fetched in a single call to reactions-service. Need to check why "getReactions" gets called randomly 1-2 times everytime on each fetch request despite using same containerAri.
        */
-      var exp = ufoExperiences.render.getInstance(containerAri); // ufo start reaction experience
+      var sampledExp = ufoExperiences.render(containerAri);
+      var arisArr = aris.reduce(utils.flattenAris); // ufo start reaction experience
 
-      exp.start();
+      sampledExp.start({
+        samplingRate: _constants.SAMPLING_RATE_REACTIONS_RENDERED_EXP
+      });
 
-      _this.client.getReactions(containerAri, aris.reduce(utils.flattenAris)).then(function (value) {
+      _this.client.getReactions(containerAri, arisArr).then(function (value) {
         Object.keys(value).map(function (ari) {
           var reactionsState = _this.getReactionsState(containerAri, ari);
 
@@ -221,14 +246,24 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
           Analytics.createAndFireSafe(_this.createAnalyticsEvent, Analytics.createRestSucceededEvent, 'getReactions');
         }
 
-        exp.success();
+        sampledExp.success();
       }).catch(function (error) {
         if ((0, utils.isRealErrorFromService)(error.code)) {
           if (_this.createAnalyticsEvent) {
             Analytics.createAndFireSafe(_this.createAnalyticsEvent, Analytics.createRestFailedEvent, 'getReactions', error.code);
           }
 
-          exp.failure();
+          sampledExp.failure({
+            metadata: {
+              error: error,
+              source: 'Reaction-Store',
+              data: {
+                containerAri: containerAri,
+                aris: arisArr.join(',')
+              },
+              reason: 'getReactions fetch failed'
+            }
+          });
           return Promise.reject(error);
         }
       });
@@ -248,7 +283,14 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
         // ufo get reaction details failure
         exp.failure({
           metadata: {
-            error: error
+            error: error,
+            source: 'Reaction-Store',
+            data: {
+              containerAri: containerAri,
+              ari: ari,
+              emojiId: emojiId
+            },
+            reason: 'getDetailedReaction fetch failed'
           }
         });
       });

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.3.2"
+	"version": "21.4.0"
 }

package/dist/es2019/analytics/constants.js

@@ -0,0 +1,2 @@
+// This rate is used in fetching emoji resource
+export const SAMPLING_RATE_REACTIONS_RENDERED_EXP = 0.02;

package/dist/es2019/analytics/ufo.js

@@ -1,4 +1,5 @@
 import { ConcurrentExperience, UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
+import { withSampling } from '@atlaskit/emoji';
 /**
  * Initial experience config object (deferred from @atlaskit/ufo inner types)
  * TODO: Check if possible to add this to exported types from @atlaskit/ufo
@@ -66,4 +67,5 @@ export const ReactionDetailsFetch = new ConcurrentExperience(ExperienceName.REAC
  * Experience when a reaction emoji gets removed/decrement
  */
 
-export const ReactionsRemove = new ConcurrentExperience(ExperienceName.REACTION_REMOVED, createExperienceConfig(ComponentName.REACTIONS, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
+export const ReactionsRemove = new ConcurrentExperience(ExperienceName.REACTION_REMOVED, createExperienceConfig(ComponentName.REACTIONS, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
+export const sampledReactionsRendered = instanceId => withSampling(ReactionsRendered.getInstance(instanceId));

package/dist/es2019/components/Counter.js

@@ -3,7 +3,8 @@ import { jsx, css } from '@emotion/core';
 import { N500, B400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import React, { memo } from 'react';
-import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion';
+import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion'; // eslint-disable-next-line @atlaskit/design-system/no-banned-imports
+
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
 export const counterTestId = 'counter-container';
 export const countStyle = css({

package/dist/es2019/components/ReactionPicker.js

@@ -143,7 +143,12 @@ export class ReactionPicker extends PureComponent {
 
   componentWillUnmount() {
     document.removeEventListener('click', this.handleClickOutside);
-    UFO.PickerRender.abort();
+    UFO.PickerRender.abort({
+      metadata: {
+        source: 'Reaction-Picker',
+        reason: 'unmount'
+      }
+    });
   }
 
   close(_emojiId) {
@@ -152,7 +157,13 @@ export class ReactionPicker extends PureComponent {
       showFullPicker: false
     }, () => {
       // ufo abort reaction experience
-      UFO.PickerRender.abort();
+      UFO.PickerRender.abort({
+        metadata: {
+          emojiId: _emojiId,
+          source: 'Reaction-Picker',
+          reason: 'close dialog'
+        }
+      });
     });
   }
 

package/dist/es2019/components/ReactionTooltip.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
+import React from 'react';
 import { jsx, css } from '@emotion/core';
 import Tooltip from '@atlaskit/tooltip';
-import React, { Fragment } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { token } from '@atlaskit/tokens';
 import { N90 } from '@atlaskit/theme/colors';
@@ -44,11 +44,7 @@ export const ReactionTooltip = ({
     users
   }
 }) => {
-  if (!users || users.length === 0) {
-    return jsx(Fragment, null, React.Children.only(children));
-  }
-
-  const content = jsx("div", {
+  const content = !users || users.length === 0 ? null : jsx("div", {
     css: tooltipStyle
   }, jsx("ul", null, emojiName ? jsx("li", {
     css: emojiNameStyle

package/dist/es2019/components/Reactions.js

@@ -16,7 +16,7 @@ const reactionStyle = css({
   // top margin of 2px to allow spacing between rows when wrapped (paired with top margin in reactionsStyle)
   margin: '2px 4px 0 4px'
 });
-const reactionsStyle = css({
+const wrapperStyle = css({
   display: 'flex',
   flexWrap: 'wrap',
   position: 'relative',
@@ -24,7 +24,7 @@ const reactionsStyle = css({
   borderRadius: '15px',
   // To allow to row spacing of 2px on wrap, and 0px on first row
   marginTop: '-2px',
-  '& > :first-of-type': {
+  '> :first-of-type > :first-child': {
     marginLeft: 0
   }
 });
@@ -134,7 +134,7 @@ export class ReactionsWithoutAnalytics extends React.PureComponent {
 
   render() {
     return jsx("div", {
-      css: reactionsStyle
+      css: wrapperStyle
     }, this.props.reactions.map(this.renderReaction), this.renderPicker());
   }
 

package/dist/es2019/components/UfoErrorBoundary.js

@@ -1,8 +1,18 @@
 import React from 'react';
 export class UfoErrorBoundary extends React.Component {
-  componentDidCatch() {
-    for (const e of this.props.experiences) {
-      e.failure();
+  componentDidCatch(error, errorInfo) {
+    for (const exp of this.props.experiences) {
+      exp.failure({
+        metadata: {
+          source: 'UfoErrorBoundary',
+          reason: 'error',
+          error: {
+            name: error.name,
+            message: error.message,
+            infoStack: errorInfo.componentStack
+          }
+        }
+      });
     }
   }
 

package/dist/es2019/containers/ConnectedReactionsView.js

@@ -13,10 +13,11 @@ const ReactionsView = props => {
   const {
     ari,
     createAnalyticsEvent,
-    store
+    store,
+    containerAri
   } = props;
   useEffect(() => {
-    experienceInstance.current = ufoExperiences.render.getInstance(ari);
+    experienceInstance.current = ufoExperiences.render(ari);
   }, [ari]);
   useEffect(() => {
     Promise.resolve(store).then(_store => {
@@ -27,18 +28,23 @@ const ReactionsView = props => {
   }, [createAnalyticsEvent, store]); // abort when component gets unmounted
 
   useEffect(() => {
-    return () => {
+    return function cleanup() {
       var _experienceInstance$c;
 
-      (_experienceInstance$c = experienceInstance.current) === null || _experienceInstance$c === void 0 ? void 0 : _experienceInstance$c.abort();
+      (_experienceInstance$c = experienceInstance.current) === null || _experienceInstance$c === void 0 ? void 0 : _experienceInstance$c.abort({
+        metadata: {
+          source: 'Connected-Reactions-View',
+          data: {
+            ari,
+            containerAri
+          },
+          reason: 'unmount'
+        }
+      });
     };
-  }, [experienceInstance]);
+  }, [experienceInstance, containerAri, ari]);
 
   const renderChildren = innerProps => {
-    const {
-      containerAri,
-      ari
-    } = props;
     return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
       data: {
         containerAri,

package/dist/es2019/store/ReactionsStore.js

@@ -4,6 +4,8 @@ import * as Types from '../types';
 import { batch, batchByKey } from './batched';
 import * as utils from './utils';
 import { isRealErrorFromService } from './utils';
+import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../analytics/constants';
+import { sampledReactionsRendered } from '../analytics/ufo';
 
 /**
  * Set of all available UFO experiences relating to reaction element
@@ -20,9 +22,9 @@ export const ufoExperiences = {
   remove: Analytics.UFO.ReactionsRemove,
 
   /**
-   * Experience when the list of reactions gets rendered
+   * Experience when the list of reactions gets rendered with sampling
    */
-  render: Analytics.UFO.ReactionsRendered,
+  render: instanceId => sampledReactionsRendered(instanceId),
 
   /**
    * Experience when a reaction details gets fetched
@@ -131,7 +133,15 @@ export class MemoryReactionsStore {
 
           exp.failure({
             metadata: {
-              error
+              error,
+              source: 'Reaction-Store',
+              data: {
+                containerAri,
+                ari,
+                emojiId,
+                metadata: this.metadata
+              },
+              reason: 'addReaction fetch failed'
             }
           });
         }
@@ -157,7 +167,15 @@ export class MemoryReactionsStore {
         // ufo add reaction failure
         exp.failure({
           metadata: {
-            error
+            error,
+            source: 'Reaction-Store',
+            data: {
+              containerAri,
+              ari,
+              emojiId,
+              metadata: this.metadata
+            },
+            reason: 'deleteReaction fetch failed'
           }
         });
       });
@@ -172,10 +190,13 @@ export class MemoryReactionsStore {
        * TODO:
        * All reactions are usually fetched in a single call to reactions-service. Need to check why "getReactions" gets called randomly 1-2 times everytime on each fetch request despite using same containerAri.
        */
-      const exp = ufoExperiences.render.getInstance(containerAri); // ufo start reaction experience
+      const sampledExp = ufoExperiences.render(containerAri);
+      const arisArr = aris.reduce(utils.flattenAris); // ufo start reaction experience
 
-      exp.start();
-      this.client.getReactions(containerAri, aris.reduce(utils.flattenAris)).then(value => {
+      sampledExp.start({
+        samplingRate: SAMPLING_RATE_REACTIONS_RENDERED_EXP
+      });
+      this.client.getReactions(containerAri, arisArr).then(value => {
         Object.keys(value).map(ari => {
           const reactionsState = this.getReactionsState(containerAri, ari);
           const reactions = reactionsState && reactionsState.status === Types.ReactionStatus.ready ? reactionsState.reactions : undefined;
@@ -186,14 +207,24 @@ export class MemoryReactionsStore {
           Analytics.createAndFireSafe(this.createAnalyticsEvent, Analytics.createRestSucceededEvent, 'getReactions');
         }
 
-        exp.success();
+        sampledExp.success();
       }).catch(error => {
         if (isRealErrorFromService(error.code)) {
           if (this.createAnalyticsEvent) {
             Analytics.createAndFireSafe(this.createAnalyticsEvent, Analytics.createRestFailedEvent, 'getReactions', error.code);
           }
 
-          exp.failure();
+          sampledExp.failure({
+            metadata: {
+              error,
+              source: 'Reaction-Store',
+              data: {
+                containerAri,
+                aris: arisArr.join(',')
+              },
+              reason: 'getReactions fetch failed'
+            }
+          });
           return Promise.reject(error);
         }
       });
@@ -214,7 +245,14 @@ export class MemoryReactionsStore {
         // ufo get reaction details failure
         exp.failure({
           metadata: {
-            error
+            error,
+            source: 'Reaction-Store',
+            data: {
+              containerAri,
+              ari,
+              emojiId
+            },
+            reason: 'getDetailedReaction fetch failed'
           }
         });
       });

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.3.2"
+	"version": "21.4.0"
 }

package/dist/esm/analytics/constants.js

@@ -0,0 +1,2 @@
+// This rate is used in fetching emoji resource
+export var SAMPLING_RATE_REACTIONS_RENDERED_EXP = 0.02;

package/dist/esm/analytics/ufo.js

@@ -1,4 +1,5 @@
 import { ConcurrentExperience, UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
+import { withSampling } from '@atlaskit/emoji';
 /**
  * Initial experience config object (deferred from @atlaskit/ufo inner types)
  * TODO: Check if possible to add this to exported types from @atlaskit/ufo
@@ -66,4 +67,7 @@ export var ReactionDetailsFetch = new ConcurrentExperience(ExperienceName.REACTI
  * Experience when a reaction emoji gets removed/decrement
  */
 
-export var ReactionsRemove = new ConcurrentExperience(ExperienceName.REACTION_REMOVED, createExperienceConfig(ComponentName.REACTIONS, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
+export var ReactionsRemove = new ConcurrentExperience(ExperienceName.REACTION_REMOVED, createExperienceConfig(ComponentName.REACTIONS, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
+export var sampledReactionsRendered = function sampledReactionsRendered(instanceId) {
+  return withSampling(ReactionsRendered.getInstance(instanceId));
+};

package/dist/esm/components/Counter.js

@@ -3,7 +3,8 @@ import { jsx, css } from '@emotion/core';
 import { N500, B400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import React, { memo } from 'react';
-import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion';
+import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion'; // eslint-disable-next-line @atlaskit/design-system/no-banned-imports
+
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
 export var counterTestId = 'counter-container';
 export var countStyle = css({

package/dist/esm/components/ReactionPicker.js

@@ -166,7 +166,12 @@ export var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       document.removeEventListener('click', this.handleClickOutside);
-      UFO.PickerRender.abort();
+      UFO.PickerRender.abort({
+        metadata: {
+          source: 'Reaction-Picker',
+          reason: 'unmount'
+        }
+      });
     }
   }, {
     key: "close",
@@ -176,7 +181,13 @@ export var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
         showFullPicker: false
       }, function () {
         // ufo abort reaction experience
-        UFO.PickerRender.abort();
+        UFO.PickerRender.abort({
+          metadata: {
+            emojiId: _emojiId,
+            source: 'Reaction-Picker',
+            reason: 'close dialog'
+          }
+        });
       });
     }
   }, {

package/dist/esm/components/ReactionTooltip.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
+import React from 'react';
 import { jsx, css } from '@emotion/core';
 import Tooltip from '@atlaskit/tooltip';
-import React, { Fragment } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { token } from '@atlaskit/tokens';
 import { N90 } from '@atlaskit/theme/colors';
@@ -41,12 +41,7 @@ export var ReactionTooltip = function ReactionTooltip(_ref) {
   var emojiName = _ref.emojiName,
       children = _ref.children,
       users = _ref.reaction.users;
-
-  if (!users || users.length === 0) {
-    return jsx(Fragment, null, React.Children.only(children));
-  }
-
-  var content = jsx("div", {
+  var content = !users || users.length === 0 ? null : jsx("div", {
     css: tooltipStyle
   }, jsx("ul", null, emojiName ? jsx("li", {
     css: emojiNameStyle

package/dist/esm/components/Reactions.js

@@ -26,7 +26,7 @@ var reactionStyle = css({
   // top margin of 2px to allow spacing between rows when wrapped (paired with top margin in reactionsStyle)
   margin: '2px 4px 0 4px'
 });
-var reactionsStyle = css({
+var wrapperStyle = css({
   display: 'flex',
   flexWrap: 'wrap',
   position: 'relative',
@@ -34,7 +34,7 @@ var reactionsStyle = css({
   borderRadius: '15px',
   // To allow to row spacing of 2px on wrap, and 0px on first row
   marginTop: '-2px',
-  '& > :first-of-type': {
+  '> :first-of-type > :first-child': {
     marginLeft: 0
   }
 });
@@ -162,7 +162,7 @@ export var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureCompone
     key: "render",
     value: function render() {
       return jsx("div", {
-        css: reactionsStyle
+        css: wrapperStyle
       }, this.props.reactions.map(this.renderReaction), this.renderPicker());
     }
   }]);

package/dist/esm/components/UfoErrorBoundary.js

@@ -28,14 +28,24 @@ export var UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
 
   _createClass(UfoErrorBoundary, [{
     key: "componentDidCatch",
-    value: function componentDidCatch() {
+    value: function componentDidCatch(error, errorInfo) {
       var _iterator = _createForOfIteratorHelper(this.props.experiences),
           _step;
 
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var e = _step.value;
-          e.failure();
+          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);

package/dist/esm/containers/ConnectedReactionsView.js

@@ -12,9 +12,10 @@ var ReactionsView = function ReactionsView(props) {
   var experienceInstance = useRef();
   var ari = props.ari,
       createAnalyticsEvent = props.createAnalyticsEvent,
-      store = props.store;
+      store = props.store,
+      containerAri = props.containerAri;
   useEffect(function () {
-    experienceInstance.current = ufoExperiences.render.getInstance(ari);
+    experienceInstance.current = ufoExperiences.render(ari);
   }, [ari]);
   useEffect(function () {
     Promise.resolve(store).then(function (_store) {
@@ -25,16 +26,23 @@ var ReactionsView = function ReactionsView(props) {
   }, [createAnalyticsEvent, store]); // abort when component gets unmounted
 
   useEffect(function () {
-    return function () {
+    return function cleanup() {
       var _experienceInstance$c;
 
-      (_experienceInstance$c = experienceInstance.current) === null || _experienceInstance$c === void 0 ? void 0 : _experienceInstance$c.abort();
+      (_experienceInstance$c = experienceInstance.current) === null || _experienceInstance$c === void 0 ? void 0 : _experienceInstance$c.abort({
+        metadata: {
+          source: 'Connected-Reactions-View',
+          data: {
+            ari: ari,
+            containerAri: containerAri
+          },
+          reason: 'unmount'
+        }
+      });
     };
-  }, [experienceInstance]);
+  }, [experienceInstance, containerAri, ari]);
 
   var renderChildren = function renderChildren(innerProps) {
-    var containerAri = props.containerAri,
-        ari = props.ari;
     return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
       data: {
         containerAri: containerAri,

package/dist/esm/store/ReactionsStore.js

@@ -11,6 +11,8 @@ import * as Types from '../types';
 import { batch, batchByKey } from './batched';
 import * as utils from './utils';
 import { isRealErrorFromService } from './utils';
+import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../analytics/constants';
+import { sampledReactionsRendered } from '../analytics/ufo';
 
 /**
  * Set of all available UFO experiences relating to reaction element
@@ -27,9 +29,11 @@ export var ufoExperiences = {
   remove: Analytics.UFO.ReactionsRemove,
 
   /**
-   * Experience when the list of reactions gets rendered
+   * Experience when the list of reactions gets rendered with sampling
    */
-  render: Analytics.UFO.ReactionsRendered,
+  render: function render(instanceId) {
+    return sampledReactionsRendered(instanceId);
+  },
 
   /**
    * Experience when a reaction details gets fetched
@@ -154,7 +158,15 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
 
           exp.failure({
             metadata: {
-              error: error
+              error: error,
+              source: 'Reaction-Store',
+              data: {
+                containerAri: containerAri,
+                ari: ari,
+                emojiId: emojiId,
+                metadata: _this.metadata
+              },
+              reason: 'addReaction fetch failed'
             }
           });
         }
@@ -180,7 +192,15 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
         // ufo add reaction failure
         exp.failure({
           metadata: {
-            error: error
+            error: error,
+            source: 'Reaction-Store',
+            data: {
+              containerAri: containerAri,
+              ari: ari,
+              emojiId: emojiId,
+              metadata: _this.metadata
+            },
+            reason: 'deleteReaction fetch failed'
           }
         });
       });
@@ -195,11 +215,14 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
        * TODO:
        * All reactions are usually fetched in a single call to reactions-service. Need to check why "getReactions" gets called randomly 1-2 times everytime on each fetch request despite using same containerAri.
        */
-      var exp = ufoExperiences.render.getInstance(containerAri); // ufo start reaction experience
+      var sampledExp = ufoExperiences.render(containerAri);
+      var arisArr = aris.reduce(utils.flattenAris); // ufo start reaction experience
 
-      exp.start();
+      sampledExp.start({
+        samplingRate: SAMPLING_RATE_REACTIONS_RENDERED_EXP
+      });
 
-      _this.client.getReactions(containerAri, aris.reduce(utils.flattenAris)).then(function (value) {
+      _this.client.getReactions(containerAri, arisArr).then(function (value) {
         Object.keys(value).map(function (ari) {
           var reactionsState = _this.getReactionsState(containerAri, ari);
 
@@ -212,14 +235,24 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
           Analytics.createAndFireSafe(_this.createAnalyticsEvent, Analytics.createRestSucceededEvent, 'getReactions');
         }
 
-        exp.success();
+        sampledExp.success();
       }).catch(function (error) {
         if (isRealErrorFromService(error.code)) {
           if (_this.createAnalyticsEvent) {
             Analytics.createAndFireSafe(_this.createAnalyticsEvent, Analytics.createRestFailedEvent, 'getReactions', error.code);
           }
 
-          exp.failure();
+          sampledExp.failure({
+            metadata: {
+              error: error,
+              source: 'Reaction-Store',
+              data: {
+                containerAri: containerAri,
+                aris: arisArr.join(',')
+              },
+              reason: 'getReactions fetch failed'
+            }
+          });
           return Promise.reject(error);
         }
       });
@@ -242,7 +275,14 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
         // ufo get reaction details failure
         exp.failure({
           metadata: {
-            error: error
+            error: error,
+            source: 'Reaction-Store',
+            data: {
+              containerAri: containerAri,
+              ari: ari,
+              emojiId: emojiId
+            },
+            reason: 'getDetailedReaction fetch failed'
           }
         });
       });

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.3.2"
+	"version": "21.4.0"
 }

package/dist/types/analytics/constants.d.ts

@@ -0,0 +1 @@
+export declare const SAMPLING_RATE_REACTIONS_RENDERED_EXP = 0.02;

package/dist/types/analytics/ufo.d.ts

@@ -37,3 +37,4 @@ export declare const ReactionDetailsFetch: ConcurrentExperience;
  * Experience when a reaction emoji gets removed/decrement
  */
 export declare const ReactionsRemove: ConcurrentExperience;
+export declare const sampledReactionsRendered: (instanceId: string) => import("@atlaskit/emoji").WithSamplingUFOExperience;

package/dist/types/components/ReactionTooltip.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React from 'react';
 import { ReactionSummary } from '../types/ReactionSummary';
 export interface Props {

package/dist/types/components/UfoErrorBoundary.d.ts

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { ErrorInfo } from 'react';
 import { UFOExperience } from '@atlaskit/ufo';
+import { WithSamplingUFOExperience } from '@atlaskit/emoji';
 export declare class UfoErrorBoundary extends React.Component<{
-    experiences: UFOExperience[];
+    experiences: UFOExperience[] | WithSamplingUFOExperience[];
 }> {
-    componentDidCatch(): void;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
     render(): React.ReactNode;
 }

package/dist/types/store/ReactionsStore.d.ts

@@ -29,9 +29,9 @@ export declare const ufoExperiences: {
      */
     remove: import("@atlaskit/ufo").ConcurrentExperience;
     /**
-     * Experience when the list of reactions gets rendered
+     * Experience when the list of reactions gets rendered with sampling
      */
-    render: import("@atlaskit/ufo").ConcurrentExperience;
+    render: (instanceId: string) => import("@atlaskit/emoji").WithSamplingUFOExperience;
     /**
      * Experience when a reaction details gets fetched
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/reactions",
-  "version": "21.3.2",
+  "version": "21.4.0",
   "description": "Reactions component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,13 +26,13 @@
   },
   "dependencies": {
     "@atlaskit/analytics-gas-types": "^5.0.0",
-    "@atlaskit/analytics-namespaced-context": "^6.4.0",
+    "@atlaskit/analytics-namespaced-context": "^6.5.0",
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.3.0",
-    "@atlaskit/ds-lib": "^1.4.0",
-    "@atlaskit/emoji": "^64.7.0",
+    "@atlaskit/ds-lib": "^2.0.0",
+    "@atlaskit/emoji": "^65.0.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/motion": "^1.1.0",
+    "@atlaskit/motion": "^1.2.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.10.0",
@@ -50,10 +50,10 @@
   "devDependencies": {
     "@atlaskit/analytics-viewer": "^0.4.5",
     "@atlaskit/docs": "^9.0.0",
-    "@atlaskit/editor-test-helpers": "^17.0.0",
+    "@atlaskit/editor-test-helpers": "^17.1.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/tooltip": "^17.5.0",
-    "@atlaskit/util-data-test": "^17.2.0",
+    "@atlaskit/util-data-test": "^17.4.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/ufo": "^0.1.0",
     "@types/webpack-dev-server": "^3.11.2",