Vercel Log Drains Explorer Template

This is a template for a Vercel Log Drains Explorer web application. It is built with Next.js and Tinybird.

This is a fork of the Logs Explorer Template with some modifications to make it work with Vercel Log Drains.

Fork it and make it your own!

Quick Start

Deploy the Tinybird and Next.js to the cloud to get started quickly.

Configure Environment Variables and you are ready to go:

NEXT_PUBLIC_TINYBIRD_API_KEY=<YOUR_TINYBIRD_ADMIN_TOKEN>
NEXT_PUBLIC_TINYBIRD_API_URL=<YOUR_TINYBIRD_REGION_HOST>

Instrumenting your Vercel Log Drains

Go to Vercel Dashboard and configure your Log Drains:

• Choose your team scope on the dashboard, and go to Team Settings > Log Drains.
• Select the Projects to send logs to Tinybird.
• Select Sources you want to send logs to Tinybird.
• Select NDJSON as Delivery Format.
• Select Environments and Sampling Rate.
• Set this URL <YOUR_TINYBIRD_REGION_HOST>/v0/events?name=logs&x-vercel-verify=<your-x-vercel-verify-token>
• Select Custom Headers, add Authorization with the value Bearer <YOUR_TINYBIRD_ADMIN_TOKEN> and select Add.
• Select Verify and create the Log Drain.

Local Development

Get started by forking the GitHub repository and then customizing it to your needs.

Start Tinybird locally:

curl -LsSf https://tbrd.co/fwd | sh
cd tinybird
tb local start
tb login
tb dev
token ls  # copy an admin token

Configure the Next.js application:

cd dashboard/log-analyzer
cp .env.example .env

Edit the .env file with your Tinybird API key and other configuration.

NEXT_PUBLIC_TINYBIRD_API_KEY=<YOUR_TINYBIRD_ADMIN_TOKEN>
NEXT_PUBLIC_TINYBIRD_API_URL=http://localhost:7181

Start the Next.js application:

cd dashboard/log-analyzer
npm install
npm run dev

Open the application in your browser:

http://localhost:3000

Read the dashboard/log-analyzer/README.md file for more information on how to use the application and tinybird/README.md for more information on how to customize the template.

Deployment

Deploy the Tinybird project to the cloud:

cd tinybird
tb --cloud deploy

Once deployed copy your Tinybird cloud host and read_pipes token, deploy the Next.js application to Vercel and configure the environment variables.