@atlaskit/media-card 73.2.0 → 73.3.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/media-card
 
+## 73.3.0
+
+### Minor Changes
+
+- [`7d8e24c4dcd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7d8e24c4dcd) - Log reliability of Media Card SSR
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 73.2.0
 
 ### Minor Changes

package/dist/cjs/root/card/cardAnalytics.js

@@ -10,22 +10,22 @@ var _analytics = require("../../utils/analytics");
 var relevantFeatureFlagNames = ['newCardExperience', 'captions', 'timestampOnVideo'];
 exports.relevantFeatureFlagNames = relevantFeatureFlagNames;
 
-var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, error) {
+var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error) {
   var fireEvent = function fireEvent(payload) {
     return (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);
   };
 
   switch (status) {
     case 'complete':
-      fireEvent((0, _analytics.getRenderSucceededEventPayload)(fileAttributes, performanceAttributes));
+      fireEvent((0, _analytics.getRenderSucceededEventPayload)(fileAttributes, performanceAttributes, ssrReliability));
       break;
 
     case 'failed-processing':
-      fireEvent((0, _analytics.getRenderFailedFileStatusPayload)(fileAttributes, performanceAttributes));
+      fireEvent((0, _analytics.getRenderFailedFileStatusPayload)(fileAttributes, performanceAttributes, ssrReliability));
       break;
 
     case 'error':
-      error && fireEvent((0, _analytics.getRenderErrorEventPayload)(fileAttributes, performanceAttributes, error));
+      error && fireEvent((0, _analytics.getRenderErrorEventPayload)(fileAttributes, performanceAttributes, error, ssrReliability));
       break;
   }
 };

package/dist/cjs/root/card/index.js

@@ -102,6 +102,14 @@ var CardBase = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hasBeenMounted", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "viewportPreAnchorRef", /*#__PURE__*/(0, _react.createRef)());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "viewportPostAnchorRef", /*#__PURE__*/(0, _react.createRef)());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ssrReliability", {
+      server: {
+        status: 'unknown'
+      },
+      client: {
+        status: 'unknown'
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "timeElapsedTillCommenced", performance.now());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getImageURLParams", function (_ref) {
       var collection = _ref.collectionName;
@@ -270,7 +278,29 @@ var CardBase = /*#__PURE__*/function (_Component) {
         }
       };
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "logSSRImageError", function (cardPreview) {
+      if (cardPreview) {
+        var failedSSRObject = _objectSpread({
+          status: 'fail'
+        }, (0, _analytics.extractErrorInfo)(new _errors.ImageLoadError(cardPreview.source)));
+
+        if ((0, _getCardPreview.isSSRClientPreview)(cardPreview)) {
+          _this.ssrReliability.client = failedSSRObject;
+        }
+        /* 
+          If the cardPreview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
+        */
+
+
+        if ((0, _getCardPreview.isSSRDataPreview)(cardPreview)) {
+          _this.ssrReliability.server = failedSSRObject;
+          _this.ssrReliability.client = failedSSRObject;
+        }
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageError", function (cardPreview) {
+      _this.logSSRImageError(cardPreview);
+
       var currentPreview = _this.state.cardPreview; // If the dataURI has been replaced, we can dismiss this error
 
       if ((cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI) !== (currentPreview === null || currentPreview === void 0 ? void 0 : currentPreview.dataURI)) {
@@ -292,10 +322,6 @@ var CardBase = /*#__PURE__*/function (_Component) {
           _this.fireLocalPreviewErrorEvent(error);
         }
 
-        if (isSSR) {// TODO: set SSR-client reliability 'failed'.
-          // https://product-fabric.atlassian.net/browse/MEX-770
-        }
-
         var _this$props5 = _this.props,
             identifier = _this$props5.identifier,
             _this$props5$dimensio = _this$props5.dimensions,
@@ -311,6 +337,27 @@ var CardBase = /*#__PURE__*/function (_Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageLoad", function (cardPreview) {
+      if (cardPreview) {
+        if ((0, _getCardPreview.isSSRClientPreview)(cardPreview) && _this.ssrReliability.client.status === 'unknown') {
+          _this.ssrReliability.client = {
+            status: 'success'
+          };
+        }
+        /* 
+          If the image loads successfully and it comes from server (global scope / ssrData), it means that we have reused it in client and the success counts for both: server & client.
+        */
+
+
+        if ((0, _getCardPreview.isSSRDataPreview)(cardPreview) && _this.ssrReliability.server.status === 'unknown') {
+          _this.ssrReliability.server = {
+            status: 'success'
+          };
+          _this.ssrReliability.client = {
+            status: 'success'
+          };
+        }
+      }
+
       var currentPreview = _this.state.cardPreview; // If the dataURI has been replaced, we can dismiss this callback
 
       if ((cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI) !== (currentPreview === null || currentPreview === void 0 ? void 0 : currentPreview.dataURI)) {
@@ -575,20 +622,19 @@ var CardBase = /*#__PURE__*/function (_Component) {
       })) : card;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "storeSSRData", function () {
+      var _this$ssrReliability$;
+
       var _this$props10 = _this.props,
           ssr = _this$props10.ssr,
           identifier = _this$props10.identifier;
-      var _this$state3 = _this.state,
-          _this$state3$cardPrev = _this$state3.cardPreview;
-      _this$state3$cardPrev = _this$state3$cardPrev === void 0 ? {} : _this$state3$cardPrev;
-      var dataURI = _this$state3$cardPrev.dataURI,
-          error = _this$state3.error;
-      var ssrDataError = !!error ? (0, _analytics.extractErrorInfo)(error) : undefined;
+      var _this$state$cardPrevi = _this.state.cardPreview;
+      _this$state$cardPrevi = _this$state$cardPrevi === void 0 ? {} : _this$state$cardPrevi;
+      var dataURI = _this$state$cardPrevi.dataURI;
       return (0, _mediaClient2.isFileIdentifier)(identifier) && ssr === 'server' && /*#__PURE__*/_react.default.createElement(_globalScope.StoreSSRDataScript, {
         identifier: identifier,
         dataURI: dataURI,
         dimensions: _this.requestedDimensions,
-        error: ssrDataError
+        error: ((_this$ssrReliability$ = _this.ssrReliability.server) === null || _this$ssrReliability$ === void 0 ? void 0 : _this$ssrReliability$.status) === 'fail' ? _this.ssrReliability.server : undefined
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCardInViewport", function () {
@@ -642,19 +688,23 @@ var CardBase = /*#__PURE__*/function (_Component) {
       _cardPreview = (0, _getCardPreview.getCardPreviewFromCache)(id, _dimensions);
 
       if (!_cardPreview && _ssr) {
-        var _this$ssrData;
+        var _this$ssrData, _this$ssrData2;
 
         _this.ssrData = (0, _globalScope.getSSRData)(_identifier);
 
-        if (_ssr === 'server' || !((_this$ssrData = _this.ssrData) !== null && _this$ssrData !== void 0 && _this$ssrData.dataURI)) {
+        if ((_this$ssrData = _this.ssrData) !== null && _this$ssrData !== void 0 && _this$ssrData.error) {
+          _this.ssrReliability.server = _objectSpread({
+            status: 'fail'
+          }, _this.ssrData.error);
+        }
+
+        if (!((_this$ssrData2 = _this.ssrData) !== null && _this$ssrData2 !== void 0 && _this$ssrData2.dataURI)) {
           try {
             _cardPreview = (0, _getCardPreview.getSSRCardPreview)(_ssr, _mediaClient, _identifier.id, _this.getImageURLParams(_identifier), _this.getMediaBlobUrlAttrs(_identifier));
           } catch (e) {
-            // TODO: handle error in client MEX-770
-            // If we fail building the dataURI in server, we store the error in the state
-            // to be later stored in global scope and logged in client.
-            // We don't set the status = error to fall back to the spinner icon
-            _error = _ssr === 'server' ? e : undefined;
+            _this.ssrReliability[_ssr] = _objectSpread({
+              status: 'fail'
+            }, (0, _analytics.extractErrorInfo)(e));
           }
         } else {
           _cardPreview = {
@@ -699,9 +749,9 @@ var CardBase = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.hasBeenMounted = true;
-      var _this$state4 = this.state,
-          isCardVisible = _this$state4.isCardVisible,
-          cardPreview = _this$state4.cardPreview;
+      var _this$state3 = this.state,
+          isCardVisible = _this$state3.isCardVisible,
+          cardPreview = _this$state3.cardPreview;
       var _this$props12 = this.props,
           identifier = _this$props12.identifier,
           ssr = _this$props12.ssr,
@@ -712,7 +762,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
       }
 
       if (isCardVisible && !!ssr && !!cardPreview && (0, _mediaClient2.isFileIdentifier)(identifier)) {
-        var _this$ssrData2;
+        var _this$ssrData3;
 
         if ((0, _getCardPreview.isSSRClientPreview)(cardPreview)) {
           // Since the SSR preview brings the token in the query params,
@@ -720,7 +770,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
           this.setCacheSSRPreview(identifier);
         }
 
-        if ((0, _getCardPreview.isSSRDataPreview)(cardPreview) && (0, _dimensionComparer.isBigger)((_this$ssrData2 = this.ssrData) === null || _this$ssrData2 === void 0 ? void 0 : _this$ssrData2.dimensions, dimensions)) {
+        if ((0, _getCardPreview.isSSRDataPreview)(cardPreview) && (0, _dimensionComparer.isBigger)((_this$ssrData3 = this.ssrData) === null || _this$ssrData3 === void 0 ? void 0 : _this$ssrData3.dimensions, dimensions)) {
           // If dimensions from Server have changed and are bigger,
           // we need to refetch
           this.refetchSSRPreview(identifier);
@@ -747,14 +797,14 @@ var CardBase = /*#__PURE__*/function (_Component) {
           featureFlags = _this$props13.featureFlags,
           useInlinePlayer = _this$props13.useInlinePlayer,
           disableOverlay = _this$props13.disableOverlay;
-      var _this$state5 = this.state,
-          isCardVisible = _this$state5.isCardVisible,
-          cardPreview = _this$state5.cardPreview,
-          status = _this$state5.status,
-          fileState = _this$state5.fileState,
-          isBannedLocalPreview = _this$state5.isBannedLocalPreview,
-          previewDidRender = _this$state5.previewDidRender,
-          isPlayingFile = _this$state5.isPlayingFile;
+      var _this$state4 = this.state,
+          isCardVisible = _this$state4.isCardVisible,
+          cardPreview = _this$state4.cardPreview,
+          status = _this$state4.status,
+          fileState = _this$state4.fileState,
+          isBannedLocalPreview = _this$state4.isBannedLocalPreview,
+          previewDidRender = _this$state4.previewDidRender,
+          isPlayingFile = _this$state4.isPlayingFile;
       var isDifferent = (0, _mediaClient2.isDifferentIdentifier)(prevIdentifier, identifier);
       var turnedVisible = !prevIsCardVisible && isCardVisible;
       var isNewMediaClient = prevMediaClient !== mediaClient;
@@ -881,25 +931,25 @@ var CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "metadata",
     get: function get() {
-      var _this$state6;
+      var _this$state5;
 
-      return (0, _metadata.getFileDetails)(this.props.identifier, (_this$state6 = this.state) === null || _this$state6 === void 0 ? void 0 : _this$state6.fileState);
+      return (0, _metadata.getFileDetails)(this.props.identifier, (_this$state5 = this.state) === null || _this$state5 === void 0 ? void 0 : _this$state5.fileState);
     }
   }, {
     key: "fileAttributes",
     get: function get() {
-      var _this$state7, _this$state7$fileStat;
+      var _this$state6, _this$state6$fileStat;
 
-      return (0, _analytics.getFileAttributes)(this.metadata, (_this$state7 = this.state) === null || _this$state7 === void 0 ? void 0 : (_this$state7$fileStat = _this$state7.fileState) === null || _this$state7$fileStat === void 0 ? void 0 : _this$state7$fileStat.status);
+      return (0, _analytics.getFileAttributes)(this.metadata, (_this$state6 = this.state) === null || _this$state6 === void 0 ? void 0 : (_this$state6$fileStat = _this$state6.fileState) === null || _this$state6$fileStat === void 0 ? void 0 : _this$state6$fileStat.status);
     }
   }, {
     key: "fireOperationalEvent",
     value: function fireOperationalEvent() {
-      var _this$state8 = this.state,
-          status = _this$state8.status,
-          error = _this$state8.error;
+      var _this$state7 = this.state,
+          status = _this$state7.status,
+          error = _this$state7.error;
       var createAnalyticsEvent = this.props.createAnalyticsEvent;
-      createAnalyticsEvent && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), error);
+      createAnalyticsEvent && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error);
     }
   }, {
     key: "fireCommencedEvent",
@@ -943,9 +993,9 @@ var CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$state9 = this.state,
-          isPlayingFile = _this$state9.isPlayingFile,
-          mediaViewerSelectedItem = _this$state9.mediaViewerSelectedItem;
+      var _this$state8 = this.state,
+          isPlayingFile = _this$state8.isPlayingFile,
+          mediaViewerSelectedItem = _this$state8.mediaViewerSelectedItem;
 
       var innerContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null, this.storeSSRData());
 

package/dist/cjs/utils/analytics.js

@@ -64,7 +64,7 @@ var getRenderCommencedEventPayload = function getRenderCommencedEventPayload(fil
 
 exports.getRenderCommencedEventPayload = getRenderCommencedEventPayload;
 
-var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes, performanceAttributes) {
+var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability) {
   return {
     eventType: 'operational',
     action: 'succeeded',
@@ -72,7 +72,8 @@ var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fil
     attributes: {
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
-      status: 'success'
+      status: 'success',
+      ssrReliability: ssrReliability
     }
   };
 };
@@ -147,7 +148,7 @@ var extractErrorInfo = function extractErrorInfo(error) {
 
 exports.extractErrorInfo = extractErrorInfo;
 
-var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error) {
+var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability) {
   return {
     eventType: 'operational',
     action: 'failed',
@@ -157,14 +158,15 @@ var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttribu
       performanceAttributes: performanceAttributes,
       status: 'fail'
     }, extractErrorInfo(error)), {}, {
-      request: getRenderErrorRequestMetadata(error)
+      request: getRenderErrorRequestMetadata(error),
+      ssrReliability: ssrReliability
     })
   };
 };
 
 exports.getRenderErrorEventPayload = getRenderErrorEventPayload;
 
-var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes) {
+var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability) {
   return {
     eventType: 'operational',
     action: 'failed',
@@ -173,7 +175,8 @@ var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
       status: 'fail',
-      failReason: 'failed-processing'
+      failReason: 'failed-processing',
+      ssrReliability: ssrReliability
     }
   };
 };

package/dist/cjs/version.json

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

package/dist/es2019/root/card/cardAnalytics.js

@@ -1,19 +1,19 @@
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
 export const relevantFeatureFlagNames = ['newCardExperience', 'captions', 'timestampOnVideo'];
-export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, error) => {
+export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error) => {
   const fireEvent = payload => fireMediaCardEvent(payload, createAnalyticsEvent);
 
   switch (status) {
     case 'complete':
-      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes));
+      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability));
       break;
 
     case 'failed-processing':
-      fireEvent(getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes));
+      fireEvent(getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability));
       break;
 
     case 'error':
-      error && fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error));
+      error && fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability));
       break;
   }
 };

package/dist/es2019/root/card/index.js

@@ -36,6 +36,15 @@ export class CardBase extends Component {
 
     _defineProperty(this, "viewportPostAnchorRef", /*#__PURE__*/createRef());
 
+    _defineProperty(this, "ssrReliability", {
+      server: {
+        status: 'unknown'
+      },
+      client: {
+        status: 'unknown'
+      }
+    });
+
     _defineProperty(this, "timeElapsedTillCommenced", performance.now());
 
     _defineProperty(this, "getImageURLParams", ({
@@ -165,7 +174,30 @@ export class CardBase extends Component {
       };
     });
 
+    _defineProperty(this, "logSSRImageError", cardPreview => {
+      if (cardPreview) {
+        const failedSSRObject = {
+          status: 'fail',
+          ...extractErrorInfo(new ImageLoadError(cardPreview.source))
+        };
+
+        if (isSSRClientPreview(cardPreview)) {
+          this.ssrReliability.client = failedSSRObject;
+        }
+        /* 
+          If the cardPreview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
+        */
+
+
+        if (isSSRDataPreview(cardPreview)) {
+          this.ssrReliability.server = failedSSRObject;
+          this.ssrReliability.client = failedSSRObject;
+        }
+      }
+    });
+
     _defineProperty(this, "onImageError", cardPreview => {
+      this.logSSRImageError(cardPreview);
       const {
         cardPreview: currentPreview
       } = this.state; // If the dataURI has been replaced, we can dismiss this error
@@ -188,10 +220,6 @@ export class CardBase extends Component {
           this.fireLocalPreviewErrorEvent(error);
         }
 
-        if (isSSR) {// TODO: set SSR-client reliability 'failed'.
-          // https://product-fabric.atlassian.net/browse/MEX-770
-        }
-
         const {
           identifier,
           dimensions = {}
@@ -207,6 +235,27 @@ export class CardBase extends Component {
     });
 
     _defineProperty(this, "onImageLoad", cardPreview => {
+      if (cardPreview) {
+        if (isSSRClientPreview(cardPreview) && this.ssrReliability.client.status === 'unknown') {
+          this.ssrReliability.client = {
+            status: 'success'
+          };
+        }
+        /* 
+          If the image loads successfully and it comes from server (global scope / ssrData), it means that we have reused it in client and the success counts for both: server & client.
+        */
+
+
+        if (isSSRDataPreview(cardPreview) && this.ssrReliability.server.status === 'unknown') {
+          this.ssrReliability.server = {
+            status: 'success'
+          };
+          this.ssrReliability.client = {
+            status: 'success'
+          };
+        }
+      }
+
       const {
         cardPreview: currentPreview
       } = this.state; // If the dataURI has been replaced, we can dismiss this callback
@@ -503,6 +552,8 @@ export class CardBase extends Component {
     });
 
     _defineProperty(this, "storeSSRData", () => {
+      var _this$ssrReliability$;
+
       const {
         ssr,
         identifier
@@ -510,15 +561,13 @@ export class CardBase extends Component {
       const {
         cardPreview: {
           dataURI
-        } = {},
-        error
+        } = {}
       } = this.state;
-      const ssrDataError = !!error ? extractErrorInfo(error) : undefined;
       return isFileIdentifier(identifier) && ssr === 'server' && /*#__PURE__*/React.createElement(StoreSSRDataScript, {
         identifier: identifier,
         dataURI: dataURI,
         dimensions: this.requestedDimensions,
-        error: ssrDataError
+        error: ((_this$ssrReliability$ = this.ssrReliability.server) === null || _this$ssrReliability$ === void 0 ? void 0 : _this$ssrReliability$.status) === 'fail' ? this.ssrReliability.server : undefined
       });
     });
 
@@ -582,19 +631,25 @@ export class CardBase extends Component {
       _cardPreview = getCardPreviewFromCache(id, _dimensions);
 
       if (!_cardPreview && _ssr) {
-        var _this$ssrData;
+        var _this$ssrData, _this$ssrData2;
 
         this.ssrData = getSSRData(_identifier);
 
-        if (_ssr === 'server' || !((_this$ssrData = this.ssrData) !== null && _this$ssrData !== void 0 && _this$ssrData.dataURI)) {
+        if ((_this$ssrData = this.ssrData) !== null && _this$ssrData !== void 0 && _this$ssrData.error) {
+          this.ssrReliability.server = {
+            status: 'fail',
+            ...this.ssrData.error
+          };
+        }
+
+        if (!((_this$ssrData2 = this.ssrData) !== null && _this$ssrData2 !== void 0 && _this$ssrData2.dataURI)) {
           try {
             _cardPreview = getSSRCardPreview(_ssr, _mediaClient, _identifier.id, this.getImageURLParams(_identifier), this.getMediaBlobUrlAttrs(_identifier));
           } catch (e) {
-            // TODO: handle error in client MEX-770
-            // If we fail building the dataURI in server, we store the error in the state
-            // to be later stored in global scope and logged in client.
-            // We don't set the status = error to fall back to the spinner icon
-            _error = _ssr === 'server' ? e : undefined;
+            this.ssrReliability[_ssr] = {
+              status: 'fail',
+              ...extractErrorInfo(e)
+            };
           }
         } else {
           _cardPreview = {
@@ -652,7 +707,7 @@ export class CardBase extends Component {
     }
 
     if (isCardVisible && !!ssr && !!cardPreview && isFileIdentifier(identifier)) {
-      var _this$ssrData2;
+      var _this$ssrData3;
 
       if (isSSRClientPreview(cardPreview)) {
         // Since the SSR preview brings the token in the query params,
@@ -660,7 +715,7 @@ export class CardBase extends Component {
         this.setCacheSSRPreview(identifier);
       }
 
-      if (isSSRDataPreview(cardPreview) && isBigger((_this$ssrData2 = this.ssrData) === null || _this$ssrData2 === void 0 ? void 0 : _this$ssrData2.dimensions, dimensions)) {
+      if (isSSRDataPreview(cardPreview) && isBigger((_this$ssrData3 = this.ssrData) === null || _this$ssrData3 === void 0 ? void 0 : _this$ssrData3.dimensions, dimensions)) {
         // If dimensions from Server have changed and are bigger,
         // we need to refetch
         this.refetchSSRPreview(identifier);
@@ -847,7 +902,7 @@ export class CardBase extends Component {
     const {
       createAnalyticsEvent
     } = this.props;
-    createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), error);
+    createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error);
   }
 
   fireCommencedEvent() {

package/dist/es2019/utils/analytics.js

@@ -30,14 +30,15 @@ export const getRenderCommencedEventPayload = (fileAttributes, performanceAttrib
     }
   };
 };
-export const getRenderSucceededEventPayload = (fileAttributes, performanceAttributes) => ({
+export const getRenderSucceededEventPayload = (fileAttributes, performanceAttributes, ssrReliability) => ({
   eventType: 'operational',
   action: 'succeeded',
   actionSubject: 'mediaCardRender',
   attributes: {
     fileAttributes,
     performanceAttributes,
-    status: 'success'
+    status: 'success',
+    ssrReliability
   }
 });
 export const getRenderFailedExternalUriPayload = (fileAttributes, performanceAttributes) => ({
@@ -88,7 +89,7 @@ export const extractErrorInfo = error => {
     errorDetail: getRenderErrorErrorDetail(error)
   };
 };
-export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes, error) => ({
+export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes, error, ssrReliability) => ({
   eventType: 'operational',
   action: 'failed',
   actionSubject: 'mediaCardRender',
@@ -97,10 +98,11 @@ export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes
     performanceAttributes,
     status: 'fail',
     ...extractErrorInfo(error),
-    request: getRenderErrorRequestMetadata(error)
+    request: getRenderErrorRequestMetadata(error),
+    ssrReliability
   }
 });
-export const getRenderFailedFileStatusPayload = (fileAttributes, performanceAttributes) => ({
+export const getRenderFailedFileStatusPayload = (fileAttributes, performanceAttributes, ssrReliability) => ({
   eventType: 'operational',
   action: 'failed',
   actionSubject: 'mediaCardRender',
@@ -108,7 +110,8 @@ export const getRenderFailedFileStatusPayload = (fileAttributes, performanceAttr
     fileAttributes,
     performanceAttributes,
     status: 'fail',
-    failReason: 'failed-processing'
+    failReason: 'failed-processing',
+    ssrReliability
   }
 });
 export const getCopiedFilePayload = fileId => ({

package/dist/es2019/version.json

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

package/dist/esm/root/card/cardAnalytics.js

@@ -1,21 +1,21 @@
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
 export var relevantFeatureFlagNames = ['newCardExperience', 'captions', 'timestampOnVideo'];
-export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, error) {
+export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error) {
   var fireEvent = function fireEvent(payload) {
     return fireMediaCardEvent(payload, createAnalyticsEvent);
   };
 
   switch (status) {
     case 'complete':
-      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes));
+      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability));
       break;
 
     case 'failed-processing':
-      fireEvent(getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes));
+      fireEvent(getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability));
       break;
 
     case 'error':
-      error && fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error));
+      error && fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability));
       break;
   }
 };

package/dist/esm/root/card/index.js

@@ -62,6 +62,15 @@ export var CardBase = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "viewportPostAnchorRef", /*#__PURE__*/createRef());
 
+    _defineProperty(_assertThisInitialized(_this), "ssrReliability", {
+      server: {
+        status: 'unknown'
+      },
+      client: {
+        status: 'unknown'
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "timeElapsedTillCommenced", performance.now());
 
     _defineProperty(_assertThisInitialized(_this), "getImageURLParams", function (_ref) {
@@ -238,7 +247,30 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       };
     });
 
+    _defineProperty(_assertThisInitialized(_this), "logSSRImageError", function (cardPreview) {
+      if (cardPreview) {
+        var failedSSRObject = _objectSpread({
+          status: 'fail'
+        }, extractErrorInfo(new ImageLoadError(cardPreview.source)));
+
+        if (isSSRClientPreview(cardPreview)) {
+          _this.ssrReliability.client = failedSSRObject;
+        }
+        /* 
+          If the cardPreview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
+        */
+
+
+        if (isSSRDataPreview(cardPreview)) {
+          _this.ssrReliability.server = failedSSRObject;
+          _this.ssrReliability.client = failedSSRObject;
+        }
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onImageError", function (cardPreview) {
+      _this.logSSRImageError(cardPreview);
+
       var currentPreview = _this.state.cardPreview; // If the dataURI has been replaced, we can dismiss this error
 
       if ((cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI) !== (currentPreview === null || currentPreview === void 0 ? void 0 : currentPreview.dataURI)) {
@@ -260,10 +292,6 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           _this.fireLocalPreviewErrorEvent(error);
         }
 
-        if (isSSR) {// TODO: set SSR-client reliability 'failed'.
-          // https://product-fabric.atlassian.net/browse/MEX-770
-        }
-
         var _this$props5 = _this.props,
             identifier = _this$props5.identifier,
             _this$props5$dimensio = _this$props5.dimensions,
@@ -280,6 +308,27 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onImageLoad", function (cardPreview) {
+      if (cardPreview) {
+        if (isSSRClientPreview(cardPreview) && _this.ssrReliability.client.status === 'unknown') {
+          _this.ssrReliability.client = {
+            status: 'success'
+          };
+        }
+        /* 
+          If the image loads successfully and it comes from server (global scope / ssrData), it means that we have reused it in client and the success counts for both: server & client.
+        */
+
+
+        if (isSSRDataPreview(cardPreview) && _this.ssrReliability.server.status === 'unknown') {
+          _this.ssrReliability.server = {
+            status: 'success'
+          };
+          _this.ssrReliability.client = {
+            status: 'success'
+          };
+        }
+      }
+
       var currentPreview = _this.state.cardPreview; // If the dataURI has been replaced, we can dismiss this callback
 
       if ((cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI) !== (currentPreview === null || currentPreview === void 0 ? void 0 : currentPreview.dataURI)) {
@@ -556,20 +605,19 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "storeSSRData", function () {
+      var _this$ssrReliability$;
+
       var _this$props10 = _this.props,
           ssr = _this$props10.ssr,
           identifier = _this$props10.identifier;
-      var _this$state3 = _this.state,
-          _this$state3$cardPrev = _this$state3.cardPreview;
-      _this$state3$cardPrev = _this$state3$cardPrev === void 0 ? {} : _this$state3$cardPrev;
-      var dataURI = _this$state3$cardPrev.dataURI,
-          error = _this$state3.error;
-      var ssrDataError = !!error ? extractErrorInfo(error) : undefined;
+      var _this$state$cardPrevi = _this.state.cardPreview;
+      _this$state$cardPrevi = _this$state$cardPrevi === void 0 ? {} : _this$state$cardPrevi;
+      var dataURI = _this$state$cardPrevi.dataURI;
       return isFileIdentifier(identifier) && ssr === 'server' && /*#__PURE__*/React.createElement(StoreSSRDataScript, {
         identifier: identifier,
         dataURI: dataURI,
         dimensions: _this.requestedDimensions,
-        error: ssrDataError
+        error: ((_this$ssrReliability$ = _this.ssrReliability.server) === null || _this$ssrReliability$ === void 0 ? void 0 : _this$ssrReliability$.status) === 'fail' ? _this.ssrReliability.server : undefined
       });
     });
 
@@ -627,19 +675,23 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       _cardPreview = getCardPreviewFromCache(id, _dimensions);
 
       if (!_cardPreview && _ssr) {
-        var _this$ssrData;
+        var _this$ssrData, _this$ssrData2;
 
         _this.ssrData = getSSRData(_identifier);
 
-        if (_ssr === 'server' || !((_this$ssrData = _this.ssrData) !== null && _this$ssrData !== void 0 && _this$ssrData.dataURI)) {
+        if ((_this$ssrData = _this.ssrData) !== null && _this$ssrData !== void 0 && _this$ssrData.error) {
+          _this.ssrReliability.server = _objectSpread({
+            status: 'fail'
+          }, _this.ssrData.error);
+        }
+
+        if (!((_this$ssrData2 = _this.ssrData) !== null && _this$ssrData2 !== void 0 && _this$ssrData2.dataURI)) {
           try {
             _cardPreview = getSSRCardPreview(_ssr, _mediaClient, _identifier.id, _this.getImageURLParams(_identifier), _this.getMediaBlobUrlAttrs(_identifier));
           } catch (e) {
-            // TODO: handle error in client MEX-770
-            // If we fail building the dataURI in server, we store the error in the state
-            // to be later stored in global scope and logged in client.
-            // We don't set the status = error to fall back to the spinner icon
-            _error = _ssr === 'server' ? e : undefined;
+            _this.ssrReliability[_ssr] = _objectSpread({
+              status: 'fail'
+            }, extractErrorInfo(e));
           }
         } else {
           _cardPreview = {
@@ -684,9 +736,9 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.hasBeenMounted = true;
-      var _this$state4 = this.state,
-          isCardVisible = _this$state4.isCardVisible,
-          cardPreview = _this$state4.cardPreview;
+      var _this$state3 = this.state,
+          isCardVisible = _this$state3.isCardVisible,
+          cardPreview = _this$state3.cardPreview;
       var _this$props12 = this.props,
           identifier = _this$props12.identifier,
           ssr = _this$props12.ssr,
@@ -697,7 +749,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       }
 
       if (isCardVisible && !!ssr && !!cardPreview && isFileIdentifier(identifier)) {
-        var _this$ssrData2;
+        var _this$ssrData3;
 
         if (isSSRClientPreview(cardPreview)) {
           // Since the SSR preview brings the token in the query params,
@@ -705,7 +757,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           this.setCacheSSRPreview(identifier);
         }
 
-        if (isSSRDataPreview(cardPreview) && isBigger((_this$ssrData2 = this.ssrData) === null || _this$ssrData2 === void 0 ? void 0 : _this$ssrData2.dimensions, dimensions)) {
+        if (isSSRDataPreview(cardPreview) && isBigger((_this$ssrData3 = this.ssrData) === null || _this$ssrData3 === void 0 ? void 0 : _this$ssrData3.dimensions, dimensions)) {
           // If dimensions from Server have changed and are bigger,
           // we need to refetch
           this.refetchSSRPreview(identifier);
@@ -732,14 +784,14 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           featureFlags = _this$props13.featureFlags,
           useInlinePlayer = _this$props13.useInlinePlayer,
           disableOverlay = _this$props13.disableOverlay;
-      var _this$state5 = this.state,
-          isCardVisible = _this$state5.isCardVisible,
-          cardPreview = _this$state5.cardPreview,
-          status = _this$state5.status,
-          fileState = _this$state5.fileState,
-          isBannedLocalPreview = _this$state5.isBannedLocalPreview,
-          previewDidRender = _this$state5.previewDidRender,
-          isPlayingFile = _this$state5.isPlayingFile;
+      var _this$state4 = this.state,
+          isCardVisible = _this$state4.isCardVisible,
+          cardPreview = _this$state4.cardPreview,
+          status = _this$state4.status,
+          fileState = _this$state4.fileState,
+          isBannedLocalPreview = _this$state4.isBannedLocalPreview,
+          previewDidRender = _this$state4.previewDidRender,
+          isPlayingFile = _this$state4.isPlayingFile;
       var isDifferent = isDifferentIdentifier(prevIdentifier, identifier);
       var turnedVisible = !prevIsCardVisible && isCardVisible;
       var isNewMediaClient = prevMediaClient !== mediaClient;
@@ -866,25 +918,25 @@ export var CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "metadata",
     get: function get() {
-      var _this$state6;
+      var _this$state5;
 
-      return getFileDetails(this.props.identifier, (_this$state6 = this.state) === null || _this$state6 === void 0 ? void 0 : _this$state6.fileState);
+      return getFileDetails(this.props.identifier, (_this$state5 = this.state) === null || _this$state5 === void 0 ? void 0 : _this$state5.fileState);
     }
   }, {
     key: "fileAttributes",
     get: function get() {
-      var _this$state7, _this$state7$fileStat;
+      var _this$state6, _this$state6$fileStat;
 
-      return getFileAttributes(this.metadata, (_this$state7 = this.state) === null || _this$state7 === void 0 ? void 0 : (_this$state7$fileStat = _this$state7.fileState) === null || _this$state7$fileStat === void 0 ? void 0 : _this$state7$fileStat.status);
+      return getFileAttributes(this.metadata, (_this$state6 = this.state) === null || _this$state6 === void 0 ? void 0 : (_this$state6$fileStat = _this$state6.fileState) === null || _this$state6$fileStat === void 0 ? void 0 : _this$state6$fileStat.status);
     }
   }, {
     key: "fireOperationalEvent",
     value: function fireOperationalEvent() {
-      var _this$state8 = this.state,
-          status = _this$state8.status,
-          error = _this$state8.error;
+      var _this$state7 = this.state,
+          status = _this$state7.status,
+          error = _this$state7.error;
       var createAnalyticsEvent = this.props.createAnalyticsEvent;
-      createAnalyticsEvent && _fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), error);
+      createAnalyticsEvent && _fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error);
     }
   }, {
     key: "fireCommencedEvent",
@@ -928,9 +980,9 @@ export var CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$state9 = this.state,
-          isPlayingFile = _this$state9.isPlayingFile,
-          mediaViewerSelectedItem = _this$state9.mediaViewerSelectedItem;
+      var _this$state8 = this.state,
+          isPlayingFile = _this$state8.isPlayingFile,
+          mediaViewerSelectedItem = _this$state8.mediaViewerSelectedItem;
       var innerContent = /*#__PURE__*/React.createElement(React.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null, this.storeSSRData());
       return this.props.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
         locale: "en"

package/dist/esm/utils/analytics.js

@@ -40,7 +40,7 @@ export var getRenderCommencedEventPayload = function getRenderCommencedEventPayl
     }
   };
 };
-export var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes, performanceAttributes) {
+export var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability) {
   return {
     eventType: 'operational',
     action: 'succeeded',
@@ -48,7 +48,8 @@ export var getRenderSucceededEventPayload = function getRenderSucceededEventPayl
     attributes: {
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
-      status: 'success'
+      status: 'success',
+      ssrReliability: ssrReliability
     }
   };
 };
@@ -102,7 +103,7 @@ export var extractErrorInfo = function extractErrorInfo(error) {
     errorDetail: getRenderErrorErrorDetail(error)
   };
 };
-export var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error) {
+export var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability) {
   return {
     eventType: 'operational',
     action: 'failed',
@@ -112,11 +113,12 @@ export var getRenderErrorEventPayload = function getRenderErrorEventPayload(file
       performanceAttributes: performanceAttributes,
       status: 'fail'
     }, extractErrorInfo(error)), {}, {
-      request: getRenderErrorRequestMetadata(error)
+      request: getRenderErrorRequestMetadata(error),
+      ssrReliability: ssrReliability
     })
   };
 };
-export var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes) {
+export var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability) {
   return {
     eventType: 'operational',
     action: 'failed',
@@ -125,7 +127,8 @@ export var getRenderFailedFileStatusPayload = function getRenderFailedFileStatus
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
       status: 'fail',
-      failReason: 'failed-processing'
+      failReason: 'failed-processing',
+      ssrReliability: ssrReliability
     }
   };
 };

package/dist/esm/version.json

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

package/dist/types/__tests_external__/page-objects/MediaCard.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="cypress" />
-/// <reference types="jquery" />
 import { InProductTestPageObject } from '@atlaskit/in-product-testing';
 export declare class MediaCardPageObject extends InProductTestPageObject {
     expectCardReady(numOfCards: number): Cypress.Chainable<JQuery<HTMLElement>>;

package/dist/types/root/card/cardAnalytics.d.ts

@@ -1,9 +1,10 @@
 import { FileAttributes, MediaFeatureFlags, PerformanceAttributes } from '@atlaskit/media-common';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { SSRStatus } from '../../utils/analytics';
 import { CardStatus } from '../..';
 import { MediaCardError } from './../../errors';
 export declare const relevantFeatureFlagNames: Array<keyof MediaFeatureFlags>;
-export declare const fireOperationalEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, status: CardStatus, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, error?: MediaCardError | undefined) => void;
+export declare const fireOperationalEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, status: CardStatus, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, error?: MediaCardError | undefined) => void;
 export declare const fireCommencedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => void;
 export declare const fireCopiedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileId: string, cardRef: HTMLDivElement) => void;
 export declare const fireScreenEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileAttributes: FileAttributes) => void;

package/dist/types/root/card/index.d.ts

@@ -9,6 +9,7 @@ export declare class CardBase extends Component<CardBaseProps, CardState> {
     private hasBeenMounted;
     private viewportPreAnchorRef;
     private viewportPostAnchorRef;
+    private ssrReliability;
     private timeElapsedTillCommenced;
     subscription?: Subscription;
     private ssrData?;
@@ -29,6 +30,7 @@ export declare class CardBase extends Component<CardBaseProps, CardState> {
     private get metadata();
     private get fileAttributes();
     private getPerformanceAttributes;
+    private logSSRImageError;
     private onImageError;
     private onImageLoad;
     private fireOperationalEvent;

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

@@ -9,12 +9,27 @@ export declare type MediaCardErrorInfo = {
     error: MediaClientErrorReason | 'nativeError';
     errorDetail: string;
 };
-export declare type RenderFailedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & FailureAttributes & {
+export declare type SSRStatusFail = MediaCardErrorInfo & {
+    status: 'fail';
+};
+declare type SSRStatusSuccess = SuccessAttributes;
+declare type SSRStatusUnknown = {
+    status: 'unknown';
+};
+declare type SSRStatusAttributes = SSRStatusSuccess | SSRStatusFail | SSRStatusUnknown;
+export declare type SSRStatus = {
+    server: SSRStatusAttributes;
+    client: SSRStatusAttributes;
+};
+export declare type WithSSRReliability = {
+    ssrReliability?: SSRStatus;
+};
+export declare type RenderFailedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & WithSSRReliability & FailureAttributes & {
     failReason: FailedErrorFailReason | 'failed-processing';
     error?: MediaClientErrorReason | 'nativeError';
     request?: RequestMetadata;
 }, 'failed', 'mediaCardRender'>;
-export declare type RenderSucceededEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & SuccessAttributes, 'succeeded', 'mediaCardRender'>;
+export declare type RenderSucceededEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & WithSSRReliability & SuccessAttributes, 'succeeded', 'mediaCardRender'>;
 export declare type RenderCommencedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes, 'commenced', 'mediaCardRender'>;
 export declare type CopiedFileEventPayload = UIEventPayload<{}, 'copied', string>;
 export declare type ClickedEventPayload = UIEventPayload<{
@@ -30,15 +45,16 @@ export declare type MediaCardAnalyticsEventPayload = RenderCommencedEventPayload
 export declare const getFileAttributes: (metadata: FileDetails, fileStatus?: "failed-processing" | "uploading" | "processing" | "processed" | "error" | undefined) => FileAttributes;
 export declare const getRenderPreviewableCardPayload: (fileAttributes: FileAttributes) => RenderScreenEventPayload;
 export declare const getRenderCommencedEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => RenderCommencedEventPayload;
-export declare const getRenderSucceededEventPayload: (fileAttributes: FileAttributes, performanceAttributes?: PerformanceAttributes | undefined) => RenderSucceededEventPayload;
+export declare const getRenderSucceededEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus) => RenderSucceededEventPayload;
 export declare const getRenderFailedExternalUriPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => RenderFailedEventPayload;
 export declare const getRenderErrorFailReason: (error: MediaCardError) => FailedErrorFailReason;
 export declare const getRenderErrorErrorReason: (error: MediaCardError) => MediaClientErrorReason | 'nativeError';
 export declare const getRenderErrorErrorDetail: (error: MediaCardError) => string;
 export declare const getRenderErrorRequestMetadata: (error: MediaCardError) => RequestMetadata | undefined;
 export declare const extractErrorInfo: (error: MediaCardError) => MediaCardErrorInfo;
-export declare const getRenderErrorEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, error: MediaCardError) => RenderFailedEventPayload;
-export declare const getRenderFailedFileStatusPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => RenderFailedEventPayload;
+export declare const getRenderErrorEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, error: MediaCardError, ssrReliability: SSRStatus) => RenderFailedEventPayload;
+export declare const getRenderFailedFileStatusPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus) => RenderFailedEventPayload;
 export declare const getCopiedFilePayload: (fileId: string) => CopiedFileEventPayload;
 export declare function fireMediaCardEvent(payload: MediaCardAnalyticsEventPayload, createAnalyticsEvent?: CreateUIAnalyticsEvent): void;
 export declare const createAndFireMediaCardEvent: (payload: MediaCardAnalyticsEventPayload) => (createAnalyticsEvent: CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "73.2.0",
+  "version": "73.3.0",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,13 +30,13 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/dropdown-menu": "^11.1.0",
-    "@atlaskit/editor-shared-styles": "^1.6.0",
+    "@atlaskit/editor-shared-styles": "^2.0.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/in-product-testing": "^0.1.0",
-    "@atlaskit/media-client": "^14.3.0",
-    "@atlaskit/media-common": "^2.10.0",
-    "@atlaskit/media-ui": "^19.0.0",
-    "@atlaskit/media-viewer": "^46.0.0",
+    "@atlaskit/media-client": "^14.4.0",
+    "@atlaskit/media-common": "^2.11.0",
+    "@atlaskit/media-ui": "^20.0.0",
+    "@atlaskit/media-viewer": "^46.1.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tooltip": "^17.5.0",
@@ -57,13 +57,13 @@
   "devDependencies": {
     "@atlaskit/analytics-listeners": "^8.2.0",
     "@atlaskit/analytics-namespaced-context": "^6.4.0",
-    "@atlaskit/button": "^16.1.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/checkbox": "^12.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/inline-message": "^11.2.0",
     "@atlaskit/item": "^12.0.0",
     "@atlaskit/media-core": "^32.2.0",
-    "@atlaskit/media-test-helpers": "^29.1.0",
+    "@atlaskit/media-test-helpers": "^29.2.0",
     "@atlaskit/radio": "^5.3.2",
     "@atlaskit/range": "^6.0.0",
     "@atlaskit/select": "^15.2.1",