Bug fix on error detail of customComponent code - Release (#927)

src/backend/langflow/interface/types.py

@@ -290,6 +290,7 @@ 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"""
+    try:
         logger.debug("Building custom component template")
         frontend_node = build_frontend_node(custom_component)
 
@@ -315,6 +316,16 @@ def build_langchain_template_custom_component(custom_component: CustomComponent)
         )
         logger.debug("Added base classes")
         return frontend_node
+    except Exception as exc:
+        raise HTTPException(
+            status_code=400,
+            detail={
+                "error": (
+                    "Invalid type convertion. Please check your code and try again."
+                ),
+                "traceback": traceback.format_exc(),
+            },
+        ) from 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 " +
+              "whitespace-break-spaces transition-all delay-500" +
-              (error?.detail.error !== undefined ? "h-2/6" : "h-0")
+              (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;
+}