Vercel Integration

Connect Axiom with Vercel to get the deepest observability experience for your Vercel projects.

Easily monitor data from requests, functions, and web vitals in one place. 100% live and 100% of your data, no sampling.

Axiom's Vercel integration ships with a pre-built dashboard and pre-installed monitors so you can be in complete control of your projects with minimal effort.

What is Vercel

Vercel is a platform for frontend frameworks and static sites, built to integrate with your headless content, commerce, or database.

Vercel provides a frictionless developer experience to take care of the hard things: deploying instantly, scaling automatically, and serving personalized content around the globe.

Vercel makes it easy for frontend teams to develop, preview, and ship delightful user experiences, where performance is the default.

Sending logs to Axiom

Simply install the Axiom Vercel integration from here and be streaming logs and web vitals within minutes!

Integration Overview

Request and Function Logs

For both requests and serverless functions, Axiom automatically installs a log drain in your Vercel account to capture data live.

As users interact with your website, various logs will be produced. Axiom captures all these logs and ingests them into the vercel dataset. You can stream and analyze these logs live, or use our pre-build Vercel Dashboard to get an overview of all the important metrics. When you're ready, you can fork our dashboard and start building your own!

For function logs, if you call console.log, console.warn or console.error in your function, the output will also be captured and made available as part of the log. You can use our extended query language, APL, to easily search these logs.

Web vitals

Axiom supports capturing and analyzing Web Vital data directly from your user's browser without any sampling and with more data than is available elsewhere. It is perfect to pair with Vercel's in-built analytics when you want to get really deep into a specific problem or debug issues with a specific audience (user-agent, location, region, etc).

NOTE: Web Vitals are only currently supported for Next.js websites. Expanded support is coming soon!

Installation

Perform the following steps to install Web Vitals:

1. In your Vercel project, run npm install --save next-axiom.
2. In next.config.js, wrap your NextJS config in withAxiom as follows:

const { withAxiom } = require('next-axiom');

module.exports = withAxiom({
  // ... your existing config
})

This will proxy the Axiom ingest call to improve deliverability.

3. Go to pages/_app.js or pages/_app.ts and add the following line:

export { reportWebVitals } from 'next-axiom';

4. Deploy your site and watch data coming into your Axiom dashboard.

Vercel Function logs 4KB limit

The Vercel 4KB log limit refers to a restriction placed by Vercel on the size of log output generated by serverless functions running on their platform. The 4KB log limit means that each log entry produced by your function should be at most 4 Kilobytes in size.

If your log output is larger than 4KB, you might experience truncation or missing logs. To log above this limit, you can send your function logs using next-axiom.

Parse JSON on the message field

If you use a logging library in your Vercel project that prints JSON, your message field will contain a stringified and therefore escaped JSON object.

• If your Vercel logs are encoded as JSON, they will look like this:

{
  "level": "error",
  "message": "{ \"message\": \"user signed in\", \"metadata\": { \"userId\": 2234, \"signInType\": \"sso-google\" }}",
  "request": {
    "host": "www.axiom.co",
    "id": "iad1:iad1::sgh2r-1655985890301-f7025aa764a9",
    "ip": "199.16.157.13",
    "method": "GET",
    "path": "/sign-in/google",
    "scheme": "https",
    "statusCode": 500,
    "teamName": "AxiomHQ",
  },
  "vercel": {
    "deploymentId": "dpl_7UcdgdgNsdgbcPY3Lg6RoXPfA6xbo8",
    "deploymentURL": "axiom-bdsgvweie6au-axiomhq.vercel.app",
    "projectId": "prj_TxvF2SOZdgdgwJ2OBLnZH2QVw7f1Ih7",
    "projectName": "axiom-co",
    "region": "iad1",
    "route": "/signin/[id]",
    "source": "lambda-log"
  }
}

• The JSON data in your message would be:

{
  "message": "user signed in",
  "metadata": {
    "userId": 2234,
    "signInType": "sso-google"
   }
}

You can parse the JSON using the parse_json function and run queries against the values in the message field.

Example

['vercel']
| extend parsed = parse_json(message)

• You can select the field to insert into new columns using the project operator

['vercel']
| extend parsed = parse_json('{"message":"user signed in", "metadata": { "userId": 2234, "SignInType": "sso-google" }}')
| project parsed["message"]

More Examples

• If you have null values in your data you can use the isnotnull() function

['vercel']
| extend parsed = parse_json(message)
| where isnotnull(parsed)
| summarize count() by parsed["message"], parsed["metadata"]["userId"]

• Check out our APL Documentation on how to use more functions and run your own queries against your Vercel logs.