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

Axiom Web Vitals support needs a small snippet of code to function correctly:

// Add to pages/_app.js
export function reportWebVitals(metric) {
const url = process.env.NEXT_PUBLIC_AXIOM_INGEST_ENDPOINT;
if (!url) {
return;
}
const body = JSON.stringify({
route: window.__NEXT_DATA__.page,
...metric,
});
if (navigator.sendBeacon) {
navigator.sendBeacon(url, body);
} else {
fetch(url, { body, method: 'POST', keepalive: true });
}
}

Parse JSON on 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.

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)