shadcn.io is not affiliated with official shadcn/ui
Error Rate Against Traffic Monitoring Block for Vue
Six hours of 5xx rate drawn over request volume with an alert line at 1.0%, a Rate or Count toggle, a cursor that reads rate, errors and traffic against the usual, and the alert rule with when it fired.
Installation
Overview
See whether an error spike came with load or without it, with this error-rate panel for Vue with Ark UI. It is Snagline, an error-rate monitor, and its header is worked out from the samples: the peak rate, when it happened and how far traffic was from the usual. In a hairline frame with a plus mark on each corner, request volume is a pale area on one scale and the 5xx rate a line on its own scale, with the alert line at 1.0% and the minutes above it hatched. A Toggle Group swaps the line between the rate and the number of errors. A hidden range over the plot is the cursor and reads the rate, the errors and the requests at that minute. Under it one row states the alert rule and when it fired and cleared. Guides draw the frame and its bands; the entrance is CSS only. For API gateways, web backends and any service where a rate only means something next to its traffic.
FAQ
How do I use my own series?
Edit USUAL (what traffic normally is at each of the 73 five-minute steps), DIP (the share of usual a sample actually had) and SPIKE (the typed 5xx rates); requests, errors, the peak, the hatched spans and the alert times are worked out from them. LIMIT and HOLD set the rule: the rate over the limit for that many minutes.
How is the alert time worked out?
The rule fires once the rate has stayed over the line for the hold time (10 minutes), so it fires two steps after the first sample over the line, and it clears at the first sample back under. The row states both times and the span, all derived from the series.
How does the cursor work?
It is a native range over the plot named Time, whose value text is the minute and the rate. Arrow keys move one step, Home and End jump, and dragging scrubs. The figures under the plot change at once; a polite status line speaks the reading about 600 ms after the last change.