LogViewer
Renders structured logs as a searchable, copyable, virtualized line stream with non-color level labels.@gemologic/sheen-code · contentPlayground
This example has no scalar controls. Its validated source remains interactive below.
<LogViewer entries={entries} label="Deployment logs" />Variant matrix
Deployment logsDeployment logs1 of 1 lines
Anatomy
- Package
@gemologic/sheen-code- Source
packages/code/src/LogViewer.tsx- Tokens
--sheen-color-bg-raised--sheen-color-warning-fg--sheen-color-danger-fg--sheen-font-mono
Accessibility
Role: named region containing a focusable virtual list and listitemsKeyboard: Tab, Shift+Tab, Enter, Space, PageUp, PageDown, Home, EndDo
- Use stable IDs and app-formatted timestamps.
- Replace or append immutable accepted snapshots without remounting the viewer.
Do not
- Do not put secrets or raw command lines into browser-visible logs.
- Do not use color as the only severity signal.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
entries * | readonly LogEntry[] | — | Accepted structured entries with stable IDs, timestamps, levels, and messages. |
label * | string | — | Required accessible viewer and line-list name. |
searchable | boolean | true | Shows debounced search over timestamps, levels, messages, and details. |
copyable | boolean | true | Copies the complete plain-text log snapshot. |
initialHeight | number | 360 | Deterministic SSR and initial viewport height in pixels from 120 to 1200. |
lineHeight | number | 22 | Fixed virtual row height in pixels from 16 to 48. |
onCopyError | (error: unknown) => void | — | Receives Clipboard API failures without exposing raw errors in the UI. |