Sentry Grid Integration Block for React

Edit CONDITIONS at the top of the file. Each condition has an id, a title, a note, whether it starts on and a list of thresholds; a threshold carries its words around the number (prefix and suffix), its starting value and its min and max. The count in the sentence and the status line come from which conditions are ticked.

No. Ticks and numbers change this page's state only, and the status line, present from the first paint, says so after each change: "Cron monitor is on in this demo. Hatchway holds the deploy when any of 4 conditions is met. Changes stay on this page. Nothing is sent to Sentry." In a real product, Hatchway would read crash-free sessions, issues and transaction durations from Sentry and decide in its own gate; this block only sets up the rules.

Crash-free limits are almost always 99, 99.5 or 99.9 percent, so that one is a native select with those three values; typing a decimal into a number field behaves differently from library to library, and a select works the same everywhere. The other limits are whole numbers with steppers and a range (errors rising 1 to 100 times within 1 to 60 minutes, p95 above 800 milliseconds). Unticking a condition switches its field off but keeps what you chose or typed.

Each checkbox is named by its condition's title and described by its note, and each number field is named for what it sets ("Crash-free sessions threshold, percent"). The grid is a real list of six items, the status line is a polite live region, and focus rings are visible on every control.

On a phone the six conditions stack in one column and their number fields wrap under the title. In a right-to-left layout the grid and each cell flip, and the numbers keep their own direction. The header fades up once on load, which reduced motion turns off.