show erro when node can't be rendered by reactFlow

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -1,6 +1,4 @@
-import {
+import { TrashIcon } from "@heroicons/react/24/outline";
-  TrashIcon,
-} from "@heroicons/react/24/outline";
 import {
 	classNames,
 	nodeColors,
@@ -9,18 +7,40 @@ import {
 } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
 import { typesContext } from "../../contexts/typesContext";
-import { useContext } from "react";
+import { useContext, useRef } from "react";
 import { NodeDataType } from "../../types/flow";
+import { alertContext } from "../../contexts/alertContext";
 
-export default function GenericNode({ data, selected}:{data:NodeDataType,selected:boolean}) {
+export default function GenericNode({
+	data,
+	selected,
+}: {
+	data: NodeDataType;
+	selected: boolean;
+}) {
+	const { setErrorData } = useContext(alertContext);
+  const showError = useRef(true)
 	const { types, deleteNode } = useContext(typesContext);
 	const Icon = nodeIcons[types[data.type]];
 	if (!Icon) {
-    return
+		console.log(data);
+    if(showError.current){
+      setErrorData({
+        title: data.type?`The ${data.type} node could not be rendered, please review your json file`:
+          "There was a node that can't be rendered, please review your json file",
+      });
+      showError.current=false
+    }
+		return;
 	}
 
 	return (
-    <div className={ classNames(selected?"border border-blue-500":"border dark:border-gray-700","prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg flex flex-col justify-center")}>
+		<div
+			className={classNames(
+				selected ? "border border-blue-500" : "border dark:border-gray-700",
+				"prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg flex flex-col justify-center"
+			)}
+		>
 			<div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-gray-800 border-b dark:border-b-gray-700 ">
 				<div className="w-full flex items-center truncate gap-4 text-lg">
 					<Icon
@@ -29,7 +49,11 @@ export default function GenericNode({ data, selected}:{data:NodeDataType,selecte
 					/>
 					<div className="truncate">{data.type}</div>
 				</div>
-        <button onClick={() => {deleteNode(data.id)}}>
+				<button
+					onClick={() => {
+						deleteNode(data.id);
+					}}
+				>
 					<TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-500"></TrashIcon>
 				</button>
 			</div>
@@ -45,22 +69,21 @@ export default function GenericNode({ data, selected}:{data:NodeDataType,selecte
 						.map((t: string, idx) => (
 							<div key={idx}>
 								{idx === 0 ? (
-                  <div className="px-5 py-2 mt-2 dark:text-white text-center">Inputs:</div>
+									<div className="px-5 py-2 mt-2 dark:text-white text-center">
+										Inputs:
+									</div>
 								) : (
 									<></>
 								)}
 								{data.node.template[t].show ? (
 									<ParameterComponent
-                    
 										data={data}
 										color={
 											nodeColors[types[data.node.template[t].type]] ??
 											nodeColors[types[data.node.template[t].type]] ??
 											"black"
 										}
-                    title={
+										title={snakeToNormalCase(t)}
-                      snakeToNormalCase(t)
-                    }
 										name={t}
 										tooltipTitle={
 											"Type: " +
@@ -77,14 +100,16 @@ export default function GenericNode({ data, selected}:{data:NodeDataType,selecte
 								)}
 							</div>
 						))}
-          <div className="px-5 py-2 mt-2 dark:text-white text-center">Output:</div>
+					<div className="px-5 py-2 mt-2 dark:text-white text-center">
+						Output:
+					</div>
 					<ParameterComponent
 						data={data}
 						color={nodeColors[types[data.type]]}
 						title={data.type}
-            tooltipTitle={`Type: ${data.node.base_classes.join(' | ')}`}
+						tooltipTitle={`Type: ${data.node.base_classes.join(" | ")}`}
-            id={[data.type, data.id, ...data.node.base_classes].join('|')}
+						id={[data.type, data.id, ...data.node.base_classes].join("|")}
-            type={'str'}
+						type={"str"}
 						left={false}
 					/>
 				</>