From e5bedbaa633d678157e6b34ee74789917e368df3 Mon Sep 17 00:00:00 2001
From: Fsalker <andreiii500@yahoo.com>
Date: Mon, 24 Feb 2020 16:24:16 +0200
Subject: [PATCH 1/6] fix: 'Element' components are enclosed in Error
 Boundaries now

---
 .../src/editor/components/Element.tsx         | 83 ++++++++++++++-----
 .../src/render/components/Element.tsx         | 36 +++++++-
 2 files changed, 95 insertions(+), 24 deletions(-)

diff --git a/packages/app-page-builder/src/editor/components/Element.tsx b/packages/app-page-builder/src/editor/components/Element.tsx
index fdde804d6fc..528c35197d4 100644
--- a/packages/app-page-builder/src/editor/components/Element.tsx
+++ b/packages/app-page-builder/src/editor/components/Element.tsx
@@ -36,6 +36,41 @@ export type ElementProps = {
     dragging: boolean;
 };
 
+// Using a class element for a change because `componentDidCatch` only works with class elements ;/
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            error: null,
+            errorInfo: null
+        }
+    }
+
+    componentDidCatch(error, errorInfo) {
+        this.setState({
+            error,
+            errorInfo
+        })
+    }
+
+    render() {
+        if(this.state.error) {
+            return (
+                <div>
+                    <h3>An unexpected error has occurred</h3>
+                    <details>
+                        <div>{this.state.error.toString()}</div>
+                        <div>{this.state.errorInfo.componentStack}</div>
+                    </details>
+                </div>
+            )
+        }
+
+        return this.props.children
+    }
+}
+
+
 const getElementPlugin = (element): PbEditorPageElementPlugin => {
     if (!element) {
         return null;
@@ -101,29 +136,31 @@ const Element = (props: ElementProps) => {
     }
 
     return (
-        <Transition in={true} timeout={250} appear={true}>
-            {state => (
-                <ElementContainer
-                    id={element.id}
-                    onMouseOver={onMouseOver}
-                    highlight={highlight}
-                    active={active}
-                    style={{ ...defaultStyle, ...transitionStyles[state] }}
-                    className={"webiny-pb-page-element-container"}
-                >
-                    <div className={["innerWrapper", className].filter(c => c).join(" ")}>
-                        <Draggable target={plugin.target} beginDrag={beginDrag} endDrag={endDrag}>
-                            {renderDraggable}
-                        </Draggable>
-                        {plugin.render({ element })}
-                    </div>
-                    {/*
-                        <div className="add-element add-element--above">+</div>
-                        <div className="add-element add-element--below">+</div>
-                        */}
-                </ElementContainer>
-            )}
-        </Transition>
+        <ErrorBoundary>
+            <Transition in={true} timeout={250} appear={true}>
+                {state => (
+                    <ElementContainer
+                        id={element.id}
+                        onMouseOver={onMouseOver}
+                        highlight={highlight}
+                        active={active}
+                        style={{ ...defaultStyle, ...transitionStyles[state] }}
+                        className={"webiny-pb-page-element-container"}
+                    >
+                        <div className={["innerWrapper", className].filter(c => c).join(" ")}>
+                            <Draggable target={plugin.target} beginDrag={beginDrag} endDrag={endDrag}>
+                                {renderDraggable}
+                            </Draggable>
+                            {plugin.render({ element })}
+                        </div>
+                        {/*
+                            <div className="add-element add-element--above">+</div>
+                            <div className="add-element add-element--below">+</div>
+                            */}
+                    </ElementContainer>
+                )}
+            </Transition>
+        </ErrorBoundary>
     );
 };
 
diff --git a/packages/app-page-builder/src/render/components/Element.tsx b/packages/app-page-builder/src/render/components/Element.tsx
index f4fb1b250f4..d4fb5018846 100644
--- a/packages/app-page-builder/src/render/components/Element.tsx
+++ b/packages/app-page-builder/src/render/components/Element.tsx
@@ -7,6 +7,40 @@ export type ElementProps = {
     element: PbElement;
 };
 
+// Using a class element for a change because `componentDidCatch` only works with class elements ;/
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            error: null,
+            errorInfo: null
+        }
+    }
+
+    componentDidCatch(error, errorInfo) {
+        this.setState({
+            error,
+            errorInfo
+        })
+    }
+
+    render() {
+        if(this.state.error) {
+            return (
+                <div>
+                    <h3>An unexpected error has occurred</h3>
+                    <details>
+                        <div>{this.state.error.toString()}</div>
+                        <div>{this.state.errorInfo.componentStack}</div>
+                    </details>
+                </div>
+            )
+        }
+
+        return this.props.children
+    }
+}
+
 const Element = (props: ElementProps) => {
     const { element } = props;
 
@@ -27,7 +61,7 @@ const Element = (props: ElementProps) => {
         return null;
     }
 
-    return <>{plugin.render({ theme, element })}</>;
+    return <ErrorBoundary>{plugin.render({ theme, element })}</ErrorBoundary>;
 };
 
 export default Element;

From 99a9b33af968c09a156aae4c9f9d5edd2001affe Mon Sep 17 00:00:00 2001
From: Fsalker <andreiii500@yahoo.com>
Date: Mon, 24 Feb 2020 18:29:08 +0200
Subject: [PATCH 2/6] Version 2 of the implementation

---
 .../src/editor/components/Element.tsx         | 97 +++++++------------
 .../src/render/components/Element.tsx         | 50 +++-------
 2 files changed, 52 insertions(+), 95 deletions(-)

diff --git a/packages/app-page-builder/src/editor/components/Element.tsx b/packages/app-page-builder/src/editor/components/Element.tsx
index 528c35197d4..276b28abeca 100644
--- a/packages/app-page-builder/src/editor/components/Element.tsx
+++ b/packages/app-page-builder/src/editor/components/Element.tsx
@@ -36,41 +36,6 @@ export type ElementProps = {
     dragging: boolean;
 };
 
-// Using a class element for a change because `componentDidCatch` only works with class elements ;/
-class ErrorBoundary extends React.Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-            error: null,
-            errorInfo: null
-        }
-    }
-
-    componentDidCatch(error, errorInfo) {
-        this.setState({
-            error,
-            errorInfo
-        })
-    }
-
-    render() {
-        if(this.state.error) {
-            return (
-                <div>
-                    <h3>An unexpected error has occurred</h3>
-                    <details>
-                        <div>{this.state.error.toString()}</div>
-                        <div>{this.state.errorInfo.componentStack}</div>
-                    </details>
-                </div>
-            )
-        }
-
-        return this.props.children
-    }
-}
-
-
 const getElementPlugin = (element): PbEditorPageElementPlugin => {
     if (!element) {
         return null;
@@ -135,32 +100,44 @@ const Element = (props: ElementProps) => {
         return null;
     }
 
+    let renderedPlugin = null
+    try {
+        throw new Error("bahaha!!")
+        renderedPlugin = plugin.render({ theme, element })
+    } catch(err) {
+        renderedPlugin = (
+            <div>
+                <div>{err.message}</div>
+                <div>{err.stack}</div>
+            </div>
+        )
+        console.log(err)
+    }
+
     return (
-        <ErrorBoundary>
-            <Transition in={true} timeout={250} appear={true}>
-                {state => (
-                    <ElementContainer
-                        id={element.id}
-                        onMouseOver={onMouseOver}
-                        highlight={highlight}
-                        active={active}
-                        style={{ ...defaultStyle, ...transitionStyles[state] }}
-                        className={"webiny-pb-page-element-container"}
-                    >
-                        <div className={["innerWrapper", className].filter(c => c).join(" ")}>
-                            <Draggable target={plugin.target} beginDrag={beginDrag} endDrag={endDrag}>
-                                {renderDraggable}
-                            </Draggable>
-                            {plugin.render({ element })}
-                        </div>
-                        {/*
-                            <div className="add-element add-element--above">+</div>
-                            <div className="add-element add-element--below">+</div>
-                            */}
-                    </ElementContainer>
-                )}
-            </Transition>
-        </ErrorBoundary>
+        <Transition in={true} timeout={250} appear={true}>
+            {state => (
+                <ElementContainer
+                    id={element.id}
+                    onMouseOver={onMouseOver}
+                    highlight={highlight}
+                    active={active}
+                    style={{ ...defaultStyle, ...transitionStyles[state] }}
+                    className={"webiny-pb-page-element-container"}
+                >
+                    <div className={["innerWrapper", className].filter(c => c).join(" ")}>
+                        <Draggable target={plugin.target} beginDrag={beginDrag} endDrag={endDrag}>
+                            {renderDraggable}
+                        </Draggable>
+                        {renderedPlugin}
+                    </div>
+                    {/*
+                        <div className="add-element add-element--above">+</div>
+                        <div className="add-element add-element--below">+</div>
+                        */}
+                </ElementContainer>
+            )}
+        </Transition>
     );
 };
 
diff --git a/packages/app-page-builder/src/render/components/Element.tsx b/packages/app-page-builder/src/render/components/Element.tsx
index d4fb5018846..3d0c436c20b 100644
--- a/packages/app-page-builder/src/render/components/Element.tsx
+++ b/packages/app-page-builder/src/render/components/Element.tsx
@@ -7,40 +7,6 @@ export type ElementProps = {
     element: PbElement;
 };
 
-// Using a class element for a change because `componentDidCatch` only works with class elements ;/
-class ErrorBoundary extends React.Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-            error: null,
-            errorInfo: null
-        }
-    }
-
-    componentDidCatch(error, errorInfo) {
-        this.setState({
-            error,
-            errorInfo
-        })
-    }
-
-    render() {
-        if(this.state.error) {
-            return (
-                <div>
-                    <h3>An unexpected error has occurred</h3>
-                    <details>
-                        <div>{this.state.error.toString()}</div>
-                        <div>{this.state.errorInfo.componentStack}</div>
-                    </details>
-                </div>
-            )
-        }
-
-        return this.props.children
-    }
-}
-
 const Element = (props: ElementProps) => {
     const { element } = props;
 
@@ -61,7 +27,21 @@ const Element = (props: ElementProps) => {
         return null;
     }
 
-    return <ErrorBoundary>{plugin.render({ theme, element })}</ErrorBoundary>;
+    let renderedPlugin = null
+    try {
+        throw new Error("bahaha!!")
+        renderedPlugin = plugin.render({ theme, element })
+    } catch(err) {
+        renderedPlugin = (
+            <div>
+                <div>{err.message}</div>
+                <div>{err.stack}</div>
+            </div>
+        )
+        console.log(err)
+    }
+
+    return <>{renderedPlugin}</>;
 };
 
 export default Element;

From e9c8631ed3e3f04064bd995743d8c683c334aac0 Mon Sep 17 00:00:00 2001
From: Fsalker <andreiii500@yahoo.com>
Date: Mon, 24 Feb 2020 18:30:24 +0200
Subject: [PATCH 3/6] Fixed a little stuff

---
 packages/app-page-builder/src/editor/components/Element.tsx | 3 +--
 packages/app-page-builder/src/render/components/Element.tsx | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/app-page-builder/src/editor/components/Element.tsx b/packages/app-page-builder/src/editor/components/Element.tsx
index 276b28abeca..3d9fae84c9a 100644
--- a/packages/app-page-builder/src/editor/components/Element.tsx
+++ b/packages/app-page-builder/src/editor/components/Element.tsx
@@ -102,8 +102,7 @@ const Element = (props: ElementProps) => {
 
     let renderedPlugin = null
     try {
-        throw new Error("bahaha!!")
-        renderedPlugin = plugin.render({ theme, element })
+        renderedPlugin = plugin.render({ element })
     } catch(err) {
         renderedPlugin = (
             <div>
diff --git a/packages/app-page-builder/src/render/components/Element.tsx b/packages/app-page-builder/src/render/components/Element.tsx
index 3d0c436c20b..a8c583fde13 100644
--- a/packages/app-page-builder/src/render/components/Element.tsx
+++ b/packages/app-page-builder/src/render/components/Element.tsx
@@ -29,7 +29,6 @@ const Element = (props: ElementProps) => {
 
     let renderedPlugin = null
     try {
-        throw new Error("bahaha!!")
         renderedPlugin = plugin.render({ theme, element })
     } catch(err) {
         renderedPlugin = (

From 6c4d2408a73c6c915a4bcfa8dc51a243e0d4e714 Mon Sep 17 00:00:00 2001
From: Fsalker <andreiii500@yahoo.com>
Date: Tue, 25 Feb 2020 07:50:25 +0200
Subject: [PATCH 4/6] Version 3 of the approach. Woohoo!

---
 .../src/editor/components/Element.tsx         | 14 ++---------
 .../src/editor/plugins/elements/row/Row.tsx   |  6 +++++
 .../src/render/components/Element.tsx         | 15 +++---------
 .../src/utils/tryRenderingPlugin.tsx          | 23 +++++++++++++++++++
 4 files changed, 34 insertions(+), 24 deletions(-)
 create mode 100644 packages/app-page-builder/src/utils/tryRenderingPlugin.tsx

diff --git a/packages/app-page-builder/src/editor/components/Element.tsx b/packages/app-page-builder/src/editor/components/Element.tsx
index 3d9fae84c9a..d17c92b0fdc 100644
--- a/packages/app-page-builder/src/editor/components/Element.tsx
+++ b/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,18 +101,7 @@ const Element = (props: ElementProps) => {
         return null;
     }
 
-    let renderedPlugin = null
-    try {
-        renderedPlugin = plugin.render({ element })
-    } catch(err) {
-        renderedPlugin = (
-            <div>
-                <div>{err.message}</div>
-                <div>{err.stack}</div>
-            </div>
-        )
-        console.log(err)
-    }
+    const renderedPlugin = tryRenderingPlugin(() => plugin.render({ element }));
 
     return (
         <Transition in={true} timeout={250} appear={true}>
diff --git a/packages/app-page-builder/src/editor/plugins/elements/row/Row.tsx b/packages/app-page-builder/src/editor/plugins/elements/row/Row.tsx
index 4185f33c25e..5e297eca9bb 100644
--- a/packages/app-page-builder/src/editor/plugins/elements/row/Row.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elements/row/Row.tsx
@@ -3,14 +3,20 @@ 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";
+// import tryRenderingPlugin from "./../../../../utils/tryRenderingPlugin";
 
 /**
  * TODO: this entire component can be further optimized (see the Chrome Profiler) to avoid unnecessary elements re-renders.
  */
 
 const Row = ({ element }) => {
+    // const x = tryRenderingPlugin(function asd() {
+    //     return <h3>Helloooooooooo there!!</h3>;
+    // });
     return (
         <ElementAnimation>
+            {/*Hello woooorld!*/}
+            {/*{x}*/}
             <ElementRoot
                 element={element}
                 className={"webiny-pb-base-page-element-style webiny-pb-layout-row"}
diff --git a/packages/app-page-builder/src/render/components/Element.tsx b/packages/app-page-builder/src/render/components/Element.tsx
index a8c583fde13..52a6a577719 100644
--- a/packages/app-page-builder/src/render/components/Element.tsx
+++ b/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,18 +29,7 @@ const Element = (props: ElementProps) => {
         return null;
     }
 
-    let renderedPlugin = null
-    try {
-        renderedPlugin = plugin.render({ theme, element })
-    } catch(err) {
-        renderedPlugin = (
-            <div>
-                <div>{err.message}</div>
-                <div>{err.stack}</div>
-            </div>
-        )
-        console.log(err)
-    }
+    const renderedPlugin = tryRenderingPlugin(() => plugin.render({ theme, element }));
 
     return <>{renderedPlugin}</>;
 };
diff --git a/packages/app-page-builder/src/utils/tryRenderingPlugin.tsx b/packages/app-page-builder/src/utils/tryRenderingPlugin.tsx
new file mode 100644
index 00000000000..4920b6ee7b3
--- /dev/null
+++ b/packages/app-page-builder/src/utils/tryRenderingPlugin.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+const tryRenderingPlugin = fn => {
+    // console.log(fn.name);
+    try {
+        // if (fn.name === "asd") throw new Error("error1238523");
+        return fn();
+    } catch (err) {
+        console.log(err);
+        return (
+            <div style={{ padding: "15px", color: "rgb(206, 17, 38)" }}>
+                <div style={{ fontSize: "2.0em", paddingBottom: "5px" }}>
+                    An error has occurred: {err.message}
+                </div>
+                <div style={{ fontSize: "1.3em", color: "rgb(206, 17, 38)", padding: "10px" }}>
+                    Check the console for more information regarding the error.
+                </div>
+            </div>
+        );
+    }
+};
+
+export default tryRenderingPlugin;

From 0764bec5a9661e15a7b77a5c458625bd7d90af43 Mon Sep 17 00:00:00 2001
From: Fsalker <andreiii500@yahoo.com>
Date: Tue, 25 Feb 2020 08:02:20 +0200
Subject: [PATCH 5/6] Tweaked the styles a little

---
 .../src/editor/plugins/elements/row/Row.tsx          | 12 ++++++------
 .../src/utils/tryRenderingPlugin.tsx                 |  7 +++----
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/app-page-builder/src/editor/plugins/elements/row/Row.tsx b/packages/app-page-builder/src/editor/plugins/elements/row/Row.tsx
index 5e297eca9bb..06e5f5ca9de 100644
--- a/packages/app-page-builder/src/editor/plugins/elements/row/Row.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elements/row/Row.tsx
@@ -3,20 +3,20 @@ 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";
-// import tryRenderingPlugin from "./../../../../utils/tryRenderingPlugin";
+import tryRenderingPlugin from "./../../../../utils/tryRenderingPlugin";
 
 /**
  * TODO: this entire component can be further optimized (see the Chrome Profiler) to avoid unnecessary elements re-renders.
  */
 
 const Row = ({ element }) => {
-    // const x = tryRenderingPlugin(function asd() {
-    //     return <h3>Helloooooooooo there!!</h3>;
-    // });
+    const x = tryRenderingPlugin(function asd() {
+        return <h3>Helloooooooooo there!!</h3>;
+    });
     return (
         <ElementAnimation>
-            {/*Hello woooorld!*/}
-            {/*{x}*/}
+            Hello woooorld!
+            {x}
             <ElementRoot
                 element={element}
                 className={"webiny-pb-base-page-element-style webiny-pb-layout-row"}
diff --git a/packages/app-page-builder/src/utils/tryRenderingPlugin.tsx b/packages/app-page-builder/src/utils/tryRenderingPlugin.tsx
index 4920b6ee7b3..2243af0b03f 100644
--- a/packages/app-page-builder/src/utils/tryRenderingPlugin.tsx
+++ b/packages/app-page-builder/src/utils/tryRenderingPlugin.tsx
@@ -1,18 +1,17 @@
 import React from "react";
 
 const tryRenderingPlugin = fn => {
-    // console.log(fn.name);
     try {
         // if (fn.name === "asd") throw new Error("error1238523");
         return fn();
     } catch (err) {
         console.log(err);
         return (
-            <div style={{ padding: "15px", color: "rgb(206, 17, 38)" }}>
-                <div style={{ fontSize: "2.0em", paddingBottom: "5px" }}>
+            <div style={{ paddingTop: "15px", paddingBottom: "15px", color: "rgb(206, 17, 38)" }}>
+                <div style={{ fontSize: "1.5em", paddingBottom: "5px" }}>
                     An error has occurred: {err.message}
                 </div>
-                <div style={{ fontSize: "1.3em", color: "rgb(206, 17, 38)", padding: "10px" }}>
+                <div style={{ fontSize: "1.1em", color: "rgb(206, 17, 38)" }}>
                     Check the console for more information regarding the error.
                 </div>
             </div>

From 1152663d3b94e71c24e623c50743d8c0cd82076c Mon Sep 17 00:00:00 2001
From: Fsalker <andreiii500@yahoo.com>
Date: Tue, 25 Feb 2020 23:15:58 +0200
Subject: [PATCH 6/6] Edited error msg and removed the test error

---
 .../src/editor/plugins/elements/row/Row.tsx                | 7 -------
 packages/app-page-builder/src/utils/tryRenderingPlugin.tsx | 5 +----
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/app-page-builder/src/editor/plugins/elements/row/Row.tsx b/packages/app-page-builder/src/editor/plugins/elements/row/Row.tsx
index 06e5f5ca9de..0a7acb558f5 100644
--- a/packages/app-page-builder/src/editor/plugins/elements/row/Row.tsx
+++ b/packages/app-page-builder/src/editor/plugins/elements/row/Row.tsx
@@ -3,20 +3,13 @@ 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";
-import tryRenderingPlugin from "./../../../../utils/tryRenderingPlugin";
-
 /**
  * TODO: this entire component can be further optimized (see the Chrome Profiler) to avoid unnecessary elements re-renders.
  */
 
 const Row = ({ element }) => {
-    const x = tryRenderingPlugin(function asd() {
-        return <h3>Helloooooooooo there!!</h3>;
-    });
     return (
         <ElementAnimation>
-            Hello woooorld!
-            {x}
             <ElementRoot
                 element={element}
                 className={"webiny-pb-base-page-element-style webiny-pb-layout-row"}
diff --git a/packages/app-page-builder/src/utils/tryRenderingPlugin.tsx b/packages/app-page-builder/src/utils/tryRenderingPlugin.tsx
index 2243af0b03f..dba734d8a60 100644
--- a/packages/app-page-builder/src/utils/tryRenderingPlugin.tsx
+++ b/packages/app-page-builder/src/utils/tryRenderingPlugin.tsx
@@ -2,15 +2,12 @@ import React from "react";
 
 const tryRenderingPlugin = fn => {
     try {
-        // if (fn.name === "asd") throw new Error("error1238523");
         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" }}>
-                    An error has occurred: {err.message}
-                </div>
+                <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>