Vercel is the web platform for software teams that ship fast. But how fast? And do we maintain that velocity over time?
Vercel webhooks allow you to push your data out of Vercel and do whatever you want with it. This works out of the box with Tinybird’s .
But, called the Dev Stack Analytics Template. Analyze data from their entire stack - including tools like Vercel, Auth0, GitHub, Resend, Clerk, Stripe, and more - in one place.
Show me the data
This dashboard (source I built these charts using Vercel webhooks, Tinybird, and a simple Next.js app.
To build this dashboard we have a stack like this:
- Vercel pushes data to the Tinybird Events API via webhooks.
- We create some SQL transformations (Pipes) in Tinybird and publish them as API endpoints.
- A Next.js app with shadcn/charts calls the Tinybird APIs and plots the data.
As far as web app stacks go, it couldn't be much simpler.
Adding a new chart
To add a new chart, we only need to do two things:
- Write a new SQL query
- Build the chart component
Here’s what that looks like if I want to know who gets bragging rights as the fastest developer in the west.
Vercel’s webhook data looks something like this:
{
"createdAt": "1734960637036",
...
"payload": {
...
"deployment": {
"meta": {
"gitlabCommitAuthorLogin": "xavijam",
"gitlabCommitAuthorName": "Javier Álvarez Medina",
"gitlabCommitMessage": "Adding title and description\n",
...
},
"name": "tinybird-docs",
"url": "tinybird...vercel.app"
},
...
"type": "deployment.created"
}
I’m interested in several things in this data:
- The user’s git login and name
- The event type
- The event time
I want to count how many deployments each person is creating, so I can rank them. The query looks like this:
%
SELECT
coalesce(
event.payload.deployment.meta.githubCommitAuthorName::String,
event.payload.deployment.meta.gitlabCommitAuthorName::String
) AS author,
count() as commits
FROM vercel
WHERE event_type = 'deployment.created'
AND event_time >= {{DateTime(date_from, '2024-01-01 00:00:00')}}
AND event_time <= {{DateTime(date_to, '2024-12-31 23:59:59')}}
AND author != ''
GROUP BY author
ORDER BY commits DESC
Pushing that query to Tinybird, I get an API that returns a result like this:
{
...
"data":
[
{
"author": "alrocar",
"commits": 83
},
{
"author": "sdairs",
"commits": 18
},
{
"author": "Fabrizio Ferri-Benedetti",
"commits": 8
},
{
"author": "Alasdair Brown",
"commits": 4
},
{
"author": "dependabot[bot]",
"commits": 1
}
],
...
}
Just a quick fetch() to pull the data:
let url = new URL(`https://api.tinybird.co/v0/pipes/git_analytics.json`)
url.searchParams.append('date_from', '2024-01-01 00:00:00')
url.searchParams.append('date_to', '2024-12-31 23:59:59')
const result = await fetch(url, {
headers: {
Authorization: 'Bearer ...'
}
})
.then(r => r.json())
.then(r => r)
.catch(e => e.toString())
...
return result.data
And via the magic of I used shadcn chart components to visualize the response from my Tinybird endpoint
But what else?
Vercel exposes many events over time to correlate the impact of errors against deployments and see how increasing error rates impact our shipping speed.
Or we could enrich deployment errors with deployment logs, find the most common errors, and eliminate them to improve deployment consistency overall.
Once the data lands in Tinybird, exploring and productizing these ideas takes just minutes.
and ask away.
SOCIAL SHARE CARD GENERATOR