🐛 fix(types.py): handle exceptions and raise HTTPException with detailed error message and traceback

🐛 fix(index.tsx): fix error detail access in className condition
🐛 fix(classes.css): adjust scrollbar styles for Ace editor

src/backend/langflow/interface/types.py

@@ -289,32 +289,43 @@ def add_base_classes(frontend_node, return_types: List[str]):
 
 
 def build_langchain_template_custom_component(custom_component: CustomComponent):
-    """Build a custom component template for the langchain"""
-    logger.debug("Building custom component template")
-    frontend_node = build_frontend_node(custom_component)
+    try:
+        """Build a custom component template for the langchain"""
+        logger.debug("Building custom component template")
+        frontend_node = build_frontend_node(custom_component)
 
-    if frontend_node is None:
-        return None
-    logger.debug("Built base frontend node")
-    template_config = custom_component.build_template_config
+        if frontend_node is None:
+            return None
+        logger.debug("Built base frontend node")
+        template_config = custom_component.build_template_config
 
-    update_attributes(frontend_node, template_config)
-    logger.debug("Updated attributes")
-    field_config = build_field_config(custom_component)
-    logger.debug("Built field config")
-    add_extra_fields(
-        frontend_node, field_config, custom_component.get_function_entrypoint_args
-    )
-    logger.debug("Added extra fields")
-    frontend_node = add_code_field(
-        frontend_node, custom_component.code, field_config.get("code", {})
-    )
-    logger.debug("Added code field")
-    add_base_classes(
-        frontend_node, custom_component.get_function_entrypoint_return_type
-    )
-    logger.debug("Added base classes")
-    return frontend_node
+        update_attributes(frontend_node, template_config)
+        logger.debug("Updated attributes")
+        field_config = build_field_config(custom_component)
+        logger.debug("Built field config")
+        add_extra_fields(
+            frontend_node, field_config, custom_component.get_function_entrypoint_args
+        )
+        logger.debug("Added extra fields")
+        frontend_node = add_code_field(
+            frontend_node, custom_component.code, field_config.get("code", {})
+        )
+        logger.debug("Added code field")
+        add_base_classes(
+            frontend_node, custom_component.get_function_entrypoint_return_type
+        )
+        logger.debug("Added base classes")
+        return frontend_node
+    except Exception as e:
+        raise HTTPException(
+            status_code=400,
+            detail={
+                "error": (
+                    "Invalid type convertion. Please check your code and try again."
+                ),
+                "traceback": traceback.format_exc(),
+            },
+        )
 
 
 def load_files_from_path(path: str):

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -172,18 +172,18 @@ export default function CodeAreaModal({
           </div>
           <div
             className={
-              "w-full transition-all delay-500 " +
-              (error?.detail.error !== undefined ? "h-2/6" : "h-0")
+              "whitespace-break-spaces transition-all delay-500" +
+              (error?.detail?.error !== undefined ? "h-2/6" : "h-0")
             }
           >
-            <div className="mt-1 h-full w-full overflow-y-auto overflow-x-clip text-left custom-scroll">
+            <div className="mt-1 h-full max-h-[10rem] w-full overflow-y-auto overflow-x-clip text-left custom-scroll">
               <h1 className="text-lg text-destructive">
                 {error?.detail?.error}
               </h1>
               <div className="ml-2 w-full text-sm text-status-red word-break-break-word">
-                <pre className="w-full word-break-break-word">
+                <span className="w-full word-break-break-word">
                   {error?.detail?.traceback}
-                </pre>
+                </span>
               </div>
             </div>
           </div>

src/frontend/src/style/classes.css

@@ -29,10 +29,28 @@ pre {
   animation: slideUp 300ms ease-out;
 }
 
-
 .gradient-end {
   animation: gradient-motion-end 3s infinite forwards;
 }
 .gradient-start {
   animation: gradient-motion-start 4s infinite forwards;
 }
+
+.ace_scrollbar::-webkit-scrollbar {
+  height: 8px;
+  width: 8px;
+}
+
+.ace_scrollbar::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+}
+
+.ace_scrollbar::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  border-radius: 999px;
+}
+
+.ace_scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: #bbb;
+  border-radius: 999px;
+}