hyperdx/.changeset/error-display-sql-preview.md at bdca9bd4db813aab39bc8cd02866d070ac2c089e

mirror of https://github.com/hyperdxio/hyperdx synced 2026-04-21 13:37:15 +00:00

[HDX-3966] Improve TUI error message rendering and add SQL preview (#2095 )

## Summary

Improves error message rendering in the CLI/TUI with visible highlighting, structured error display matching the web frontend patterns, and adds a SQL preview feature.

**Linear:** https://linear.app/hyperdx/issue/HDX-3966

## Changes

### Error Display
- **`ErrorDisplay` component** — Reusable error/warning display with bordered boxes, color-coded severity (red/yellow), icons, and responsive rendering based on terminal height (compact < 20 rows, medium 20-35, full > 35)
- **`parseError` utility** — Parses ClickHouse `DB::Exception` strings and HTML error responses into clean messages; accepts `Error | ClickHouseQueryError | string`
- **`useSqlSuggestions`** — Copied from `packages/app/src/hooks/useSqlSuggestions.tsx` to `packages/cli/src/shared/` for detecting common ClickHouse query mistakes (e.g. double quotes)

### Error Object Preservation
- **`useEventData` / `useTraceData`** — Error state changed from `string | null` to `Error | null`, preserving `ClickHouseQueryError` instances with their `.query` property through the entire chain
- **Row detail errors** — Added `expandedRowError` state (replaces `__fetch_error` string embedding in row data) and `selectedRowError` for trace span details
- **Pagination errors** — Now surfaced instead of silently swallowed

### SQL Preview (Shift-D)
- Press `D` to view the generated ClickHouse SQL for the current context
- Context-aware: shows table query, expanded row SELECT *, or trace spans query depending on which view is active
- Uses `parameterizedQueryToSql` from common-utils to resolve query parameters
- Scrollable with Ctrl+D/U for long queries
- Renders as an overlay (display=none) to preserve component state — no re-fetch when toggling

### Other Fixes
- Follow mode (`f` key) disabled in event detail panel (was incorrectly toggleable)
- All error display sites updated: TableView, DetailPanel, TraceWaterfall, Footer, App, LoginForm

## Files Created
| File | Purpose |
|------|---------|
| `packages/cli/src/components/ErrorDisplay.tsx` | Reusable error/warning display component |
| `packages/cli/src/utils/parseError.ts` | Error message parser (ClickHouse, HTML) |
| `packages/cli/src/shared/useSqlSuggestions.ts` | SQL suggestion engines (copied from app) |

## Files Modified
| File | Change |
|------|--------|
| `useEventData.ts` | Error objects, expandedRowError, lastChSql/lastExpandedChSql as state |
| `useTraceData.ts` | Error objects, selectedRowError, eager traceQuery via useMemo |
| `EventViewer.tsx` | showSql overlay, activeChSql, traceChSql state |
| `useKeybindings.ts` | D keybinding, showSql handling, f key guard |
| `SubComponents.tsx` | SqlPreviewScreen, Footer with ErrorDisplay, HelpScreen update |
| `TableView.tsx` | Error object + searchQuery props |
| `DetailPanel.tsx` | expandedRowError prop, onTraceChSqlChange |
| `TraceWaterfall.tsx` | onChSqlChange callback, selectedRowError display |
| `types.ts` (TraceWaterfall) | onChSqlChange prop |
| `App.tsx` | ErrorDisplay |
| `LoginForm.tsx` | ErrorDisplay |

## Testing
- `tsc --noEmit` — passes
- `yarn build` — passes
- `npx lint-staged` — passes
- Manual testing of all error display paths and SQL preview across tabs

## Demo 
<img width="1169" height="322" alt="image" src="https://github.com/user-attachments/assets/b0580f0a-c226-4297-9937-f263afd39f6a" />

<img width="1165" height="250" alt="image" src="https://github.com/user-attachments/assets/d7139a91-0c2e-4b60-b637-3e900447d3fa" />

2026-04-10 17:12:10 +00:00

637 B

Raw Blame History

@hyperdx/cli
patch

Improve error message rendering with visible highlighting and add SQL preview

Add ErrorDisplay component with bordered boxes, color-coded severity, and responsive terminal height adaptation
Preserve ClickHouseQueryError objects through the error chain to show sent query context
Surface previously silent errors: pagination failures, row detail fetch errors, trace span detail errors
Add Shift-D keybinding to view generated ClickHouse SQL (context-aware across all tabs)
Copy useSqlSuggestions from app package to detect common query mistakes
Disable follow mode toggle in event detail panel

637 B Raw Blame History

637 B

Raw Blame History