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!

Watch Demo Video

Set up the project

Fork the GitHub repository and deploy the data project to Tinybird.

# select or create a new workspace
tb login

# deploy the template
tb --cloud deploy --template https://github.com/tinybirdco/vercel-log-drains-template/tree/main/tinybird

# copy the dashboard token
tb --cloud token copy read_pipes

Deploy the project to Vercel to get started quickly.

Configure these Environment Variables in your Vercel project and you are ready to go:

NEXT_PUBLIC_TINYBIRD_API_KEY=<YOUR_TINYBIRD_READ_PIPES_TOKEN>
NEXT_PUBLIC_TINYBIRD_API_URL=<YOUR_TINYBIRD_REGION_HOST>

Get your Tinybird read_pipes token and region host from the Tinybird dashboard.

Instrumenting your Vercel Log Drains

Vercel Drains are available on the Pro and Enterprise plans. In the Vercel dashboard:

• Go to Team Settings > Drains and select Add Drain.
• Select Logs as the data type.
• Select the Projects, log Sources and Environments to send to Tinybird, and optionally add sampling rules.
• Select Custom Endpoint and choose NDJSON as the format.
• Set this URL <YOUR_TINYBIRD_REGION_HOST>/v0/events?name=logs. If Vercel asks you to verify the endpoint with an x-vercel-verify value, append &x-vercel-verify=<value>.
• Under Custom Headers, add Authorization: Bearer <YOUR_TINYBIRD_ADMIN_TOKEN>.
• Select Create Drain. Vercel tests the endpoint when you create it.

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
tb 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_LOCAL_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.