Implementation:Risingwavelabs Risingwave Heap Profiling Page

Property	Value
Page Component	HeapProfiling
Source File	dashboard/pages/heap_profiling.tsx
Language	TypeScript / TSX
Lines	311
Category	Dashboard Page
Framework	React, Next.js, Chakra UI, Monaco Editor

Overview

The HeapProfiling page is an essential performance debugging tool in the RisingWave dashboard for diagnosing memory usage issues across different worker node types (Compute, Frontend, Compactor). It allows users to:

1. Select a worker node from a grouped dropdown organized by worker type
2. Dump heap profiles on demand by triggering a heap dump on the selected worker
3. List existing heap profiles (both auto-dumped and manually-dumped files)
4. Analyze heap profiles by downloading collapsed profiling results suitable for flame graph generation

The page displays status messages and analysis results in a read-only Monaco Editor panel.

Code Reference

Source Location

dashboard/pages/heap_profiling.tsx

Full URL: dashboard/pages/heap_profiling.tsx

Signature

export default function HeapProfiling(): JSX.Element

Imports

import {
  Box, Button, Flex, FormControl, FormLabel, Select, VStack,
} from "@chakra-ui/react"
import Editor from "@monaco-editor/react"
import base64url from "base64url"
import { saveAs } from "file-saver"
import Head from "next/head"
import path from "path"
import { Fragment, useEffect, useState } from "react"
import SpinnerOverlay from "../components/SpinnerOverlay"
import Title from "../components/Title"
import api from "../lib/api/api"
import { getClusterInfoProfileWorkers } from "../lib/api/cluster"
import useFetch from "../lib/api/fetch"
import { WorkerNode, WorkerType } from "../proto/gen/common"
import { ListHeapProfilingResponse } from "../proto/gen/monitor_service"

I/O Contract

Inputs (Page-level)

The page has no URL query parameters. It fetches worker nodes on mount via getClusterInfoProfileWorkers().

API Dependencies

API Endpoint	Method	Purpose
/monitor/list_heap_profile/{workerNodeId}	GET	Lists available auto and manually dumped heap profile files for a worker node
/monitor/dump_heap_profile/{workerNodeId}	GET	Triggers a new heap profile dump on the specified worker node
/monitor/analyze/{workerNodeId}/{filePathBase64}	GET (fetch)	Downloads the analyzed (collapsed) heap profile file for flame graph use
getClusterInfoProfileWorkers()	API call	Fetches the list of worker nodes that support profiling

Outputs

The page renders:

• A sidebar (200px wide) containing:
  • A worker node selector dropdown grouped by worker type (Compute, Frontend, Compactor)
  • A "Dump" button to trigger a new heap profile dump
  • A profile file selector dropdown (grouped by Auto / Manually dumped)
  • An "Analyze" button to download collapsed profiling data
• A Monaco Editor panel (read-only) displaying status messages, error information, and analysis results

Internal Types

interface FileList {
  dir: string
  name: string[]
}

Key Functions

getProfileList

async function getProfileList(
  workerNodes: WorkerNode[] | undefined,
  workerNodeId: number | undefined
): Promise<void>

Fetches the list of heap profiling files from the monitor API for the selected worker node. Parses the response into a ListHeapProfilingResponse, sorts the auto and manual file lists in reverse chronological order, and updates the display info with the file count.

dumpProfile

async function dumpProfile(): Promise<void>

Triggers a heap profile dump on the currently selected worker node via the monitor API, then refreshes the profile file list.

analyzeHeapFile

async function analyzeHeapFile(): Promise<void>

Sends a request to analyze the selected heap profile file. The file path is base64url-encoded before being sent to the API. On success, the collapsed profiling result is downloaded as a file (using file-saver) with a .collapsed extension, suitable for flame graph tools.

workerTypeLabel

const workerTypeLabel = (workerType: WorkerType) => string

Maps WorkerType enum values to human-readable labels: "Frontend", "Compute", "Compactor", or "Other".

getWorkerLabel

const getWorkerLabel = (nodeId: number | undefined) => string

Returns a descriptive label for a worker node, e.g., "Worker Node 3 (Compute)".

State Management

State Variable	Type	Purpose
workerNodeId	undefined	Currently selected worker node ID
displayInfo	undefined	Text displayed in the Monaco Editor panel
profileList	undefined	List of auto and manual heap profile files
analyzeTargetFileName	undefined	Currently selected file name for analysis

Configuration

const SIDEBAR_WIDTH = 200

const workerTypeOrder = [
  WorkerType.WORKER_TYPE_COMPUTE_NODE,
  WorkerType.WORKER_TYPE_FRONTEND,
  WorkerType.WORKER_TYPE_COMPACTOR,
]

Usage Examples

Accessing the page

The page is accessible at /heap_profiling in the dashboard navigation.

/heap_profiling

Workflow

1. Select a worker node from the dropdown (grouped by type)
2. Click "Dump" to trigger a new heap profile dump (optional)
3. Select a profile file from the "Dumped Files" dropdown
4. Click "Analyze" to download the collapsed profiling file
5. Use the downloaded .collapsed file with a flame graph tool (e.g., FlameGraph, speedscope)

Related Pages

• Risingwavelabs_Risingwave_Fragment_Graph_Page -- Another dashboard debugging page for streaming pipeline visualization
• Risingwavelabs_Risingwave_Dashboard_Streaming_API -- API layer used for cluster and monitoring data