Log viewerPro
Live log stream with level filters, search and follow mode.
10:42:00info[api]GET /v1/projects 200 in 42ms
10:42:03debug[worker]job 8812 picked up from queue billing
10:42:06info[api]POST /v1/charges 201 in 188ms
10:42:09warn[api]Slow query: SELECT * FROM invoices took 812ms
10:42:12error[worker]Webhook delivery to https://acme.com/hooks failed: ECONNRESET
10:42:15info[edge]Cache HIT /pricing (eu-west)
10:42:18info[api]GET /v1/projects 200 in 42ms
10:42:21debug[worker]job 8812 picked up from queue billing
10:42:24info[api]POST /v1/charges 201 in 188ms
10:42:27warn[api]Slow query: SELECT * FROM invoices took 812ms
10:42:30error[worker]Webhook delivery to https://acme.com/hooks failed: ECONNRESET
10:42:33info[edge]Cache HIT /pricing (eu-west)
10:42:36info[api]GET /v1/projects 200 in 42ms
10:42:39debug[worker]job 8812 picked up from queue billing
When to use
- Streaming build, function or request logs.
When not to use
- Millions of lines: virtualize or page on the server.
Installation
Usage
Import it from @/components/ui/log-viewer after installing.
example.tsx
import { LogViewer } from "@/components/ui/log-viewer";
export function BuildLogs({ entries }: { entries: { id: string; time: string; level: "info" | "warn" | "error" | "debug"; message: string }[] }) {
return <LogViewer entries={entries} live height={400} />;
}API reference
LogViewer
Searchable, level-filtered log stream with follow mode.
| Prop | Type | Default | Description |
|---|---|---|---|
| entries | { id; time; level; message; source? }[] | – | level: debug, info, warn or error. |
| live | boolean | – | New entries scroll into view unless paused. |
| height | number | 360 | Viewport height in px. |
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Reach search, level filters and Follow |
Accessibility
- role="log" with aria-live.
- Level filters are toggle buttons with aria-pressed.
Motion
- No entry animation, so fast streams stay readable.
- Follow mode keeps the newest line in view.
Responsive behavior
- Lines wrap on phones; the toolbar wraps.
Performance
- Filtering is in memory; cap the buffer to a few thousand entries.
Notes for AI
- Append new entries to the end of the array.
This page as Markdown, for assistants and coding agents:
/components/log-viewer/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt