diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/index.tsx
index d65a3e410b23..54511d9ff614 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/index.tsx
@@ -127,7 +127,7 @@ export default defineComponent({
       if (props.definition) {
         return (
           route.name === 'workflow-definition-detail' &&
-          props.definition!.workflowDefinition.releaseState === 'ONLINE'
+          props.definition.workflowDefinition?.releaseState === 'ONLINE'
         )
       } else {
         return false
@@ -149,7 +149,7 @@ export default defineComponent({
           props.instance.state === 'STOP'
         )
       } else if (props.definition) {
-        return props.definition!.workflowDefinition.releaseState === 'OFFLINE'
+        return props.definition.workflowDefinition?.releaseState === 'OFFLINE'
       } else {
         return false
       }
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/detail/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/definition/detail/index.tsx
index 2831014c55a6..e86c94e23515 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/definition/detail/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/detail/index.tsx
@@ -58,12 +58,18 @@ export default defineComponent({
     const isLoading = ref(true)
     const dagRef = ref()
 
-    const refresh = () => {
+    const refresh = async () => {
       isLoading.value = true
-      queryWorkflowDefinitionByCode(code, projectCode).then((res: any) => {
+      try {
+        const res = await queryWorkflowDefinitionByCode(code, projectCode)
+        if (!res?.workflowDefinition) {
+          definition.value = undefined
+          message.error(t('project.workflow.request_failed'))
+          return
+        }
+
         readonly.value = res.workflowDefinition.releaseState === 'ONLINE'
         definition.value = res
-        isLoading.value = false
         if (!res.workflowDefinition.locations) {
           setTimeout(() => {
             const graph = dagRef.value
@@ -71,7 +77,9 @@ export default defineComponent({
             submit()
           }, 1000)
         }
-      })
+      } finally {
+        isLoading.value = false
+      }
     }
 
     const save = ({
@@ -121,7 +129,7 @@ export default defineComponent({
           theme.darkTheme ? Styles['dark'] : Styles['light']
         ]}
       >
-        {!isLoading.value && (
+        {!isLoading.value && definition.value && (
           <Dag
             ref={dagRef}
             definition={definition.value}
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/instance/detail/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/instance/detail/index.tsx
index 1957a6fe9120..a70b2a6b4959 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/instance/detail/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/instance/detail/index.tsx
@@ -53,11 +53,20 @@ export default defineComponent({
 
     const definition = ref<WorkflowDefinition>()
     const instance = ref<WorkflowInstance>()
+    const isLoading = ref(true)
     const dagInstanceRef = ref()
 
-    const refresh = () => {
-      queryWorkflowInstanceById(id, projectCode).then((res: any) => {
+    const refresh = async () => {
+      isLoading.value = true
+      try {
+        const res = await queryWorkflowInstanceById(id, projectCode)
         instance.value = res
+        if (!res?.dagData?.workflowDefinition) {
+          definition.value = undefined
+          window.$message.error(t('project.workflow.request_failed'))
+          return
+        }
+
         if (!res.dagData.workflowDefinition.locations) {
           setTimeout(() => {
             const graph = dagInstanceRef.value
@@ -65,10 +74,10 @@ export default defineComponent({
             submit()
           }, 1000)
         }
-        if (res.dagData) {
-          definition.value = res.dagData
-        }
-      })
+        definition.value = res.dagData
+      } finally {
+        isLoading.value = false
+      }
     }
 
     const save = ({
@@ -115,14 +124,16 @@ export default defineComponent({
           theme.darkTheme ? Styles['dark'] : Styles['light']
         ]}
       >
-        <Dag
-          ref={dagInstanceRef}
-          instance={instance.value}
-          definition={definition.value}
-          onRefresh={refresh}
-          projectCode={projectCode}
-          onSave={save}
-        />
+        {!isLoading.value && definition.value && instance.value && (
+          <Dag
+            ref={dagInstanceRef}
+            instance={instance.value}
+            definition={definition.value}
+            onRefresh={refresh}
+            projectCode={projectCode}
+            onSave={save}
+          />
+        )}
       </div>
     )
   }