shadcn.io is not affiliated with official shadcn/ui
Sentry Setup Integration Block for React
An 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.
Installation
Overview
An integration setup section for React with Base UI, written for Hatchway, a fictional release gate, and its Sentry connection. A compact header ("Connect a project, then check it") has the mark pair at its end. Under a band rule, the catalog's Steps sit as three cells that share their hairlines (Pick a project, Choose where it runs, Send a test error), read only: the steps you have reached take a check and the next one an outlined marker. Under them, one framed panel holds the choices: a listbox of three Sentry projects (storefront-web, storefront-api and storefront-worker) that the arrow keys move through, a two-way toggle for the environment (Production or Staging) with a line under it that says which one Hatchway watches, a switch for creating a release on every deploy, and a Send a test error button. The test adds one typed issue to the panel, "TestError: Hatchway connection check", with the environment and the release name that your choices would produce. The Shine Button Finish setup waits for the test and says what is missing. Changing a choice clears the test, because it no longer matches what you chose. A polite status line, in the page from the first paint, says what stays local. The block ends on its framed panel. The page's rails and top rule come from the Guides spine. It's built from Guides, Steps, Listbox, Toggle Group, Switch, Field, 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 sent to Sentry, and the projects are example data.
FAQ
How do I change the projects and environments?
Edit PROJECTS and ENVIRONMENTS at the top of the file. A project has a value, a label and the platform it was created for; VERSION is the version used in the example release name. The steps' progress, the test's text and the status line are all worked out from what is chosen.
Does Send a test error send anything to Sentry?
No. It adds one typed issue to this panel and says so in the status line ("A test error was added in this demo for storefront-web in Production. Nothing is sent to Sentry."). In a real product, send an event with the project's DSN or ask Sentry's API for the project's latest issue, then show what comes back. The release name follows the project@version shape Sentry uses.
Are the steps buttons?
No. They show progress and are not controls, so they are not in the tab order. The controls are in the panel below: the project list, the environment toggle, the release switch, the test button and Finish setup. A step is reached once the ones before it are done, so choosing an environment before a project doesn't tick step 2.
How is it named for keyboards and screen readers?
The listbox is named "Sentry projects" and moves with the arrow keys, and choosing is announced by the browser's usual listbox behaviour. The environment toggle is named "Environment" and can be left unset. The switch is part of a label, so its text toggles it. Send a test error and Finish setup stay focusable when they aren't ready, and press for press they say what is missing in the status region.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
On a phone the steps stack, showing only their numbers and titles, and the panel's areas stack in one column; the test result keeps the same height whether or not an issue has been added. In a right-to-left layout the panel flips and release names keep their left-to-right reading order. The header fades up once on load, and the Shine Button's shine and the listbox's check animation stop under reduced motion.
Related
- 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
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
Write Key Log Setup Integration
Keys and codeAn integration setup section for a tracking-plan checker connecting to Segment: a source type combobox, the write key with a Copy button, and a check that prints four example calls into a dark log window and ends on a result that says it ran in this demo.
- Pro
AWS Setup Integration
Guided stepsAn integration setup flow for a cloud cost tool connecting to AWS: a scope and 12-digit account ID, two aws iam commands built from that ID with a derived External ID, and a pasted role ARN that is parsed and checked against the account.