Implementation:FlowiseAI Flowise OnAgentflowNodeStatusUpdate

Property	Value
Page ID	FlowiseAI_Flowise_OnAgentflowNodeStatusUpdate
Source Repository	FlowiseAI/Flowise
Source File	`packages/ui/src/store/context/ReactFlowContext.jsx`
Domain	Real-Time Communication, Event-Driven Architecture, Visual Workflow Monitoring
Last Updated	2026-02-12 14:00 GMT

Overview

Implementation of the real-time node status update handler that processes WebSocket events during agent flow execution and updates the corresponding node's visual state in the ReactFlow canvas.

Code Reference

Source Location

File: packages/ui/src/store/context/ReactFlowContext.jsx
Lines: 23-36
Repository: FlowiseAI/Flowise

Signature

const onAgentflowNodeStatusUpdate = ({ nodeId, status, error }) => {
    reactFlowInstance.setNodes((nds) =>
        nds.map((node) => {
            if (node.id === nodeId) {
                node.data = {
                    ...node.data,
                    status,
                    error
                }
            }
            return node
        })
    )
}

Companion Function: clearAgentflowNodeStatus

const clearAgentflowNodeStatus = () => {
    reactFlowInstance.setNodes((nds) =>
        nds.map((node) => {
            node.data = {
                ...node.data,
                status: undefined,
                error: undefined
            }
            return node
        })
    )
}

Import

import { flowContext } from '@/store/context/ReactFlowContext'

Then access via React context:

const { onAgentflowNodeStatusUpdate, clearAgentflowNodeStatus } = useContext(flowContext)

I/O Contract

Inputs

Parameter	Type	Required	Description
`nodeId`	`string`	Yes	The unique identifier of the node whose status is being updated.
`status`	`string`	Yes	The execution status. One of `"running"`, `"completed"`, or `"error"`.
`error`	`string`	No	Error message when status is `"error"`. Undefined for other statuses.

Outputs

Type	Description
`void`	This function does not return a value. It mutates the ReactFlow node state to reflect the execution status, which triggers a React re-render of the affected node.

Usage Examples

Handling the nextAgentFlow socket event

The status update is triggered by the nextAgentFlow event received via the socket.io message stream in the ChatMessage component:

// In packages/ui/src/views/chatmessage/ChatMessage.jsx

const { onAgentflowNodeStatusUpdate, clearAgentflowNodeStatus } = useContext(flowContext)

const updateLastMessageNextAgentFlow = (nextAgentFlow) => {
    onAgentflowNodeStatusUpdate(nextAgentFlow)
}

// Inside the socket message handler switch statement:
case 'nextAgentFlow':
    updateLastMessageNextAgentFlow(payload.data)
    break

Clearing status before new execution

// Before sending a new message for execution
setLoading(true)
clearAgentflowNodeStatus()

// ... proceed with API call to execute the flow

Status update flow

// 1. Server starts executing node "agent_1"
// Server emits: { nodeId: 'agent_1', status: 'running' }
// Canvas shows: agent_1 node with running indicator

// 2. Server completes node "agent_1"
// Server emits: { nodeId: 'agent_1', status: 'completed' }
// Canvas shows: agent_1 node with completed indicator

// 3. Server starts executing node "agent_2"
// Server emits: { nodeId: 'agent_2', status: 'running' }
// Canvas shows: agent_2 node with running indicator

// 4. Server encounters error on node "agent_2"
// Server emits: { nodeId: 'agent_2', status: 'error', error: 'API rate limit exceeded' }
// Canvas shows: agent_2 node with error indicator and message

Context Provider Architecture

The function is defined within the ReactFlowContext provider, which wraps the agentflow canvas component tree. This context provides shared access to the reactFlowInstance and flow manipulation functions:

export const flowContext = createContext(initialValue)

export const ReactFlowContext = ({ children }) => {
    const [reactFlowInstance, setReactFlowInstance] = useState(null)

    const onAgentflowNodeStatusUpdate = ({ nodeId, status, error }) => {
        // ... status update logic
    }

    const clearAgentflowNodeStatus = () => {
        // ... status clearing logic
    }

    return (
        <flowContext.Provider value={{
            reactFlowInstance,
            setReactFlowInstance,
            onAgentflowNodeStatusUpdate,
            clearAgentflowNodeStatus,
            // ... other context values
        }}>
            {children}
        </flowContext.Provider>
    )
}

Socket Event Integration

The WebSocket event that triggers this function follows this path:

Server emits a nextAgentFlow event via socket.io during flow execution.
The ChatMessage component (packages/ui/src/views/chatmessage/ChatMessage.jsx) receives the event in its socket message handler.
The handler calls updateLastMessageNextAgentFlow(payload.data).
This delegates to onAgentflowNodeStatusUpdate(nextAgentFlow) from the flowContext.
The function updates the matching node's data in the ReactFlow instance, triggering a visual re-render.

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment