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.

Choose which logs Vercel sends

Send only the logs you need to lower your Vercel drain usage and the data you ingest:

1. Open your Vercel source in Sources. It opens on Ingest.
2. Under Vercel log drain, select the Log sources and Environments to send, and set Sampling of logs to the percentage of requests to send.
3. Click Save changes. We'll update the project's log drain in Vercel a few minutes later without dropping logs.

Optional structured logging

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

1. Install

Install Better Stack Next.js NPM package:

npm install @logtail/next

2. Setup

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

const { withLogtail } = require('@logtail/next');

module.exports = withLogtail({
  // Your existing config
});

Import Better Stack Next.js logger:

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

3. Start logging

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

log.error("Something bad happened.");
log.info("Log message with structured logging.", {
    item: "Orange Soda",
    price: 100.00
});

You should see your logs in Better Stack → Live tail.

Need help?

Please let us know at hello@betterstack.com.
We're happy to help! 🙏

Advanced usage

Web Vitals

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

export { reportWebVitals } from '@logtail/next';

Handlers

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

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

async function handler(req: LogtailAPIRequest, res: NextApiResponse) {
  req.log.info("Hello Better Stack!");

  res.status(200).send("OK");
}

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:

export LOGTAIL_LOG_LEVEL=info

Server-side props

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

const { withLogtailGetServerSideProps } = require('@logtail/next');
export const getServerSideProps = withLogtailGetServerSideProps(
  async ({ req, log }) => {
    log.info("Hello Better Stack!");
    return {
      props: {
      },
    }
  }
);