Why Vercel Web vitals is not loading for my Astro Project?

Question

I created a landing page using Astro with Tailwind CSS. And it is currently hosted on Vercel. I wanted to try out the analytics service provided by Vercel. I have been able to avail the Audience analytics service provided by Vercel. However, I cannot avail the web vitals services. After enabling the service and redeploying my project, I am stuck in this screen (screen shot provided).

Please note that I did turn off the ad blocker but that did not resolve the issue.I also added the following meta tag to resolve any CSP issue

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self' vitals.vercel-insights.com"/>

But that has not solved the problem.That is why I want to know does Vercel support analytics for Astro projects and if they do, then what am I doing wrong? Thank you.

Answer 1

Update, April 2023

Astro’s Vercel integration added built-in support for analytics in version 3.1.0. You can now enable this just by updating the Astro config file.

1. If you are not yet using the Vercel adapter, install it in your project:

   npm i @astrojs/vercel
   

2. Update astro.config.mjs to use the Vercel adapter and set analytics: true:

   // astro.config.mjs
   import { defineConfig } from 'astro/config';
   import vercel from '@astrojs/vercel/static';
   
   export default defineConfig({
     adapter: vercel({
       analytics: true
     }),
   });
   

---

Original answer, December 2022

Vercel’s Web Vitals analytics currently only has out-of-the-box support for Next, Nuxt, and Gatsby.

To track Web Vitals with a different framework like Astro, you need a bit of manual set up work as documented in Vercel’s Web Vitals API docs.

For example in your base Astro layout you could include a script tag that will import their example code and run it:

---
// src/layouts/BaseLayout.astro
---

<script>
import { webVitals } from '../scripts/vitals';

const analyticsId = import.meta.env.PUBLIC_VERCEL_ANALYTICS_ID;

webVitals({
  path: window.location.pathname,
  analyticsId,
});
</script>

Here’s Vercel’s example vitals.js snippet:

// src/scripts/vitals.js

import { getCLS, getFCP, getFID, getLCP, getTTFB } from 'web-vitals';

const vitalsUrl = 'https://vitals.vercel-analytics.com/v1/vitals';

function getConnectionSpeed() {
  return 'connection' in navigator &&
    navigator['connection'] &&
    'effectiveType' in navigator['connection']
    ? navigator['connection']['effectiveType']
    : '';
}

function sendToAnalytics(metric, options) {
  const body = {
    dsn: options.analyticsId, // qPgJqYH9LQX5o31Ormk8iWhCxZO
    id: metric.id, // v2-1653884975443-1839479248192
    page: options.path, // /blog/my-test
    href: location.href, // https://my-app.vercel.app/blog/my-test
    event_name: metric.name, // TTFB
    value: metric.value.toString(), // 60.20000000298023
    speed: getConnectionSpeed(), // 4g
  };

  if (options.debug) {
    console.log('[Analytics]', metric.name, JSON.stringify(body, null, 2));
  }

  const blob = new Blob([new URLSearchParams(body).toString()], {
    // This content type is necessary for `sendBeacon`
    type: 'application/x-www-form-urlencoded',
  });
  if (navigator.sendBeacon) {
    navigator.sendBeacon(vitalsUrl, blob);
  } else
    fetch(vitalsUrl, {
      body: blob,
      method: 'POST',
      credentials: 'omit',
      keepalive: true,
    });
}

export function webVitals(options) {
  try {
    getFID((metric) => sendToAnalytics(metric, options));
    getTTFB((metric) => sendToAnalytics(metric, options));
    getLCP((metric) => sendToAnalytics(metric, options));
    getCLS((metric) => sendToAnalytics(metric, options));
    getFCP((metric) => sendToAnalytics(metric, options));
  } catch (err) {
    console.error('[Analytics]', err);
  }
}

For a slightly more real-world implementation you, check out the <TrackVitals> Astro component in the astro-badge repo.

Answer 2

Vercel analytics has support for frameworks other than Next, Nuxt Gatsby etc. The way to achieve it in Astro (1.6, 2.0 etc.) is to install the @vercel/analytics package and inject a simple <script> tag that imports it and calls its exported function inject():

<script>
  import { inject } from '@vercel/analytics'
  // @ts-ignore: process.env.NODE_ENV is required by @vercel/analytics internally
  // so that it can determine the correct path for importing the analytics script
  globalThis.process = { env: { NODE_ENV: import.meta.env.MODE } }
  inject()
</script>

You can inject this code in your <head> section in any .astro template file.

Unfortunately, the package is expecting a non-ESM runtime environment and is internally conditionally checking for process.env.NODE_ENV to determine which script to load (local-relative path to JS or from a remote host, fully qualified domain name). This is the reason, the MODE needs to be exposed as process.env.NODE_ENV. I tried to achieve this via Vite using define, but Astro seems to check for process somewhere else internally and fails.

Answer 3

This worked for me:

Install react and vercel integration using: npx astro add vercel react

Then modify the config file like this:

import { defineConfig } from 'astro/config';
import vercel from "@astrojs/vercel/serverless"; // can be static or edge instead of serverless

export default defineConfig({
  output: 'server', // not required if using static
  adapter: vercel({
    analytics: true
  })
});