🤖 Track your AI apps.
Use our free template.
Back to templates

Logs Explorer

Build your own real-time logs explorer using Tinybird

Logs Explorer

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

Use this template to bootstrap a multi-tenant, user-facing logs explorer for any software project. Fork it and make it your own!

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 https://github.com/tinybirdco/logs-explorer-template/tree/main/tinybird
# copy the dashboard token
tb --cloud token copy read_pipes

Deploy the dashboard to Vercel

Configure your Tinybird environment variables in Vercel:

NEXT_PUBLIC_TINYBIRD_API_KEY=<YOUR_TINYBIRD_READ_PIPES_TOKEN>
NEXT_PUBLIC_TINYBIRD_API_URL=<YOUR_TINYBIRD_HOST_REGION>

Instrument your application

To instrument your application, just send JSON objects to the Tinybird Events API.

const data = {
timestamp: new Date().toISOString(),
level: 'info',
service: 'my-app',
message: 'This is a test message',
request_id: '1234567890',
environment: 'development',
status_code: 200,
response_time: 100,
request_method: 'GET',
request_path: '/',
host: 'my-app.com',
user_agent: req.headers.get('user-agent')
}
await fetch(
`https://<YOUR_TINYBIRD_HOST>/v0/events?name=logs`,
{
method: 'POST',
body: JSON.stringify(data),
headers: { Authorization: `Bearer ${process.env.TINYBIRD_APPEND_TOKEN}` },
}
)

The example above uses the logs Data Source and schema in this template but you can use your own Data Source and schema, append logs and build your own logging analytics application.

Check the examples folder for some examples of how to do this with different languages, services and schemas.

Building a log aggregator with Vector

Vector is a log aggregator that is used to collect, process, and store logs built by DataDog.

You can use Vector to collect logs from different sources and send them to a Tinybird Sink.

Check the examples/vector folder for an example of how to do this with Vector.

Local Development, multi-tenancy and more

See the GitHub repository README.md

Build fast data products, faster.

Try Tinybird and bring your data sources together and enable engineers to build with data in minutes. No credit card required, free to get started.