# Persistent logging and performance metrics for Vercel with Axiom

> As your projects grow in users and traffic you will need to monitor errors closely to minimize the impact and help with investigation. Axiom is a good fit for Vercel, and especially Next.js projects.

Published 2022-05-17 by José M. Pérez · https://jmperezperez.com/blog/vercel-axiom/

[Axiom](https://axiom.co) is a service lets you persist the logging of your deployed Vercel functions, querying it easily through a SQL-ish language (Axiom’s APL language). It also shows performance metrics by adding a small code snippet to your project.

A few weeks ago Vercel announced that [Axiom was joining the Vercel marketplace of integrations](https://vercel.com/changelog/axiom-is-joining-the-vercel-marketplace) and I decided to give Axiom a try and enable it on my projects.

<div className="p-4 not-prose mb-4 border-blue-100 rounded-lg dark:border-blue-200 border" role="alert">
<div className="flex items-center">
<svg className="mr-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<h3 className="text-md font-medium">What are Vercel Integrations?</h3>
</div>
<div className="mt-2 mb-4 text-sm">
Vercel lists a number of integrations for Vercel projects on their marketplace. These integrations lets you connect your projects with 3rd party services in a few clicks. They help connect web projects with CMSs, databases, and logging tools amongst others.
</div>
<div className="flex">
<a href="https://vercel.com/docs/integrations"className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-800 dark:hover:bg-blue-900">
<svg className="-ml-0.5 mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
Read the docs for integrations
</a>
</div>
</div>

## Persisting logs
I was looking for a solution to persist the function logs, especially the errors.

![Realtime logs for deployed functions on Vercel](https://jmperezperez.com/static/images/posts/vercel-axiom/vercel-realtime-logs.png)
<p className="text-xs">Realtime logs for deployed functions on Vercel</p>

Vercel’s realtime logs are really useful to spot issues for the current deployment. Since those logs are not persisted, to gather data about how frequently an error happens, or when a function starts failing you will need to set up a log drain service.

Even if you are interested in realtime logs, setting up a log drain is useful when you are making fixes through multiple deployments, so you don’t need to navigate to the latest deployment every time you want to monitor its functions.

## Core Web Vitals

Vercel provides Analytics to get insights into Core Web Vitals, which measure the loading speed, responsiveness, visual stability, and other metrics that contribute to a great end-user experience for your site or application. If you want to monitor these metrics for multiple projects on Vercel you will incur in some additional costs.

Analytics is free for 1 project on Vercel’s Hobby tier, and $10/month if you want to enable it on more projects on Hobby or for each and every project on the rest of tiers. 

Axiom is a good alternative - it lets you [monitor Core Web Vitals for Next.js projects](https://www.axiom.co/docs/integrations/vercel#web-vitals) and has [a generous free plan](https://www.axiom.co/pricing) that will probably let you keep an eye on multiple sites.

![Generated dashboard on Axiom when connecting with Vercel ](https://jmperezperez.com/static/images/posts/vercel-axiom/axiom-dashboard.png)
<p className="text-xs">Default dashboard on Axiom when enabling the Vercel integration</p>

## Alerting

One frequent use case is setting up alerts on function errors, as well as Core Web Vitals to avoid web performance regressions. You can send emails, webhooks, or connect to third-party services such as Slack and PagerDuty when alerts are triggered or issues are resolved.

## Conclusion
As your projects grow in users and traffic you will need to monitor errors closely to minimize the impact and help with investigation.

Axiom is a good fit for Vercel, and especially Next.js projects.
