shadcn.io is not affiliated with official shadcn/ui
Sentry List Integration Block for Vue
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 Vue with Ark 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.