shadcn.io is not affiliated with official shadcn/ui
Sentry Detail Integration Block for Solid
An 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.
Installation
Overview
An integration detail section for Solid with Ark UI, written for Hatchway, a fictional release gate that holds a deploy when its error data turns bad, and its Sentry connection. A compact header ("Hatchway for Sentry") carries one sentence about what it does. Behind a split divider that runs from the top rule to the block's foot, the end column holds the mark pair (Hatchway's filled tile and Sentry's neutral lettermark tile, joined by a connector) above the Connect Sentry Shine Button and a View docs link. Under a band rule, the start column lists what the connection can read and write (project:read, event:read and project:releases, each tagged Read or Write with an icon and a word, with the counts worked out from the list) and how it works in three numbered steps. The end column draws a stack trace in a framed window: the issue's title, then four frames in a focusable scroll region, the frame that threw marked by a hairline on its start edge, captioned "First seen in release 2.14.0. Hatchway held the deploy." Below it, the details a buyer checks before installing (built by, category, pricing, last updated). The block ends on content, so no rule closes it. The page's rails and top rule come from the Guides spine. It's built from Guides, Badge, Button and Shine Button, 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 connected or sent, and the trace and release are example data.
FAQ
Are the scopes real Sentry scopes?
Yes: project:read, event:read and project:releases are Sentry permission scopes, and the block lists exactly the three the example product asks for, reads first. Edit PERMISSIONS at the top of the file to match your own integration; the Read and Write counts beside the heading are computed from that list.
What is the stack trace for, and can I change it?
It shows the moment the integration earns its keep: an error first seen in a release, with the frame that threw marked, and the deploy held. It is drawn from the FRAMES data in the file (a call, where it is and whether it threw) and the issue title and release are constants above it, so edit those to match your product. Nothing is read from Sentry.
Does Connect Sentry connect anything?
No. It is a link with href="#" for you to point at your install flow or your docs. The block has no state and sends nothing. Wire the Shine Button to your OAuth or internal-integration setup, and swap the lettermark in the icon slot for a logo you have the rights to use.
How is it named for keyboards and screen readers?
The heading names the product and the service, and the mark tiles are hidden from assistive technology because the name is in text. Read and Write are an icon and a word on an outline badge, never colour alone. The stack trace is a labelled region that can take focus, so a keyboard user can scroll it sideways, and its frames are a real ordered list with the function and location in code.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
On a phone the connect column sits under the header, the permissions fold their purpose under the scope, and the stack trace scrolls sideways inside its region instead of wrapping. In a right-to-left layout the divider and the layout flip, and scopes, frames and the issue title keep their left-to-right reading order. The header fades up once on load, and the Shine Button's animation respects reduced motion.