fix(app-page-builder-elements): improve element error boundary

Author: Pavel910

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

@@ -30,7 +30,7 @@ export const Element = (props: ElementProps) => {
     };
 
     return (
-        <ErrorBoundary>
+        <ErrorBoundary element={element}>
             <ElementRenderer {...props} meta={meta} />
         </ErrorBoundary>
     );

packages/app-page-builder-elements/src/components/ErrorBoundary.tsx

@@ -1,35 +1,73 @@
 import React, { ErrorInfo } from "react";
+import { Element as ElementType } from "~/types";
+
+type State =
+    | {
+          hasError: true;
+          error: Error;
+      }
+    | { hasError: false; error: undefined };
 
-interface State {
-    hasError: boolean;
-}
 interface Props {
+    element: ElementType;
     [key: string]: any;
 }
+
+const displayNone = {
+    display: "none"
+};
+
+declare global {
+    // eslint-disable-next-line
+    namespace JSX {
+        interface IntrinsicElements {
+            "pb-element-error": any;
+        }
+    }
+}
+
 class ErrorBoundary extends React.Component<Props, State> {
     constructor(props: Props) {
         super(props);
         this.state = {
-            hasError: false
+            hasError: false,
+            error: undefined
         };
     }
 
-    static getDerivedStateFromError() {
+    static getDerivedStateFromError(error: Error) {
         // Update state so the next render will show the fallback UI.
         return {
-            hasError: true
+            hasError: true,
+            error
         };
     }
 
     public override componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-        console.log("An error occurred while rendering a page element:");
-        console.log(error, errorInfo);
+        const { element } = this.props;
+        console.groupCollapsed(
+            `%cELEMENT ERROR%c: An error occurred while rendering page element "${element.id}" of type "${element.type}".`,
+            "color:red",
+            "color:default"
+        );
+        console.log("element", element);
+        console.error(error, errorInfo);
+        console.groupEnd();
     }
 
     public override render() {
         if (this.state.hasError) {
-            // You can render any custom fallback UI
-            return <h1>Something went wrong.</h1>;
+            const elementData = {
+                id: this.props.element.id,
+                type: this.props.element.type,
+                error: this.state.error.message
+            };
+
+            return (
+                <pb-element-error style={displayNone}>
+                    {JSON.stringify(elementData)}
+                </pb-element-error>
+            );
         }
 
         return this.props.children;