@atlaskit/link-create 1.10.0 → 1.11.0

package/dist/es2019/ui/link-create/error-boundary/index.js

@@ -5,6 +5,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { ANALYTICS_CHANNEL } from '../../../common/constants';
 import { ErrorBoundaryUI } from '../../../common/ui/error-boundary-ui';
 import createEventPayload from '../../../common/utils/analytics/analytics.codegen';
+import { useExperience } from '../../../controllers/experience-tracker';
 import { BaseErrorBoundary } from './error-boundary-base';
 export const ErrorBoundary = ({
   children,
@@ -13,14 +14,17 @@ export const ErrorBoundary = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const experience = getBooleanFF('platform.linking-platform.link-create.better-observability') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useExperience() : null;
   const handleError = useCallback((error, info) => {
     var _window, _window$navigator, _window2, _window2$navigator, _info$componentStack;
-    if (getBooleanFF('platform.linking-platform.link-create.enable-sentry-client')) {
-      // Capture exception to Sentry
-      captureException(error, 'link-create');
+    if (!getBooleanFF('platform.linking-platform.link-create.better-observability')) {
+      if (getBooleanFF('platform.linking-platform.link-create.enable-sentry-client')) {
+        // Capture exception to Sentry
+        captureException(error, 'link-create');
+      }
     }
-
-    // Fire Analytics event
     createAnalyticsEvent(createEventPayload('operational.linkCreate.unhandledErrorCaught', getBooleanFF('platform.linking-platform.link-create.enable-sentry-client') ? {
       browserInfo: ((_window = window) === null || _window === void 0 ? void 0 : (_window$navigator = _window.navigator) === null || _window$navigator === void 0 ? void 0 : _window$navigator.userAgent) || 'unknown',
       error: error.name,
@@ -30,10 +34,11 @@ export const ErrorBoundary = ({
       error: error.toString(),
       componentStack: (_info$componentStack = info === null || info === void 0 ? void 0 : info.componentStack) !== null && _info$componentStack !== void 0 ? _info$componentStack : ''
     })).fire(ANALYTICS_CHANNEL);
-
-    // Fire UFO failed experience
-    // failUfoExperience(ufoExperience.mounted);
-  }, [createAnalyticsEvent]);
+    if (getBooleanFF('platform.linking-platform.link-create.better-observability')) {
+      // Track experience as failed for SLO
+      experience === null || experience === void 0 ? void 0 : experience.failure(error);
+    }
+  }, [createAnalyticsEvent, experience]);
   return /*#__PURE__*/React.createElement(BaseErrorBoundary, {
     onError: handleError,
     errorComponent: errorComponent !== null && errorComponent !== void 0 ? errorComponent : /*#__PURE__*/React.createElement(ErrorBoundaryUI, null)

package/dist/es2019/ui/link-create/main.js

@@ -55,7 +55,9 @@ const LinkCreateWithModal = ({
   }, [onCreate, setFormErrorMessage]);
   const handleFailure = useCallback(error => {
     // Set the form error message
-    setFormErrorMessage(error.message);
+    if (error instanceof Error) {
+      setFormErrorMessage(error.message);
+    }
     onFailure && onFailure(error);
   }, [onFailure, setFormErrorMessage]);
   const {
@@ -73,8 +75,8 @@ const LinkCreateWithModal = ({
   }, [onCancel, getShouldShowWarning, showExitWarning]);
   const handleCloseExitWarning = useCallback(() => setShowExitWarning(false), []);
   return jsx(LinkCreateCallbackProvider, {
-    onCreate: handleCreate,
-    onFailure: handleFailure,
+    onCreate: getBooleanFF('platform.linking-platform.link-create.better-observability') ? onCreate : handleCreate,
+    onFailure: getBooleanFF('platform.linking-platform.link-create.better-observability') ? onFailure : handleFailure,
     onCancel: handleCancel
   }, jsx(ModalTransition, null, active && jsx(Modal, {
     testId: "link-create-modal",

package/dist/es2019/ui/main.js

@@ -1,30 +1,31 @@
 /** @jsx jsx */
-import { memo } from 'react';
+import { Fragment, memo } from 'react';
 import { jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { COMPONENT_NAME } from '../common/constants';
 import { ErrorBoundaryModal } from '../common/ui/error-boundary-modal';
 import { withLinkCreateAnalyticsContext } from '../common/utils/analytics';
 import { fetchMessagesForLocale } from '../common/utils/locale/fetch-messages-for-locale';
+import { Experience } from '../controllers/experience-tracker';
 import i18nEN from '../i18n/en';
 import LinkCreate from './link-create';
 import { ErrorBoundary } from './link-create/error-boundary';
-const LinkCreateWithAnalyticsContext = withLinkCreateAnalyticsContext( /*#__PURE__*/memo(({
-  ...props
-}) => {
-  return jsx(ErrorBoundary, {
+const LinkCreateWithAnalyticsContext = withLinkCreateAnalyticsContext( /*#__PURE__*/memo(props => {
+  const ExperienceProvider = getBooleanFF('platform.linking-platform.link-create.better-observability') ? Experience : Fragment;
+  return jsx(ExperienceProvider, null, jsx(ErrorBoundary, {
     errorComponent: jsx(ErrorBoundaryModal, {
       active: props.active,
       onClose: props.onCancel
     })
-  }, jsx(LinkCreate, props));
+  }, jsx(LinkCreate, props)));
 }));
 export const PACKAGE_DATA = {
   packageName: "@atlaskit/link-create" || '',
-  packageVersion: "1.10.0" || '',
-  componentName: COMPONENT_NAME,
-  source: COMPONENT_NAME
+  packageVersion: "1.11.0" || '',
+  component: COMPONENT_NAME,
+  componentName: COMPONENT_NAME
 };
 const ComposedLinkCreate = /*#__PURE__*/memo(props => {
   return jsx(AnalyticsContext, {

package/dist/esm/common/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export default defineMessages({
+  genericErrorMessage: {
+    id: 'link-create.unknown-error.heading',
+    defaultMessage: 'Something went wrong',
+    description: 'Message when an unknown error occurs'
+  }
+});

package/dist/esm/common/ui/error-boundary-ui/index.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import EmptyState from '@atlaskit/empty-state';
+import commonMessages from '../../messages';
 import ErrorSVG from './error-svg';
 import messages from './messages';
 export var CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
@@ -11,7 +12,7 @@ export var ErrorBoundaryUI = function ErrorBoundaryUI() {
   return /*#__PURE__*/React.createElement(EmptyState, {
     maxImageWidth: 82,
     testId: 'link-create-error-boundary-ui',
-    header: intl.formatMessage(messages.heading),
+    header: intl.formatMessage(commonMessages.genericErrorMessage),
     description: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.description, {
       values: {
         a: function a(label) {

package/dist/esm/common/ui/error-boundary-ui/messages.js

@@ -1,10 +1,5 @@
 import { defineMessages } from 'react-intl-next';
 export default defineMessages({
-  heading: {
-    id: 'link-create.unknown-error.heading',
-    defaultMessage: 'Something went wrong',
-    description: 'Heading when an unknown error occurs'
-  },
   description: {
     id: 'link-create.unknown-error.description',
     defaultMessage: 'Refresh the page, or contact <a>Atlassian Support</a> if this keeps happening.',

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

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  *
  * Generates Typescript types for analytics events from analytics.spec.yaml
  *
- * @codegen <<SignedSource::be704bbbca0e49c927d1268b9a0f1d6a>>
+ * @codegen <<SignedSource::20562f2db603daab7d5b7a5c5ba1c04b>>
  * @codegenCommand yarn workspace @atlaskit/link-create run codegen-analytics
  */
 

package/dist/esm/common/utils/errors/index.js

@@ -0,0 +1,32 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import { getTraceId } from '@atlaskit/linking-common/utils';
+var getUrlPath = function getUrlPath(url) {
+  try {
+    return new URL(url).pathname;
+  } catch (_unused) {
+    return 'Failed to parse pathname from url';
+  }
+};
+export var getNetworkFields = function getNetworkFields(error) {
+  if (error instanceof Response) {
+    return {
+      traceId: getTraceId(error),
+      status: error.status,
+      path: getUrlPath(error.url)
+    };
+  }
+  return {
+    traceId: null,
+    status: null,
+    path: null
+  };
+};
+export var getErrorType = function getErrorType(error) {
+  if (error instanceof Response) {
+    return 'NetworkError';
+  }
+  if (error instanceof Error) {
+    return error.name;
+  }
+  return _typeof(error);
+};

package/dist/esm/controllers/callback-context/main.js

@@ -5,8 +5,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useContext, useMemo } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { ANALYTICS_CHANNEL } from '../../common/constants';
 import createEventPayload from '../../common/utils/analytics/analytics.codegen';
+import { getErrorType } from '../../common/utils/errors';
+import { useExperience } from '../experience-tracker';
 var LinkCreateCallbackContext = /*#__PURE__*/React.createContext({});
 var LinkCreateCallbackProvider = function LinkCreateCallbackProvider(_ref) {
   var children = _ref.children,
@@ -15,6 +18,9 @@ var LinkCreateCallbackProvider = function LinkCreateCallbackProvider(_ref) {
     onCancel = _ref.onCancel;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var experience = getBooleanFF('platform.linking-platform.link-create.better-observability') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useExperience() : null;
   var handleCreate = useMemo(function () {
     return {
       onCreate: function () {
@@ -23,18 +29,25 @@ var LinkCreateCallbackProvider = function LinkCreateCallbackProvider(_ref) {
           return _regeneratorRuntime.wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
+                if (getBooleanFF('platform.linking-platform.link-create.better-observability')) {
+                  /**
+                   * We consider the experience successful once we have
+                   * successfully created an object
+                   */
+                  experience === null || experience === void 0 || experience.success();
+                }
                 objectId = result.objectId, objectType = result.objectType;
                 createAnalyticsEvent(createEventPayload('track.object.created.linkCreate', {
                   objectId: objectId,
                   objectType: objectType
                 })).fire(ANALYTICS_CHANNEL);
                 if (!_onCreate) {
-                  _context.next = 5;
+                  _context.next = 6;
                   break;
                 }
-                _context.next = 5;
+                _context.next = 6;
                 return _onCreate(result);
-              case 5:
+              case 6:
               case "end":
                 return _context.stop();
             }
@@ -46,7 +59,7 @@ var LinkCreateCallbackProvider = function LinkCreateCallbackProvider(_ref) {
         return onCreate;
       }()
     };
-  }, [createAnalyticsEvent, _onCreate]);
+  }, [createAnalyticsEvent, _onCreate, experience]);
   var handleFailure = useMemo(function () {
     return {
       onFailure: function () {
@@ -55,10 +68,13 @@ var LinkCreateCallbackProvider = function LinkCreateCallbackProvider(_ref) {
             while (1) switch (_context2.prev = _context2.next) {
               case 0:
                 createAnalyticsEvent(createEventPayload('track.object.createFailed.linkCreate', {
-                  failureType: error.name
+                  failureType: getErrorType(error)
                 })).fire(ANALYTICS_CHANNEL);
+                if (getBooleanFF('platform.linking-platform.link-create.better-observability')) {
+                  experience === null || experience === void 0 || experience.failure(error);
+                }
                 _onFailure && _onFailure(error);
-              case 2:
+              case 3:
               case "end":
                 return _context2.stop();
             }
@@ -70,7 +86,7 @@ var LinkCreateCallbackProvider = function LinkCreateCallbackProvider(_ref) {
         return onFailure;
       }()
     };
-  }, [createAnalyticsEvent, _onFailure]);
+  }, [createAnalyticsEvent, _onFailure, experience]);
   var value = useMemo(function () {
     return _objectSpread(_objectSpread({
       onCancel: onCancel

package/dist/esm/controllers/experience-tracker/index.js

@@ -0,0 +1,75 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import React, { createContext, useContext, useMemo, useRef } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { captureException } from '@atlaskit/linking-common/sentry';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { ANALYTICS_CHANNEL } from '../../common/constants';
+import createEventPayload from '../../common/utils/analytics/analytics.codegen';
+import { getErrorType, getNetworkFields } from '../../common/utils/errors';
+var ExperienceContext = /*#__PURE__*/createContext({
+  success: function success() {},
+  failure: function failure() {}
+});
+
+/**
+ * Experience provider that simply keeps track of the state of the experience.
+ * Fires an operational event when experience state changes to FAILED.
+ */
+export var Experience = function Experience(_ref) {
+  var children = _ref.children;
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var experience = useRef('STARTED');
+  var value = useMemo(function () {
+    return {
+      success: function success() {
+        if (experience.current !== 'SUCCEEDED') {
+          experience.current = 'SUCCEEDED';
+        }
+      },
+      /**
+       * Indicate the experience has failed and capture exception information
+       * @param error Typically an Error class or Response class
+       */
+      failure: function failure(error) {
+        var experienceStatus = 'FAILED';
+
+        /**
+         * Always capture an event to Splunk
+         */
+        createAnalyticsEvent(createEventPayload('operational.operation.failed.linkCreate', _objectSpread({
+          /**
+           * The type of error that has failed the experience
+           */
+          errorType: getErrorType(error),
+          /**
+           * The current status of the experience (has failed)
+           */
+          experienceStatus: experienceStatus,
+          /**
+           * Previous experience status indicates whether the experience
+           * has just failed now, or has already failing
+           */
+          previousExperienceStatus: experience.current
+        }, getNetworkFields(error)))).fire(ANALYTICS_CHANNEL);
+        if (error instanceof Error) {
+          if (getBooleanFF('platform.linking-platform.link-create.enable-sentry-client')) {
+            // Capture exception to Sentry
+            captureException(error, 'link-create');
+          }
+        }
+        if (experience.current !== experienceStatus) {
+          experience.current = experienceStatus;
+        }
+      }
+    };
+  }, [experience, createAnalyticsEvent]);
+  return /*#__PURE__*/React.createElement(ExperienceContext.Provider, {
+    value: value
+  }, children);
+};
+export var useExperience = function useExperience() {
+  return useContext(ExperienceContext);
+};

package/dist/esm/index.js

@@ -1,2 +1,3 @@
+export { FORM_ERROR } from 'final-form';
 export { default, TextField, CreateForm, Select, AsyncSelect, CreateFormLoader, FormSpy } from './ui/index';
 export { useLinkCreateCallback, LinkCreateCallbackProvider } from './controllers/callback-context';

package/dist/esm/ui/create-form/async-select/main.js

@@ -10,8 +10,13 @@ import { useEffect, useMemo, useState } from 'react';
 import { jsx } from '@emotion/react';
 import debounce from 'debounce-promise';
 import { useForm } from 'react-final-form';
+import { useIntl } from 'react-intl-next';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { AsyncSelect as AkAsyncSelect } from '@atlaskit/select';
+import messages from '../../../common/messages';
+import { useLinkCreateCallback } from '../../../controllers/callback-context';
 import { CreateField } from '../../../controllers/create-field';
+import { useFormContext } from '../../../controllers/form-context';
 export var TEST_ID = 'link-create-async-select';
 
 /**
@@ -30,10 +35,15 @@ export function AsyncSelect(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
     propsDefaultValue = _ref.defaultOption,
-    loadOptions = _ref.loadOptions,
+    loadOptionsFn = _ref.loadOptions,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var _useForm = useForm(),
     mutators = _useForm.mutators;
+  var _useLinkCreateCallbac = useLinkCreateCallback(),
+    onFailure = _useLinkCreateCallbac.onFailure;
+  var _useFormContext = useFormContext(),
+    setFormErrorMessage = _useFormContext.setFormErrorMessage;
+  var intl = useIntl();
   var _useState = useState(propsDefaultValue),
     _useState2 = _slicedToArray(_useState, 2),
     defaultValue = _useState2[0],
@@ -46,24 +56,56 @@ export function AsyncSelect(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     defaultOptions = _useState6[0],
     setDefaultOptions = _useState6[1];
+
+  /**
+   * This binds experience to fail if async fetch ever fails to load
+   */
+  var loadOptions = getBooleanFF('platform.linking-platform.link-create.better-observability') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useMemo(function () {
+    if (loadOptionsFn) {
+      return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var _args = arguments;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return loadOptionsFn.apply(void 0, _args);
+            case 3:
+              return _context.abrupt("return", _context.sent);
+            case 6:
+              _context.prev = 6;
+              _context.t0 = _context["catch"](0);
+              onFailure === null || onFailure === void 0 || onFailure(_context.t0);
+              setFormErrorMessage(intl.formatMessage(messages.genericErrorMessage));
+              return _context.abrupt("return", []);
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 6]]);
+      }));
+    }
+  }, [intl, onFailure, loadOptionsFn, setFormErrorMessage]) : loadOptionsFn;
   useEffect(function () {
     var current = true;
     var fetch = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
         var query,
           options,
-          _args = arguments;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+          _args2 = arguments;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              query = _args.length > 0 && _args[0] !== undefined ? _args[0] : '';
+              query = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : '';
               if (loadOptions) {
-                _context.next = 3;
+                _context2.next = 3;
                 break;
               }
-              return _context.abrupt("return");
+              return _context2.abrupt("return");
             case 3:
-              _context.prev = 3;
+              _context2.prev = 3;
               /**
                * If we are fetching default options, clear the
                * value the user has set
@@ -73,30 +115,30 @@ export function AsyncSelect(_ref) {
               }
               setIsLoadingDefaultOptions(true);
               setDefaultOptions([]);
-              _context.next = 9;
+              _context2.next = 9;
               return loadOptions(query);
             case 9:
-              options = _context.sent;
+              options = _context2.sent;
               if (current) {
                 setDefaultOptions(options);
                 setIsLoadingDefaultOptions(false);
               }
-              _context.next = 16;
+              _context2.next = 16;
               break;
             case 13:
-              _context.prev = 13;
-              _context.t0 = _context["catch"](3);
+              _context2.prev = 13;
+              _context2.t0 = _context2["catch"](3);
               if (current) {
                 setIsLoadingDefaultOptions(false);
               }
             case 16:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
-        }, _callee, null, [[3, 13]]);
+        }, _callee2, null, [[3, 13]]);
       }));
       return function fetch() {
-        return _ref2.apply(this, arguments);
+        return _ref3.apply(this, arguments);
       };
     }();
     fetch();
@@ -127,9 +169,9 @@ export function AsyncSelect(_ref) {
     validators: validators,
     validationHelpText: validationHelpText,
     testId: testId
-  }, function (_ref3) {
-    var fieldId = _ref3.fieldId,
-      fieldProps = _objectWithoutProperties(_ref3, _excluded2);
+  }, function (_ref4) {
+    var fieldId = _ref4.fieldId,
+      fieldProps = _objectWithoutProperties(_ref4, _excluded2);
     return jsx(AkAsyncSelect, _extends({
       inputId: fieldId
     }, fieldProps, restProps, {

package/dist/esm/ui/create-form/main.js

@@ -1,17 +1,22 @@
 import _typeof from "@babel/runtime/helpers/typeof";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-var _excluded = ["submitting"];
+var _excluded = ["submitting", "submitError"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 /** @jsx jsx */
 import { useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
+import { FORM_ERROR } from 'final-form';
 import { Form, FormSpy } from 'react-final-form';
+import { useIntl } from 'react-intl-next';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives';
 import { CREATE_FORM_MAX_WIDTH_IN_PX, LINK_CREATE_FORM_POST_CREATE_FIELD } from '../../common/constants';
+import messages from '../../common/messages';
+import { useLinkCreateCallback } from '../../controllers/callback-context';
 import { useExitWarningModal } from '../../controllers/exit-warning-modal-context';
 import { useFormContext } from '../../controllers/form-context';
 import { CreateFormFooter } from './form-footer';
@@ -33,10 +38,14 @@ export var CreateForm = function CreateForm(_ref) {
     hideFooter = _ref.hideFooter,
     initialValues = _ref.initialValues;
   var _useFormContext = useFormContext(),
+    setFormErrorMessage = _useFormContext.setFormErrorMessage,
     formErrorMessage = _useFormContext.formErrorMessage,
     enableEditView = _useFormContext.enableEditView;
+  var intl = useIntl();
   var _useExitWarningModal = useExitWarningModal(),
     setShouldShowWarning = _useExitWarningModal.setShouldShowWarning;
+  var _useLinkCreateCallbac = useLinkCreateCallback(),
+    onFailure = _useLinkCreateCallbac.onFailure;
   var handleSubmit = useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data) {
       var shouldEnableEditView, formData;
@@ -54,6 +63,11 @@ export var CreateForm = function CreateForm(_ref) {
              * if submission is successful
              */
             enableEditView === null || enableEditView === void 0 || enableEditView(!!shouldEnableEditView);
+
+            /**
+             * This is the onSubmit handler provided by the plugin
+             * It will be async, and it will likely involve awaiting `onCreate` (the adopters handler)
+             */
             return _context.abrupt("return", onSubmit(formData));
           case 4:
             return _context.abrupt("return", onSubmit(data));
@@ -67,6 +81,40 @@ export var CreateForm = function CreateForm(_ref) {
       return _ref2.apply(this, arguments);
     };
   }(), [onSubmit, enableEditView]);
+  var handleSubmitWithErrorHandling = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _args2 = arguments;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.prev = 0;
+          /**
+           * Clear any error message that may have been set by async select fields
+           * This will immediately remove any indication of an error, but the form likely will fail to submit,
+           * it will be likely a 400 because the user probably could not set all fields anyway
+           */
+          setFormErrorMessage();
+          _context2.next = 4;
+          return handleSubmit.apply(void 0, _args2);
+        case 4:
+          return _context2.abrupt("return", _context2.sent);
+        case 7:
+          _context2.prev = 7;
+          _context2.t0 = _context2["catch"](0);
+          /**
+           * Notify link create of failed experience
+           */
+          onFailure === null || onFailure === void 0 || onFailure(_context2.t0);
+
+          /**
+           * Return a generic message for react final form to render
+           */
+          return _context2.abrupt("return", _defineProperty({}, FORM_ERROR, intl.formatMessage(messages.genericErrorMessage)));
+        case 11:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2, null, [[0, 7]]);
+  })), [handleSubmit, setFormErrorMessage, intl, onFailure]);
   var handleCancel = useCallback(function () {
     onCancel && onCancel();
   }, [onCancel]);
@@ -74,7 +122,7 @@ export var CreateForm = function CreateForm(_ref) {
     return jsx(CreateFormLoader, null);
   }
   return jsx(Form, {
-    onSubmit: handleSubmit,
+    onSubmit: getBooleanFF('platform.linking-platform.link-create.better-observability') ? handleSubmitWithErrorHandling : handleSubmit,
     initialValues: initialValues,
     mutators: {
       setField: function setField(args, state, tools) {
@@ -83,9 +131,10 @@ export var CreateForm = function CreateForm(_ref) {
         });
       }
     }
-  }, function (_ref3) {
-    var submitting = _ref3.submitting,
-      formProps = _objectWithoutProperties(_ref3, _excluded);
+  }, function (_ref5) {
+    var submitting = _ref5.submitting,
+      submitError = _ref5.submitError,
+      formProps = _objectWithoutProperties(_ref5, _excluded);
     return jsx("form", {
       onSubmit: formProps.handleSubmit,
       name: "link-create-form",
@@ -106,8 +155,14 @@ export var CreateForm = function CreateForm(_ref) {
         });
         setShouldShowWarning(isModified);
       }
-    }), jsx(Box, null, children), !hideFooter && jsx(CreateFormFooter, {
-      formErrorMessage: formErrorMessage,
+    }), jsx(Box, null, children), !hideFooter && jsx(CreateFormFooter
+    /**
+     * We will prefer to render the error message connected to
+     * react final form state (submitError) otherwise we can
+     * default to the `formErrorMessage` that we sometimes use with our own
+     * "form context" (only currently used for AsyncSelect field reporting failed loading)
+     */, {
+      formErrorMessage: getBooleanFF('platform.linking-platform.link-create.better-observability') ? submitError || formErrorMessage : formErrorMessage,
       handleCancel: handleCancel,
       submitting: submitting,
       testId: testId