Speed Insights Configuration with @vercel/speed-insights

With the @vercel/speed-insights npm package, you're able to configure your application to capture and send web performance metrics to Vercel.

To get started with Speed Insights, refer to our Quickstart guide which will walk you through the process of setting up Speed Insights for your project.

This parameter determines the percentage of events that are sent to the server. By default, all events are sent. Lowering this parameter allows for cost savings but may result in a decrease in the overall accuracy of the data being sent. For example, a sampleRate of 0.5 would mean that only 50% of the events will be sent to the server.

To learn more about how to configure the sampleRate option, see the Sending a sample of events to Speed Insights recipe.

With the beforeSend function, you can modify or filter out the event data before it's sent to Vercel. You can use this to redact sensitive data or to avoid sending certain events.

For instance, if you wish to ignore events from a specific URL or modify them, you can do so with this option.

// Example usage of beforeSend
beforeSend: (data) => {
  if (data.url.includes('/sensitive-path')) {
    return null; // this will ignore the event
  }
  return data; // this will send the event as is
};

With the debug mode, you can view all Speed Insights events in the browser's console. This option is especially useful during development.

This option is automatically enabled if the NODE_ENV environment variable is available and either development or test.

You can manually disable it to prevent debug messages in your browsers console.

The route option allows you to specify the current dynamic route (such as /blog/[slug]). This is particularly beneficial when you need to aggregate performance metrics for similar routes.

This option is automatically set when using a framework specific import such as for Next.js, Nuxt, SvelteKit and Remix.

The endpoint option allows you to report the collected metrics to a different url than the default: https://yourdomain.com/_vercel/speed-insights/vitals.

This is particularly useful when deploying several projects under the same domain, as it allows you to keep each application isolated.

Let's take an example where yourdomain.com is managed outside of Vercel:

1. "alice-app" is deployed under yourdomain.com/alice/*, vercel alias is alice-app.vercel.sh
2. "bob-app" is deployed under yourdomain.com/bob/*, vercel alias is bob-app.vercel.sh
3. yourdomain.com/_vercel/* is routed to alice-app.vercel.sh

Right now both applications are sending their metrics to alice-app.vercel.sh. To restore the isolation, "bob-app" should use:

<SpeedInsights endpoint="bob-app.vercel.sh/_vercel/speed-insights/vitals" />