vercel-killswitch v1.0.0-beta

Vercel Killswitch

Why

We've all heard AWS horror stories, you wake up one day and see a $XX,XXX bill, I rather not, thanks.

Vercel recently anounced Spend Management which is a great start but they give you this warning:

Setting a spend amount does not automatically stop usage. If you want to pause your project at a certain amount, you must configure this through a webhook .

And while they Promise()

Next, we're working on powerful anomaly detection for your spend to proactively alert you when spikes happen, rather than manually adding spend amounts. Stay tuned for more product updates to help you have confidence in your usage on Vercel.

I wanted to have a solution now, so we can actually ship on Fridays 😜

What

Creates an /api/pause webhook in your Next.js App router Vercel hosted site: https://your-project-url.whatever/api/pause If it receives the (spend management post payload message)https://vercel.com/docs/accounts/spend-management#spend-amount, your project will automatically pause.

⚠️Caution

I have tested only in postman and my project was paused successfully several times, and while I think this works, there might be unknown circumstances in which it doesn't:

• If your endpoint doesn't work
• If you misspell anything

• If I missunderstood how Vercel will send the post JSON.

I urge you to double-check everything, and let me know if it does or it doesn't work so I can update this.

I'm not responsible for any charge you have using this.

How

1. Install this component in your next.js 14 app. a. npm npm i vercel-killswitch b. manually /app/api/pause/route.ts -> /app/api/pause/route.ts
2. Create the following env variables:
   1. VERCEL_PROJECT_ID
   2. VERCEL_TEAM_ID
   3. VERCEL_PANIC_TOKEN
   4. VERCEL_PANIC_SECRET
3. Set spend Management on your vercel account
   1. Settings > Billing > Spend Management
   2. set an amount
   3. set the webhook
      1. https://your-project-url.whatever/api/pause
   4. copy the secret and set it as VERCEL_PANIC_SECRET

That's it.

Feel free to modify env variable names.

Testing

1. Go to Postman.
2. Set up a new request:
   • Method: POST
   • URL: https://your-project-url.whatever/api/pause
3. In the request Headers:
   • Key: x-vercel-signature
   • Value: {{signature}} (This is a variable)
4. In the request Body (select raw and JSON):

   {
     "budgetAmount": 50,
     "currentSpend": 50,
     "teamId": "YOUR TEAM ID HERE!!!!"
   }

5. In the Pre-request Script:

   const payload = JSON.stringify({
     "budgetAmount": 50,
     "currentSpend": 50,
     "teamId": "YOUR TEAM ID HERE!!!!"
   });
   const secret = 'YOUR SECRET HERE!!!!';
   
   const signature = CryptoJS
       .HmacSHA1(payload, secret)
       .toString(CryptoJS.enc.Hex);
   
   pm.environment.set('signature', signature);

6. Hit send. Your project should be paused.

To-do

• Test using postman
• Test on a real vercel trigger(let me know if it happens to you, or if it doesn't!)
• Publish on npm
• Publish as a template on Vercel❓
• Blog post
• YT video
• interactive install
  • letting user choose where route.ts get's copied
  • leading user through the rest of the set-up

vercel

• Anouncement
• Spend Management
• Pausing a project
• Configuring a webhook
  • Spend amount POST
• Securing webhooks