April 4, 2023

#engineering, #product

How We Made the Axiom Vercel Integration Even Better


Blog Screenshot

Almost a year ago we launched the Axiom Vercel Integration, providing Vercel users with an in-depth observability experience for their projects and deployments. Since then we shipped bug fixes, increased resilience and performance and added quality-of-life improvements and today I want to talk about some of the latter.

A new deployment selector

We've made it easier to filter your Vercel dashboard or dataset to the exact project and deployment you need. Select the project and you get presented with the current production deployment as well as the most recent preview deployments:

A screenshot showing the project and deployment selector with the latter expanded showing production and several preview deployments

Logs and Web Vitals now have a user agent and environment property

When sending logs or web vitals you now get a user agent and the environment to filter on. This is extra useful when you want to filter out bots or aggregate logs for preview/production environments.

A screenshot showing an APL query that filters out bots and only shows web vitals from production

Create intermediate loggers for maximum flexibility

Let’s say you have a function that requires a user and you want to log the user id in every log. You can create an intermediate logger and attach fields like this:

A screenshot of TypeScript code creating an intermediate logger

withAxiom now works in edge functions and getServerSideProps

There are even more places where you can send logs and get reports, here's an example of the edge function:

A screenshot of TypeScript code for using withAxiom in an edge function

And this is how you wrap getServerSideProps:

A screenshot of TypeScript code for using withAxiom in getServerSideProps

Thanks to Haydn, a member of our community, for that change!

next-axiom now supports non-Vercel deployments

If you’re using Next.js but not on Vercel, we recently introduced support for non-Vercel deployments! Create a dataset and an API token with ingest permission into that dataset, then create both AXIOM_TOKEN and AXIOM_DATASET as environment variables and you’re good to go!

Next.js 13 support with Web-Vitals

We've contributed to Next.js to add Web Vitals support so you'll soon be able to send them to Axiom with a single line like before:

A screenshot of TypeScript code for exporting web vitals

Try it out today

Head over to the Vercel marketplace today to install the Axiom Integration and get Zero Config Observability for all your Vercel projects.

Share
Get started with Axiom

Learn how to start ingesting, streaming, and
querying data into Axiom in less than 10 minutes.