LogViewer

Organism

A windowed log list for 10k+ lines: severity as a text label and colour, search with highlight, severity and field facet chips, a wrap toggle, copy line, context lines pulled in around a selected line when the list is filtered, and a follow mode for a live tail (pauses when the user scrolls up, counts new lines, shows a drop counter). `useLogStream` is the producer side: it coalesces pushes, keeps the newest lines and counts drops.

12 000 lines

Preview
severity
region
service
status
TRACEhandled request 0 in 20 ms
DEBUGhandled request 1 in 21 ms
INFOhandled request 2 in 22 ms
INFOhandled request 3 in 23 ms
INFOhandled request 4 in 24 ms
INFOhandled request 5 in 25 ms
WARNslow query on request 6 (1.2 s)
INFOhandled request 7 in 27 ms
ERRORrequest 8 failed: upstream timeout after 3000 ms
INFOhandled request 9 in 29 ms
TRACEhandled request 10 in 30 ms
DEBUGhandled request 11 in 31 ms
INFOhandled request 12 in 32 ms
INFOhandled request 13 in 33 ms
INFOhandled request 14 in 34 ms
INFOhandled request 15 in 35 ms
WARNslow query on request 16 (1.2 s)
INFOhandled request 17 in 37 ms
ERRORrequest 18 failed: upstream timeout after 3000 ms
INFOhandled request 19 in 39 ms
TRACEhandled request 20 in 40 ms
DEBUGhandled request 21 in 41 ms
INFOhandled request 22 in 42 ms
INFOhandled request 23 in 43 ms
INFOhandled request 24 in 44 ms
Code
<LogViewer lines={lines} height={320} />

Highlight mode, wrapped

Preview
1 of 40
400 of 400 lines
severity
region
service
status
TRACEhandled request 0 in 20 ms
DEBUGhandled request 1 in 21 ms
INFOhandled request 2 in 22 ms
INFOhandled request 3 in 23 ms
INFOhandled request 4 in 24 ms
INFOhandled request 5 in 25 ms
WARNslow query on request 6 (1.2 s)
INFOhandled request 7 in 27 ms
ERRORrequest 8 failed: upstream timeout after 3000 ms
INFOhandled request 9 in 29 ms
TRACEhandled request 10 in 30 ms
DEBUGhandled request 11 in 31 ms
INFOhandled request 12 in 32 ms
INFOhandled request 13 in 33 ms
INFOhandled request 14 in 34 ms
INFOhandled request 15 in 35 ms
WARNslow query on request 16 (1.2 s)
INFOhandled request 17 in 37 ms
ERRORrequest 18 failed: upstream timeout after 3000 ms
INFOhandled request 19 in 39 ms
TRACEhandled request 20 in 40 ms
DEBUGhandled request 21 in 41 ms
INFOhandled request 22 in 42 ms
INFOhandled request 23 in 43 ms
INFOhandled request 24 in 44 ms
Code
<LogViewer lines={lines} searchMode="highlight" defaultQuery="timeout" defaultWrap />

Live tail with a drop counter

Preview
severity
region
service
status
TRACEhandled request 0 in 20 ms
DEBUGhandled request 1 in 21 ms
INFOhandled request 2 in 22 ms
INFOhandled request 3 in 23 ms
INFOhandled request 4 in 24 ms
INFOhandled request 5 in 25 ms
WARNslow query on request 6 (1.2 s)
INFOhandled request 7 in 27 ms
ERRORrequest 8 failed: upstream timeout after 3000 ms
INFOhandled request 9 in 29 ms
TRACEhandled request 10 in 30 ms
DEBUGhandled request 11 in 31 ms
INFOhandled request 12 in 32 ms
INFOhandled request 13 in 33 ms
INFOhandled request 14 in 34 ms
INFOhandled request 15 in 35 ms
WARNslow query on request 16 (1.2 s)
INFOhandled request 17 in 37 ms
ERRORrequest 18 failed: upstream timeout after 3000 ms
INFOhandled request 19 in 39 ms
TRACEhandled request 20 in 40 ms
DEBUGhandled request 21 in 41 ms
INFOhandled request 22 in 42 ms
INFOhandled request 23 in 43 ms
INFOhandled request 24 in 44 ms
Code
const stream = useLogStream({ maxLines: 400 });
<LogViewer lines={stream.lines} dropped={stream.dropped} follow onFollowChange={setFollow} />
Sourcemodules/ui/LogViewer/index.tsx