caliper uidocs

Log explorer

Pro

Search, filter and inspect log lines.

Installs components/ui/log-explorer.tsxDepends on @radix-ui/react-popover, @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/log-explorer
infowebRequest completed GET /v1/projects 200
errorbillingPayment gateway timeout after 10s
infoapiRequest completed GET /v1/projects 200
infowebRequest completed POST /v1/builds 201
infowebRequest completed POST /v1/builds 201
infoworkerRequest completed GET /v1/projects 200
infoapiRequest completed POST /v1/builds 201
infobillingRequest completed POST /v1/builds 201
infoapiSession refreshed for user 91
infoapiRequest completed GET /v1/projects 200
infobillingRequest completed POST /v1/builds 201
errorapiPayment gateway timeout after 10s
warnwebSlow query took 1.8s on builds table
debugapiCache hit for key project:482
infoworkerRequest completed GET /v1/projects 200
infobillingRequest completed POST /v1/builds 201
infoworkerRequest completed GET /v1/projects 200
errorworkerPayment gateway timeout after 10s
infoworkerRequest completed GET /v1/projects 200
infoworkerRequest completed GET /v1/projects 200
infowebRequest completed GET /v1/projects 200

When to use #

Use it for

  • Debugging a service.

Skip it when

  • Logs are not structured.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/log-explorer

Adds its 7 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { LogExplorer } from "@/components/ui/log-explorer"

The worked example comes with Pro

The 39-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

LogExplorer

component
PropTypeDefault
lines *readonly LogLine[]—
bucketsnumber40
heightnumber360
classNamestring—

Accessibility #

It exposes group, listbox, option and status semantics, with aria-label, aria-hidden, aria-pressed, aria-activedescendant and aria-selected kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
↑Moves to the previous item or value.
↓Moves to the next item or value.
PageDownMoves by a larger step, or to the next page.
PageUpMoves by a larger step, or to the previous page.
HomeJumps to the first item or the minimum.
EndJumps to the last item or the maximum.
EscapeCloses or cancels, then returns focus to where it came from.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.