Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Monitoring blocks

Pro

Vercel Deployment Log Monitoring Block for React Aria

Six deployments with a 12-build time sparkline, and for the chosen one four build phases as sections that fold with durations and share bars, the failed phase open on its error lines, a warnings and errors switch and a real log download.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Read a build phase by phase and jump to what broke with this deployment log for React with React Aria. It is Buildbrook, a build log viewer for a made-up frontend host, and it echoes the build log layout of hosts like Vercel without using any real figures. Six deployments sit in a list at the start (id in mono, branch, Ready, Failed or Building, build time) under a sparkline of the last 12 build times; on a phone the list is a Native Select. For the chosen deployment a bar splits the build into Clone, Install, Build and Deploy, and each phase is a Collapsible section with its duration and its share of the build. The failed deployment opens its failing phase on the error lines by itself. A Switch narrows every phase to its warnings and errors, and Download log saves the lines that are showing as a text file (a real download). Guides draw the frame and its bands. For deploy dashboards, build triage and anyone asking why a deploy failed.

FAQ

How do I load my own builds?

Edit DEPLOY_LINES: id, branch, one letter per phase (d done, r running, f failed, s skipped), the seconds per phase and how many of the typed warnings it printed. PHASE_LINES, WARN_LINES and FAIL_LINES hold the output. In your app fill each phase from your host's build log and keep the level|text shape.

Which phase opens by itself?

Choosing a deployment opens the phase that failed, if any, and closes the others; you can open and close the rest freely. A skipped phase says it was not run because an earlier one failed.

What does Download log save?

The lines that are showing, as plain text, one per line, each prefixed with the phase and its level, named after the deployment (for example dpl-7c3f.log). With the switch on it holds only warnings and errors. It is a real file made in the browser.

What stays local?

The builds and lines are typed examples; nothing is built or fetched and no host is called. The sparkline's older six builds are typed and the newest six come from the list.

How does it look on a phone?

The list becomes a Native Select, the share bar and the switch stay above the phases, and the phases sit in a scroll region of fixed height so opening one does not push the page.

All 100 monitoring blocks