Add node-level error boundary.

lynxkite-app/web/package-lock.json

@@ -27,6 +27,7 @@
         "monaco-editor": "^0.52.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-error-boundary": "^5.0.0",
         "react-markdown": "^9.0.1",
         "react-router-dom": "^7.0.2",
         "swr": "^2.2.5",
@@ -310,6 +311,18 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
+      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.26.9",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.26.9.tgz",
@@ -6155,6 +6168,18 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-5.0.0.tgz",
+      "integrity": "sha512-tnjAxG+IkpLephNcePNA7v6F/QpWLH8He65+DmedchDwg162JZqx4NmbXj0mlAYVVEd81OW7aFhmbsScYfiAFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-markdown": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.1.tgz",
@@ -6259,6 +6284,12 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
+    },
     "node_modules/remark-parse": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",

lynxkite-app/web/package.json

@@ -30,6 +30,7 @@
     "monaco-editor": "^0.52.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^5.0.0",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^7.0.2",
     "swr": "^2.2.5",

lynxkite-app/web/src/workspace/nodes/GraphCreationNode.tsx

@@ -49,7 +49,7 @@ function relationsToDict(relations: any[]) {
 
 export type UpdateOptions = { delay?: number };
 
-export default function NodeWithGraphCreationView(props: any) {
+function NodeWithGraphCreationView(props: any) {
   const reactFlow = useReactFlow();
   const [open, setOpen] = useState({} as { [name: string]: boolean });
   const display = props.data.display?.value;
@@ -229,68 +229,68 @@ export default function NodeWithGraphCreationView(props: any) {
   }
 
   return (
-    <LynxKiteNode {...props}>
-      <div className="graph-creation-view">
-        <div className="graph-tables">
-          <div className="graph-table-header">Node Tables</div>
-          {display && [
-            Object.entries(tables).map(([name, df]: [string, any]) => (
-              <React.Fragment key={name}>
-                {!singleTable && (
-                  <div
-                    key={`${name}-header`}
-                    className="df-head"
-                    onClick={() => setOpen({ ...open, [name]: !open[name] })}
-                  >
-                    {name}
-                  </div>
-                )}
-                {(singleTable || open[name]) && displayTable(name, df)}
-              </React.Fragment>
-            )),
-            Object.entries(display.others || {}).map(([name, o]) => (
-              <>
-                <div
-                  key={name}
-                  className="df-head"
-                  onClick={() => setOpen({ ...open, [name]: !open[name] })}
-                >
-                  {name}
-                </div>
-                {open[name] && <pre>{(o as any).toString()}</pre>}
-              </>
-            )),
-          ]}
-        </div>
-        <div className="graph-relations">
-          <div className="graph-table-header">
-            Relationships
-            <button className="add-relationship-button" onClick={(_) => addRelation()}>
-              +
-            </button>
-          </div>
-          {relations &&
-            Object.entries(relations).map(([name, relation]: [string, any]) => (
-              <React.Fragment key={name}>
+    <div className="graph-creation-view">
+      <div className="graph-tables">
+        <div className="graph-table-header">Node Tables</div>
+        {display && [
+          Object.entries(tables).map(([name, df]: [string, any]) => (
+            <React.Fragment key={name}>
+              {!singleTable && (
                 <div
                   key={`${name}-header`}
                   className="df-head"
                   onClick={() => setOpen({ ...open, [name]: !open[name] })}
                 >
                   {name}
-                  <button
-                    onClick={() => {
-                      deleteRelation(relation);
-                    }}
-                  >
-                    <Trash />
-                  </button>
                 </div>
-                {(singleRelation || open[name]) && displayRelation(relation)}
-              </React.Fragment>
-            ))}
+              )}
+              {(singleTable || open[name]) && displayTable(name, df)}
+            </React.Fragment>
+          )),
+          Object.entries(display.others || {}).map(([name, o]) => (
+            <>
+              <div
+                key={name}
+                className="df-head"
+                onClick={() => setOpen({ ...open, [name]: !open[name] })}
+              >
+                {name}
+              </div>
+              {open[name] && <pre>{(o as any).toString()}</pre>}
+            </>
+          )),
+        ]}
+      </div>
+      <div className="graph-relations">
+        <div className="graph-table-header">
+          Relationships
+          <button className="add-relationship-button" onClick={(_) => addRelation()}>
+            +
+          </button>
         </div>
+        {relations &&
+          Object.entries(relations).map(([name, relation]: [string, any]) => (
+            <React.Fragment key={name}>
+              <div
+                key={`${name}-header`}
+                className="df-head"
+                onClick={() => setOpen({ ...open, [name]: !open[name] })}
+              >
+                {name}
+                <button
+                  onClick={() => {
+                    deleteRelation(relation);
+                  }}
+                >
+                  <Trash />
+                </button>
+              </div>
+              {(singleRelation || open[name]) && displayRelation(relation)}
+            </React.Fragment>
+          ))}
       </div>
-    </LynxKiteNode>
+    </div>
   );
 }
+
+export default LynxKiteNode(NodeWithGraphCreationView);

lynxkite-app/web/src/workspace/nodes/LynxKiteNode.tsx

@@ -1,6 +1,9 @@
 import { Handle, NodeResizeControl, type Position, useReactFlow } from "@xyflow/react";
+import { ErrorBoundary } from "react-error-boundary";
 // @ts-ignore
 import ChevronDownRight from "~icons/tabler/chevron-down-right.jsx";
+// @ts-ignore
+import Skull from "~icons/tabler/skull.jsx";
 
 interface LynxKiteNodeProps {
   id: string;
@@ -40,7 +43,7 @@ function getHandles(inputs: object, outputs: object) {
   return handles;
 }
 
-export default function LynxKiteNode(props: LynxKiteNodeProps) {
+function LynxKiteNodeComponent(props: LynxKiteNodeProps) {
   const reactFlow = useReactFlow();
   const data = props.data;
   const expanded = !data.collapsed;
@@ -72,7 +75,16 @@ export default function LynxKiteNode(props: LynxKiteNodeProps) {
         {expanded && (
           <>
             {data.error && <div className="error">{data.error}</div>}
-            {props.children}
+            <ErrorBoundary
+              fallback={
+                <p className="error" style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                  <Skull style={{ fontSize: 20 }} />
+                  Failed to display this node.
+                </p>
+              }
+            >
+              {props.children}
+            </ErrorBoundary>
             <NodeResizeControl
               minWidth={100}
               minHeight={50}
@@ -101,3 +113,13 @@ export default function LynxKiteNode(props: LynxKiteNodeProps) {
     </div>
   );
 }
+
+export default function LynxKiteNode(Component: React.ComponentType<any>) {
+  return (props: any) => {
+    return (
+      <LynxKiteNodeComponent {...props}>
+        <Component {...props} />
+      </LynxKiteNodeComponent>
+    );
+  };
+}

lynxkite-app/web/src/workspace/nodes/NodeWithImage.tsx

@@ -1,4 +1,5 @@
-import NodeWithParams from "./NodeWithParams";
+import LynxKiteNode from "./LynxKiteNode";
+import { NodeWithParams } from "./NodeWithParams";
 
 const NodeWithImage = (props: any) => {
   return (
@@ -8,4 +9,4 @@ const NodeWithImage = (props: any) => {
   );
 };
 
-export default NodeWithImage;
+export default LynxKiteNode(NodeWithImage);

lynxkite-app/web/src/workspace/nodes/NodeWithMolecule.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, type CSSProperties } from "react";
-import NodeWithParams from "./NodeWithParams";
+import LynxKiteNode from "./LynxKiteNode";
+import { NodeWithParams } from "./NodeWithParams";
 
 const NodeWithMolecule = (props: any) => {
   const containerRef = React.useRef<HTMLDivElement>(null);
@@ -70,4 +71,4 @@ const NodeWithMolecule = (props: any) => {
   );
 };
 
-export default NodeWithMolecule;
+export default LynxKiteNode(NodeWithMolecule);

lynxkite-app/web/src/workspace/nodes/NodeWithParams.tsx

@@ -8,7 +8,7 @@ import NodeParameter from "./NodeParameter";
 
 export type UpdateOptions = { delay?: number };
 
-function NodeWithParams(props: any) {
+export function NodeWithParams(props: any) {
   const reactFlow = useReactFlow();
   const metaParams = props.data.meta?.params;
   const [collapsed, setCollapsed] = React.useState(props.collapsed);
@@ -34,7 +34,7 @@ function NodeWithParams(props: any) {
   const params = props.data?.params ? Object.entries(props.data.params) : [];
 
   return (
-    <LynxKiteNode {...props}>
+    <>
       {props.collapsed && params.length > 0 && (
         <div className="params-expander" onClick={() => setCollapsed(!collapsed)}>
           <Triangle className={`flippy ${collapsed ? "flippy-90" : ""}`} />
@@ -65,8 +65,8 @@ function NodeWithParams(props: any) {
           ),
         )}
       {props.children}
-    </LynxKiteNode>
+    </>
   );
 }
 
-export default NodeWithParams;
+export default LynxKiteNode(NodeWithParams);

lynxkite-app/web/src/workspace/nodes/NodeWithTableView.tsx

@@ -17,7 +17,7 @@ function toMD(v: any): string {
 
 type OpenState = { [name: string]: boolean };
 
-export default function NodeWithTableView(props: any) {
+function NodeWithTableView(props: any) {
   const reactFlow = useReactFlow();
   const [open, setOpen] = useState((props.data?.params?._tables_open ?? {}) as OpenState);
   const display = props.data.display?.value;
@@ -38,7 +38,7 @@ export default function NodeWithTableView(props: any) {
     });
   }
   return (
-    <LynxKiteNode {...props}>
+    <>
       {display && [
         dfs.map(([name, df]: [string, any]) => (
           <React.Fragment key={name}>
@@ -75,6 +75,8 @@ export default function NodeWithTableView(props: any) {
           </>
         )),
       ]}
-    </LynxKiteNode>
+    </>
   );
 }
+
+export default LynxKiteNode(NodeWithTableView);

lynxkite-app/web/src/workspace/nodes/NodeWithVisualization.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect } from "react";
-import NodeWithParams from "./NodeWithParams";
+import LynxKiteNode from "./LynxKiteNode";
+import { NodeWithParams } from "./NodeWithParams";
 const echarts = await import("echarts");
 
-const NodeWithVisualization = (props: any) => {
+function NodeWithVisualization(props: any) {
   const chartsRef = React.useRef<HTMLDivElement>(null);
   const chartsInstanceRef = React.useRef<echarts.ECharts>();
   useEffect(() => {
@@ -38,6 +39,6 @@ const NodeWithVisualization = (props: any) => {
       <div style={vizStyle} ref={chartsRef} />
     </NodeWithParams>
   );
-};
+}
 
-export default NodeWithVisualization;
+export default LynxKiteNode(NodeWithVisualization);