[cli] Ignore VERCEL_ANALYTICS_ID if @vercel/speed-insights is present on the project (#11305)

In the past, we used the `VERCEL_ANALYTICS_ID` environment variable with the previous Speed Insights feature on Vercel to activate specific logic in Next.js, Nuxt and Gatsby for collecting and sending web vitals data. With the new Speed Insights, that's not required anymore. We no longer want to set the environment variable when detecting the new `@vercel/speed-insights` package. This PR confirms that the variable is not set if the new package is detected.
2025-12-09 21:07:46 +00:00 · 2024-04-18 17:08:32 +02:00
parent 0b05981673
commit 1e6323e2b1
41 changed files with 2621 additions and 27 deletions
--- a/packages/static-build/src/index.ts
+++ b/packages/static-build/src/index.ts
@@ -32,6 +32,7 @@ import {
  NowBuildError,
  scanParentDirs,
  cloneEnv,
+  getInstalledPackageVersion,
 } from '@vercel/build-utils';
 import type { Route, RouteWithSrc } from '@vercel/routing-utils';
 import * as BuildOutputV1 from './utils/build-output-v1';
@@ -394,6 +395,23 @@ export const build: BuildV2 = async ({
        process.env[key] = value;
      }

+      const speedInsightsVersion = getInstalledPackageVersion(
+        '@vercel/speed-insights'
+      );
+
+      const isSpeedInsightsInstalled = Boolean(speedInsightsVersion);
+
+      if (
+        isSpeedInsightsInstalled &&
+        process.env.VERCEL_ANALYTICS_ID &&
+        ['next', 'nuxtjs', 'gatsby'].includes(framework.slug || '')
+      ) {
+        delete process.env.VERCEL_ANALYTICS_ID;
+        debug(
+          `Removed VERCEL_ANALYTICS_ID from the environment because we detected the @vercel/speed-insights package`
+        );
+      }
+
      if (framework.slug === 'gatsby') {
        await GatsbyUtils.injectPlugins(detectedVersion, entrypointDir);
      }
--- a/packages/static-build/test/build-fixtures/15-gatsby-default-with-speed-insights-package/.gitignore
+++ b/packages/static-build/test/build-fixtures/15-gatsby-default-with-speed-insights-package/.gitignore
@@ -0,0 +1,69 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variable files
+.env*
+
+# gatsby files
+.cache/
+public
+
+# Mac files
+.DS_Store
+
+# Yarn
+yarn-error.log
+.pnp/
+.pnp.js
+# Yarn Integrity file
+.yarn-integrity
--- a/packages/static-build/test/build-fixtures/15-gatsby-default-with-speed-insights-package/package.json
+++ b/packages/static-build/test/build-fixtures/15-gatsby-default-with-speed-insights-package/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "01-gatsby-default",
+  "private": true,
+  "description": "A simple starter to get up and developing quickly with Gatsby",
+  "version": "0.1.0",
+  "dependencies": {
+    "gatsby": "^2.24.91",
+    "prop-types": "^15.7.2",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "@vercel/speed-insights": "latest"
+  },
+  "scripts": {
+    "build": "gatsby build",
+    "develop": "gatsby develop",
+    "start": "npm run develop",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean"
+  }
+}
--- a/packages/static-build/test/build-fixtures/15-gatsby-default-with-speed-insights-package/src/pages/404.js
+++ b/packages/static-build/test/build-fixtures/15-gatsby-default-with-speed-insights-package/src/pages/404.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const NotFoundPage = () => <h1>404: Not Found</h1>;
+
+export default NotFoundPage;
--- a/packages/static-build/test/build-fixtures/15-gatsby-default-with-speed-insights-package/src/pages/index.js
+++ b/packages/static-build/test/build-fixtures/15-gatsby-default-with-speed-insights-package/src/pages/index.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const IndexPage = () => <h1>Hello World people</h1>;
+
+export default IndexPage;
--- a/packages/static-build/test/build-fixtures/15-gatsby-default-with-speed-insights-package/vercel.json
+++ b/packages/static-build/test/build-fixtures/15-gatsby-default-with-speed-insights-package/vercel.json
@@ -0,0 +1,13 @@
+{
+  "version": 2,
+  "builds": [
+    {
+      "src": "package.json",
+      "use": "@vercel/static-build",
+      "config": {
+        "zeroConfig": true,
+        "framework": "gatsby"
+      }
+    }
+  ]
+}
--- a/packages/static-build/test/build-fixtures/16-nuxtjs-default-with-speed-insights-package/.gitignore
+++ b/packages/static-build/test/build-fixtures/16-nuxtjs-default-with-speed-insights-package/.gitignore
@@ -0,0 +1,89 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.build
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+.editorconfig
+
+# Service worker
+sw.*
+
+# Mac OSX
+.DS_Store
--- a/packages/static-build/test/build-fixtures/16-nuxtjs-default-with-speed-insights-package/.vercelignore
+++ b/packages/static-build/test/build-fixtures/16-nuxtjs-default-with-speed-insights-package/.vercelignore
@@ -0,0 +1,2 @@
+README.md
+yarn.lock
--- a/packages/static-build/test/build-fixtures/16-nuxtjs-default-with-speed-insights-package/components/Logo.vue
+++ b/packages/static-build/test/build-fixtures/16-nuxtjs-default-with-speed-insights-package/components/Logo.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="VueToNuxtLogo">
+    <div class="Triangle Triangle--two" />
+    <div class="Triangle Triangle--one" />
+    <div class="Triangle Triangle--three" />
+    <div class="Triangle Triangle--four" />
+  </div>
+</template>
+
+<style>
+.VueToNuxtLogo {
+  display: inline-block;
+  animation: turn 2s linear forwards 1s;
+  transform: rotateX(180deg);
+  position: relative;
+  overflow: hidden;
+  height: 180px;
+  width: 245px;
+}
+
+.Triangle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+}
+
+.Triangle--one {
+  border-left: 105px solid transparent;
+  border-right: 105px solid transparent;
+  border-bottom: 180px solid #41b883;
+}
+
+.Triangle--two {
+  top: 30px;
+  left: 35px;
+  animation: goright 0.5s linear forwards 3.5s;
+  border-left: 87.5px solid transparent;
+  border-right: 87.5px solid transparent;
+  border-bottom: 150px solid #3b8070;
+}
+
+.Triangle--three {
+  top: 60px;
+  left: 35px;
+  animation: goright 0.5s linear forwards 3.5s;
+  border-left: 70px solid transparent;
+  border-right: 70px solid transparent;
+  border-bottom: 120px solid #35495e;
+}
+
+.Triangle--four {
+  top: 120px;
+  left: 70px;
+  animation: godown 0.5s linear forwards 3s;
+  border-left: 35px solid transparent;
+  border-right: 35px solid transparent;
+  border-bottom: 60px solid #fff;
+}
+
+@keyframes turn {
+  100% {
+    transform: rotateX(0deg);
+  }
+}
+
+@keyframes godown {
+  100% {
+    top: 180px;
+  }
+}
+
+@keyframes goright {
+  100% {
+    left: 70px;
+  }
+}
+</style>
--- a/packages/static-build/test/build-fixtures/16-nuxtjs-default-with-speed-insights-package/layouts/default.vue
+++ b/packages/static-build/test/build-fixtures/16-nuxtjs-default-with-speed-insights-package/layouts/default.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <nuxt />
+  </div>
+</template>
+
+<style>
+html {
+  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 16px;
+  word-spacing: 1px;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.button--green {
+  display: inline-block;
+  border-radius: 4px;
+  border: 1px solid #3b8070;
+  color: #3b8070;
+  text-decoration: none;
+  padding: 10px 30px;
+}
+
+.button--green:hover {
+  color: #fff;
+  background-color: #3b8070;
+}
+
+.button--grey {
+  display: inline-block;
+  border-radius: 4px;
+  border: 1px solid #35495e;
+  color: #35495e;
+  text-decoration: none;
+  padding: 10px 30px;
+  margin-left: 15px;
+}
+
+.button--grey:hover {
+  color: #fff;
+  background-color: #35495e;
+}
+</style>
--- a/packages/static-build/test/build-fixtures/16-nuxtjs-default-with-speed-insights-package/nuxt.config.js
+++ b/packages/static-build/test/build-fixtures/16-nuxtjs-default-with-speed-insights-package/nuxt.config.js
@@ -0,0 +1,44 @@
+export default {
+  mode: 'spa',
+  /*
+   ** Headers of the page
+   */
+  head: {
+    title: process.env.npm_package_name || '',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      {
+        hid: 'description',
+        name: 'description',
+        content: process.env.npm_package_description || '',
+      },
+    ],
+    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
+  },
+  /*
+   ** Customize the progress-bar color
+   */
+  loading: { color: '#fff' },
+  /*
+   ** Global CSS
+   */
+  css: [],
+  /*
+   ** Plugins to load before mounting the App
+   */
+  plugins: [],
+  /*
+   ** Nuxt.js modules
+   */
+  modules: [],
+  /*
+   ** Build configuration
+   */
+  build: {
+    /*
+     ** You can extend webpack config here
+     */
+    extend(config, ctx) {},
+  },
+};
--- a/packages/static-build/test/build-fixtures/16-nuxtjs-default-with-speed-insights-package/package.json
+++ b/packages/static-build/test/build-fixtures/16-nuxtjs-default-with-speed-insights-package/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "nuxtjs",
+  "version": "1.0.0",
+  "description": "My astonishing Nuxt.js project",
+  "author": "msweeneydev",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt generate",
+    "start": "nuxt start"
+  },
+  "dependencies": {
+    "nuxt": "^2.0.0",
+    "@vercel/speed-insights": "latest"
+  },
+  "devDependencies": {
+    "nodemon": "^1.18.9"
+  }
+}
--- a/packages/static-build/test/build-fixtures/16-nuxtjs-default-with-speed-insights-package/pages/index.vue
+++ b/packages/static-build/test/build-fixtures/16-nuxtjs-default-with-speed-insights-package/pages/index.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="container">
+    <div>
+      <logo />
+      <h1 class="title">
+        nuxtjs
+      </h1>
+      <h2 class="subtitle">
+        My astonishing Nuxt.js project
+      </h2>
+      <div class="links">
+        <a
+          href="https://nuxtjs.org/"
+          target="_blank"
+          class="button--green"
+        >
+          Documentation
+        </a>
+        <a
+          href="https://github.com/nuxt/nuxt.js"
+          target="_blank"
+          class="button--grey"
+        >
+          GitHub
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Logo from '~/components/Logo.vue'
+
+export default {
+  components: {
+    Logo
+  }
+}
+</script>
+
+<style>
+.container {
+  margin: 0 auto;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.title {
+  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  display: block;
+  font-weight: 300;
+  font-size: 100px;
+  color: #35495e;
+  letter-spacing: 1px;
+}
+
+.subtitle {
+  font-weight: 300;
+  font-size: 42px;
+  color: #526488;
+  word-spacing: 5px;
+  padding-bottom: 15px;
+}
+
+.links {
+  padding-top: 15px;
+}
+</style>
--- a/packages/static-build/test/build-fixtures/16-nuxtjs-default-with-speed-insights-package/static/favicon.ico
+++ b/packages/static-build/test/build-fixtures/16-nuxtjs-default-with-speed-insights-package/static/favicon.ico
--- a/packages/static-build/test/build-fixtures/16-nuxtjs-default-with-speed-insights-package/vercel.json
+++ b/packages/static-build/test/build-fixtures/16-nuxtjs-default-with-speed-insights-package/vercel.json
@@ -0,0 +1,13 @@
+{
+  "version": 2,
+  "builds": [
+    {
+      "src": "package.json",
+      "use": "@vercel/static-build",
+      "config": {
+        "zeroConfig": true,
+        "framework": "nuxt"
+      }
+    }
+  ]
+}
--- a/packages/static-build/test/builds.test.js
+++ b/packages/static-build/test/builds.test.js
@@ -328,6 +328,60 @@ export default vercelConfig;
  FOUR_MINUTES
 );

+describe('when @vercel/speed-insights is present', () => {
+  it(
+    'Should build Gatsby without the "@vercel/gatsby-plugin-vercel-analytics" plugin',
+    async () => {
+      const { workPath } = await runBuildLambda(
+        path.join(
+          __dirname,
+          'build-fixtures/15-gatsby-default-with-speed-insights-package'
+        )
+      );
+
+      const contents = await fs.readdir(workPath);
+
+      expect(contents.some(name => name === 'gatsby-config.js')).toBeTruthy();
+
+      expect(require(path.join(workPath, 'gatsby-config.js')))
+        .toMatchInlineSnapshot(`
+      Object {
+        "plugins": Array [],
+      }
+    `);
+
+      expect(warnSpy).not.toHaveBeenCalledWith(
+        'Vercel Speed Insights auto-injection is deprecated in favor of @vercel/speed-insights package. Learn more: https://vercel.link/upgrate-to-speed-insights-package'
+      );
+    },
+    FOUR_MINUTES
+  );
+
+  it(
+    'Should build Nuxt.js without the "@nuxtjs/web-vitals" plugin',
+    async () => {
+      const fixture = path.join(
+        __dirname,
+        'build-fixtures/16-nuxtjs-default-with-speed-insights-package'
+      );
+      const { workPath } = await runBuildLambda(fixture);
+
+      // The `.nuxtrc` file should not contain the plugin in `modules[]`
+      const rc = await fs.readFile(path.join(workPath, '.nuxtrc'), 'utf8');
+      expect(rc.includes('modules[]=@nuxtjs/web-vitals')).toBeFalsy();
+
+      // The `package.json` file should not have the plugin listed as a dependency
+      const pkg = require(path.join(workPath, 'package.json'));
+      expect(pkg.dependencies['@nuxtjs/web-vitals']).toBe(undefined);
+
+      expect(warnSpy).not.toHaveBeenCalledWith(
+        'Vercel Speed Insights auto-injection is deprecated in favor of @vercel/speed-insights package. Learn more: https://vercel.link/upgrate-to-speed-insights-package'
+      );
+    },
+    FOUR_MINUTES
+  );
+});
+
 it(
  'Should build Nuxt.js with "@nuxtjs/web-vitals" plugin',
  async () => {