LogViewer

Code

import { LogViewer } from "@fadymondy/nasaq/web";export function Logs() {  return (    <LogViewer      streaming      entries={[        { id: 1, time: Date.now(), level: "info", source: "api", message: "listening on :3000" },        { id: 2, time: Date.now(), level: "error", source: "db", message: "connection refused", fields: { host: "db-1" } },      ]}    />  );}

Monitoring · stable

Live examples and controls: LogViewer in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/log-viewer.json

A log stream that behaves like a dev tool. Entries are { id, time, level, message, source?, fields? }, oldest first. The toolbar has level chips with live counts, a search box with a regex toggle, a timestamps toggle, copy and download. Rows are fixed-height and windowed, so tens of thousands of entries scroll smoothly. While following, the list stays on the newest entry; scrolling up stops it and shows "Jump to latest". Select a row to see the full message and its structured fields. Presentational: append to entries to stream.

When to useCopy Anchor Link

• Application, server or container logs with levels and timestamps.
• Anything a developer would search and filter while debugging.

When not to useCopy Anchor Link

• Raw command output with colours: use Terminal.
• Tabular business data: use DataTable.
• Audit trails for people: use a timeline or activity list.

ImportCopy Anchor Link

import { LogViewer } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { LogViewer } from "@fadymondy/nasaq/web";

export function Logs() {
  return (
    <LogViewer
      streaming
      entries={[
        { id: 1, time: Date.now(), level: "info", source: "api", message: "listening on :3000" },
        { id: 2, time: Date.now(), level: "error", source: "db", message: "connection refused", fields: { host: "db-1" } },
      ]}
    />
  );
}

AnatomyCopy Anchor Link

LogViewer       data-slot="log-viewer"          <div dir="ltr">
├─ toolbar      data-slot="log-viewer-toolbar"  level chips, search, regex, timestamps, copy, download
├─ list         data-slot="log-viewer-list"     <div role="log"> windowed rows, follows the tail
│  └─ row       data-slot="log-viewer-row"      time, level badge, source, message (matches highlighted)
├─ jump         "Jump to latest"                shown when not following
└─ detail       data-slot="log-viewer-detail"   full message and fields of the selected row

APICopy Anchor Link

Helpers: filterLogs, compileMatcher, countByLevel, formatLogTime, normalizeLevel (maps WARNING, err, critical onto the six levels), logsToText, virtualWindow, rangeSince (a range's lower bound in epoch ms, null for all time) and entriesUntil (what a list paused at an id shows). filterLogs also takes since. All pure.

ExamplesCopy Anchor Link

Parse and normalise your own linesCopy Anchor Link

const entries = raw.map((l, i) => ({ id: i, time: l.ts, level: normalizeLevel(l.severity) ?? "info", message: l.text }));

Server-side filtering, time range and older pagesCopy Anchor Link

<LogViewer
  manual
  entries={page.entries}
  counts={page.counts}
  total={page.total}
  ranges={LOG_RANGES}
  defaultRange="1h"
  onFilterChange={(f) => refetch({ levels: f.levels, q: f.query, since: f.since })}
  hasOlder={page.hasOlder}
  onLoadOlder={() => fetchOlder(page.entries[0]?.id)}
/>

Live tail with pauseCopy Anchor Link

<LogViewer entries={entries} streaming liveTail onLiveChange={(live) => (live ? socket.resume() : socket.pause())} />

While paused the list holds still, the footer reads "Paused · 12 new entries" and a button resumes and jumps to the newest entry.

Extra controlCopy Anchor Link

<LogViewer entries={entries} toolbar={<Select items={services} value={service} onValueChange={setService} />} />

AccessibilityCopy Anchor Link

• The list is role="log"; the selected row is exposed with aria-activedescendant.
• Level chips are toggle buttons with counts in their names. Level is always text, not colour alone.
• An invalid regex shows an inline message and does not clear the list.

RTL & i18nCopy Anchor Link

• The surface is dir="ltr": timestamps, sources and messages are code. The toolbar labels are translated.
• Timestamps use Latin digits and a fixed width so columns line up in any locale.
• Built-in Arabic strings; override with labels.

Styling & tokensCopy Anchor Link

• Level colours: text-nq-danger-text, -warning-text, -info-text, -success-text, text-muted-foreground. Selection bg-nq-selected, hover bg-nq-hover, matches bg-nq-warning-soft.
• Slots: log-viewer, log-viewer-toolbar, log-viewer-list, log-viewer-row, log-viewer-detail.

Do / Don'tCopy Anchor Link

• Do give every entry a stable id.
• Do cap the number of entries you keep in memory for very long sessions.
• Don't log secrets; the viewer shows exactly what you pass.
• Don't rely on wrapped rows: rows are one line, and the detail panel shows the full text.

RelatedCopy Anchor Link

• Terminal · DeployView · DataTable

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-monitoring-log-viewer--docs