shadcn.io is not affiliated with official shadcn/ui
Sentry List Integration Block for React
An 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.
Installation
Overview
An integration list section for React with Base UI, written for Hatchway, a fictional release gate, and its Sentry connection. A compact header ("What this release broke") has the mark pair at its end. Under a band rule, the block splits in two. At the start sit the release name in code, a summary worked out from the issues (how many, how many events, how many fatal, the most users on one issue), a sort control with Newest, Most events and Most users, and a polite line that says what stays local. Behind a divider at the end, the release's six issues form a ranked list: each has its level as an icon and a word (Fatal, Error or Warning), when it was first seen, its title in code, its events, its users and a small hand-drawn line of events over the release's first days. Choosing a sort re-orders the list and announces it. Each issue's events are the sum of its line's seven buckets, so the figures can't disagree. On a phone the summary comes first, the lines are hidden and each row folds its events and users under the title. The block ends on its last row, so no rule closes it. The page's rails and top rule come from the Guides spine. It's built from Guides and Segment Group, with your theme's tokens for every colour. Sentry is named in text only: no Sentry logo, colour or wordmark ships with the block. Nothing is read from Sentry, and the issues are example data.
FAQ
How do I change the issues?
Edit ISSUES at the top of the file. Each issue has an id, a level (FATAL, ERROR or WARNING), a title, how many users it reached, how many hours ago it was first seen and seven buckets of events. The events shown, the summary, the ranking and the drawn line are all computed from those values; RELEASE is the release name in the shape Sentry uses for releases, project@version.
What do the three sorts mean?
Newest puts the issue first seen most recently on top, Most events puts the issue with the largest total on top, and Most users puts the issue that reached the most people on top. They mirror the First Seen, Events and Users sorts of Sentry's own issue stream. The rank number beside each row follows the current order, and the status line announces the new order.
Is anything read from Sentry?
No. The issues are typed in the file and the page says so under the sort control from the first paint: "Sorting changes this page only. Nothing is read from Sentry." In a real product, feed ISSUES from the issues Sentry reports for a release.
How is it named for keyboards and screen readers?
The list is a real ordered list and each issue's title is a heading, so a screen reader can jump between issues. Levels are an icon and a word, never colour alone. The sort control is a labelled group, and choosing a sort is announced through a polite status region that exists from load. The drawn lines are hidden from assistive technology because the events and users are in text.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
On a phone the summary and the sort control sit above the list, the small lines are hidden, and each row shows its events and users as one short line under the title. In a right-to-left layout the page and the divider flip; error titles and the release name keep their left-to-right reading order, and the counts stay together. The header fades up once on load, which reduced motion turns off.
Related
- 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 Setup Integration
Guided stepsAn integration setup section for a release gate connecting to Sentry: three read-only steps as hairline cells, a listbox of Sentry projects, an environment toggle, a release switch, a test error that appears in the panel and a Finish setup button that waits for it.
- 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
Crash-Free Sessions Stats Integration
Lines and dotsAn 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.
- Pro
Segment List Integration
Synced tablesAn integration list section for a tracking-plan checker working with Segment: seven held events as table rows with checkboxes, a select-all with a mixed state, working Replay and Discard that take the ticked rows off the list, and an empty state that brings the sample back.
- Pro
AWS List Integration
Synced tablesAn integration list section for a cloud cost tool reading from AWS: six cost-allocation tags as rows with a coverage bar, a state word and an Activate switch, a segmented filter with counts, and a working Retry on the one row that timed out.