@atlaskit/media-card 74.3.2 → 74.4.0

package/dist/cjs/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _mediaCommon = require("@atlaskit/media-common");
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _analytics = require("../utils/analytics");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+
+var WrappedMediaInlineAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(WrappedMediaInlineAnalyticsErrorBoundary, _React$Component);
+
+  var _super = _createSuper(WrappedMediaInlineAnalyticsErrorBoundary);
+
+  function WrappedMediaInlineAnalyticsErrorBoundary(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, WrappedMediaInlineAnalyticsErrorBoundary);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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: 'mediaInlineRender',
+        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,
+          failReason: 'unexpected-error',
+          info: info
+        }, data)
+      };
+      (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);
+    });
+    _this.state = {
+      hasError: false
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(WrappedMediaInlineAnalyticsErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, info) {
+      try {
+        this.fireOperationalEvent(error, info);
+        this.setState({
+          hasError: true
+        });
+      } catch (e) {}
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var hasError = this.state.hasError;
+      var children = this.props.children;
+
+      if (hasError) {
+        // TODO refactor error boundary for inline card https://product-fabric.atlassian.net/browse/MEX-2140
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+      }
+
+      return children;
+    }
+  }]);
+  return WrappedMediaInlineAnalyticsErrorBoundary;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(WrappedMediaInlineAnalyticsErrorBoundary, "displayName", 'MediaInlineAnalyticsErrorBoundary');
+var packageName = "@atlaskit/media-card";
+var packageVersion = "74.4.0";
+var MediaInlineAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
+  packageVersion: packageVersion,
+  packageName: packageName,
+  componentName: 'mediaInlineCard',
+  component: 'mediaInlineCard'
+})((0, _analyticsNext.withAnalyticsEvents)()(WrappedMediaInlineAnalyticsErrorBoundary));
+var _default = MediaInlineAnalyticsErrorBoundary;
+exports.default = _default;

package/dist/cjs/utils/analytics.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.extractErrorInfo = exports.createAndFireMediaCardEvent = exports.LOGGED_FEATURE_FLAG_KEYS = exports.LOGGED_FEATURE_FLAGS = void 0;
 exports.fireMediaCardEvent = fireMediaCardEvent;
-exports.getRenderSucceededEventPayload = exports.getRenderPreviewableCardPayload = exports.getRenderFailedFileStatusPayload = exports.getRenderFailedExternalUriPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorFailReason = exports.getRenderErrorEventPayload = exports.getRenderErrorErrorReason = exports.getRenderErrorErrorDetail = exports.getRenderCommencedEventPayload = exports.getRemoteSuccessEventPayload = exports.getFileAttributes = exports.getCopiedFilePayload = exports.getCacheHitEventPayload = void 0;
+exports.getRenderSucceededEventPayload = exports.getRenderPreviewableCardPayload = exports.getRenderFailedFileStatusPayload = exports.getRenderFailedExternalUriPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorFailReason = exports.getRenderErrorEventPayload = exports.getRenderErrorErrorReason = exports.getRenderErrorErrorDetail = exports.getRenderCommencedEventPayload = exports.getRemoteSuccessEventPayload = exports.getFileAttributes = exports.getErrorTraceContext = exports.getErrorEventPayload = exports.getCopiedFilePayload = exports.getCacheHitEventPayload = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -30,7 +30,6 @@ var relevantFlags = {
   observedWidth: true,
   mediaInline: false,
   folderUploads: false,
-  mediaUploadApiV2: true,
   memoryCacheLogging: true
 };
 var LOGGED_FEATURE_FLAGS = (0, _mediaCommon.filterFeatureFlagNames)(relevantFlags);
@@ -82,7 +81,7 @@ var getRenderCommencedEventPayload = function getRenderCommencedEventPayload(fil
 
 exports.getRenderCommencedEventPayload = getRenderCommencedEventPayload;
 
-var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext) {
+var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext) {
   return {
     eventType: 'operational',
     action: 'succeeded',
@@ -92,7 +91,8 @@ var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fil
       performanceAttributes: performanceAttributes,
       status: 'success',
       ssrReliability: ssrReliability,
-      traceContext: traceContext
+      traceContext: traceContext,
+      metadataTraceContext: metadataTraceContext
     }
   };
 };
@@ -175,6 +175,16 @@ var getRenderErrorErrorDetail = function getRenderErrorErrorDetail(error) {
 
 exports.getRenderErrorErrorDetail = getRenderErrorErrorDetail;
 
+var getErrorTraceContext = function getErrorTraceContext(error) {
+  if ((0, _errors.isMediaCardError)(error) && !!error.secondaryError && (0, _mediaClient.isRequestError)(error.secondaryError)) {
+    var _error$secondaryError;
+
+    return (_error$secondaryError = error.secondaryError.metadata) === null || _error$secondaryError === void 0 ? void 0 : _error$secondaryError.traceContext;
+  }
+};
+
+exports.getErrorTraceContext = getErrorTraceContext;
+
 var getRenderErrorRequestMetadata = function getRenderErrorRequestMetadata(error) {
   if ((0, _errors.isMediaCardError)(error) && !!error.secondaryError && (0, _mediaClient.isRequestError)(error.secondaryError)) {
     return error.secondaryError.metadata;
@@ -183,17 +193,18 @@ var getRenderErrorRequestMetadata = function getRenderErrorRequestMetadata(error
 
 exports.getRenderErrorRequestMetadata = getRenderErrorRequestMetadata;
 
-var extractErrorInfo = function extractErrorInfo(error) {
+var extractErrorInfo = function 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)
   };
 };
 
 exports.extractErrorInfo = extractErrorInfo;
 
-var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability, traceContext) {
+var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability, traceContext, metadataTraceContext) {
   return {
     eventType: 'operational',
     action: 'failed',
@@ -202,7 +213,7 @@ var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttribu
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
       status: 'fail'
-    }, extractErrorInfo(error)), {}, {
+    }, extractErrorInfo(error, metadataTraceContext)), {}, {
       request: getRenderErrorRequestMetadata(error),
       ssrReliability: ssrReliability,
       traceContext: traceContext
@@ -212,7 +223,26 @@ var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttribu
 
 exports.getRenderErrorEventPayload = getRenderErrorEventPayload;
 
-var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext) {
+var getErrorEventPayload = function getErrorEventPayload(cardStatus, fileAttributes, error, ssrReliability, traceContext, metadataTraceContext) {
+  return {
+    eventType: 'operational',
+    action: 'nonCriticalFail',
+    actionSubject: 'mediaCardRender',
+    attributes: _objectSpread(_objectSpread({
+      fileAttributes: fileAttributes,
+      status: 'fail'
+    }, extractErrorInfo(error, metadataTraceContext)), {}, {
+      request: getRenderErrorRequestMetadata(error),
+      ssrReliability: ssrReliability,
+      traceContext: traceContext,
+      cardStatus: cardStatus
+    })
+  };
+};
+
+exports.getErrorEventPayload = getErrorEventPayload;
+
+var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext) {
   return {
     eventType: 'operational',
     action: 'failed',
@@ -223,7 +253,8 @@ var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload
       status: 'fail',
       failReason: 'failed-processing',
       ssrReliability: ssrReliability,
-      traceContext: traceContext
+      traceContext: traceContext,
+      metadataTraceContext: metadataTraceContext
     }
   };
 };

package/dist/cjs/utils/ufoExperiences.js

@@ -22,7 +22,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.3.2";
+var packageVersion = "74.4.0";
 var concurrentExperience;
 
 var getExperience = function getExperience(id) {

package/dist/cjs/version.json

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

package/dist/es2019/card/card.js

@@ -16,7 +16,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, fireCommencedEvent, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
+import { fireOperationalEvent, fireCommencedEvent, fireCopiedEvent, fireScreenEvent, fireNonCriticalErrorEvent } from './cardAnalytics';
 import getDocument from '../utils/document';
 import { StoreSSRDataScript, getSSRData } from '../utils/globalScope';
 import { getCardStateFromFileState, createStateUpdater } from './cardState';
@@ -26,7 +26,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "74.3.2";
+const packageVersion = "74.4.0";
 export class CardBase extends Component {
   // An internalOccurrenceKey is a randomly generated value to differentiate various instances
   // of Cards regardless of whether it shares the same file (either internal or external)
@@ -57,7 +57,7 @@ export class CardBase extends Component {
     _defineProperty(this, "timeElapsedTillCommenced", performance.now());
 
     _defineProperty(this, "traceContext", {
-      traceId: getRandomHex(16)
+      traceId: getRandomHex(8)
     });
 
     _defineProperty(this, "getImageURLParams", ({
@@ -112,7 +112,7 @@ export class CardBase extends Component {
         mediaClient,
         id,
         dimensions,
-        onLocalPreviewError: this.fireLocalPreviewErrorEvent,
+        onLocalPreviewError: this.fireNonCriticalErrorEvent,
         filePreview: isBannedLocalPreview ? undefined : getFilePreviewFromFileState(fileState),
         isRemotePreviewReady: isImageRepresentationReady(fileState),
         imageUrlParams: this.getImageURLParams(identifier),
@@ -146,8 +146,9 @@ export class CardBase extends Component {
         this.safeSetState({
           cardPreview
         });
-      } catch (e) {// No need to log this error.
-        // If preview fails, it will be refetched later
+      } catch (e) {
+        const wrappedError = ensureMediaCardError('remote-preview-fetch-ssr', e, true);
+        this.fireNonCriticalErrorEvent(wrappedError);
       }
     });
 
@@ -165,6 +166,7 @@ export class CardBase extends 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
           });
@@ -234,7 +236,7 @@ export class CardBase extends Component {
 
         if (isLocal) {
           updateState.isBannedLocalPreview = true;
-          this.fireLocalPreviewErrorEvent(error);
+          this.fireNonCriticalErrorEvent(error);
         }
 
         const {
@@ -304,17 +306,26 @@ export class CardBase extends Component {
       createAnalyticsEvent && fireScreenEvent(createAnalyticsEvent, this.fileAttributes);
     });
 
-    _defineProperty(this, "fireLocalPreviewErrorEvent", error => {// TODO: track local preview success rate
-      // https://product-fabric.atlassian.net/browse/MEX-774
+    _defineProperty(this, "fireNonCriticalErrorEvent", error => {
+      const {
+        createAnalyticsEvent
+      } = this.props;
+      const {
+        fileState
+      } = this.state;
+      createAnalyticsEvent && fireNonCriticalErrorEvent(createAnalyticsEvent, this.state.status, this.fileAttributes, this.ssrReliability, error, this.traceContext, fileState === null || fileState === void 0 ? void 0 : fileState.metadataTraceContext);
     });
 
-    _defineProperty(this, "safeSetState", state => {
+    _defineProperty(this, "safeSetState", 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
-        const 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));
       }
     });
 
@@ -939,12 +950,13 @@ export class CardBase extends Component {
   fireOperationalEvent() {
     const {
       status,
-      error
+      error,
+      fileState
     } = this.state;
     const {
       createAnalyticsEvent
     } = this.props;
-    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/es2019/card/cardAnalytics.js

@@ -1,19 +1,19 @@
-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 const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error = new MediaCardError('missing-error-data'), traceContext) => {
+export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error = new MediaCardError('missing-error-data'), traceContext, metadataTraceContext) => {
   const fireEvent = payload => fireMediaCardEvent(payload, createAnalyticsEvent);
 
   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;
   }
 };
@@ -33,4 +33,8 @@ export const fireCopiedEvent = (createAnalyticsEvent, fileId, cardRef) => {
 };
 export const fireScreenEvent = (createAnalyticsEvent, fileAttributes) => {
   fireMediaCardEvent(getRenderPreviewableCardPayload(fileAttributes), createAnalyticsEvent);
+};
+export const fireNonCriticalErrorEvent = (createAnalyticsEvent, cardStatus, fileAttributes, ssrReliability, error = new MediaCardError('missing-error-data'), traceContext, metadataTraceContext) => {
+  const errorPayload = getErrorEventPayload(cardStatus, fileAttributes, error, ssrReliability, traceContext, metadataTraceContext);
+  fireMediaCardEvent(errorPayload, createAnalyticsEvent);
 };

package/dist/es2019/card/cardLoader.js

@@ -19,7 +19,7 @@ const MediaCard = Loadable({
 const MediaCardErrorBoundary = Loadable({
   loader: () => import(
   /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
-  '../utils/media-card-analytics-error-boundary').then(mod => mod.default),
+  './media-card-analytics-error-boundary').then(mod => mod.default),
   loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null)
 });
 const MediaCardWithMediaClient = Loadable({
@@ -35,13 +35,22 @@ const MediaCardWithMediaClient = Loadable({
 const CardWithMediaClient = props => {
   const {
     withMediaClient,
-    featureFlags
+    dimensions,
+    featureFlags,
+    onClick
   } = props;
   const memoizedFeatureFlags = useMemoizeFeatureFlags(featureFlags);
   const Card = React.useMemo(() => {
     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))
+  );
 };
 
 const CardLoader = props => {

package/dist/es2019/card/cardState.js

@@ -2,16 +2,21 @@ import { isErrorFileState } from '@atlaskit/media-client';
 import { MediaCardError } from '../errors';
 import { getCardStatus, isFinalCardStatus } from './getCardStatus';
 import { extractFilePreviewStatus } from './getCardPreview';
-export const createStateUpdater = newState => prevState => {
-  // Only override if previous status is non-final
-  // or new status is 'complete'
-  if (isFinalCardStatus(prevState.status) && newState.status !== 'complete') {
+/**
+ * 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 const createStateUpdater = (newState, fireErrorEvent) => prevState => {
+  // 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 { ...prevState,
-    ...newState
-  };
+  return newState;
 };
 export const getCardStateFromFileState = (fileState, isBannedLocalPreview, featureFlags) => {
   const status = getCardStatus(fileState.status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags));

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

@@ -0,0 +1,90 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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';
+
+class WrappedMediaCardAnalyticsErrorBoundary 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: 'mediaCardRender',
+        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,
+          info,
+          failReason: 'unexpected-error',
+          ...data
+        }
+      };
+      fireMediaCardEvent(payload, createAnalyticsEvent);
+    });
+
+    _defineProperty(this, "handleOnClick", event => {
+      try {
+        var _this$props$onClick, _this$props;
+
+        (_this$props$onClick = (_this$props = this.props).onClick) === null || _this$props$onClick === void 0 ? void 0 : _this$props$onClick.call(_this$props, {
+          event
+        });
+      } catch (e) {}
+    });
+
+    this.state = {
+      hasError: false
+    };
+  }
+
+  componentDidCatch(error, info) {
+    try {
+      this.fireOperationalEvent(error, info);
+    } catch (e) {}
+
+    this.setState({
+      hasError: true
+    });
+  }
+
+  render() {
+    const {
+      hasError
+    } = this.state;
+    const {
+      dimensions,
+      children
+    } = this.props;
+
+    if (hasError) {
+      return /*#__PURE__*/React.createElement(UnhandledErrorCard, {
+        dimensions: dimensions,
+        onClick: this.handleOnClick
+      });
+    }
+
+    return children;
+  }
+
+}
+
+_defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
+
+const packageName = "@atlaskit/media-card";
+const packageVersion = "74.4.0";
+const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
+  packageVersion,
+  packageName,
+  componentName: 'mediaCard',
+  component: 'mediaCard'
+})(withAnalyticsEvents()(WrappedMediaCardAnalyticsErrorBoundary));
+export default MediaCardAnalyticsErrorBoundary;

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

@@ -0,0 +1,80 @@
+/** @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';
+
+const isPercentage = value => /^\d+(\.\d+)?%$/.test(value);
+
+const shouldShowText = ({
+  width,
+  height
+}) => {
+  if (isPercentage(width) || isPercentage(height)) {
+    return false;
+  }
+
+  return parseInt(width, 10) >= 240 && parseInt(height, 10) >= 90;
+};
+
+const normalizeDimension = (value, defaultValue) => {
+  const sValue = value.toString();
+  return isPercentage(sValue) ? sValue : isNaN(parseInt(sValue, 10)) ? defaultValue + 'px' : parseInt(sValue, 10) + 'px';
+};
+
+const getConvertedDimension = dimensions => {
+  const {
+    width = defaultImageCardDimensions.width,
+    height = defaultImageCardDimensions.height
+  } = dimensions;
+  return {
+    width: normalizeDimension(width, defaultImageCardDimensions.width),
+    height: normalizeDimension(height, defaultImageCardDimensions.height)
+  };
+};
+
+const wrapperStyles = (dimensions = defaultImageCardDimensions) => {
+  try {
+    return css`
+      ${center};
+      ${borderRadius};
+      background: ${token('color.background.neutral', N20)};
+      color: ${token('color.text.subtle', N800)};
+      max-height: 100%;
+      max-width: 100%;
+      ${getConvertedDimension(dimensions)};
+      display: flex;
+      flex-direction: column;
+
+      p {
+        font-size: ${fontSize()}px;
+        text-align: center;
+        display: ${shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none'};
+      }
+    `;
+  } catch (e) {
+    return null;
+  }
+};
+
+export class UnhandledErrorCard extends Component {
+  render() {
+    const {
+      dimensions,
+      onClick
+    } = this.props;
+    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"));
+  }
+
+}

package/dist/es2019/card/ui/unhandledErrorCard/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/errors.js

@@ -76,8 +76,19 @@ export const isRemotePreviewError = err => err instanceof RemotePreviewError;
 export const isUnsupportedLocalPreviewError = err => isMediaCardError(err) && err.primaryReason === 'local-preview-unsupported';
 export function isImageLoadError(err) {
   return err instanceof ImageLoadError;
-} // In a try/catch statement, the error caught is the type of any.
+} // In a try/catch statement, the error caught is the type of unknown.
 // We can use this helper to ensure that the error handled is the type of MediaCardError if unsure
+// If updatePrimaryReason is true, if it's a MediaCardError already, it will update it's primary reason
 
-export const ensureMediaCardError = (primaryReason, error) => isMediaCardError(error) ? error : new MediaCardError(primaryReason, error);
+export const ensureMediaCardError = (primaryReason, error, updatePrimaryReason) => {
+  if (isMediaCardError(error)) {
+    if (updatePrimaryReason && error.primaryReason !== primaryReason) {
+      return new MediaCardError(primaryReason, error.secondaryError);
+    }
+
+    return error;
+  }
+
+  return new MediaCardError(primaryReason, error);
+};
 export const isUploadError = error => error && error.primaryReason === 'upload';