explaingit

bencered/deploy-failures

1TypeScriptAudience · developerComplexity · 2/5ActiveSetup · moderate

TLDR

Next.js dashboard that connects to a Vercel account via OAuth and charts every failed deployment, with a Worst Days table styled like the Vercel UI.

Mindmap

mindmap
  root((deploy-failures))
    Inputs
      Vercel OAuth integration
      Client ID and secret
      Account or team install
    Outputs
      Failure charts
      Worst Days table
      Failed deployments list
    Use Cases
      Audit Vercel reliability
      Spot bad deploy days
      Share deployment trends
    Tech Stack
      Next.js
      TypeScript
      Vercel API
      Signed cookies

Things people build with this

USE CASE 1

Visualize all failed Vercel deployments across a team account on one dashboard.

USE CASE 2

Find the worst days for deployment failures and correlate them with releases.

USE CASE 3

Build a private internal status page for a Vercel-hosted product.

USE CASE 4

Learn how to wire a Vercel OAuth integration with a signed-cookie auth flow.

Tech stack

Next.jsTypeScriptReactVercel API

Getting it running

Difficulty · moderate Time to first run · 30min

Requires a one-time Vercel integration setup with redirect URL plus four secrets before the OAuth flow will complete.

License is not stated in the available content.

In plain English

This is a small Next.js web app that connects to Vercel and shows you every deployment that has failed on your account. Vercel is a hosting service where many people put their websites, and a deployment is what happens when you push new code and Vercel tries to publish it. Sometimes those deployments break, and this tool gathers all those broken ones in one place and draws charts of how often they happen. To use it, you first have to create a thing inside Vercel called an integration. The README walks through that step by step: you go to the Vercel dashboard, click Create, give it a name and a logo and a privacy policy link, and set a redirect URL pointing back at the app. You pick read-only access to deployments, projects, teams, and your user info, and Vercel hands you back a slug, a client ID, and a secret. Those go into a local environment file the app reads on startup. Once that one-time setup is done, you copy the example env file, fill in the values, run npm install, and start the dev server. You open the page in your browser, click Continue with Vercel, and install the integration on your account or your team. The app then pulls in your failed deployments and shows them as graphs styled to look like the Vercel dashboard itself. The README also lists the main files: a custom auth setup using a signed cookie instead of a library like NextAuth, two route handlers that begin and complete the OAuth handshake, a helper that pages through the Vercel API for failed deployments, and a dashboard component that renders the charts and a Worst Days table. Deploying it is just a normal Vercel deploy with the four secrets added as project settings.

Copy-paste prompts

Prompt 1
Walk me through creating a Vercel integration with read-only access to deployments, projects, teams, and user info and dropping the slug, client ID, and secret into .env.
Prompt 2
Run deploy-failures locally with npm install and the dev server, then open the page and install the integration on my Vercel team.
Prompt 3
Show me the two route handlers that begin and complete the Vercel OAuth handshake and explain the signed-cookie session.
Prompt 4
Modify the dashboard component to add a chart of failures grouped by project instead of by day.
Prompt 5
Deploy this app to my own Vercel account with the four required secrets set as project environment variables.
Open on GitHub → Explain another repo

Generated 2026-05-22 · Model: sonnet-4-6 · Verify against the repo before relying on details.