Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Database Backoff Schedule Error Block for React

A full-screen page for a database that refuses connections: Retry now and a switch that retries by itself on a press-started countdown, four pool cells and the backoff schedule drawn to scale.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Tell people honestly that a database can't be reached and what is being tried, with this database connection error for React with Base UI. It's a whole screen, centred, with the page's rails and one band across it. A mark, the headline and one sentence lead to the Shine Button Retry now, the only colored control, beside a Switch named Retry automatically. Turning the switch on starts a Timer for the next wait (2, 4, 8, 16, then 32 seconds); when it ends the attempt is made, and the timer starts again for the next gap, for five attempts at most. Under them, on shared hairlines, are four cells of the connection pool (active, idle, waiting, last success) and the retry schedule drawn to scale: a solid segment for an attempt made, an outlined one for the next, a dashed one for those to come, with a cell under each saying its wait and its state. Every attempt is refused, so after the fifth the page says it is out of attempts and the button becomes Start over. The band's rules come from Guides, and the entrance is CSS only. For a managed database, an admin console or any app that depends on one.

FAQ

Does Retry now connect to anything?

No. An attempt waits 600 ms behind a spinner and is then refused, with the error typed in the file (ECONNREFUSED, against a documentation address), so a viewer can run the whole schedule without anything happening. To wire it, open your connection where the code says so, keep the busy state until it answers, and on success take the person to the page they wanted; keep the schedule and the refusal text for failures.

Does the countdown start by itself?

Never on load. It starts when the visitor turns Retry automatically on, runs for one gap, makes the attempt and starts the next gap, so at most five waits (62 seconds in all) and one timer at a time. Turning the switch off stops it, Retry now skips the rest of a wait, and after the fifth attempt the switch turns off by itself. A screen reader hears a sentence ("8 seconds until the next attempt") instead of the digits, and with reduced motion the ticking digits are replaced by the length of the wait.

How do I change the waits?

Edit GAPS, in seconds. The segments are drawn in proportion to them, the total and the count of attempts are derived, and the cells under the bar follow. Exponential backoff doubles the wait up to a ceiling; adding jitter in your client stops many clients retrying in the same second, which a typed schedule can't show.

How can you tell an attempt that was made from the next one without color?

By the fill and the word: a solid segment and "Refused" for an attempt made, an outlined segment and "Next" for the one that is coming, a dashed segment and "Waiting" for the rest. The weight of the words follows the same order. The page uses no status color.

Is it usable with a keyboard and a screen reader?

Tab reaches Retry now and the switch. A busy button disables itself, which drops keyboard focus, so when an attempt you started ends, focus moves to the result line, which is a polite status message ("Attempt 2 of 5 refused. The next one waits 8 seconds."). Attempts that the timer starts speak the same line without moving focus.

What status should this page return?

A 503, with a Retry-After header when you have an honest estimate, so browsers and monitoring treat it as an outage and not as content. The page can't set it; your server or framework does. Don't show hostnames, credentials or the connection string, which is why the cells show counts only.

  • Pro

    A full-screen page for one failing service in a marketplace: a framed map of five services joined by hairlines, a radio group that opens each service's panel, and a list of what still works counted from the dependencies.

  • Pro

    API Uptime Strips Error

    Server and outages

    A full-screen outage page for an API host: the display 503, a notify-me form that saves in the page, and four APIs as rows of thirty day-cells with a shape and a word for today and an uptime counted from the minutes.

  • Pro

    A full-screen page for a live connection that dropped and fell back: three signal bars, three transport rows with a shape and a word each, Reconnect now as a short scripted attempt, and a Keep using polling toggle.

  • Pro

    Services Status Error

    Server and outages

    A hosting platform's status as one framed panel: six services with a shape and a word for each state, a summary counted from them, an Affected only filter that holds the panel's height, and a Refresh status button.

  • Pro

    A full-screen page for an address that can't be found: an editable address, a Run the check button, and the lookup drawn as five hops that walk one at a time and stop at the one with no answer.

  • Pro

    A full-screen warning for a site whose certificate expired: a drawn open padlock, Back to safety, and an Advanced disclosure with the certificate chain, the error code to copy and an unsafe route behind a checkbox.