shadcn.io is not affiliated with official shadcn/ui
Crash-Free Sessions Stats Integration Block for React
An integration stats section for a release gate reading from Sentry: a framed step line of crash-free sessions over five releases with a solid hairline at the 99.5% gate, beside the current release as one figure and a list of sessions and users.
Installation
Overview
An integration stats section for React with Base UI, written for Hatchway, a fictional release gate, and its Sentry connection. A compact header opens with the verdict, worked out from the data ("2.14.0 is above the 99.5% gate"), with the mark pair at its end. Under a band rule a split sits behind a divider. At the start, a framed step line draws crash-free sessions over five releases: each release is a level with its own marker and value, a solid hairline marks the gate, releases that fell under it are labelled in heavier type, and the current release is drawn dotted with a hollow marker because it is still collecting. At the end, the current release is one large figure against the release before it, with a list of sessions, crashed sessions, users affected and crash-free users. A visually hidden table repeats every value, and the caption names the chart. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides with hand-built SVG and CSS for the chart and your theme's tokens for every colour. Sentry is named in text only: no Sentry logo, colour or wordmark ships with the block. Every figure is example data; nothing is read from Sentry.
FAQ
Where do the figures come from, and how do I change them?
They are typed example data in RELEASES (a version, its sessions and how many crashed), plus USERS for the current release and GATE for the threshold. Every other number is counted from those: each crash-free rate, how many releases fell under the gate, the verdict in the header, the markers' positions, the step line itself, the user rate and the hidden table. Wire the three arrays to your own release health data and nothing else needs editing.
What does crash-free sessions mean here?
Sentry's release health tracks sessions, and a session that ends in a crash counts as crashed; the crash-free rate is the share that did not. The block makes no claim about Sentry's own numbers: the figures are an example, and the 99.5% gate is the fictional product's own setting, not a Sentry default.
Why is the last release dotted?
The current release is still collecting sessions, so its level is drawn dotted with a hollow marker and its label in the list says "against" the release before. The finished releases are solid. No colour carries any of this, so it reads the same in greyscale.
How do screen readers get the chart?
The drawing is hidden from assistive technology and the same facts are in a visually hidden table inside the figure: release, sessions, crashed, crash-free rate and whether it is above or under the gate. The figure's caption names the chart, and the header sentence states the verdict. The large figure and the list are ordinary text.
How does it behave on a phone and in right-to-left layouts?
On a phone the chart sits above the figure and the list, with all five releases on the axis. The chart always runs in the same direction, because releases on an axis are not mirrored; the header, the list and the caption follow the page direction, and every number sits in its own isolate. The only motion is the header's fade-up on load, and reduced motion turns it off. The block has no state.
Related
- Pro
Sentry Detail Integration
With a product drawingAn integration detail section for a release gate connecting to Sentry: a compact header, a mark pair beside a Connect Sentry button, the three scopes it asks for marked read or write, three steps, and a framed stack trace captioned with the release that first saw the error.
- Pro
Sentry Grid Integration
Switch and tick gridsAn integration grid section for a release gate working with Sentry: six conditions that hold a deploy in a framed grid of shared hairlines, each a checkbox with number fields for its limits, and a sentence worked out from the ticks.
- Pro
Sentry List Integration
Grouped and triagedAn integration list section for a release gate working with Sentry: a summary of a release's issues beside a ranked list that re-sorts by newest, most events or most users, with each issue's level, title, events, users and a hand-drawn line.
- Pro
AWS Stats Integration
Bars and columnsAn integration stats section for a cloud cost tool reading from AWS: six region lanes on one 0 to 24 hour ruler showing how far each region's cost data runs behind, with a solid tick at the 6 hour agreement.
- Pro
A gateway usage table where each route shows calls, error rate, a p50-to-p99 latency range on one scale, and a bar for its share of the rate limit.
- Pro
A 3 by 3 grid of hosting services whose latency and twelve-bar history advance on a timer you can pause, with the one slow service marked.