@atlaskit/media-card 77.12.2 → 77.12.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/media-card
 
+## 77.12.3
+
+### Patch Changes
+
+- [`cd38da52e02b7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cd38da52e02b7) -
+  Media Card handles SVG errors and logs extra info for monitoring
+
 ## 77.12.2
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -50,7 +50,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.12.2";
+var packageVersion = "77.12.3";
 var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);

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

@@ -90,7 +90,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.12.2";
+var packageVersion = "77.12.3";
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/cjs/card/v2/cardV2.js

@@ -16,7 +16,7 @@ var _externalImageCard = require("./externalImageCard");
 var _fileCard = require("./fileCard");
 var _excluded = ["identifier"];
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.12.2";
+var packageVersion = "77.12.3";
 var CardV2Base = exports.CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/v2/fileCard.js

@@ -321,10 +321,24 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   //---------------------- Callbacks & Handlers  -------------------//
   //----------------------------------------------------------------//
 
+  var onSvgError = function onSvgError(error) {
+    setError(error);
+    setStatus('error');
+    setShouldRenderSVG(false);
+  };
   var onImageError = function onImageError(newCardPreview) {
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.media-card-svg-rendering_6tdbv') && metadata.mimeType === 'image/svg+xml') {
+      return;
+    }
     onImageErrorBase(newCardPreview);
   };
+  var onSvgLoad = function onSvgLoad() {
+    setPreviewDidRender(true);
+  };
   var onImageLoad = function onImageLoad(newCardPreview) {
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.media-card-svg-rendering_6tdbv') && metadata.mimeType === 'image/svg+xml') {
+      return;
+    }
     onImageLoadBase(newCardPreview);
     setPreviewDidRender(true);
   };
@@ -449,7 +463,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   //----------------------------------------------------------------//
 
   (0, _react.useEffect)(function () {
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.media-card-svg-rendering_6tdbv') &&
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.media-card-svg-rendering_6tdbv') && finalStatus !== 'error' &&
     /**
      * We need to check that the card is visible before switching to SVG
      * in order to avoid race conditions of the ViewportDector being unmounted before
@@ -459,7 +473,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     ) {
       setShouldRenderSVG(true);
     }
-  }, [isCardVisible, disableOverlay, metadata]);
+  }, [isCardVisible, disableOverlay, metadata.mimeType, finalStatus]);
 
   //----------------------------------------------------------------//
   //----------------- fireScreenEvent ------------------------------//
@@ -644,8 +658,8 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     onClick: onCardViewClick,
     onMouseEnter: onImageMouseEnter,
     progress: uploadProgressRef.current,
-    onImageError: onImageError,
-    onImageLoad: onImageLoad,
+    onError: onSvgError,
+    onLoad: onSvgLoad,
     mediaCardCursor: mediaCardCursor,
     shouldOpenMediaViewer: shouldOpenMediaViewer,
     openMediaViewerButtonRef: mediaViewerButtonRef

package/dist/cjs/card/v2/svgView/errors.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getErrorReason = void 0;
+var getErrorReason = exports.getErrorReason = function getErrorReason(svgReason) {
+  switch (svgReason) {
+    case 'img-error':
+      return 'svg-img-error';
+    case 'binary-fetch':
+      return 'svg-binary-fetch';
+    default:
+      return 'svg-unknown-error';
+  }
+};

package/dist/cjs/card/v2/svgView/svgView.js

@@ -20,6 +20,8 @@ var _useBreakpoint = require("../../useBreakpoint");
 var _mediaSvg = _interopRequireDefault(require("@atlaskit/media-svg"));
 var _helpers = require("./helpers");
 var _openMediaViewerButton = _interopRequireDefault(require("../../ui/openMediaViewerButton/openMediaViewerButton"));
+var _errors = require("../../../errors");
+var _errors2 = require("./errors");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /** @jsx jsx */
@@ -54,7 +56,9 @@ var SvgViewBase = exports.SvgViewBase = function SvgViewBase(_ref) {
     resizeMode = _ref.resizeMode,
     shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
     _ref$openMediaViewerB = _ref.openMediaViewerButtonRef,
-    openMediaViewerButtonRef = _ref$openMediaViewerB === void 0 ? null : _ref$openMediaViewerB;
+    openMediaViewerButtonRef = _ref$openMediaViewerB === void 0 ? null : _ref$openMediaViewerB,
+    onLoad = _ref.onLoad,
+    onError = _ref.onError;
   var _useState = (0, _react2.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     didSvgRender = _useState2[0],
@@ -72,6 +76,11 @@ var SvgViewBase = exports.SvgViewBase = function SvgViewBase(_ref) {
   var onSvgLoad = function onSvgLoad(evt) {
     setSvgDimensions((0, _helpers.calculateSvgDimensions)(evt.currentTarget, resizeMode));
     setDidSvgRender(true);
+    onLoad();
+  };
+  var onSvgError = function onSvgError(err) {
+    var error = new _errors.MediaCardError((0, _errors2.getErrorReason)(err.primaryReason), err.secondaryError);
+    onError(error);
   };
   var onPreviewLoad = function onPreviewLoad() {
     setDidPreviewRender(true);
@@ -107,6 +116,7 @@ var SvgViewBase = exports.SvgViewBase = function SvgViewBase(_ref) {
     identifier: identifier,
     dimensions: svgDimensions,
     onLoad: onSvgLoad,
+    onError: onSvgError,
     style: {
       visibility: didSvgRender ? 'visible' : 'hidden',
       objectFit: convertResizeMode(resizeMode)

package/dist/cjs/inline/loader.js

@@ -119,7 +119,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.12.2",
+        packageName: "77.12.3",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/utils/analytics/analytics.js

@@ -55,6 +55,7 @@ var getRenderSucceededEventPayload = exports.getRenderSucceededEventPayload = fu
     action: 'succeeded',
     actionSubject: 'mediaCardRender',
     attributes: {
+      fileMimetype: fileAttributes.fileMimetype,
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
       status: 'success',
@@ -155,6 +156,7 @@ var getRenderErrorEventPayload = exports.getRenderErrorEventPayload = function g
     action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: _objectSpread(_objectSpread({
+      fileMimetype: fileAttributes.fileMimetype,
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
       status: 'fail'
@@ -187,6 +189,7 @@ var getRenderFailedFileStatusPayload = exports.getRenderFailedFileStatusPayload
     action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: {
+      fileMimetype: fileAttributes.fileMimetype,
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
       status: 'fail',

package/dist/cjs/utils/ufoExperiences.js

@@ -14,7 +14,7 @@ var _mediaClient = require("@atlaskit/media-client");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.12.2";
+var packageVersion = "77.12.3";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/es2019/card/card.js

@@ -28,7 +28,7 @@ import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '.
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { DateOverrideContext } from '../dateOverrideContext';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.12.2";
+const packageVersion = "77.12.3";
 export class CardBase extends Component {
   constructor(props) {
     super(props);

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

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.12.2";
+const packageVersion = "77.12.3";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/card/v2/cardV2.js

@@ -7,7 +7,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.12.2";
+const packageVersion = "77.12.3";
 export const CardV2Base = ({
   identifier,
   ...otherProps

package/dist/es2019/card/v2/fileCard.js

@@ -271,10 +271,24 @@ export const FileCard = ({
   //---------------------- Callbacks & Handlers  -------------------//
   //----------------------------------------------------------------//
 
+  const onSvgError = error => {
+    setError(error);
+    setStatus('error');
+    setShouldRenderSVG(false);
+  };
   const onImageError = newCardPreview => {
+    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') && metadata.mimeType === 'image/svg+xml') {
+      return;
+    }
     onImageErrorBase(newCardPreview);
   };
+  const onSvgLoad = () => {
+    setPreviewDidRender(true);
+  };
   const onImageLoad = newCardPreview => {
+    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') && metadata.mimeType === 'image/svg+xml') {
+      return;
+    }
     onImageLoadBase(newCardPreview);
     setPreviewDidRender(true);
   };
@@ -400,7 +414,7 @@ export const FileCard = ({
   //----------------------------------------------------------------//
 
   useEffect(() => {
-    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') &&
+    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') && finalStatus !== 'error' &&
     /**
      * We need to check that the card is visible before switching to SVG
      * in order to avoid race conditions of the ViewportDector being unmounted before
@@ -410,7 +424,7 @@ export const FileCard = ({
     ) {
       setShouldRenderSVG(true);
     }
-  }, [isCardVisible, disableOverlay, metadata]);
+  }, [isCardVisible, disableOverlay, metadata.mimeType, finalStatus]);
 
   //----------------------------------------------------------------//
   //----------------- fireScreenEvent ------------------------------//
@@ -595,8 +609,8 @@ export const FileCard = ({
     onClick: onCardViewClick,
     onMouseEnter: onImageMouseEnter,
     progress: uploadProgressRef.current,
-    onImageError: onImageError,
-    onImageLoad: onImageLoad,
+    onError: onSvgError,
+    onLoad: onSvgLoad,
     mediaCardCursor: mediaCardCursor,
     shouldOpenMediaViewer: shouldOpenMediaViewer,
     openMediaViewerButtonRef: mediaViewerButtonRef

package/dist/es2019/card/v2/svgView/errors.js

@@ -0,0 +1,10 @@
+export const getErrorReason = svgReason => {
+  switch (svgReason) {
+    case 'img-error':
+      return 'svg-img-error';
+    case 'binary-fetch':
+      return 'svg-binary-fetch';
+    default:
+      return 'svg-unknown-error';
+  }
+};

package/dist/es2019/card/v2/svgView/svgView.js

@@ -13,6 +13,8 @@ import { useBreakpoint } from '../../useBreakpoint';
 import MediaSvg from '@atlaskit/media-svg';
 import { calculateSvgDimensions } from './helpers';
 import OpenMediaViewerButton from '../../ui/openMediaViewerButton/openMediaViewerButton';
+import { MediaCardError } from '../../../errors';
+import { getErrorReason } from './errors';
 export const convertResizeMode = resizeMode => {
   switch (resizeMode) {
     case 'crop':
@@ -41,7 +43,9 @@ export const SvgViewBase = ({
   alt,
   resizeMode,
   shouldOpenMediaViewer,
-  openMediaViewerButtonRef = null
+  openMediaViewerButtonRef = null,
+  onLoad,
+  onError
 }) => {
   const [didSvgRender, setDidSvgRender] = useState(false);
   const [didPreviewRender, setDidPreviewRender] = useState(false);
@@ -51,6 +55,11 @@ export const SvgViewBase = ({
   const onSvgLoad = evt => {
     setSvgDimensions(calculateSvgDimensions(evt.currentTarget, resizeMode));
     setDidSvgRender(true);
+    onLoad();
+  };
+  const onSvgError = err => {
+    const error = new MediaCardError(getErrorReason(err.primaryReason), err.secondaryError);
+    onError(error);
   };
   const onPreviewLoad = () => {
     setDidPreviewRender(true);
@@ -86,6 +95,7 @@ export const SvgViewBase = ({
     identifier: identifier,
     dimensions: svgDimensions,
     onLoad: onSvgLoad,
+    onError: onSvgError,
     style: {
       visibility: didSvgRender ? 'visible' : 'hidden',
       objectFit: convertResizeMode(resizeMode)

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "77.12.2",
+      packageName: "77.12.3",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/analytics/analytics.js

@@ -38,6 +38,7 @@ export const getRenderSucceededEventPayload = (fileAttributes, performanceAttrib
   action: 'succeeded',
   actionSubject: 'mediaCardRender',
   attributes: {
+    fileMimetype: fileAttributes.fileMimetype,
     fileAttributes,
     performanceAttributes,
     status: 'success',
@@ -130,6 +131,7 @@ export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes
   action: 'failed',
   actionSubject: 'mediaCardRender',
   attributes: {
+    fileMimetype: fileAttributes.fileMimetype,
     fileAttributes,
     performanceAttributes,
     status: 'fail',
@@ -158,6 +160,7 @@ export const getRenderFailedFileStatusPayload = (fileAttributes, performanceAttr
   action: 'failed',
   actionSubject: 'mediaCardRender',
   attributes: {
+    fileMimetype: fileAttributes.fileMimetype,
     fileAttributes,
     performanceAttributes,
     status: 'fail',

package/dist/es2019/utils/ufoExperiences.js

@@ -4,7 +4,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.12.2";
+const packageVersion = "77.12.3";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/esm/card/card.js

@@ -41,7 +41,7 @@ import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '.
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { DateOverrideContext } from '../dateOverrideContext';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.12.2";
+var packageVersion = "77.12.3";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);

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

@@ -83,7 +83,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.12.2";
+var packageVersion = "77.12.3";
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/esm/card/v2/cardV2.js

@@ -9,7 +9,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.12.2";
+var packageVersion = "77.12.3";
 export var CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/card/v2/fileCard.js

@@ -312,10 +312,24 @@ export var FileCard = function FileCard(_ref) {
   //---------------------- Callbacks & Handlers  -------------------//
   //----------------------------------------------------------------//
 
+  var onSvgError = function onSvgError(error) {
+    setError(error);
+    setStatus('error');
+    setShouldRenderSVG(false);
+  };
   var onImageError = function onImageError(newCardPreview) {
+    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') && metadata.mimeType === 'image/svg+xml') {
+      return;
+    }
     onImageErrorBase(newCardPreview);
   };
+  var onSvgLoad = function onSvgLoad() {
+    setPreviewDidRender(true);
+  };
   var onImageLoad = function onImageLoad(newCardPreview) {
+    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') && metadata.mimeType === 'image/svg+xml') {
+      return;
+    }
     onImageLoadBase(newCardPreview);
     setPreviewDidRender(true);
   };
@@ -440,7 +454,7 @@ export var FileCard = function FileCard(_ref) {
   //----------------------------------------------------------------//
 
   useEffect(function () {
-    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') &&
+    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') && finalStatus !== 'error' &&
     /**
      * We need to check that the card is visible before switching to SVG
      * in order to avoid race conditions of the ViewportDector being unmounted before
@@ -450,7 +464,7 @@ export var FileCard = function FileCard(_ref) {
     ) {
       setShouldRenderSVG(true);
     }
-  }, [isCardVisible, disableOverlay, metadata]);
+  }, [isCardVisible, disableOverlay, metadata.mimeType, finalStatus]);
 
   //----------------------------------------------------------------//
   //----------------- fireScreenEvent ------------------------------//
@@ -635,8 +649,8 @@ export var FileCard = function FileCard(_ref) {
     onClick: onCardViewClick,
     onMouseEnter: onImageMouseEnter,
     progress: uploadProgressRef.current,
-    onImageError: onImageError,
-    onImageLoad: onImageLoad,
+    onError: onSvgError,
+    onLoad: onSvgLoad,
     mediaCardCursor: mediaCardCursor,
     shouldOpenMediaViewer: shouldOpenMediaViewer,
     openMediaViewerButtonRef: mediaViewerButtonRef

package/dist/esm/card/v2/svgView/errors.js

@@ -0,0 +1,10 @@
+export var getErrorReason = function getErrorReason(svgReason) {
+  switch (svgReason) {
+    case 'img-error':
+      return 'svg-img-error';
+    case 'binary-fetch':
+      return 'svg-binary-fetch';
+    default:
+      return 'svg-unknown-error';
+  }
+};

package/dist/esm/card/v2/svgView/svgView.js

@@ -14,6 +14,8 @@ import { useBreakpoint } from '../../useBreakpoint';
 import MediaSvg from '@atlaskit/media-svg';
 import { calculateSvgDimensions } from './helpers';
 import OpenMediaViewerButton from '../../ui/openMediaViewerButton/openMediaViewerButton';
+import { MediaCardError } from '../../../errors';
+import { getErrorReason } from './errors';
 export var convertResizeMode = function convertResizeMode(resizeMode) {
   switch (resizeMode) {
     case 'crop':
@@ -43,7 +45,9 @@ export var SvgViewBase = function SvgViewBase(_ref) {
     resizeMode = _ref.resizeMode,
     shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
     _ref$openMediaViewerB = _ref.openMediaViewerButtonRef,
-    openMediaViewerButtonRef = _ref$openMediaViewerB === void 0 ? null : _ref$openMediaViewerB;
+    openMediaViewerButtonRef = _ref$openMediaViewerB === void 0 ? null : _ref$openMediaViewerB,
+    onLoad = _ref.onLoad,
+    onError = _ref.onError;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     didSvgRender = _useState2[0],
@@ -61,6 +65,11 @@ export var SvgViewBase = function SvgViewBase(_ref) {
   var onSvgLoad = function onSvgLoad(evt) {
     setSvgDimensions(calculateSvgDimensions(evt.currentTarget, resizeMode));
     setDidSvgRender(true);
+    onLoad();
+  };
+  var onSvgError = function onSvgError(err) {
+    var error = new MediaCardError(getErrorReason(err.primaryReason), err.secondaryError);
+    onError(error);
   };
   var onPreviewLoad = function onPreviewLoad() {
     setDidPreviewRender(true);
@@ -96,6 +105,7 @@ export var SvgViewBase = function SvgViewBase(_ref) {
     identifier: identifier,
     dimensions: svgDimensions,
     onLoad: onSvgLoad,
+    onError: onSvgError,
     style: {
       visibility: didSvgRender ? 'visible' : 'hidden',
       objectFit: convertResizeMode(resizeMode)

package/dist/esm/inline/loader.js

@@ -103,7 +103,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.12.2",
+        packageName: "77.12.3",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/utils/analytics/analytics.js

@@ -46,6 +46,7 @@ export var getRenderSucceededEventPayload = function getRenderSucceededEventPayl
     action: 'succeeded',
     actionSubject: 'mediaCardRender',
     attributes: {
+      fileMimetype: fileAttributes.fileMimetype,
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
       status: 'success',
@@ -146,6 +147,7 @@ export var getRenderErrorEventPayload = function getRenderErrorEventPayload(file
     action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: _objectSpread(_objectSpread({
+      fileMimetype: fileAttributes.fileMimetype,
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
       status: 'fail'
@@ -178,6 +180,7 @@ export var getRenderFailedFileStatusPayload = function getRenderFailedFileStatus
     action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: {
+      fileMimetype: fileAttributes.fileMimetype,
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
       status: 'fail',

package/dist/esm/utils/ufoExperiences.js

@@ -7,7 +7,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.12.2";
+var packageVersion = "77.12.3";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/types/card/v2/svgView/errors.d.ts

@@ -0,0 +1,3 @@
+import { type MediaSVGErrorReason } from '@atlaskit/media-svg';
+import { type SvgPrimaryReason } from '../../../errors';
+export declare const getErrorReason: (svgReason: MediaSVGErrorReason) => SvgPrimaryReason;

package/dist/types/card/v2/svgView/svgView.d.ts

@@ -5,6 +5,7 @@ import { type FileIdentifier, type ImageResizeMode } from '@atlaskit/media-clien
 import { type WithAnalyticsEventsProps, type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type CardStatus, type MediaCardCursor, type CardDimensions } from '../../../types';
 import { type MediaFilePreview } from '@atlaskit/media-file-preview';
+import { MediaCardError } from '../../../errors';
 export declare const convertResizeMode: (resizeMode?: ImageResizeMode) => React.CSSProperties['objectFit'];
 export type OnClickFn = (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
 export interface SvgViewBaseOwnProps {
@@ -21,11 +22,11 @@ export interface SvgViewBaseOwnProps {
     readonly progress?: number;
     readonly alt?: string;
     readonly resizeMode?: ImageResizeMode;
-    readonly onImageLoad?: (cardPreview: MediaFilePreview) => void;
-    readonly onImageError?: (cardPreview: MediaFilePreview) => void;
+    readonly onLoad: () => void;
+    readonly onError: (error: MediaCardError) => void;
     readonly shouldOpenMediaViewer?: boolean;
     readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
 }
 export type SvgViewProps = SvgViewBaseOwnProps & WithAnalyticsEventsProps;
-export declare const SvgViewBase: ({ identifier, dimensions, onClick, onMouseEnter, testId, status, selected, fileName, cardPreview, mediaCardCursor, progress, alt, resizeMode, shouldOpenMediaViewer, openMediaViewerButtonRef, }: SvgViewProps) => jsx.JSX.Element;
+export declare const SvgViewBase: ({ identifier, dimensions, onClick, onMouseEnter, testId, status, selected, fileName, cardPreview, mediaCardCursor, progress, alt, resizeMode, shouldOpenMediaViewer, openMediaViewerButtonRef, onLoad, onError, }: SvgViewProps) => jsx.JSX.Element;
 export declare const SvgView: React.ForwardRefExoticComponent<Omit<SvgViewBaseOwnProps & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/dist/types/errors.d.ts

@@ -5,11 +5,12 @@ import { MediaFileStateError } from '@atlaskit/media-client-react';
  * Primary reason is logged through Data Portal.
  * Make sure all the values are whitelisted in Measure -> Event Regitry -> "mediaCardRender failed" event
  */
-export type MediaCardErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | 'failed-processing' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | ImageLoadPrimaryReason | SsrPreviewPrimaryReason | 'missing-error-data' | 'preview-fetch';
+export type MediaCardErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | 'failed-processing' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | ImageLoadPrimaryReason | SsrPreviewPrimaryReason | SvgPrimaryReason | 'missing-error-data' | 'preview-fetch';
 export type ImageLoadPrimaryReason = 'cache-remote-uri' | 'cache-local-uri' | 'local-uri' | 'remote-uri' | 'external-uri' | 'unknown-uri';
 export type RemotePreviewPrimaryReason = 'remote-preview-fetch' | 'remote-preview-not-ready' | 'remote-preview-fetch-ssr';
 export type LocalPreviewPrimaryReason = 'local-preview-get' | 'local-preview-unsupported' | 'local-preview-rejected' | 'local-preview-image' | 'local-preview-video';
 export type SsrPreviewPrimaryReason = 'ssr-client-uri' | 'ssr-client-load' | 'ssr-server-uri' | 'ssr-server-load';
+export type SvgPrimaryReason = 'svg-img-error' | 'svg-binary-fetch' | 'svg-unknown-error';
 export declare function isMediaFileStateError(err: Error): err is MediaFileStateError;
 export declare function getFileStateErrorReason(err: MediaFileStateError): MediaClientErrorReason | 'unknown';
 export declare function isPollingError(err?: Error): boolean;

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

@@ -1,3 +1,4 @@
+import { type ErrorInfo } from 'react';
 import { type FileDetails, type FileStatus, type MediaClientErrorReason, type RequestMetadata } from '@atlaskit/media-client';
 import { type FileAttributes, type PerformanceAttributes, type OperationalEventPayload, type UIEventPayload, type WithFileAttributes, type WithPerformanceAttributes, type SuccessAttributes, type FailureAttributes, type ScreenEventPayload, type ScreenAttributes, type MediaTraceContext, type WithTraceContext } from '@atlaskit/media-common/analytics';
 import { type CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
@@ -52,7 +53,7 @@ export type ErrorBoundaryErrorInfo = {
 };
 export type AnalyticsErrorBoundaryAttributes = {
     error?: Error | string;
-    info?: ErrorBoundaryErrorInfo;
+    info?: ErrorInfo;
     browserInfo: string;
     failReason: string;
 };

package/dist/types-ts4.5/card/v2/svgView/errors.d.ts

@@ -0,0 +1,3 @@
+import { type MediaSVGErrorReason } from '@atlaskit/media-svg';
+import { type SvgPrimaryReason } from '../../../errors';
+export declare const getErrorReason: (svgReason: MediaSVGErrorReason) => SvgPrimaryReason;

package/dist/types-ts4.5/card/v2/svgView/svgView.d.ts

@@ -5,6 +5,7 @@ import { type FileIdentifier, type ImageResizeMode } from '@atlaskit/media-clien
 import { type WithAnalyticsEventsProps, type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type CardStatus, type MediaCardCursor, type CardDimensions } from '../../../types';
 import { type MediaFilePreview } from '@atlaskit/media-file-preview';
+import { MediaCardError } from '../../../errors';
 export declare const convertResizeMode: (resizeMode?: ImageResizeMode) => React.CSSProperties['objectFit'];
 export type OnClickFn = (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
 export interface SvgViewBaseOwnProps {
@@ -21,11 +22,11 @@ export interface SvgViewBaseOwnProps {
     readonly progress?: number;
     readonly alt?: string;
     readonly resizeMode?: ImageResizeMode;
-    readonly onImageLoad?: (cardPreview: MediaFilePreview) => void;
-    readonly onImageError?: (cardPreview: MediaFilePreview) => void;
+    readonly onLoad: () => void;
+    readonly onError: (error: MediaCardError) => void;
     readonly shouldOpenMediaViewer?: boolean;
     readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
 }
 export type SvgViewProps = SvgViewBaseOwnProps & WithAnalyticsEventsProps;
-export declare const SvgViewBase: ({ identifier, dimensions, onClick, onMouseEnter, testId, status, selected, fileName, cardPreview, mediaCardCursor, progress, alt, resizeMode, shouldOpenMediaViewer, openMediaViewerButtonRef, }: SvgViewProps) => jsx.JSX.Element;
+export declare const SvgViewBase: ({ identifier, dimensions, onClick, onMouseEnter, testId, status, selected, fileName, cardPreview, mediaCardCursor, progress, alt, resizeMode, shouldOpenMediaViewer, openMediaViewerButtonRef, onLoad, onError, }: SvgViewProps) => jsx.JSX.Element;
 export declare const SvgView: React.ForwardRefExoticComponent<Omit<SvgViewBaseOwnProps & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/dist/types-ts4.5/errors.d.ts

@@ -5,11 +5,12 @@ import { MediaFileStateError } from '@atlaskit/media-client-react';
  * Primary reason is logged through Data Portal.
  * Make sure all the values are whitelisted in Measure -> Event Regitry -> "mediaCardRender failed" event
  */
-export type MediaCardErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | 'failed-processing' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | ImageLoadPrimaryReason | SsrPreviewPrimaryReason | 'missing-error-data' | 'preview-fetch';
+export type MediaCardErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | 'failed-processing' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | ImageLoadPrimaryReason | SsrPreviewPrimaryReason | SvgPrimaryReason | 'missing-error-data' | 'preview-fetch';
 export type ImageLoadPrimaryReason = 'cache-remote-uri' | 'cache-local-uri' | 'local-uri' | 'remote-uri' | 'external-uri' | 'unknown-uri';
 export type RemotePreviewPrimaryReason = 'remote-preview-fetch' | 'remote-preview-not-ready' | 'remote-preview-fetch-ssr';
 export type LocalPreviewPrimaryReason = 'local-preview-get' | 'local-preview-unsupported' | 'local-preview-rejected' | 'local-preview-image' | 'local-preview-video';
 export type SsrPreviewPrimaryReason = 'ssr-client-uri' | 'ssr-client-load' | 'ssr-server-uri' | 'ssr-server-load';
+export type SvgPrimaryReason = 'svg-img-error' | 'svg-binary-fetch' | 'svg-unknown-error';
 export declare function isMediaFileStateError(err: Error): err is MediaFileStateError;
 export declare function getFileStateErrorReason(err: MediaFileStateError): MediaClientErrorReason | 'unknown';
 export declare function isPollingError(err?: Error): boolean;

package/dist/types-ts4.5/utils/analytics/analytics.d.ts

@@ -1,3 +1,4 @@
+import { type ErrorInfo } from 'react';
 import { type FileDetails, type FileStatus, type MediaClientErrorReason, type RequestMetadata } from '@atlaskit/media-client';
 import { type FileAttributes, type PerformanceAttributes, type OperationalEventPayload, type UIEventPayload, type WithFileAttributes, type WithPerformanceAttributes, type SuccessAttributes, type FailureAttributes, type ScreenEventPayload, type ScreenAttributes, type MediaTraceContext, type WithTraceContext } from '@atlaskit/media-common/analytics';
 import { type CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
@@ -52,7 +53,7 @@ export type ErrorBoundaryErrorInfo = {
 };
 export type AnalyticsErrorBoundaryAttributes = {
     error?: Error | string;
-    info?: ErrorBoundaryErrorInfo;
+    info?: ErrorInfo;
     browserInfo: string;
     failReason: string;
 };

package/example-helpers/svg-helpers/index.ts

@@ -4,4 +4,4 @@ export { ToggleBox } from './toggle';
 export { SvgContainer } from './svgContainer';
 export { useSvgUploader } from './uploader';
 export { CardBox, CardRow } from './cardContainer';
-export { delayApiResponses } from './delayApiResponses';
+export { delayApiResponses, errorApiResponses } from './mediaApiTweaks';

package/example-helpers/svg-helpers/mediaApiTweaks.ts

@@ -0,0 +1,64 @@
+import { type MediaApi, RequestError } from '@atlaskit/media-client';
+import { sleep } from '@atlaskit/media-test-helpers';
+
+type Endpoints = Partial<Record<keyof MediaApi, number>>;
+
+export const delayApiResponses = (
+	mediaApi: MediaApi,
+	{ getImage, getItems, getFileBinary }: Endpoints,
+) => {
+	const baseGetImage = mediaApi.getImage;
+	mediaApi.getImage = async (...params) => {
+		await sleep(getImage);
+		return baseGetImage(...params);
+	};
+
+	const baseGetItems = mediaApi.getItems;
+	mediaApi.getItems = async (...params) => {
+		await sleep(getItems);
+		return baseGetItems(...params);
+	};
+
+	const baseGetFileBinary = mediaApi.getFileBinary;
+	mediaApi.getFileBinary = async (...params) => {
+		await sleep(getFileBinary);
+		return baseGetFileBinary(...params);
+	};
+};
+
+export const errorApiResponses = {
+	getFileBinary: (mediaApi: MediaApi, error?: Error) => {
+		mediaApi.getFileBinary = async () => {
+			throw (
+				error ||
+				new RequestError('serverForbidden', {
+					method: 'GET',
+					endpoint: '/file/:id/inary',
+					mediaRegion: 'adev',
+					mediaEnv: 'adev',
+					traceContext: { traceId: 'some-traceId', spanId: 'some-spanId' },
+					attempts: 10,
+					clientExhaustedRetries: true,
+					statusCode: 430,
+				})
+			);
+		};
+	},
+	getFileImage: (mediaApi: MediaApi, error?: Error) => {
+		mediaApi.getImage = async () => {
+			throw (
+				error ||
+				new RequestError('serverForbidden', {
+					method: 'GET',
+					endpoint: '/file/:id/image',
+					mediaRegion: 'adev',
+					mediaEnv: 'adev',
+					traceContext: { traceId: 'some-traceId', spanId: 'some-spanId' },
+					attempts: 10,
+					clientExhaustedRetries: true,
+					statusCode: 430,
+				})
+			);
+		};
+	},
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "77.12.2",
+	"version": "77.12.3",
 	"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -48,10 +48,10 @@
 		"@atlaskit/media-ui": "^25.10.0",
 		"@atlaskit/media-viewer": "^48.6.0",
 		"@atlaskit/platform-feature-flags": "^0.2.2",
-		"@atlaskit/primitives": "^8.0.0",
+		"@atlaskit/primitives": "^8.1.0",
 		"@atlaskit/spinner": "^16.2.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.51.0",
+		"@atlaskit/tokens": "^1.53.0",
 		"@atlaskit/tooltip": "^18.5.0",
 		"@atlaskit/ufo": "^0.2.0",
 		"@atlaskit/ufo-interaction-ignore": "^1.1.0",
@@ -79,12 +79,13 @@
 		"@atlaskit/media-state": "^1.1.0",
 		"@atlaskit/media-test-data": "^2.3.0",
 		"@atlaskit/media-test-helpers": "^33.0.0",
+		"@atlaskit/radio": "^6.4.0",
 		"@atlaskit/range": "^7.3.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/toggle": "^13.2.0",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "^0.2.0",
-		"@atlassian/ufo": "^0.2.0",
+		"@atlassian/ufo": "^0.3.0",
 		"@testing-library/dom": "^8.17.1",
 		"@testing-library/react": "^12.1.5",
 		"@testing-library/react-hooks": "^8.0.1",

package/example-helpers/svg-helpers/delayApiResponses.ts

@@ -1,31 +0,0 @@
-import { type MediaApi } from '@atlaskit/media-client';
-import { sleep } from '@atlaskit/media-test-helpers';
-
-type Endpoints = {
-	getImage: number;
-	getItems: number;
-	getFileBinary: number;
-};
-
-export const delayApiResponses = (
-	mediaApi: MediaApi,
-	{ getImage, getItems, getFileBinary }: Endpoints,
-) => {
-	const baseGetImage = mediaApi.getImage;
-	mediaApi.getImage = async (...params) => {
-		await sleep(getImage);
-		return baseGetImage(...params);
-	};
-
-	const baseGetItems = mediaApi.getItems;
-	mediaApi.getItems = async (...params) => {
-		await sleep(getItems);
-		return baseGetItems(...params);
-	};
-
-	const baseGetFileBinary = mediaApi.getFileBinary;
-	mediaApi.getFileBinary = async (...params) => {
-		await sleep(getFileBinary);
-		return baseGetFileBinary(...params);
-	};
-};