shadcn.io is not affiliated with official shadcn/ui
Sentry Detail Integration Block for React
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 React with Base 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.
Related
- 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 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
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
Slack Detail Integration
Scopes and stepsAn integration detail section for a spend tool connecting to Slack: a header with the mark pair and Add to Slack, then what it does, the Slack scopes it reads and writes, three steps to install and the listing's facts.
- Pro
Can and Cannot Detail Integration
Scopes and stepsAn integration detail section for a release-notes tool installing on GitHub: a header with the mark pair and Install on GitHub, then two columns sharing a divider, the read-only permissions it uses and the ones it has no access to.