apache / apache/dolphinscheduler

[Bug] [UI] Clicking edit on a task throws "Cannot read properties of undefined (reading 'releaseState')" when workflowDefinition is undefined

Open Beginner friendly
#18,448 2 comments 0 reactions 0 assignees View on GitHub
bug UI
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.