error boundary class

Author: divi255

src/ErrorBoundary.tsx

@@ -1,6 +1,7 @@
 import { Component, ErrorInfo, ReactNode } from "react";
 
 interface ErrorBoundaryProps {
+  element_class: string;
   children: ReactNode;
 }
 
@@ -10,8 +11,10 @@ interface ErrorBoundaryState {
 }
 
 class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  element_class: string;
   constructor(props: ErrorBoundaryProps) {
     super(props);
+    this.element_class = props.element_class;
     this.state = { hasError: false, error: null };
   }
 
@@ -20,15 +23,16 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    console.error("Error caught by ErrorBoundary:", error, errorInfo);
+    console.error("Element render error:", error, errorInfo);
   }
 
   render() {
     if (this.state.hasError) {
       return (
-        <div style={{ color: "red" }}>
-          <h2>Something went wrong.</h2>
+        <div style={{ color: "red", backgroundColor: "black", padding: 2 }}>
+          <h2>Element {this.element_class} render error</h2>
           <p>{this.state.error?.message}</p>
+          <p>Open JS Console for details</p>
         </div>
       );
     }

src/elements.tsx

@@ -116,7 +116,7 @@ export class ElementPool {
       kind: kind,
       params: JSON.parse(JSON.stringify(el_class?.defaults)),
       position: pos || { x: 0, y: 0 },
-      zindex: zindex === undefined ? 10 : zindex,
+      zindex: zindex === undefined ? 10 : zindex
     };
     this.items.push(el);
     return el;
@@ -184,7 +184,7 @@ export class ElementPool {
         kind: el.kind,
         params: JSON.parse(JSON.stringify(el.params)),
         position: JSON.parse(JSON.stringify(el.position)),
-        zindex: el.zindex,
+        zindex: el.zindex
       };
     });
   }
@@ -211,7 +211,7 @@ export const DisplayElements = ({
   onActionFail,
   cur_offset,
   viewport_scrolled,
-  forceUpdate,
+  forceUpdate
 }: {
   element_pool: ElementPool;
   onMouseDown?: (e: any, element: DElement) => void;
@@ -274,7 +274,7 @@ export const DisplayElements = ({
         const Viewer = element_class?.Viewer || DefaultViewer;
         let el_view = (
           <>
-            <ErrorBoundary>
+            <ErrorBoundary element_class={el.kind}>
               <Viewer
                 kind={el.kind}
                 dragged={dragged || viewport_scrolled}
@@ -320,7 +320,7 @@ export const DisplayElements = ({
             style={{
               left: el.position.x - cur_offset.x - (selected ? 2 : 0),
               top: el.position.y - cur_offset.y - (selected ? 2 : 0),
-              zIndex: el.zindex,
+              zIndex: el.zindex
             }}
             {...doubleTapOpenSideBar}
           >