Implementation:Risingwavelabs Risingwave Await Tree Page

Property	Value
Component	AwaitTreeDump
File	dashboard/pages/await_tree.tsx
Language	TypeScript/TSX
Lines	176
Type	Next.js Page Component
Framework	React, Chakra UI, Monaco Editor

Overview

await_tree.tsx is a dashboard page for dumping and displaying async await-tree traces from RisingWave compute nodes, providing a critical debugging tool for inspecting the internal async task execution state. The page fetches the list of compute nodes, lets the user select one (or all), calls the /monitor/await_tree/ API to get a StackTraceResponse, then formats actor, RPC, compaction, barrier, barrier worker state, and JVM traces into a read-only Monaco Editor display. This enables developers and operators to diagnose stuck or slow tasks in the streaming compute layer.

Code Reference

Source Location

dashboard/pages/await_tree.tsx

Signature

export default function AwaitTreeDump(): JSX.Element

Import

// This is a Next.js page component, routed automatically
// Internal imports:
import api from "../lib/api/api"
import { getClusterInfoComputeNode } from "../lib/api/cluster"
import useFetch from "../lib/api/fetch"
import { StackTraceResponse } from "../proto/gen/monitor_service"

I/O Contract

API Endpoint

Endpoint	Method	Description
/monitor/await_tree/{computeNodeId}	GET	Fetches await-tree dump for a specific compute node, or all nodes if computeNodeId is empty string

Internal State

State Variable	Type	Description
computeNodeId	undefined	Selected compute node ID, or empty string for "All"
dump	string	Formatted trace dump text displayed in the Monaco Editor

StackTraceResponse Fields

The response is deserialized into a StackTraceResponse protobuf object containing:

Field	Format in Output	Description
actorTraces	[Actor {key}]\n{value}	Traces from streaming actors
rpcTraces	[RPC {key}]\n{value}	Traces from RPC calls
compactionTaskTraces	[Compaction {key}]\n{value}	Traces from compaction tasks
inflightBarrierTraces	[Barrier {key}]\n{value}	Traces from in-flight barriers
barrierWorkerState	[BarrierWorkerState (Worker {key})]\n{value}	Barrier worker state information
jvmStackTraces	[JVM (Worker {key})]\n{value}	JVM stack traces (for Java-based components)

Output

Renders a two-panel layout:

• Left sidebar (200px): A Select dropdown for choosing a compute node (or "All") and a "Dump" button
• Main area: A read-only Monaco Editor displaying the formatted trace output with SQL language highlighting, word wrap enabled, and 13px font size

Usage Examples

Page Layout Structure

// The page is accessed via the dashboard routing
// URL: /await_tree

// User flow:
// 1. Page loads -> compute nodes are fetched automatically
// 2. User selects a compute node from the dropdown (or "All")
// 3. User clicks "Dump"
// 4. Trace output appears in the Monaco Editor

Dump Tree Function

const dumpTree = async () => {
  if (computeNodeId === undefined) return

  setDump("Loading...")

  try {
    const response: StackTraceResponse = StackTraceResponse.fromJSON(
      await api.get(`/monitor/await_tree/${computeNodeId}`)
    )

    const actorTraces = _(response.actorTraces)
      .entries()
      .map(([k, v]) => `[Actor ${k}]\n${v}`)
      .join("\n")
    // ... similar for rpcTraces, compactionTraces, barrierTraces, etc.

    result = `${title}\n\n${actorTraces}\n${rpcTraces}\n...`
  } catch (e: any) {
    result = `${title}\n\nERROR: ${e.message}\n${e.cause}`
  }

  setDump(result)
}

Related Pages

• Risingwavelabs_Risingwave_Cluster_API - Provides getClusterInfoComputeNode used to populate the compute node selector
• Risingwavelabs_Risingwave_Dashboard_API_Client - The HTTP client used to fetch the await-tree dump
• Risingwavelabs_Risingwave_UseFetch_Hook - Used to fetch the initial compute node list
• Risingwavelabs_Risingwave_Cluster_Page - Related cluster monitoring page showing node status