Handle PB Element plugin errors during render

packages/app-page-builder/src/editor/components/Element.tsx

@@ -20,6 +20,7 @@ import {
     transitionStyles,
     typeStyle
 } from "./Element/ElementStyled";
+import tryRenderingPlugin from "./../../utils/tryRenderingPlugin";
 
 export type ElementProps = {
     className?: string;
@@ -100,6 +101,8 @@ const Element = (props: ElementProps) => {
         return null;
     }
 
+    const renderedPlugin = tryRenderingPlugin(() => plugin.render({ element }));
+
     return (
         <Transition in={true} timeout={250} appear={true}>
             {state => (
@@ -115,7 +118,7 @@ const Element = (props: ElementProps) => {
                         <Draggable target={plugin.target} beginDrag={beginDrag} endDrag={endDrag}>
                             {renderDraggable}
                         </Draggable>
-                        {plugin.render({ element })}
+                        {renderedPlugin}
                     </div>
                     {/*
                         <div className="add-element add-element--above">+</div>

packages/app-page-builder/src/editor/plugins/elements/row/Row.tsx

@@ -3,7 +3,6 @@ import ConnectedElement from "@webiny/app-page-builder/editor/components/Connect
 import { ElementRoot } from "@webiny/app-page-builder/render/components/ElementRoot";
 import RowContainer from "./RowContainer";
 import ElementAnimation from "@webiny/app-page-builder/render/components/ElementAnimation";
-
 /**
  * TODO: this entire component can be further optimized (see the Chrome Profiler) to avoid unnecessary elements re-renders.
  */

packages/app-page-builder/src/render/components/Element.tsx

@@ -3,6 +3,8 @@ import React, { useMemo } from "react";
 import { getPlugins } from "@webiny/plugins";
 import { PbElement, PbRenderElementPlugin, PbThemePlugin } from "@webiny/app-page-builder/types";
 
+import tryRenderingPlugin from "./../../utils/tryRenderingPlugin";
+
 export type ElementProps = {
     element: PbElement;
 };
@@ -27,7 +29,9 @@ const Element = (props: ElementProps) => {
         return null;
     }
 
-    return <>{plugin.render({ theme, element })}</>;
+    const renderedPlugin = tryRenderingPlugin(() => plugin.render({ theme, element }));
+
+    return <>{renderedPlugin}</>;
 };
 
 export default Element;

packages/app-page-builder/src/utils/tryRenderingPlugin.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+const tryRenderingPlugin = fn => {
+    try {
+        return fn();
+    } catch (err) {
+        console.log(err);
+        return (
+            <div style={{ paddingTop: "15px", paddingBottom: "15px", color: "rgb(206, 17, 38)" }}>
+                <div style={{ fontSize: "1.5em", paddingBottom: "5px" }}>Error: {err.message}</div>
+                <div style={{ fontSize: "1.1em", color: "rgb(206, 17, 38)" }}>
+                    Check the console for more information regarding the error.
+                </div>
+            </div>
+        );
+    }
+};
+
+export default tryRenderingPlugin;