@atlaskit/media-card 74.3.2 → 74.4.0

package/dist/es2019/inline/loader.js

@@ -18,15 +18,15 @@ export default class MediaInlineCardLoader extends React.PureComponent {
 
     if (!this.state.MediaInlineCard) {
       try {
-        const [mediaClient, cardModule, mediaCardErrorBoundaryModule] = await Promise.all([import(
+        const [mediaClient, cardModule, mediaInlineErrorBoundaryModule] = await Promise.all([import(
         /* webpackChunkName: "@atlaskit-internal_media-client" */
         '@atlaskit/media-client'), import(
         /* webpackChunkName: "@atlaskit-internal_inline-media-card" */
         './mediaInlineCard'), import(
-        /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
-        '../utils/media-card-analytics-error-boundary')]);
+        /* webpackChunkName: "@atlaskit-internal_media-inline-error-boundary" */
+        './mediaInlineAnalyticsErrorBoundary')]);
         MediaInlineCardLoader.MediaInlineCard = mediaClient.withMediaClient(cardModule.MediaInlineCard);
-        MediaInlineCardLoader.ErrorBoundary = mediaCardErrorBoundaryModule.default;
+        MediaInlineCardLoader.ErrorBoundary = mediaInlineErrorBoundaryModule.default;
 
         if (this.isMounted) {
           this.setState({

package/dist/es2019/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -0,0 +1,75 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { withMediaAnalyticsContext } from '@atlaskit/media-common';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { fireMediaCardEvent } from '../utils/analytics';
+
+class WrappedMediaInlineAnalyticsErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "fireOperationalEvent", (error, info) => {
+      var _window, _window$navigator;
+
+      const {
+        data = {},
+        createAnalyticsEvent
+      } = this.props;
+      const payload = {
+        eventType: 'operational',
+        action: 'failed',
+        actionSubject: 'mediaInlineRender',
+        attributes: {
+          browserInfo: (_window = window) !== null && _window !== void 0 && (_window$navigator = _window.navigator) !== null && _window$navigator !== void 0 && _window$navigator.userAgent ? window.navigator.userAgent : 'unknown',
+          error,
+          failReason: 'unexpected-error',
+          info,
+          ...data
+        }
+      };
+      fireMediaCardEvent(payload, createAnalyticsEvent);
+    });
+
+    this.state = {
+      hasError: false
+    };
+  }
+
+  componentDidCatch(error, info) {
+    try {
+      this.fireOperationalEvent(error, info);
+      this.setState({
+        hasError: true
+      });
+    } catch (e) {}
+  }
+
+  render() {
+    const {
+      hasError
+    } = this.state;
+    const {
+      children
+    } = this.props;
+
+    if (hasError) {
+      // TODO refactor error boundary for inline card https://product-fabric.atlassian.net/browse/MEX-2140
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+
+    return children;
+  }
+
+}
+
+_defineProperty(WrappedMediaInlineAnalyticsErrorBoundary, "displayName", 'MediaInlineAnalyticsErrorBoundary');
+
+const packageName = "@atlaskit/media-card";
+const packageVersion = "74.4.0";
+const MediaInlineAnalyticsErrorBoundary = withMediaAnalyticsContext({
+  packageVersion,
+  packageName,
+  componentName: 'mediaInlineCard',
+  component: 'mediaInlineCard'
+})(withAnalyticsEvents()(WrappedMediaInlineAnalyticsErrorBoundary));
+export default MediaInlineAnalyticsErrorBoundary;

package/dist/es2019/utils/analytics.js

@@ -9,7 +9,6 @@ const relevantFlags = {
   observedWidth: true,
   mediaInline: false,
   folderUploads: false,
-  mediaUploadApiV2: true,
   memoryCacheLogging: true
 };
 export const LOGGED_FEATURE_FLAGS = filterFeatureFlagNames(relevantFlags);
@@ -45,7 +44,7 @@ export const getRenderCommencedEventPayload = (fileAttributes, performanceAttrib
     }
   };
 };
-export const getRenderSucceededEventPayload = (fileAttributes, performanceAttributes, ssrReliability, traceContext) => ({
+export const getRenderSucceededEventPayload = (fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext) => ({
   eventType: 'operational',
   action: 'succeeded',
   actionSubject: 'mediaCardRender',
@@ -54,7 +53,8 @@ export const getRenderSucceededEventPayload = (fileAttributes, performanceAttrib
     performanceAttributes,
     status: 'success',
     ssrReliability,
-    traceContext
+    traceContext,
+    metadataTraceContext
   }
 });
 export const getCacheHitEventPayload = cardPreviewAttributes => ({
@@ -109,19 +109,27 @@ export const getRenderErrorErrorDetail = error => {
     return error.message;
   }
 };
+export const getErrorTraceContext = error => {
+  if (isMediaCardError(error) && !!error.secondaryError && isRequestError(error.secondaryError)) {
+    var _error$secondaryError;
+
+    return (_error$secondaryError = error.secondaryError.metadata) === null || _error$secondaryError === void 0 ? void 0 : _error$secondaryError.traceContext;
+  }
+};
 export const getRenderErrorRequestMetadata = error => {
   if (isMediaCardError(error) && !!error.secondaryError && isRequestError(error.secondaryError)) {
     return error.secondaryError.metadata;
   }
 };
-export const extractErrorInfo = error => {
+export const extractErrorInfo = (error, metadataTraceContext) => {
   return {
     failReason: getRenderErrorFailReason(error),
     error: getRenderErrorErrorReason(error),
-    errorDetail: getRenderErrorErrorDetail(error)
+    errorDetail: getRenderErrorErrorDetail(error),
+    metadataTraceContext: metadataTraceContext !== null && metadataTraceContext !== void 0 ? metadataTraceContext : getErrorTraceContext(error)
   };
 };
-export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes, error, ssrReliability, traceContext) => ({
+export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes, error, ssrReliability, traceContext, metadataTraceContext) => ({
   eventType: 'operational',
   action: 'failed',
   actionSubject: 'mediaCardRender',
@@ -129,13 +137,27 @@ export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes
     fileAttributes,
     performanceAttributes,
     status: 'fail',
-    ...extractErrorInfo(error),
+    ...extractErrorInfo(error, metadataTraceContext),
     request: getRenderErrorRequestMetadata(error),
     ssrReliability,
     traceContext
   }
 });
-export const getRenderFailedFileStatusPayload = (fileAttributes, performanceAttributes, ssrReliability, traceContext) => ({
+export const getErrorEventPayload = (cardStatus, fileAttributes, error, ssrReliability, traceContext, metadataTraceContext) => ({
+  eventType: 'operational',
+  action: 'nonCriticalFail',
+  actionSubject: 'mediaCardRender',
+  attributes: {
+    fileAttributes,
+    status: 'fail',
+    ...extractErrorInfo(error, metadataTraceContext),
+    request: getRenderErrorRequestMetadata(error),
+    ssrReliability,
+    traceContext,
+    cardStatus
+  }
+});
+export const getRenderFailedFileStatusPayload = (fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext) => ({
   eventType: 'operational',
   action: 'failed',
   actionSubject: 'mediaCardRender',
@@ -145,7 +167,8 @@ export const getRenderFailedFileStatusPayload = (fileAttributes, performanceAttr
     status: 'fail',
     failReason: 'failed-processing',
     ssrReliability,
-    traceContext
+    traceContext,
+    metadataTraceContext
   }
 });
 export const getCopiedFilePayload = fileId => ({

package/dist/es2019/utils/ufoExperiences.js

@@ -3,7 +3,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata, LOGGED_FEATURE_FLAG_KE
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "74.3.2";
+const packageVersion = "74.4.0";
 let concurrentExperience;
 
 const getExperience = id => {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "74.3.2",
+	"version": "74.4.0",
 	"sideEffects": false
 }

package/dist/esm/card/card.js

@@ -34,7 +34,7 @@ import { getFileDetails } from '../utils/metadata';
 import { InlinePlayerLazy } from './inlinePlayerLazy';
 import { getFileAttributes, extractErrorInfo, LOGGED_FEATURE_FLAGS } from '../utils/analytics';
 import { isLocalPreviewError, MediaCardError, ensureMediaCardError, ImageLoadError } from '../errors';
-import { fireOperationalEvent as _fireOperationalEvent, fireCommencedEvent as _fireCommencedEvent, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
+import { fireOperationalEvent as _fireOperationalEvent, fireCommencedEvent as _fireCommencedEvent, fireCopiedEvent, fireScreenEvent, fireNonCriticalErrorEvent } from './cardAnalytics';
 import getDocument from '../utils/document';
 import { StoreSSRDataScript, getSSRData } from '../utils/globalScope';
 import { getCardStateFromFileState, createStateUpdater } from './cardState';
@@ -44,7 +44,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.3.2";
+var packageVersion = "74.4.0";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
 
@@ -83,7 +83,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "timeElapsedTillCommenced", performance.now());
 
     _defineProperty(_assertThisInitialized(_this), "traceContext", {
-      traceId: getRandomHex(16)
+      traceId: getRandomHex(8)
     });
 
     _defineProperty(_assertThisInitialized(_this), "getImageURLParams", function (_ref) {
@@ -133,7 +133,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         mediaClient: mediaClient,
         id: id,
         dimensions: dimensions,
-        onLocalPreviewError: _this.fireLocalPreviewErrorEvent,
+        onLocalPreviewError: _this.fireNonCriticalErrorEvent,
         filePreview: isBannedLocalPreview ? undefined : getFilePreviewFromFileState(fileState),
         isRemotePreviewReady: isImageRepresentationReady(fileState),
         imageUrlParams: _this.getImageURLParams(identifier),
@@ -158,7 +158,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "refetchSSRPreview", /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(identifier) {
-        var _this$props4, mediaClient, _this$props4$dimensio, dimensions, cardPreview;
+        var _this$props4, mediaClient, _this$props4$dimensio, dimensions, cardPreview, wrappedError;
 
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
@@ -176,14 +176,17 @@ export var CardBase = /*#__PURE__*/function (_Component) {
                   cardPreview: cardPreview
                 });
 
-                _context.next = 10;
+                _context.next = 12;
                 break;
 
               case 8:
                 _context.prev = 8;
                 _context.t0 = _context["catch"](1);
+                wrappedError = ensureMediaCardError('remote-preview-fetch-ssr', _context.t0, true);
 
-              case 10:
+                _this.fireNonCriticalErrorEvent(wrappedError);
+
+              case 12:
               case "end":
                 return _context.stop();
             }
@@ -227,6 +230,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
                 //  If it's any other error we set status 'error'
 
                 if (isLocalPreviewError(wrappedError)) {
+                  // This error should already been logged inside the getCardPreview. No need to log it here.
                   _this.safeSetState({
                     isBannedLocalPreview: true
                   });
@@ -306,7 +310,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         if (isLocal) {
           updateState.isBannedLocalPreview = true;
 
-          _this.fireLocalPreviewErrorEvent(error);
+          _this.fireNonCriticalErrorEvent(error);
         }
 
         var _this$props5 = _this.props,
@@ -368,18 +372,22 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       createAnalyticsEvent && fireScreenEvent(createAnalyticsEvent, _this.fileAttributes);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "fireLocalPreviewErrorEvent", function (error) {// TODO: track local preview success rate
-      // https://product-fabric.atlassian.net/browse/MEX-774
+    _defineProperty(_assertThisInitialized(_this), "fireNonCriticalErrorEvent", function (error) {
+      var createAnalyticsEvent = _this.props.createAnalyticsEvent;
+      var fileState = _this.state.fileState;
+      createAnalyticsEvent && fireNonCriticalErrorEvent(createAnalyticsEvent, _this.state.status, _this.fileAttributes, _this.ssrReliability, error, _this.traceContext, fileState === null || fileState === void 0 ? void 0 : fileState.metadataTraceContext);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "safeSetState", function (state) {
+    _defineProperty(_assertThisInitialized(_this), "safeSetState", function (newState) {
       if (_this.hasBeenMounted) {
-        // If it's setting the status, we need to use a state updater function,
-        // which ensures that no non-final status overrides a final status.
-        // If no status is set, we don't need a sate updater
-        var updater = !!state.status ? createStateUpdater(state) : state;
-
-        _this.setState(updater);
+        /**
+         * createStateUpdater helper returns a callback to be passed to setState.
+         * It decides wether to update the 'status' depending on the current state vs the input state.
+         * From docs: "Both state and props received by the updater function are guaranteed to be up-to-date."
+         * If the input state brings an error and it won't be updating the state, the error will be logged as non-critical inside the helper.
+         * If the error persists int the state, it means it is a critical error and should be logged as a failed event for Card
+         */
+        _this.setState(createStateUpdater(newState, _this.fireNonCriticalErrorEvent));
       }
     });
 
@@ -978,9 +986,10 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     value: function fireOperationalEvent() {
       var _this$state7 = this.state,
           status = _this$state7.status,
-          error = _this$state7.error;
+          error = _this$state7.error,
+          fileState = _this$state7.fileState;
       var createAnalyticsEvent = this.props.createAnalyticsEvent;
-      createAnalyticsEvent && _fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error, this.traceContext);
+      createAnalyticsEvent && _fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error, this.traceContext, fileState === null || fileState === void 0 ? void 0 : fileState.metadataTraceContext);
       completeUfoExperience(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, error);
     }
   }, {

package/dist/esm/card/cardAnalytics.js

@@ -1,8 +1,9 @@
-import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../utils/analytics';
+import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload, getErrorEventPayload } from '../utils/analytics';
 import { MediaCardError } from '../errors';
 export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability) {
   var error = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new MediaCardError('missing-error-data');
   var traceContext = arguments.length > 6 ? arguments[6] : undefined;
+  var metadataTraceContext = arguments.length > 7 ? arguments[7] : undefined;
 
   var fireEvent = function fireEvent(payload) {
     return fireMediaCardEvent(payload, createAnalyticsEvent);
@@ -10,15 +11,15 @@ export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsE
 
   switch (status) {
     case 'complete':
-      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext));
+      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext));
       break;
 
     case 'failed-processing':
-      fireEvent(getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext));
+      fireEvent(getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext));
       break;
 
     case 'error':
-      fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability, traceContext));
+      fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability, traceContext, metadataTraceContext));
       break;
   }
 };
@@ -38,4 +39,11 @@ export var fireCopiedEvent = function fireCopiedEvent(createAnalyticsEvent, file
 };
 export var fireScreenEvent = function fireScreenEvent(createAnalyticsEvent, fileAttributes) {
   fireMediaCardEvent(getRenderPreviewableCardPayload(fileAttributes), createAnalyticsEvent);
+};
+export var fireNonCriticalErrorEvent = function fireNonCriticalErrorEvent(createAnalyticsEvent, cardStatus, fileAttributes, ssrReliability) {
+  var error = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : new MediaCardError('missing-error-data');
+  var traceContext = arguments.length > 5 ? arguments[5] : undefined;
+  var metadataTraceContext = arguments.length > 6 ? arguments[6] : undefined;
+  var errorPayload = getErrorEventPayload(cardStatus, fileAttributes, error, ssrReliability, traceContext, metadataTraceContext);
+  fireMediaCardEvent(errorPayload, createAnalyticsEvent);
 };

package/dist/esm/card/cardLoader.js

@@ -26,7 +26,7 @@ var MediaCardErrorBoundary = Loadable({
   loader: function loader() {
     return import(
     /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
-    '../utils/media-card-analytics-error-boundary').then(function (mod) {
+    './media-card-analytics-error-boundary').then(function (mod) {
       return mod.default;
     });
   },
@@ -52,12 +52,21 @@ var MediaCardWithMediaClient = Loadable({
 
 var CardWithMediaClient = function CardWithMediaClient(props) {
   var withMediaClient = props.withMediaClient,
-      featureFlags = props.featureFlags;
+      dimensions = props.dimensions,
+      featureFlags = props.featureFlags,
+      onClick = props.onClick;
   var memoizedFeatureFlags = useMemoizeFeatureFlags(featureFlags);
   var Card = React.useMemo(function () {
     return withMediaClient(MediaCard, memoizedFeatureFlags);
   }, [withMediaClient, memoizedFeatureFlags]);
-  return /*#__PURE__*/React.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/React.createElement(Card, props));
+  return (
+    /*#__PURE__*/
+    // onClick is passed into MediaCardErrorBoundary so MediaGroup items can get the toolbar menu in Editor
+    React.createElement(MediaCardErrorBoundary, {
+      dimensions: dimensions,
+      onClick: onClick
+    }, /*#__PURE__*/React.createElement(Card, props))
+  );
 };
 
 var CardLoader = function CardLoader(props) {

package/dist/esm/card/cardState.js

@@ -1,22 +1,23 @@
-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; }
-
-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) { _defineProperty(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; }
-
 import { isErrorFileState } from '@atlaskit/media-client';
 import { MediaCardError } from '../errors';
 import { getCardStatus, isFinalCardStatus } from './getCardStatus';
 import { extractFilePreviewStatus } from './getCardPreview';
-export var createStateUpdater = function createStateUpdater(newState) {
+/**
+ * From docs: "Both state and props received by the updater function are guaranteed to be up-to-date.
+ * The output of the updater is shallowly merged with state."
+ */
+
+export var createStateUpdater = function createStateUpdater(newState, fireErrorEvent) {
   return function (prevState) {
-    // Only override if previous status is non-final
-    // or new status is 'complete'
-    if (isFinalCardStatus(prevState.status) && newState.status !== 'complete') {
+    // Only override if previous status is non-final or new status is 'complete'
+    if (!!newState.status && isFinalCardStatus(prevState.status) && newState.status !== 'complete') {
+      // Log the error if the new state is not going to store it.
+      // i.e. this is a non critical error
+      !!newState.error && fireErrorEvent(newState.error);
       return prevState;
     }
 
-    return _objectSpread(_objectSpread({}, prevState), newState);
+    return newState;
   };
 };
 export var getCardStateFromFileState = function getCardStateFromFileState(fileState, isBannedLocalPreview, featureFlags) {

package/dist/esm/card/media-card-analytics-error-boundary.js

@@ -0,0 +1,115 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+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; }
+
+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) { _defineProperty(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; }
+
+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 { withMediaAnalyticsContext } from '@atlaskit/media-common';
+import { UnhandledErrorCard } from './ui/unhandledErrorCard';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { fireMediaCardEvent } from '../utils/analytics';
+
+var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(WrappedMediaCardAnalyticsErrorBoundary, _React$Component);
+
+  var _super = _createSuper(WrappedMediaCardAnalyticsErrorBoundary);
+
+  function WrappedMediaCardAnalyticsErrorBoundary(props) {
+    var _this;
+
+    _classCallCheck(this, WrappedMediaCardAnalyticsErrorBoundary);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "fireOperationalEvent", function (error, info) {
+      var _window, _window$navigator;
+
+      var _this$props = _this.props,
+          _this$props$data = _this$props.data,
+          data = _this$props$data === void 0 ? {} : _this$props$data,
+          createAnalyticsEvent = _this$props.createAnalyticsEvent;
+      var payload = {
+        eventType: 'operational',
+        action: 'failed',
+        actionSubject: 'mediaCardRender',
+        attributes: _objectSpread({
+          browserInfo: (_window = window) !== null && _window !== void 0 && (_window$navigator = _window.navigator) !== null && _window$navigator !== void 0 && _window$navigator.userAgent ? window.navigator.userAgent : 'unknown',
+          error: error,
+          info: info,
+          failReason: 'unexpected-error'
+        }, data)
+      };
+      fireMediaCardEvent(payload, createAnalyticsEvent);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOnClick", function (event) {
+      try {
+        var _this$props$onClick, _this$props2;
+
+        (_this$props$onClick = (_this$props2 = _this.props).onClick) === null || _this$props$onClick === void 0 ? void 0 : _this$props$onClick.call(_this$props2, {
+          event: event
+        });
+      } catch (e) {}
+    });
+
+    _this.state = {
+      hasError: false
+    };
+    return _this;
+  }
+
+  _createClass(WrappedMediaCardAnalyticsErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, info) {
+      try {
+        this.fireOperationalEvent(error, info);
+      } catch (e) {}
+
+      this.setState({
+        hasError: true
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var hasError = this.state.hasError;
+      var _this$props3 = this.props,
+          dimensions = _this$props3.dimensions,
+          children = _this$props3.children;
+
+      if (hasError) {
+        return /*#__PURE__*/React.createElement(UnhandledErrorCard, {
+          dimensions: dimensions,
+          onClick: this.handleOnClick
+        });
+      }
+
+      return children;
+    }
+  }]);
+
+  return WrappedMediaCardAnalyticsErrorBoundary;
+}(React.Component);
+
+_defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
+
+var packageName = "@atlaskit/media-card";
+var packageVersion = "74.4.0";
+var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
+  packageVersion: packageVersion,
+  packageName: packageName,
+  componentName: 'mediaCard',
+  component: 'mediaCard'
+})(withAnalyticsEvents()(WrappedMediaCardAnalyticsErrorBoundary));
+export default MediaCardAnalyticsErrorBoundary;

package/dist/esm/card/ui/unhandledErrorCard/index.js

@@ -0,0 +1,94 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+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; } }
+
+/** @jsx jsx */
+import { Component } from 'react';
+import { css, jsx } from '@emotion/react';
+import { token } from '@atlaskit/tokens';
+import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
+import { N20, N800, Y500 } from '@atlaskit/theme/colors';
+import { fontSize } from '@atlaskit/theme/constants';
+import { center, borderRadius } from '@atlaskit/media-ui';
+import { defaultImageCardDimensions } from '../../../utils';
+
+var isPercentage = function isPercentage(value) {
+  return /^\d+(\.\d+)?%$/.test(value);
+};
+
+var shouldShowText = function shouldShowText(_ref) {
+  var width = _ref.width,
+      height = _ref.height;
+
+  if (isPercentage(width) || isPercentage(height)) {
+    return false;
+  }
+
+  return parseInt(width, 10) >= 240 && parseInt(height, 10) >= 90;
+};
+
+var normalizeDimension = function normalizeDimension(value, defaultValue) {
+  var sValue = value.toString();
+  return isPercentage(sValue) ? sValue : isNaN(parseInt(sValue, 10)) ? defaultValue + 'px' : parseInt(sValue, 10) + 'px';
+};
+
+var getConvertedDimension = function getConvertedDimension(dimensions) {
+  var _dimensions$width = dimensions.width,
+      width = _dimensions$width === void 0 ? defaultImageCardDimensions.width : _dimensions$width,
+      _dimensions$height = dimensions.height,
+      height = _dimensions$height === void 0 ? defaultImageCardDimensions.height : _dimensions$height;
+  return {
+    width: normalizeDimension(width, defaultImageCardDimensions.width),
+    height: normalizeDimension(height, defaultImageCardDimensions.height)
+  };
+};
+
+var wrapperStyles = function wrapperStyles() {
+  var dimensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultImageCardDimensions;
+
+  try {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      ", ";\n      ", ";\n      background: ", ";\n      color: ", ";\n      max-height: 100%;\n      max-width: 100%;\n      ", ";\n      display: flex;\n      flex-direction: column;\n\n      p {\n        font-size: ", "px;\n        text-align: center;\n        display: ", ";\n      }\n    "])), center, borderRadius, token('color.background.neutral', N20), token('color.text.subtle', N800), getConvertedDimension(dimensions), fontSize(), shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none');
+  } catch (e) {
+    return null;
+  }
+};
+
+export var UnhandledErrorCard = /*#__PURE__*/function (_Component) {
+  _inherits(UnhandledErrorCard, _Component);
+
+  var _super = _createSuper(UnhandledErrorCard);
+
+  function UnhandledErrorCard() {
+    _classCallCheck(this, UnhandledErrorCard);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(UnhandledErrorCard, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          dimensions = _this$props.dimensions,
+          onClick = _this$props.onClick;
+      return jsx("div", {
+        css: wrapperStyles(dimensions),
+        onClick: onClick
+      }, jsx(WarningIcon, {
+        label: "Error",
+        primaryColor: token('color.icon.warning', Y500),
+        size: "medium"
+      }), jsx("p", null, "We couldn't load this content"));
+    }
+  }]);
+
+  return UnhandledErrorCard;
+}(Component);