apache / apache/dolphinscheduler
[Bug] [UI] Clicking edit on a task throws "Cannot read properties of undefined (reading 'releaseState')" when workflowDefinition is undefined
- Dominant language
- Java
- Stars
- 14.5k
- Forks
- 5.1k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 29
Description
## Summary
When clicking "Edit" on a task node in the DAG editor, the browser console throws `Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'releaseState')` and the page stops rendering. Two computed properties in `dag/index.tsx` (`startDisplay` and `menuDisplay`) access `props.definition.workflowDefinition.releaseState` without null-checking `workflowDefinition`.
## Expected Behavior
Clicking "Edit" on a task should open the task editor without throwing. If `workflowDefinition` is `undefined` (e.g., the workflow is in a transient state), the relevant UI controls (start button, "other" menu) should be hidden, but the page should keep rendering.
## How to Reproduce
1. Open a workflow definition that contains task nodes.
2. Get into a state where `props.definition.workflowDefinition` is `undefined`. This can happen when:
- The workflow definition has not been saved yet (draft state)
- The workflow definition was deleted but task instances still reference it
- The API response is missing the `workflowDefinition` field for some reason
3. Right-click a task node and click "Edit".
4. Observe the browser console: `Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'releaseState')` at `index-XXX.js:1:NNNN`.
5. The DAG page stops rendering (or part of the right-click menu doesn't appear).
## Root Cause
In `dolphinscheduler-ui/src/views/projects/workflow/components/dag/index.tsx`, two computed properties use the TypeScript non-null assertion operator on `props.definition` but skip any null check on `workflowDefinition`:
```ts
// Line 126-135
const startDisplay = computed(() => {
if (props.definition) {
return (
route.name === 'workflow-definition-detail' &&
props.definition!.workflowDefinition.releaseState === 'ONLINE'
)
} else {
return false
}
})
// Line 143-156
const menuDisplay = computed(() => {
if (props.instance) {
return (
props.instance.state === 'SUCCESS' ||
props.instance.state === 'PAUSE' ||
props.instance.state === 'FAILURE' ||
props.instance.state === 'STOP'
)
} else if (props.definition) {
return props.definition!.workflowDefinition.releaseState === 'OFFLINE'
} else {
return false
}
})
```
The `!` is a TypeScript-only non-null assertion — it has no runtime effect. When `props.definition.workflowDefinition` is `undefined`, accessing `.releaseState` throws `TypeError: Cannot read properties of undefined (reading 'releaseState')`.
Note: `dag-toolbar.tsx` (lines 276 and 512) already uses the safe pattern `props.definition?.workflowDefinition?.releaseState`, so this is an inconsistency within the same module.
## Environment
- DolphinScheduler 3.4.2 release (also reproduced on the latest `dev` branch, commit `3752346650`)
- Browser: any (the error is a JavaScript runtime error, not browser-specific)
Contributor guide
Research direction
Start in dolphinscheduler-ui/src/views/projects/workflow/components/dag/index.tsx and inspect the startDisplay and menuDisplay computed properties. Compare their workflowDefinition access with the safe pattern in dag-toolbar.tsx at lines 276 and 512. Done means editing a task with an undefined workflowDefinition no longer throws, the page keeps rendering, and the relevant controls remain hidden.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 84/100