MC-5691: Implement better developer error reporting

- Add better error reporting into factories

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type-factory.js

@@ -34,28 +34,42 @@ export default function createContentType(
     data: object = {},
     childrenLength: number = 0,
 ): Promise<ContentTypeInterface | ContentTypeCollectionInterface> {
-    return new Promise((resolve: (contentType: ContentTypeInterface | ContentTypeCollectionInterface) => void) => {
+    return new Promise(
+        (resolve: (contentType: ContentType | ContentTypeCollection) => void,
+         reject: (error: string) => void
+    )=> {
         loadModule([config.component], (contentTypeComponent: typeof ContentType | typeof ContentTypeCollection) => {
-            const contentType = new contentTypeComponent(
-                parent,
-                config,
-                stageId,
-            );
-            Promise.all(
-                [
-                    previewFactory(contentType, config),
-                    masterFactory(contentType, config),
-                ],
-            ).then(([previewComponent, masterComponent]) => {
-                contentType.preview = previewComponent;
-                contentType.content = masterComponent;
-                contentType.dataStore.update(
-                    prepareData(config, data),
+            try {
+                const contentType = new contentTypeComponent(
+                    parent,
+                    config,
+                    stageId,
                 );
-                resolve(contentType);
-            });
+                Promise.all(
+                    [
+                        previewFactory(contentType, config),
+                        masterFactory(contentType, config),
+                    ],
+                ).then(([previewComponent, masterComponent]) => {
+                    contentType.preview = previewComponent;
+                    contentType.content = masterComponent;
+                    contentType.dataStore.update(
+                        prepareData(config, data),
+                    );
+                    resolve(contentType);
+                }).catch((error) => {
+                    reject(error);
+                });
+            } catch (error) {
+                reject(`Error within component (${config.component}) for ${config.name}.`);
+                console.error(error);
+            }
+        }, (error: string) => {
+            reject(`Unable to load component (${config.component}) for ${config.name}. Please check component exists`
+                + ` and content type configuration is correct.`);
+            console.error(error);
         });
-    }).then((contentType: ContentTypeInterface | ContentTypeCollectionInterface) => {
+    }).then((contentType) => {
         events.trigger("contentType:createAfter", {id: contentType.id, contentType});
         events.trigger(config.name + ":createAfter", {id: contentType.id, contentType});
         fireContentTypeReadyEvent(contentType, childrenLength);
@@ -94,10 +108,10 @@ function prepareData(config: ContentTypeConfigInterface, data: {}) {
 /**
  * A content type is ready once all of its children have mounted
  *
- * @param {ContentType} contentType
+ * @param {ContentType | ContentTypeCollection} contentType
  * @param {number} childrenLength
  */
-function fireContentTypeReadyEvent(contentType: ContentTypeInterface, childrenLength: number) {
+function fireContentTypeReadyEvent(contentType: ContentType | ContentTypeCollection, childrenLength: number) {
     const fire = () => {
         const params = {id: contentType.id, contentType, expectChildren: childrenLength};
         events.trigger("contentType:mountAfter", params);

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/master-factory.js

@@ -6,6 +6,7 @@
 import loadModule from "Magento_PageBuilder/js/utils/loader";
 import ContentTypeConfigInterface from "../content-type-config.d";
 import ContentTypeInterface from "../content-type.d";
+import ContentTypeCollectionInterface from "../content-type-collection.d";
 import converterResolver from "./converter-resolver";
 import Master from "./master";
 import MasterCollection from "./master-collection";
@@ -14,26 +15,37 @@ import observableUpdaterFactory from "./observable-updater-factory";
 /**
  * Create new content instance
  *
- * @param {ContentTypeInterface} contentType
+ * @param {ContentTypeInterface | ContentTypeCollectionInterface} contentType
  * @param {ContentTypeConfigInterface} config
  * @returns {Promise<ContentTypeInterface>}
  */
 export default function create(
-    contentType: ContentTypeInterface,
+    contentType: ContentTypeInterface | ContentTypeCollectionInterface,
     config: ContentTypeConfigInterface,
 ): Promise<Master | MasterCollection> {
-    return new Promise((resolve: (masterComponent: Master | MasterCollection) => void) => {
+    return new Promise(
+        (resolve: (masterComponent: Master | MasterCollection) => void, reject: (error: string) => void
+    ) => {
         observableUpdaterFactory(config, converterResolver).then((observableUpdater) => {
-            loadModule([config.master_component], (contentComponent: typeof Master | typeof MasterCollection) => {
-                resolve(
-                    new contentComponent(
+            loadModule([config.master_component], (masterComponent: typeof Master | typeof MasterCollection) => {
+                try {
+                    const master = new masterComponent(
                         contentType,
                         observableUpdater,
-                    ),
-                );
+                    );
+                    resolve(master);
+                } catch (error) {
+                    reject(`Error within master component (${config.master_component}) for ${config.name}.`);
+                    console.error(error);
+                }
+            }, (error: Error) => {
+                reject(`Unable to load preview component (${config.master_component}) for ${config.name}. Please ` +
+                    `check preview component exists and content type configuration is correct.`);
+                console.error(error);
             });
         }).catch((error) => {
             console.error(error);
+            return null;
         });
     });
 }

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/observable-updater-factory.js

@@ -35,6 +35,7 @@ export default function create(
             );
         }).catch((error) => {
             console.error(error);
+            return null;
         });
     });
 }

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/preview-factory.js

@@ -6,6 +6,7 @@
 import loadModule from "Magento_PageBuilder/js/utils/loader";
 import ContentTypeConfigInterface from "../content-type-config.d";
 import ContentTypeInterface from "../content-type.d";
+import ContentTypeCollectionInterface from "../content-type-collection.d";
 import observableUpdaterFactory from "./observable-updater-factory";
 import Preview from "./preview";
 import PreviewCollection from "./preview-collection";
@@ -14,27 +15,38 @@ import previewConverterResolver from "./preview-converter-resolver";
 /**
  * Create new preview instance
  *
- * @param {ContentTypeInterface} contentType
+ * @param {ContentTypeInterface | ContentTypeCollectionInterface} contentType
  * @param {ContentTypeConfigInterface} config
- * @returns {Promise<ContentTypeInterface>}
+ * @returns {Promise<Preview | PreviewCollection>}
  */
 export default function create(
-    contentType: ContentTypeInterface,
+    contentType: ContentTypeInterface | ContentTypeCollectionInterface,
     config: ContentTypeConfigInterface,
 ): Promise<Preview | PreviewCollection> {
-    return new Promise((resolve: (previewComponent: Preview | PreviewCollection) => void) => {
+    return new Promise(
+        (resolve: (previewComponent: Preview | PreviewCollection) => void, reject: (e: string) => void
+    ) => {
         observableUpdaterFactory(config, previewConverterResolver).then((observableUpdater) => {
             loadModule([config.preview_component], (previewComponent: typeof Preview | typeof PreviewCollection) => {
-                resolve(
-                    new previewComponent(
+                try {
+                    const preview = new previewComponent(
                         contentType,
                         config,
                         observableUpdater,
-                    ),
-                );
+                    );
+                    resolve(preview);
+                } catch (error) {
+                    reject(`Error within preview component (${config.preview_component}) for ${config.name}.`);
+                    console.error(error);
+                }
+            }, (error: string) => {
+                reject(`Unable to load preview component (${config.preview_component}) for ${config.name}. Please ` +
+                    `check preview component exists and content type configuration is correct.`);
+                console.error(error);
             });
         }).catch((error) => {
             console.error(error);
+            return null;
         });
     });
 }