shadcn.io is not affiliated with official shadcn/ui
Error Rate Dashboard Block for React
Errors per hour as a row of 24 selectable columns with a line at 60 an hour, the chosen hour's six error groups ranked by count with a Mute and Undo for each, and a sample stack trace for the group you pick.
Installation
Overview
Find which error is behind a bad hour, with this error rate panel for React with Base UI. Inside a hairline frame with a plus mark on each corner, 24 hourly columns of Crashledger errors act as one radio group, with a line at 60 an hour and the hours over it drawn solid. Choosing an hour lists its six error groups, each a fingerprint in mono with its services, first seen day, count and share, sorted by count. A Button Mute takes a group out of every total, so the columns, the readout and the header rate all follow, and turns into Undo. Choosing a group shows a sample stack trace in Syntax Text in the side cell. It's built from Button, Badge, Syntax Text and Guides, with hand-built columns. For error monitors and on-call review.
FAQ
How do I fill it with my errors?
Edit GROUPS: each has a fingerprint name, its services, a firstSeen day, a base rate at the busiest hour, an optional spike (an hour with extra errors) and a sample trace. SHAPE is how busy each hour is and BUSIEST_REQUESTS the requests at the peak. Hourly counts, shares, the rates and the Over hours are all worked out. To use real data, replace countAt with a lookup into your own hourly counts.
What does Mute do?
It removes the group from every total in the panel: the hour's column shortens, the readout and the header count drop, and an hour that was over the line may stop being over it. The row stays in place, struck through, and its button becomes Undo, so nothing moves and a mistake is one press away. The status line says what changed for the hour you're on.
How do I choose an hour with the keyboard?
The columns are a radio group with one tab stop: the arrow keys move and choose the next or previous hour, and Home and End go to the first and last. Choosing an hour updates the group list and the status line straight away.
What stays local, and how do I wire it for real?
Everything: the errors are typed, Mute is a state in this page and no alert rule or ignore list is saved. To make it real, group your errors by fingerprint in your error store, load hourly counts for each, and have Mute add the fingerprint to an ignore list on the server.
Related
- Pro
A day of gateway calls as 24 stacked hourly columns by status family, a toggle to show any combination of 2xx, 3xx, 4xx and 5xx, totals with the change on yesterday, and the top endpoints for the families on.
- Pro
Eight endpoints against six probe locations as a matrix of pass, slow and fail cells, with a slider for how many locations must fail before an endpoint counts as down, and a reading for the chosen one.
- Pro
Nine endpoints ranked by p50, p95 or p99 with a range bar on one 0 to 1,000 ms scale, an SLO slider that marks the ones over it, and a histogram of the chosen endpoint's requests.
- Pro
A month's 10M-call quota as a segmented bar by consumer and a running total against an even pace, with the projected run-out day and a cap field per consumer that moves it.
- Pro
A sunset readiness panel for an old API version: a countdown bar, a three-condition gate worked out from the data, the consumers still calling v1 with a Migrated switch each, and a Confirm sunset button that stays inert until the gate passes.
- Pro
A heatmap of eight endpoints by the last 12 hours in a five-step ramp with the average ms in each cell, an SLA slider that rings the cells over it, and a list of the slow endpoints with their trend.