shadcn.io is not affiliated with official shadcn/ui
Crash-Free Sessions Stats Integration Block for Svelte
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 Svelte with Ark 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.