Vercel Better Stack integration

Start logging in 2 minutes

Automatically collect logs from your Vercel projects:

  1. Go to Vercel Better Stack integration.
  2. Click Add integration and follow the simple steps there.
  3. You should see your logs in Better Stack โ†’ Live tail.
  4. Check out your metrics in the Vercel dashboard.

Optional structured logging

Take advantage of full-stack structured logging in 3 steps.

1. Install

Install Better Stack Next.js NPM package:

Install Logtail Next
npm install @logtail/next

2. Setup

Set up Better Stack Next.js client in next.config.js:

Wrap Next.js config with Logtail
const { withLogtail } = require('@logtail/next');

module.exports = withLogtail({
  // Your existing config

Import Better Stack Next.js logger:

Import Logtail logger
const { log } = require('@logtail/next');

3. Start logging ๐ŸŽ‰

Use structured logging in client, edge, or server-side files:

Send logs to Logtail
log.error("Something bad happened.");"Log message with structured logging.", {
    item: "Orange Soda",
    price: 100.00

You should see your logs in Better Stack โ†’ Live tail.

Next.js version 12.1.4 or higher is required.

Need help?

Please let us know at
We're happy to help! ๐Ÿ™

Need to customize which logs to send?

Set up a Vercel Log drain instead!

Advanced usage

Web Vitals

Forward Web Vitals metrics provided by Vercel to Better Stack.
Set up metrics reporting in pages/_app.js:

Report Web Vitals
export { reportWebVitals } from '@logtail/next';


Get logger with automatic log flushing and built-in exception logging.
Wrap your Next.js route handlers with Better Stack:

Logging in handlers
const { withLogtail, LogtailAPIRequest } = require('@logtail/next');

async function handler(req: LogtailAPIRequest, res: NextApiResponse) {"Hello Logtail!");


export default withLogtail(handler);

Log levels

Better Stack Next.js client provides four log levels: debug, info, warn, and error.
Stop sending debug logs to Better Stack:

Don't send debug logs

Server-side props

Take advantage of automatic log flushing and built-in exception logging.
Wrap your server-side props with Better Stack:

Server-side props
const { withLogtailGetServerSideProps } = require('@logtail/next');
export const getServerSideProps = withLogtailGetServerSideProps(
  async ({ req, log }) => {"Hello Logtail!");
    return {
      props: {