fix: 🐛 error tree number

apps/builder/src/page/App/Module/LeftPanel/Components/DebugButton/index.tsx

@@ -1,7 +1,7 @@
 import IconHotSpot from "@illa-public/icon-hot-spot"
 import { ILLA_MIXPANEL_EVENT_TYPE } from "@illa-public/mixpanel-utils"
 import { t } from "i18next"
-import { FC, memo } from "react"
+import { FC, memo, useMemo } from "react"
 import { useDispatch, useSelector } from "react-redux"
 import { Badge, BugIcon, Trigger, getColor } from "@illa-design/react"
 import { isOpenDebugger } from "@/redux/config/configSelector"
@@ -13,9 +13,18 @@ const DebugButton: FC = () => {
   const debuggerData = useSelector(getExecutionError)
   const debuggerVisible = useSelector(isOpenDebugger)
 
-  const debugMessageNumber = debuggerData
-    ? Object.keys(debuggerData).length
-    : undefined
+  const debugMessageNumber = useMemo(() => {
+    if (debuggerData) {
+      let count = 0
+      Object.keys(debuggerData).forEach((errors) => {
+        if (Array.isArray(debuggerData[errors])) {
+          count += debuggerData[errors].length
+        }
+      })
+      return count
+    }
+    return undefined
+  }, [debuggerData])
   const dispatch = useDispatch()
 
   const handleClickDebuggerIcon = () => {

apps/builder/src/page/App/components/Debugger/index.tsx

@@ -41,12 +41,14 @@ export const Debugger: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
         <div css={errorContentStyle}>
           {Object.keys(debuggerData)?.map((name, index) => {
             const error = debuggerData[name]
-            if (isArray(error)) {
+
+            if (isArray(error) && error.length > 0) {
               return error?.map((item) => {
                 return <ErrorItem key={index} pathName={name} item={item} />
               })
+            } else {
+              return null
             }
-            return <ErrorItem key={name} pathName={name} item={error} />
           })}
         </div>
       </div>

apps/builder/src/page/App/components/ScaleSquare/components/ResizingAndDragContainer/index.tsx

@@ -97,7 +97,11 @@ export const ResizingAndDragContainer: FC<ResizingAndDragContainerProps> = (
     return (
       keys.length > 0 &&
       keys.some((key) => {
-        return key.startsWith(displayName)
+        return (
+          Array.isArray(errors[key]) &&
+          errors[key].length > 0 &&
+          key.startsWith(displayName)
+        )
       })
     )
   }, [displayName, errors])

apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/index.tsx

@@ -32,7 +32,11 @@ const WrapperContainer: FC<WrapperContainerProps> = (props) => {
     return (
       keys.length > 0 &&
       keys.some((key) => {
-        return key.startsWith(displayName)
+        return (
+          Array.isArray(errors[key]) &&
+          errors[key].length > 0 &&
+          key.startsWith(displayName)
+        )
       })
     )
   }, [displayName, errors])

apps/builder/src/page/App/components/ScaleSquare/utils/useScaleStateSelector.ts

@@ -11,7 +11,11 @@ export const useScaleStateSelector = (displayName: string) => {
     return (
       keys.length > 0 &&
       keys.some((key) => {
-        return key.startsWith(displayName)
+        return (
+          Array.isArray(errors[key]) &&
+          errors[key].length > 0 &&
+          key.startsWith(displayName)
+        )
       })
     )
   }, [displayName, errors])

apps/builder/src/utils/executionTreeHelper/executionTreeFactory.ts

@@ -11,7 +11,6 @@ import i18n from "@/i18n/config"
 import { getContainerListDisplayNameMappedChildrenNodeDisplayName } from "@/redux/currentApp/components/componentsSelector"
 import {
   DependenciesState,
-  ErrorShape,
   ExecutionErrorType,
   ExecutionState,
 } from "@/redux/currentApp/executionTree/executionState"
@@ -124,7 +123,7 @@ export class ExecutionTreeFactory {
   }
 
   validateTree(tree: RawTreeShape) {
-    const validateErrors: Record<string, any> = klona(this.errorTree)
+    const validateErrors: Record<string, any> = {}
     const validateResultTree = Object.keys(tree).reduce(
       (current: RawTreeShape, displayName) => {
         const widgetOrAction = current[displayName]
@@ -555,7 +554,9 @@ export class ExecutionTreeFactory {
     )
     const { validateErrors, validateResultTree } =
       this.validateTree(evaluatedTree)
+
     const mergedError = merge({}, validateErrors, errorTree)
+
     const errorTreeResult = this.mergeErrorTree(
       mergedError,
       mergedUpdatePathMapAction,
@@ -717,14 +718,15 @@ export class ExecutionTreeFactory {
                 set(current, fullPath, evaluateValue)
               }
             } catch (e) {
-              const oldError = errorTree[fullPath] ?? ([] as ErrorShape[])
-              if (Array.isArray(oldError)) {
-                oldError.push({
-                  errorType: ExecutionErrorType.EVALUATED,
-                  errorMessage: (e as Error).message,
-                  errorName: (e as Error).name,
-                })
+              let oldError = errorTree[fullPath]
+              if (!Array.isArray(oldError)) {
+                oldError = []
               }
+              oldError.push({
+                errorType: ExecutionErrorType.EVALUATED,
+                errorMessage: (e as Error).message,
+                errorName: (e as Error).name,
+              })
               errorTree[fullPath] = oldError
               set(current, fullPath, undefined)
             }