Log Viewer

Structured logs with level filters, search and counts. Matches are highlighted in place rather than filtering the list down, so a search shows where the hits are in context.

src/components/ui/log-viewer.tsx

About

From the component's own source, where it was written.

Structured logs: level filters, search, timestamps.

Distinct from Terminal, which renders an opaque stream of bytes. Here every line is a record with a level and a time, so it can be filtered and counted — and that is the whole reason to prefer structured logging in the first place.

Matches are highlighted rather than the list being silently reduced, so a search shows you where the hits are in context.

Install

npx astralyx-ui add log-viewer

Usage

import { LogViewer } from '@/components/ui/log-viewer'

<LogViewer entries={entries} />

Composer

Change the props and the source below follows.

08:14:00infoapiServer listening on :3000

08:14:02debugcacheCache warm: 412 keys

08:14:04infoapiGET /v1/components 200 12ms

08:14:09warndbSlow query: components.list took 842ms

08:14:14errorapiUpstream timeout contacting registry

08:14:15infoapiRetrying in 2s (attempt 1 of 3)

08:14:18debugdbConnection pool: 4 idle, 2 active

7of 7 entries

Props

searchablefilterable

tsx

<LogViewer
  entries={entries}
  searchable={true}
  filterable={true}
/>

Examples

Service logs

tsx

<LogViewer entries={entries} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`LogViewer`

Extends ComponentProps<'div'>.

Prop	Type	Default	Description
entries	LogEntry[]	required	`{ id, level, message, time?, source? }` with level one of debug, info, warn, error.
locale	string	'en-GB'	Formats timestamps through Intl.
searchable	boolean	true	Filter box. The hit is marked inside the message.
filterable	boolean	true	Per-level toggles, each showing that level total so you can see what you are hiding.
searchPlaceholder	string	'Filter logs'	—
searchLabel	string	'Filter logs'	Accessible name for the search field.
levelLabel	string	'Minimum log level'	Accessible name for the level threshold select.

Types

`LogEntry`

Field	Type	Description
id	string	—
level	LogLevel	—
message	string	—
time?	Date	—
source?	string	—

Type	Definition	Description
`LogLevel`	'debug' \| 'info' \| 'warn' \| 'error'	Structured logs: level filters, search, timestamps.