LogViewer

Open in Playground

Log output you can filter and search. Pass logs: { id, level, message, timestamp?, source?, data?, stack? } with level one of debug, info, warn or error. Filter by level (the buttons show how many there are of each), search the text (after a short pause; matches are highlighted), and open the full screen view (Escape leaves it). Errors stand out, a multi-line message shows its first line as the headline, stack is its own block with the at ... lines dimmed, and long data or long stacks are cut with "Show all".

  • info[lair]Banana delivery completed in 82ms
  • warn[fridge]Banana stock running low
  • error[lair]Freeze ray misfired
    Error: Banana Overflow
        at peel (banana.js:42:11)
        at eat (minion.js:9:3)
    {"target":"moon","gadget":"freeze-ray","status":500}
  • debugMinion retrying in 2s

Live logs. With autoScroll (the default) the viewer follows the newest entry, until the reader scrolls up: then it stops and offers "Jump to latest" (onAutoScrollChange tells you). Put your own controls in toolbarStart / toolbarEnd, add a Clear button with onClear, and use appearance="dark" for a terminal-style console in either theme. Keep the list to a sensible length yourself (.slice(-1000)): the viewer shows what it is given.

Connected to the lair. New log messages appear here.

Log files. parseLogFile(text) turns a log file into entries: every JSON line (winston, pino...) is one entry, and the lines between them that are not JSON, such as a printed Error with its stack, are one entry, so a 70-line stack trace is one row. toLogLevel, entryFromRecord and formatLogTime are exported too.

  • infoLair opened
    {"minions":3000}
  • warnSlow banana peeling
    {"ms":1280}
  • error[console]TypeError: Cannot read properties of undefined (reading 'id')
        at getMinion (minions.js:21:18)
        at handler (lair.js:8:5)
  • errorPrank failed
    {"url":"/minions/9"}

Props

LogViewer

  • logsLogEntry[]

    Log entries in display order. level is debug, info, warn or error. See the LogEntry table below.

  • autoScrollboolean
    Default: true

    Follow the newest entry until the reader scrolls up.

  • onAutoScrollChange(following: boolean) => void

    Called when following stops or resumes.

  • fontSizenumber
    Default: 13

    Font size of the entries, in px.

  • heightnumber | string

    Fixed height of the log area.

  • maxHeightnumber | string
    Default: '24rem'

    Maximum height of the log area (when there is no height).

  • appearance'theme' | 'dark'
    Default: 'theme'

    Follow the theme, or always a dark terminal-style console.

  • fullScreenButtonboolean
    Default: true

    Show the full screen button (Escape leaves it).

  • toolbarStartReactNode

    Placed before the level filter (a connection badge).

  • toolbarEndReactNode

    Placed before the search box (an options menu).

  • onClear() => void

    Adds a Clear button.

  • emptyTextstring
    Default: 'No logs yet'

    Shown when there are no logs at all.

  • labelstring
    Default: 'Logs'

    Accessible name for the log output.

  • classNamestring
    Default: ''

    Extra classes for the root element.

LogEntry

  • idstring | number

    Unique among the entries (used as the React key).

  • level'debug' | 'info' | 'warn' | 'error'

    Severity of the entry.

  • messagestring

    The message. A multi-line message shows its first line as the headline and the rest as a block under it.

  • timestampstring | number | Date

    A time as an ISO string, milliseconds since the epoch or a Date; shown as HH:mm:ss.SSS.

  • sourcestring

    Where it came from, e.g. "api" or "console".

  • dataunknown

    Structured details (an object or text), shown under the message; long ones are cut with "Show all".

  • stackstring

    A stack trace, shown as its own block with the "at ..." lines dimmed.

Related hooks and theme:useDebouncedValue