@atlaskit/smart-card 15.5.0 → 16.2.0

package/dist/es2019/state/actions/index.js

@@ -7,6 +7,7 @@ import { useSmartLinkContext } from '../context';
 import * as measure from '../../utils/performance';
 import { APIError } from '../../client/errors';
 import { getUnauthorizedJsonLd } from '../../utils/jsonld';
+import { addMetadataToExperience } from '../analytics';
 export const useSmartCardActions = (id, url, analytics) => {
   const {
     store,
@@ -19,16 +20,13 @@ export const useSmartCardActions = (id, url, analytics) => {
   } = store;
   const {
     details,
-    lastUpdatedAt,
     status
   } = getState()[url] || {
     status: 'pending',
-    lastUpdatedAt: Date.now(),
     details: undefined
   };
   const hasAuthFlowSupported = config.authFlow !== 'disabled';
   const hasData = !!(details && details.data);
-  const hasExpired = Date.now() - lastUpdatedAt >= config.maxAge;
   const handleResolvedLinkError = useCallback((url, error) => {
     if (error.kind === 'fatal') {
       // If there's no previous data in the store for this URL, then bail
@@ -85,18 +83,21 @@ export const useSmartCardActions = (id, url, analytics) => {
 
 
     dispatch(cardAction(ACTION_RESOLVED, {
-      url: resourceUrl,
-      hasExpired: hasExpired && !hasData
+      url: resourceUrl
     }, response));
-  }, [dispatch, handleResolvedLinkError, hasData, hasExpired, hasAuthFlowSupported]);
+  }, [dispatch, handleResolvedLinkError, hasAuthFlowSupported]);
   const resolve = useCallback(async (resourceUrl = url, isReloading = false) => {
     // Request JSON-LD data for the card from ORS, iff it has extended
     // its cache lifespan OR there is no data for it currently. Once the data
     // has come back asynchronously, dispatch the resolved action for the card.
-    if (isReloading || hasExpired || !hasData) {
+    if (isReloading || !hasData) {
       return connections.client.fetchData(resourceUrl).then(response => handleResolvedLinkResponse(resourceUrl, response)).catch(error => handleResolvedLinkError(resourceUrl, error));
+    } else {
+      addMetadataToExperience('smart-link-rendered', id, {
+        cached: true
+      });
     }
-  }, [url, hasData, hasExpired, connections.client, handleResolvedLinkResponse, handleResolvedLinkError]);
+  }, [url, hasData, connections.client, handleResolvedLinkResponse, handleResolvedLinkError, id]);
   const register = useCallback(() => {
     if (!details) {
       dispatch(cardAction(ACTION_PENDING, {
@@ -132,10 +133,10 @@ export const useSmartCardActions = (id, url, analytics) => {
       analytics.screen.authPopupEvent(definitionId, extensionKey);
       auth(services[0].url).then(() => {
         analytics.track.appAccountConnected(definitionId, extensionKey);
-        analytics.operational.connectSucceededEvent(definitionId, extensionKey);
+        analytics.operational.connectSucceededEvent(id, definitionId, extensionKey);
         reload();
       }, err => {
-        analytics.operational.connectFailedEvent(definitionId, extensionKey, err.type);
+        analytics.operational.connectFailedEvent(id, definitionId, extensionKey, err.type);
 
         if (err.type === 'auth_window_closed') {
           analytics.ui.closedAuthEvent(appearance, definitionId, extensionKey);
@@ -144,7 +145,7 @@ export const useSmartCardActions = (id, url, analytics) => {
         reload();
       });
     }
-  }, [analytics.ui, analytics.screen, analytics.track, analytics.operational, reload, details, status]);
+  }, [analytics.ui, analytics.screen, analytics.track, analytics.operational, id, reload, details, status]);
   const invoke = useCallback(async (opts, appearance) => {
     const {
       key,

package/dist/es2019/state/analytics/index.js

@@ -1,40 +1,2 @@
-import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, uiRenderFailedEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
-import { useMemo } from 'react';
-export const useSmartLinkAnalytics = dispatchAnalytics => {
-  const ui = useMemo(() => ({
-    authEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiAuthEvent(display, definitionId, extensionKey)),
-    authAlternateAccountEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiAuthAlternateAccountEvent(display, definitionId, extensionKey)),
-    cardClickedEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiCardClickedEvent(display, definitionId, extensionKey)),
-    actionClickedEvent: (providerKey, actionType, display) => dispatchAnalytics(uiActionClickedEvent(providerKey, actionType, display)),
-    closedAuthEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiClosedAuthEvent(display, definitionId, extensionKey)),
-    renderSuccessEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiRenderSuccessEvent(display, definitionId, extensionKey)),
-    renderFailedEvent: (display, error, errorInfo) => dispatchAnalytics(uiRenderFailedEvent(display, error, errorInfo))
-  }), [dispatchAnalytics]);
-  const operational = useMemo(() => ({
-    resolvedEvent: (id, definitionId, extensionKey, resourceType) => dispatchAnalytics(resolvedEvent(id, definitionId, extensionKey, resourceType)),
-    unresolvedEvent: (id, status, definitionId, extensionKey, resourceType) => dispatchAnalytics(unresolvedEvent(id, status, definitionId, extensionKey, resourceType)),
-    invokeSucceededEvent: (id, providerKey, actionType, display) => dispatchAnalytics(invokeSucceededEvent(id, providerKey, actionType, display)),
-    invokeFailedEvent: (id, providerKey, actionType, display, reason) => dispatchAnalytics(invokeFailedEvent(id, providerKey, actionType, display, reason)),
-    connectSucceededEvent: (definitionId, extensionKey) => dispatchAnalytics(connectSucceededEvent(definitionId, extensionKey)),
-    connectFailedEvent: (definitionId, extensionKey, reason) => dispatchAnalytics(connectFailedEvent(definitionId, extensionKey, reason)),
-    instrument: (id, status, definitionId, extensionKey, resourceType, error) => {
-      const event = instrumentEvent(id, status, definitionId, extensionKey, resourceType, error);
-
-      if (event) {
-        dispatchAnalytics(event);
-      }
-    }
-  }), [dispatchAnalytics]);
-  const track = useMemo(() => ({
-    appAccountConnected: (definitionId, extensionKey) => dispatchAnalytics(trackAppAccountConnected(definitionId, extensionKey))
-  }), [dispatchAnalytics]);
-  const screen = useMemo(() => ({
-    authPopupEvent: (definitionId, extensionKey) => dispatchAnalytics(screenAuthPopupEvent(definitionId, extensionKey))
-  }), [dispatchAnalytics]);
-  return useMemo(() => ({
-    ui,
-    operational,
-    track,
-    screen
-  }), [ui, operational, track, screen]);
-};
+export { startUfoExperience, succeedUfoExperience, failUfoExperience, addMetadataToExperience } from './ufoExperiences';
+export { useSmartLinkAnalytics } from './useSmartLinkAnalytics';

package/dist/es2019/state/analytics/ufoExperiences.js

@@ -0,0 +1,40 @@
+import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
+const ufoExperiences = {
+  'smart-link-rendered': new ConcurrentExperience('smart-link-rendered', {
+    type: ExperienceTypes.Load,
+    performanceType: ExperiencePerformanceTypes.PageSegmentLoad,
+    platform: {
+      component: 'smart-links'
+    }
+  }),
+  'smart-link-authenticated': new ConcurrentExperience('smart-link-authenticated', {
+    type: ExperienceTypes.Load,
+    performanceType: ExperiencePerformanceTypes.PageSegmentLoad,
+    platform: {
+      component: 'smart-links'
+    }
+  })
+};
+export const startUfoExperience = (experienceName, id, properties) => {
+  const experience = ufoExperiences[experienceName].getInstance(id);
+  experience.start();
+
+  if (properties) {
+    experience.addMetadata(properties);
+  }
+};
+export const succeedUfoExperience = (experienceName, id, properties) => {
+  const experience = ufoExperiences[experienceName].getInstance(id);
+  experience.success({
+    metadata: properties
+  });
+};
+export const failUfoExperience = (experienceName, id, properties) => {
+  const experience = ufoExperiences[experienceName].getInstance(id);
+  experience.failure({
+    metadata: properties
+  });
+};
+export const addMetadataToExperience = (experienceName, id, properties) => {
+  ufoExperiences[experienceName].getInstance(id).addMetadata(properties);
+};

package/dist/es2019/state/analytics/useSmartLinkAnalytics.js

@@ -0,0 +1,62 @@
+import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
+import { useMemo } from 'react';
+import { startUfoExperience, succeedUfoExperience } from './ufoExperiences';
+export const useSmartLinkAnalytics = dispatchAnalytics => {
+  const ui = useMemo(() => ({
+    authEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiAuthEvent(display, definitionId, extensionKey)),
+    authAlternateAccountEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiAuthAlternateAccountEvent(display, definitionId, extensionKey)),
+    cardClickedEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiCardClickedEvent(display, definitionId, extensionKey)),
+    actionClickedEvent: (providerKey, actionType, display) => dispatchAnalytics(uiActionClickedEvent(providerKey, actionType, display)),
+    closedAuthEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiClosedAuthEvent(display, definitionId, extensionKey)),
+    renderSuccessEvent: (display, id, definitionId, extensionKey) => {
+      succeedUfoExperience('smart-link-rendered', id, {
+        extensionKey,
+        display
+      }); // UFO will disregard this if authentication experience has not yet been started
+
+      succeedUfoExperience('smart-link-authenticated', id, {
+        display
+      });
+      dispatchAnalytics(uiRenderSuccessEvent(display, definitionId, extensionKey));
+    }
+  }), [dispatchAnalytics]);
+  const operational = useMemo(() => ({
+    resolvedEvent: (id, definitionId, extensionKey, resourceType) => dispatchAnalytics(resolvedEvent(id, definitionId, extensionKey, resourceType)),
+    unresolvedEvent: (id, status, definitionId, extensionKey, resourceType) => dispatchAnalytics(unresolvedEvent(id, status, definitionId, extensionKey, resourceType)),
+    invokeSucceededEvent: (id, providerKey, actionType, display) => dispatchAnalytics(invokeSucceededEvent(id, providerKey, actionType, display)),
+    invokeFailedEvent: (id, providerKey, actionType, display, reason) => dispatchAnalytics(invokeFailedEvent(id, providerKey, actionType, display, reason)),
+    connectSucceededEvent: (id, definitionId, extensionKey) => {
+      startUfoExperience('smart-link-authenticated', id, {
+        extensionKey,
+        status: 'success'
+      });
+      dispatchAnalytics(connectSucceededEvent(definitionId, extensionKey));
+    },
+    connectFailedEvent: (id, definitionId, extensionKey, status) => {
+      startUfoExperience('smart-link-authenticated', id, {
+        extensionKey,
+        status
+      });
+      dispatchAnalytics(connectFailedEvent(definitionId, extensionKey, status));
+    },
+    instrument: (id, status, definitionId, extensionKey, resourceType, error) => {
+      const event = instrumentEvent(id, status, definitionId, extensionKey, resourceType, error);
+
+      if (event) {
+        dispatchAnalytics(event);
+      }
+    }
+  }), [dispatchAnalytics]);
+  const track = useMemo(() => ({
+    appAccountConnected: (definitionId, extensionKey) => dispatchAnalytics(trackAppAccountConnected(definitionId, extensionKey))
+  }), [dispatchAnalytics]);
+  const screen = useMemo(() => ({
+    authPopupEvent: (definitionId, extensionKey) => dispatchAnalytics(screenAuthPopupEvent(definitionId, extensionKey))
+  }), [dispatchAnalytics]);
+  return useMemo(() => ({
+    ui,
+    operational,
+    track,
+    screen
+  }), [ui, operational, track, screen]);
+};

package/dist/es2019/state/context/provider.js

@@ -3,14 +3,12 @@ import { useContext, useMemo } from 'react';
 import { createStore } from 'redux';
 import { cardReducer } from '../reducers';
 import { SmartCardContext } from '.';
-import { MAX_RELOAD_DELAY, MAX_LOADING_DELAY } from '../actions/constants';
 import CardClient from '../../client';
 import { extractPreview } from '../../extractors/common/preview';
 import { getUrl } from '../helpers';
 export function SmartCardProvider({
   storeOptions,
   client: customClient,
-  cacheOptions: customCacheOptions,
   authFlow: customAuthFlow,
   children,
   renderers
@@ -25,10 +23,6 @@ export function SmartCardProvider({
     const client = customClient || new CardClient();
     const store = createStore(cardReducer, initialState);
     const authFlow = customAuthFlow || 'oauth2';
-    const cacheOptions = customCacheOptions || {
-      maxAge: MAX_RELOAD_DELAY,
-      maxLoadingDelay: MAX_LOADING_DELAY
-    };
 
     const getPreview = (url, platform) => {
       const cardState = getUrl(store, url);
@@ -42,14 +36,14 @@ export function SmartCardProvider({
       connections: {
         client
       },
-      config: { ...cacheOptions,
+      config: {
         authFlow
       },
       extractors: {
         getPreview
       }
     };
-  }, [customClient, customCacheOptions, customAuthFlow, storeOptions, renderers]);
+  }, [customClient, customAuthFlow, storeOptions, renderers]);
   return /*#__PURE__*/React.createElement(SmartCardContext.Provider, {
     value: parentContext || providerValue
   }, children);

package/dist/es2019/state/helpers.js

@@ -10,8 +10,7 @@ export const getByDefinitionId = (definitionId, store) => {
 };
 export const getUrl = (store, url) => {
   return store.getState()[url] || {
-    status: 'pending',
-    lastUpdatedAt: Date.now()
+    status: 'pending'
   };
 };
 export const getClickUrl = (url, jsonLd) => {

package/dist/es2019/state/hooks/useSmartLink.js

@@ -11,12 +11,10 @@ export function useSmartLink(id, url, dispatchAnalytics) {
   const config = useSmartLinkConfig();
   const renderers = useSmartLinkRenderers(); // NB: used to propagate errors from hooks to error boundaries.
 
-  const [, setState] = useState(); // Register the current card.
+  const [error, setError] = useState(null); // Register the current card.
 
   const register = () => {
-    actions.register().catch(err => setState(() => {
-      throw err;
-    }));
+    actions.register().catch(err => setError(err));
   }; // AFP-2511 TODO: Fix automatic suppressions below
   // eslint-disable-next-line react-hooks/exhaustive-deps
 
@@ -28,6 +26,7 @@ export function useSmartLink(id, url, dispatchAnalytics) {
     actions,
     config,
     analytics,
-    renderers
+    renderers,
+    error
   };
 }

package/dist/es2019/state/reducers/index.js

@@ -5,8 +5,7 @@ const cardReducerMap = {
     type
   }) => {
     return {
-      status: type,
-      lastUpdatedAt: Date.now()
+      status: type
     };
   },
   [actions.ACTION_RESOLVING]: (state, {
@@ -33,7 +32,6 @@ const cardReducerMap = {
       nextState.status = type;
     }
 
-    nextState.lastUpdatedAt = Date.now();
     return nextState;
   },
   [actions.ACTION_ERROR]: (state, {
@@ -60,12 +58,9 @@ export const cardReducer = (state, action) => {
     const cardState = state[action.url]; // Card may have reached the same state on account of multiple of the same
     // URL being present in an editor session. E.g. page with N links to one resource.
 
-    const hasSameStatus = cardState && cardState.status === action.type; // Card needs to be refreshed. In this case, we ignore the same status pragma which
-    // is described above - this forces a rerender for all links of the same status.
-
-    const hasExpired = action.hasExpired;
+    const hasSameStatus = cardState && cardState.status === action.type;
 
-    if (!hasExpired && hasSameStatus) {
+    if (hasSameStatus) {
       return state;
     } else {
       const nextState = cardReducerMap[action.type](cardState, action);

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

@@ -6,6 +6,22 @@ export const context = {
   packageName,
   packageVersion
 };
+export class SmartLinkEvents {
+  insertSmartLink(url, type, createAnalyticsEvent) {
+    fireSmartLinkEvent({
+      action: 'inserted',
+      actionSubject: 'smartLink',
+      eventType: 'track',
+      attributes: {
+        type
+      },
+      nonPrivacySafeAttributes: {
+        domainName: url
+      }
+    }, createAnalyticsEvent);
+  }
+
+}
 export const fireSmartLinkEvent = (payload, createAnalyticsEvent) => {
   if (createAnalyticsEvent) {
     createAnalyticsEvent(payload).fire(ANALYTICS_CHANNEL);

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "15.5.0",
+	"version": "16.2.0",
 	"sideEffects": false
 }

package/dist/es2019/view/BlockCard/index.js

@@ -21,7 +21,8 @@ export const BlockCard = ({
   isSelected,
   onResolve,
   testId,
-  showActions
+  showActions,
+  platform
 }) => {
   var _details$meta, _forbiddenViewProps$c;
 
@@ -42,7 +43,7 @@ export const BlockCard = ({
       });
 
     case 'resolved':
-      const resolvedViewProps = extractBlockProps(data, meta, extractorOpts, renderers);
+      const resolvedViewProps = extractBlockProps(data, meta, extractorOpts, renderers, platform);
 
       if (onResolve) {
         onResolve({

package/dist/es2019/view/CardWithUrl/component-lazy/LazyFallback.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CardLinkView } from '@atlaskit/media-ui';
+export const loadingPlaceholderClassName = 'smart-link-loading-placeholder';
 export const LoadingCardLink = ({
   isSelected,
   url
@@ -8,5 +9,6 @@ export const LoadingCardLink = ({
   testId: 'lazy-render-placeholder',
   "data-trello-do-not-use-override": "lazy-render-placeholder-trello",
   isSelected: isSelected,
-  link: url
+  link: url,
+  className: loadingPlaceholderClassName
 });

package/dist/es2019/view/CardWithUrl/component-lazy/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { isIntersectionObserverSupported } from '@atlaskit/media-ui';
 import { LazyLazilyRenderCard } from './LazyLazilyRenderCard';
 import { LazyIntersectionObserverCard } from './LazyIntersectionObserverCard';
-export function LazyCardWithUrlContent(props) {
+export default function LazyCardWithUrlContent(props) {
   if (isIntersectionObserverSupported()) {
     return /*#__PURE__*/React.createElement(LazyIntersectionObserverCard, props);
   } else {

package/dist/es2019/view/CardWithUrl/component.js

@@ -28,7 +28,8 @@ export function CardWithUrlContent({
     actions,
     config,
     analytics,
-    renderers
+    renderers,
+    error
   } = useSmartLink(id, url, dispatchAnalytics);
   const definitionId = getDefinitionId(state.details);
   const extensionKey = getExtensionKey(state.details);
@@ -67,9 +68,13 @@ export function CardWithUrlContent({
 
   useEffect(() => {
     if (isFinalState(state.status)) {
-      analytics.ui.renderSuccessEvent(appearance, definitionId, extensionKey);
+      analytics.ui.renderSuccessEvent(appearance, id, definitionId, extensionKey);
     }
-  }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui]);
+  }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui, id]); // We have to keep this last to prevent hook order from being violated
+
+  if (error) {
+    throw error;
+  }
 
   switch (appearance) {
     case 'inline':
@@ -99,7 +104,8 @@ export function CardWithUrlContent({
         isSelected: isSelected,
         onResolve: onResolve,
         testId: testId,
-        showActions: showActions
+        showActions: showActions,
+        platform: platform
       });
 
     case 'embed':

package/dist/es2019/view/CardWithUrl/loader.js

@@ -1,60 +1,32 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+import React, { lazy, useEffect, useState, Suspense } from 'react';
 import uuid from 'uuid';
 import { CardLinkView } from '@atlaskit/media-ui';
 import { uiRenderFailedEvent, fireSmartLinkEvent } from '../../utils/analytics';
 import { clearMarks, clearMeasures } from '../../utils/performance';
-export class CardWithURLRenderer extends React.PureComponent {
-  constructor(props) {
-    super(props);
+import { ErrorBoundary } from 'react-error-boundary';
+import { failUfoExperience, startUfoExperience } from '../../state/analytics/ufoExperiences';
+const LazyCardWithUrlContent = /*#__PURE__*/lazy(() => import(
+/* webpackChunkName: "@atlaskit-internal_smartcard-urlcardcontent" */
+'./component-lazy/index'));
+export function CardWithURLRenderer(props) {
+  const [id] = useState(() => uuid()); // Equivalent to ComponentWillMount
 
-    _defineProperty(this, "dispatchAnalytics", analyticsPayload => {
-      const {
-        appearance,
-        createAnalyticsEvent
-      } = this.props;
-
-      if (analyticsPayload && analyticsPayload.attributes) {
-        // Update if we haven't already set the display - possible
-        // in the case of `preview` which is rendered differently.
-        if (!analyticsPayload.attributes.display) {
-          analyticsPayload.attributes.display = appearance;
-        }
-      }
-
-      fireSmartLinkEvent(analyticsPayload, createAnalyticsEvent);
-    });
-
-    this.state = {
-      id: uuid()
+  useState(() => {
+    // We want to start timing of render event only once and right at the start
+    startUfoExperience('smart-link-rendered', id);
+  });
+  useEffect(() => {
+    // ComponentWillUnmount
+    return () => {
+      clearMarks(id);
+      clearMeasures(id);
     };
-  }
+  }, [id]);
 
-  static moduleImporter(target) {
-    import(
-    /* webpackChunkName: "@atlaskit-internal_smartcard-urlcardcontent" */
-    './component-lazy/index').then(module => {
-      CardWithURLRenderer.CardContent = module.LazyCardWithUrlContent;
-      target.forceUpdate();
-    });
-  }
-
-  componentDidMount() {
-    if (CardWithURLRenderer.CardContent === null) {
-      (this.props.importer || CardWithURLRenderer.moduleImporter)(this);
-    }
-  }
-
-  componentWillUnmount() {
-    const id = this.state.id;
-    clearMarks(id);
-    clearMeasures(id);
-  }
-
-  componentDidCatch(error, errorInfo) {
+  const logError = (error, info) => {
     const {
-      appearance
-    } = this.props; // NB: APIErrors are thrown in response to Object Resolver Service.
+      componentStack
+    } = info; // NB: APIErrors are thrown in response to Object Resolver Service.
     // In these cases, control is handed back to the Editor. We do not
     // fire an event for these, as they do not cover failed UI render events.
 
@@ -64,54 +36,80 @@ export class CardWithURLRenderer extends React.PureComponent {
     // to the reliability of the smart-card front-end components. We instrument
     // these in order to measure our front-end reliability.
     else {
-        this.dispatchAnalytics(uiRenderFailedEvent(appearance, error, errorInfo));
-      }
-  } // Wrapper around analytics.
+      const errorInfo = {
+        componentStack
+      };
+      failUfoExperience('smart-link-rendered', id);
+      failUfoExperience('smart-link-authenticated', id);
+      dispatchAnalytics(uiRenderFailedEvent(appearance, error, errorInfo));
+    }
+  }; // Wrapper around analytics.
 
 
-  render() {
+  const dispatchAnalytics = analyticsPayload => {
     const {
-      url,
       appearance,
-      isSelected,
-      isFrameVisible,
-      onClick,
-      container,
-      onResolve,
-      testId,
-      showActions,
-      inheritDimensions,
-      platform,
-      embedIframeRef,
-      inlinePreloaderStyle
-    } = this.props;
+      createAnalyticsEvent
+    } = props;
 
-    if (!url) {
-      throw new Error('@atlaskit/smart-card: url property is missing.');
+    if (analyticsPayload && analyticsPayload.attributes) {
+      // Update if we haven't already set the display - possible
+      // in the case of `preview` which is rendered differently.
+      if (!analyticsPayload.attributes.display) {
+        analyticsPayload.attributes.display = appearance;
+      }
     }
 
-    return CardWithURLRenderer.CardContent !== null ? /*#__PURE__*/React.createElement(CardWithURLRenderer.CardContent, {
-      id: this.state.id,
-      url: url,
-      appearance: appearance,
-      onClick: onClick,
-      isSelected: isSelected,
-      isFrameVisible: isFrameVisible,
-      dispatchAnalytics: this.dispatchAnalytics,
-      container: container,
-      onResolve: onResolve,
-      testId: testId,
-      showActions: showActions,
-      inheritDimensions: inheritDimensions,
-      platform: platform,
-      embedIframeRef: embedIframeRef,
-      inlinePreloaderStyle: inlinePreloaderStyle
-    }) : /*#__PURE__*/React.createElement(CardLinkView, {
-      key: 'chunk-placeholder',
-      link: url
-    });
+    fireSmartLinkEvent(analyticsPayload, createAnalyticsEvent);
+  };
+
+  const {
+    url,
+    appearance,
+    isSelected,
+    isFrameVisible,
+    onClick,
+    container,
+    onResolve,
+    testId,
+    showActions,
+    inheritDimensions,
+    platform,
+    embedIframeRef,
+    inlinePreloaderStyle
+  } = props;
+
+  if (!url) {
+    throw new Error('@atlaskit/smart-card: url property is missing.');
   }
 
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    FallbackComponent: ErrorFallback,
+    onError: logError
+  }, /*#__PURE__*/React.createElement(Suspense, {
+    fallback: /*#__PURE__*/React.createElement(CardLinkView, {
+      key: 'chunk-placeholder',
+      link: url
+    })
+  }, /*#__PURE__*/React.createElement(LazyCardWithUrlContent, {
+    id: id,
+    url: url,
+    appearance: appearance,
+    onClick: onClick,
+    isSelected: isSelected,
+    isFrameVisible: isFrameVisible,
+    dispatchAnalytics: dispatchAnalytics,
+    container: container,
+    onResolve: onResolve,
+    testId: testId,
+    showActions: showActions,
+    inheritDimensions: inheritDimensions,
+    platform: platform,
+    embedIframeRef: embedIframeRef,
+    inlinePreloaderStyle: inlinePreloaderStyle
+  })));
 }
 
-_defineProperty(CardWithURLRenderer, "CardContent", null);
+const ErrorFallback = () => {
+  return /*#__PURE__*/React.createElement("span", null);
+};