@atlaskit/media-card 74.3.2 → 74.4.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/media-card
 
+## 74.4.0
+
+### Minor Changes
+
+- [`81573c1dfa7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/81573c1dfa7) - Media Card logs metadata trace Id
+- [`0bccac57db6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0bccac57db6) - remove mediaUploadApiV2 Feature flag
+
+### Patch Changes
+
+- [`5f36954436c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f36954436c) - Ensure all secondary errors from backend responses are logged in media card
+- [`2b5f5a740d3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2b5f5a740d3) - [ux] catch unexpected error in media card error boundary with a fallback error component and fire analytics event
+- [`8b373447406`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8b373447406) - Updated names for Media card examples and updated their references.
+- [`f36a3d972cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f36a3d972cf) - Updated Media-Card documentation with new tab structure and simpler usage example
+- [`3d40d5e9b37`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3d40d5e9b37) - Adopt updated version of getRandomHex function for generating traceId
+- Updated dependencies
+
 ## 74.3.2
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -90,7 +90,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.3.2";
+var packageVersion = "74.4.0";
 
 var CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
@@ -123,7 +123,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "timeElapsedTillCommenced", performance.now());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "traceContext", {
-      traceId: (0, _mediaCommon.getRandomHex)(16)
+      traceId: (0, _mediaCommon.getRandomHex)(8)
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getImageURLParams", function (_ref) {
       var collection = _ref.collectionName;
@@ -170,7 +170,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
         mediaClient: mediaClient,
         id: id,
         dimensions: dimensions,
-        onLocalPreviewError: _this.fireLocalPreviewErrorEvent,
+        onLocalPreviewError: _this.fireNonCriticalErrorEvent,
         filePreview: isBannedLocalPreview ? undefined : (0, _getCardPreview.getFilePreviewFromFileState)(fileState),
         isRemotePreviewReady: (0, _mediaClient2.isImageRepresentationReady)(fileState),
         imageUrlParams: _this.getImageURLParams(identifier),
@@ -193,7 +193,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "refetchSSRPreview", /*#__PURE__*/function () {
       var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(identifier) {
-        var _this$props4, mediaClient, _this$props4$dimensio, dimensions, cardPreview;
+        var _this$props4, mediaClient, _this$props4$dimensio, dimensions, cardPreview, wrappedError;
 
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) {
@@ -211,14 +211,17 @@ 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 = (0, _errors.ensureMediaCardError)('remote-preview-fetch-ssr', _context.t0, true);
 
-              case 10:
+                _this.fireNonCriticalErrorEvent(wrappedError);
+
+              case 12:
               case "end":
                 return _context.stop();
             }
@@ -261,6 +264,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
                 //  If it's any other error we set status 'error'
 
                 if ((0, _errors.isLocalPreviewError)(wrappedError)) {
+                  // This error should already been logged inside the getCardPreview. No need to log it here.
                   _this.safeSetState({
                     isBannedLocalPreview: true
                   });
@@ -337,7 +341,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
         if (isLocal) {
           updateState.isBannedLocalPreview = true;
 
-          _this.fireLocalPreviewErrorEvent(error);
+          _this.fireNonCriticalErrorEvent(error);
         }
 
         var _this$props5 = _this.props,
@@ -395,17 +399,21 @@ var CardBase = /*#__PURE__*/function (_Component) {
       var createAnalyticsEvent = _this.props.createAnalyticsEvent;
       createAnalyticsEvent && (0, _cardAnalytics.fireScreenEvent)(createAnalyticsEvent, _this.fileAttributes);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireLocalPreviewErrorEvent", function (error) {// TODO: track local preview success rate
-      // https://product-fabric.atlassian.net/browse/MEX-774
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireNonCriticalErrorEvent", function (error) {
+      var createAnalyticsEvent = _this.props.createAnalyticsEvent;
+      var fileState = _this.state.fileState;
+      createAnalyticsEvent && (0, _cardAnalytics.fireNonCriticalErrorEvent)(createAnalyticsEvent, _this.state.status, _this.fileAttributes, _this.ssrReliability, error, _this.traceContext, fileState === null || fileState === void 0 ? void 0 : fileState.metadataTraceContext);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "safeSetState", function (state) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 ? (0, _cardState.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((0, _cardState.createStateUpdater)(newState, _this.fireNonCriticalErrorEvent));
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unsubscribe", function () {
@@ -992,9 +1000,10 @@ 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 && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error, this.traceContext);
+      createAnalyticsEvent && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error, this.traceContext, fileState === null || fileState === void 0 ? void 0 : fileState.metadataTraceContext);
       (0, _ufoExperiences.completeUfoExperience)(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, error);
     }
   }, {

package/dist/cjs/card/cardAnalytics.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fireScreenEvent = exports.fireOperationalEvent = exports.fireCopiedEvent = exports.fireCommencedEvent = void 0;
+exports.fireScreenEvent = exports.fireOperationalEvent = exports.fireNonCriticalErrorEvent = exports.fireCopiedEvent = exports.fireCommencedEvent = void 0;
 
 var _analytics = require("../utils/analytics");
 
@@ -12,6 +12,7 @@ var _errors = require("../errors");
 var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability) {
   var error = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new _errors.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 (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);
@@ -19,15 +20,15 @@ var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, s
 
   switch (status) {
     case 'complete':
-      fireEvent((0, _analytics.getRenderSucceededEventPayload)(fileAttributes, performanceAttributes, ssrReliability, traceContext));
+      fireEvent((0, _analytics.getRenderSucceededEventPayload)(fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext));
       break;
 
     case 'failed-processing':
-      fireEvent((0, _analytics.getRenderFailedFileStatusPayload)(fileAttributes, performanceAttributes, ssrReliability, traceContext));
+      fireEvent((0, _analytics.getRenderFailedFileStatusPayload)(fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext));
       break;
 
     case 'error':
-      fireEvent((0, _analytics.getRenderErrorEventPayload)(fileAttributes, performanceAttributes, error, ssrReliability, traceContext));
+      fireEvent((0, _analytics.getRenderErrorEventPayload)(fileAttributes, performanceAttributes, error, ssrReliability, traceContext, metadataTraceContext));
       break;
   }
 };
@@ -58,4 +59,14 @@ var fireScreenEvent = function fireScreenEvent(createAnalyticsEvent, fileAttribu
   (0, _analytics.fireMediaCardEvent)((0, _analytics.getRenderPreviewableCardPayload)(fileAttributes), createAnalyticsEvent);
 };
 
-exports.fireScreenEvent = fireScreenEvent;
+exports.fireScreenEvent = fireScreenEvent;
+
+var fireNonCriticalErrorEvent = function fireNonCriticalErrorEvent(createAnalyticsEvent, cardStatus, fileAttributes, ssrReliability) {
+  var error = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : new _errors.MediaCardError('missing-error-data');
+  var traceContext = arguments.length > 5 ? arguments[5] : undefined;
+  var metadataTraceContext = arguments.length > 6 ? arguments[6] : undefined;
+  var errorPayload = (0, _analytics.getErrorEventPayload)(cardStatus, fileAttributes, error, ssrReliability, traceContext, metadataTraceContext);
+  (0, _analytics.fireMediaCardEvent)(errorPayload, createAnalyticsEvent);
+};
+
+exports.fireNonCriticalErrorEvent = fireNonCriticalErrorEvent;

package/dist/cjs/card/cardLoader.js

@@ -45,7 +45,7 @@ var MediaCard = (0, _reactLoadable.default)({
 var MediaCardErrorBoundary = (0, _reactLoadable.default)({
   loader: function loader() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../utils/media-card-analytics-error-boundary'));
+      return _interopRequireWildcard(require('./media-card-analytics-error-boundary'));
     }).then(function (mod) {
       return mod.default;
     });
@@ -72,14 +72,23 @@ var MediaCardWithMediaClient = (0, _reactLoadable.default)({
 
 var CardWithMediaClient = function CardWithMediaClient(props) {
   var withMediaClient = props.withMediaClient,
-      featureFlags = props.featureFlags;
+      dimensions = props.dimensions,
+      featureFlags = props.featureFlags,
+      onClick = props.onClick;
   var memoizedFeatureFlags = (0, _mediaCommon.useMemoizeFeatureFlags)(featureFlags);
 
   var Card = _react.default.useMemo(function () {
     return withMediaClient(MediaCard, memoizedFeatureFlags);
   }, [withMediaClient, memoizedFeatureFlags]);
 
-  return /*#__PURE__*/_react.default.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/_react.default.createElement(Card, props));
+  return (
+    /*#__PURE__*/
+    // onClick is passed into MediaCardErrorBoundary so MediaGroup items can get the toolbar menu in Editor
+    _react.default.createElement(MediaCardErrorBoundary, {
+      dimensions: dimensions,
+      onClick: onClick
+    }, /*#__PURE__*/_react.default.createElement(Card, props))
+  );
 };
 
 var CardLoader = function CardLoader(props) {

package/dist/cjs/card/cardState.js

@@ -1,14 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getCardStateFromFileState = exports.createStateUpdater = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _mediaClient = require("@atlaskit/media-client");
 
 var _errors = require("../errors");
@@ -17,19 +13,21 @@ var _getCardStatus = require("./getCardStatus");
 
 var _getCardPreview = require("./getCardPreview");
 
-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; }
-
-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."
+ */
+var createStateUpdater = function createStateUpdater(newState, fireErrorEvent) {
   return function (prevState) {
-    // Only override if previous status is non-final
-    // or new status is 'complete'
-    if ((0, _getCardStatus.isFinalCardStatus)(prevState.status) && newState.status !== 'complete') {
+    // Only override if previous status is non-final or new status is 'complete'
+    if (!!newState.status && (0, _getCardStatus.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;
   };
 };
 

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

@@ -0,0 +1,129 @@
+"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 _unhandledErrorCard = require("./ui/unhandledErrorCard");
+
+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 WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(WrappedMediaCardAnalyticsErrorBoundary, _React$Component);
+
+  var _super = _createSuper(WrappedMediaCardAnalyticsErrorBoundary);
+
+  function WrappedMediaCardAnalyticsErrorBoundary(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, WrappedMediaCardAnalyticsErrorBoundary);
+    _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: '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)
+      };
+      (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
+  }
+
+  (0, _createClass2.default)(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.default.createElement(_unhandledErrorCard.UnhandledErrorCard, {
+          dimensions: dimensions,
+          onClick: this.handleOnClick
+        });
+      }
+
+      return children;
+    }
+  }]);
+  return WrappedMediaCardAnalyticsErrorBoundary;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
+var packageName = "@atlaskit/media-card";
+var packageVersion = "74.4.0";
+var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
+  packageVersion: packageVersion,
+  packageName: packageName,
+  componentName: 'mediaCard',
+  component: 'mediaCard'
+})((0, _analyticsNext.withAnalyticsEvents)()(WrappedMediaCardAnalyticsErrorBoundary));
+var _default = MediaCardAnalyticsErrorBoundary;
+exports.default = _default;

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

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UnhandledErrorCard = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warning"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _mediaUi = require("@atlaskit/media-ui");
+
+var _utils = require("../../../utils");
+
+var _templateObject;
+
+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 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 ? _utils.defaultImageCardDimensions.width : _dimensions$width,
+      _dimensions$height = dimensions.height,
+      height = _dimensions$height === void 0 ? _utils.defaultImageCardDimensions.height : _dimensions$height;
+  return {
+    width: normalizeDimension(width, _utils.defaultImageCardDimensions.width),
+    height: normalizeDimension(height, _utils.defaultImageCardDimensions.height)
+  };
+};
+
+var wrapperStyles = function wrapperStyles() {
+  var dimensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _utils.defaultImageCardDimensions;
+
+  try {
+    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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    "])), _mediaUi.center, _mediaUi.borderRadius, (0, _tokens.token)('color.background.neutral', _colors.N20), (0, _tokens.token)('color.text.subtle', _colors.N800), getConvertedDimension(dimensions), (0, _constants.fontSize)(), shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none');
+  } catch (e) {
+    return null;
+  }
+};
+
+var UnhandledErrorCard = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(UnhandledErrorCard, _Component);
+
+  var _super = _createSuper(UnhandledErrorCard);
+
+  function UnhandledErrorCard() {
+    (0, _classCallCheck2.default)(this, UnhandledErrorCard);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(UnhandledErrorCard, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          dimensions = _this$props.dimensions,
+          onClick = _this$props.onClick;
+      return (0, _react2.jsx)("div", {
+        css: wrapperStyles(dimensions),
+        onClick: onClick
+      }, (0, _react2.jsx)(_warning.default, {
+        label: "Error",
+        primaryColor: (0, _tokens.token)('color.icon.warning', _colors.Y500),
+        size: "medium"
+      }), (0, _react2.jsx)("p", null, "We couldn't load this content"));
+    }
+  }]);
+  return UnhandledErrorCard;
+}(_react.Component);
+
+exports.UnhandledErrorCard = UnhandledErrorCard;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/errors.js

@@ -184,12 +184,21 @@ exports.isUnsupportedLocalPreviewError = isUnsupportedLocalPreviewError;
 
 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
 
 
-var ensureMediaCardError = function ensureMediaCardError(primaryReason, error) {
-  return isMediaCardError(error) ? error : new MediaCardError(primaryReason, error);
+var ensureMediaCardError = function 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);
 };
 
 exports.ensureMediaCardError = ensureMediaCardError;

package/dist/cjs/inline/loader.js

@@ -68,7 +68,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var _yield$Promise$all, _yield$Promise$all2, mediaClient, cardModule, mediaCardErrorBoundaryModule;
+        var _yield$Promise$all, _yield$Promise$all2, mediaClient, cardModule, mediaInlineErrorBoundaryModule;
 
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) {
@@ -88,7 +88,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
                 }), Promise.resolve().then(function () {
                   return _interopRequireWildcard(require('./mediaInlineCard'));
                 }), Promise.resolve().then(function () {
-                  return _interopRequireWildcard(require('../utils/media-card-analytics-error-boundary'));
+                  return _interopRequireWildcard(require('./mediaInlineAnalyticsErrorBoundary'));
                 })]);
 
               case 5:
@@ -96,9 +96,9 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
                 _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 3);
                 mediaClient = _yield$Promise$all2[0];
                 cardModule = _yield$Promise$all2[1];
-                mediaCardErrorBoundaryModule = _yield$Promise$all2[2];
+                mediaInlineErrorBoundaryModule = _yield$Promise$all2[2];
                 MediaInlineCardLoader.MediaInlineCard = mediaClient.withMediaClient(cardModule.MediaInlineCard);
-                MediaInlineCardLoader.ErrorBoundary = mediaCardErrorBoundaryModule.default;
+                MediaInlineCardLoader.ErrorBoundary = mediaInlineErrorBoundaryModule.default;
 
                 if (this.isMounted) {
                   this.setState({