From b8e2c2f21a966f4707f67fd857e93e5f50814ba7 Mon Sep 17 00:00:00 2001
From: Damien Simonin Feugas <damien@vercel.com>
Date: Mon, 25 Nov 2024 12:24:06 +0100
Subject: [PATCH] fix: next/jest does not support import.meta (#91)

---
 apps/remix/package.json                  |  3 --
 packages/web/package.json                |  2 +-
 packages/web/src/astro/index.astro       | 14 +++++
 packages/web/src/generic.ts              | 14 ++---
 packages/web/src/nextjs/index.tsx        | 11 +++-
 packages/web/src/nextjs/utils.test.ts    | 30 +++++++++++
 packages/web/src/nextjs/utils.ts         | 11 ++++
 packages/web/src/react/index.tsx         |  5 +-
 packages/web/src/react/utils.test.ts     | 30 +++++++++++
 packages/web/src/react/utils.ts          | 10 ++++
 packages/web/src/remix/index.tsx         |  5 +-
 packages/web/src/remix/utils.test.ts     | 24 +++++++++
 packages/web/src/remix/utils.ts          | 13 +++++
 packages/web/src/sveltekit/index.ts      |  2 +
 packages/web/src/sveltekit/utils.test.ts | 24 +++++++++
 packages/web/src/sveltekit/utils.ts      | 12 +++++
 packages/web/src/utils.test.ts           | 67 +++---------------------
 packages/web/src/utils.ts                | 50 ++----------------
 packages/web/src/vue/create-component.ts |  7 ++-
 packages/web/src/vue/utils.test.ts       | 24 +++++++++
 packages/web/src/vue/utils.ts            | 12 +++++
 21 files changed, 246 insertions(+), 124 deletions(-)
 create mode 100644 packages/web/src/nextjs/utils.test.ts
 create mode 100644 packages/web/src/react/utils.test.ts
 create mode 100644 packages/web/src/react/utils.ts
 create mode 100644 packages/web/src/remix/utils.test.ts
 create mode 100644 packages/web/src/sveltekit/utils.test.ts
 create mode 100644 packages/web/src/sveltekit/utils.ts
 create mode 100644 packages/web/src/vue/utils.test.ts
 create mode 100644 packages/web/src/vue/utils.ts

diff --git a/apps/remix/package.json b/apps/remix/package.json
index 9163372..9623973 100644
--- a/apps/remix/package.json
+++ b/apps/remix/package.json
@@ -28,8 +28,5 @@
     "typescript": "^5.1.6",
     "vite": "^5.1.0",
     "vite-tsconfig-paths": "^4.2.1"
-  },
-  "engines": {
-    "node": ">=20.0.0"
   }
 }
diff --git a/packages/web/package.json b/packages/web/package.json
index 0ffd30d..467b91d 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vercel/speed-insights",
-  "version": "1.2.0-canary.3",
+  "version": "1.2.0-canary.4",
   "description": "Speed Insights is a tool for measuring web performance and providing suggestions for improvement.",
   "keywords": [
     "speed-insights",
diff --git a/packages/web/src/astro/index.astro b/packages/web/src/astro/index.astro
index a50f5b1..4a6a895 100644
--- a/packages/web/src/astro/index.astro
+++ b/packages/web/src/astro/index.astro
@@ -15,6 +15,19 @@ const paramsStr = JSON.stringify(Astro.params);
 <script>
   import { injectSpeedInsights, computeRoute } from '../index.mjs';
 
+  function getBasePath(): string | undefined {
+    // !! important !!
+    // do not access env variables using import.meta.env[varname]
+    // some bundles won't replace the value at build time.
+    try {
+      return import.meta.env.PUBLIC_VERCEL_OBSERVABILITY_BASEPATH as
+        | string
+        | undefined;
+    } catch {
+      // do nothing
+    }
+  }
+
   customElements.define(
     'vercel-speed-insights',
     class VercelSpeedInsights extends HTMLElement {
@@ -28,6 +41,7 @@ const paramsStr = JSON.stringify(Astro.params);
             route,
             ...props,
             framework: 'astro',
+            basePath: getBasePath(),
             beforeSend: window.speedInsightsBeforeSend,
           });
         } catch (err) {
diff --git a/packages/web/src/generic.ts b/packages/web/src/generic.ts
index 5172263..df9c6f9 100644
--- a/packages/web/src/generic.ts
+++ b/packages/web/src/generic.ts
@@ -1,13 +1,7 @@
 import { name as packageName, version } from '../package.json';
 import { initQueue } from './queue';
 import type { SpeedInsightsProps } from './types';
-import {
-  computeRoute,
-  getBasePath,
-  getScriptSrc,
-  isBrowser,
-  isDevelopment,
-} from './utils';
+import { computeRoute, getScriptSrc, isBrowser, isDevelopment } from './utils';
 
 /**
  * Injects the Vercel Speed Insights script into the page head and starts tracking page views. Read more in our [documentation](https://vercel.com/docs/speed-insights).
@@ -21,6 +15,7 @@ import {
 function injectSpeedInsights(
   props: SpeedInsightsProps & {
     framework?: string;
+    basePath?: string;
   } = {},
 ): {
   setRoute: (route: string | null) => void;
@@ -51,11 +46,10 @@ function injectSpeedInsights(
   if (props.route) {
     script.dataset.route = props.route;
   }
-  const basePath = getBasePath();
   if (props.endpoint) {
     script.dataset.endpoint = props.endpoint;
-  } else if (basePath) {
-    script.dataset.endpoint = `${basePath}/speed-insights/vitals`;
+  } else if (props.basePath) {
+    script.dataset.endpoint = `${props.basePath}/speed-insights/vitals`;
   }
   if (props.dsn) {
     script.dataset.dsn = props.dsn;
diff --git a/packages/web/src/nextjs/index.tsx b/packages/web/src/nextjs/index.tsx
index 0738570..02d6fb0 100644
--- a/packages/web/src/nextjs/index.tsx
+++ b/packages/web/src/nextjs/index.tsx
@@ -3,14 +3,21 @@
 import React, { Suspense } from 'react';
 import { SpeedInsights as SpeedInsightsScript } from '../react';
 import type { SpeedInsightsProps } from '../types';
-import { useRoute } from './utils';
+import { getBasePath, useRoute } from './utils';
 
 type Props = Omit<SpeedInsightsProps, 'route'>;
 
 function SpeedInsightsComponent(props: Props): React.ReactElement {
   const route = useRoute();
 
-  return <SpeedInsightsScript route={route} {...props} framework="next" />;
+  return (
+    <SpeedInsightsScript
+      route={route}
+      {...props}
+      framework="next"
+      basePath={getBasePath()}
+    />
+  );
 }
 
 export function SpeedInsights(props: Props): null {
diff --git a/packages/web/src/nextjs/utils.test.ts b/packages/web/src/nextjs/utils.test.ts
new file mode 100644
index 0000000..e7a0b50
--- /dev/null
+++ b/packages/web/src/nextjs/utils.test.ts
@@ -0,0 +1,30 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { getBasePath } from './utils';
+
+describe('getBasePath()', () => {
+  const processSave = { ...process };
+  const envSave = { ...process.env };
+
+  afterEach(() => {
+    global.process = { ...processSave };
+    process.env = { ...envSave };
+  });
+
+  it('returns null without process', () => {
+    // @ts-expect-error -- yes, we want to completely drop process for this test!!
+    global.process = undefined;
+    expect(getBasePath()).toBeUndefined();
+  });
+
+  it('returns null without process.env', () => {
+    // @ts-expect-error -- yes, we want to completely drop process.env for this test!!
+    process.env = undefined;
+    expect(getBasePath()).toBeUndefined();
+  });
+
+  it('returns basepath set for Nextjs', () => {
+    const basepath = `/_vercel-${Math.random()}/insights`;
+    process.env.NEXT_PUBLIC_VERCEL_OBSERVABILITY_BASEPATH = basepath;
+    expect(getBasePath()).toBe(basepath);
+  });
+});
diff --git a/packages/web/src/nextjs/utils.ts b/packages/web/src/nextjs/utils.ts
index c5784bf..0519a5f 100644
--- a/packages/web/src/nextjs/utils.ts
+++ b/packages/web/src/nextjs/utils.ts
@@ -17,3 +17,14 @@ export const useRoute = (): string | null => {
     : Object.fromEntries(searchParams.entries());
   return computeRoute(path, finalParams);
 };
+
+export function getBasePath(): string | undefined {
+  // !! important !!
+  // do not access env variables using process.env[varname]
+  // some bundles won't replace the value at build time.
+  // eslint-disable-next-line @typescript-eslint/prefer-optional-chain -- we can't use optionnal here, it'll break if process does not exist.
+  if (typeof process === 'undefined' || typeof process.env === 'undefined') {
+    return undefined;
+  }
+  return process.env.NEXT_PUBLIC_VERCEL_OBSERVABILITY_BASEPATH;
+}
diff --git a/packages/web/src/react/index.tsx b/packages/web/src/react/index.tsx
index d5f2355..f01ca7d 100644
--- a/packages/web/src/react/index.tsx
+++ b/packages/web/src/react/index.tsx
@@ -3,10 +3,12 @@
 import { useEffect, useRef } from 'react';
 import type { SpeedInsightsProps } from '../types';
 import { computeRoute, injectSpeedInsights } from '../generic';
+import { getBasePath } from './utils';
 
 export function SpeedInsights(
   props: SpeedInsightsProps & {
     framework?: string;
+    basePath?: string;
   },
 ): JSX.Element | null {
   useEffect(() => {
@@ -19,7 +21,8 @@ export function SpeedInsights(
   useEffect(() => {
     if (!setScriptRoute.current) {
       const script = injectSpeedInsights({
-        framework: props.framework || 'react',
+        framework: props.framework ?? 'react',
+        basePath: props.basePath ?? getBasePath(),
         ...props,
       });
       if (script) {
diff --git a/packages/web/src/react/utils.test.ts b/packages/web/src/react/utils.test.ts
new file mode 100644
index 0000000..5fdbc57
--- /dev/null
+++ b/packages/web/src/react/utils.test.ts
@@ -0,0 +1,30 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { getBasePath } from './utils';
+
+describe('getBasePath()', () => {
+  const processSave = { ...process };
+  const envSave = { ...process.env };
+
+  afterEach(() => {
+    global.process = { ...processSave };
+    process.env = { ...envSave };
+  });
+
+  it('returns null without process', () => {
+    // @ts-expect-error -- yes, we want to completely drop process for this test!!
+    global.process = undefined;
+    expect(getBasePath()).toBeUndefined();
+  });
+
+  it('returns null without process.env', () => {
+    // @ts-expect-error -- yes, we want to completely drop process.env for this test!!
+    process.env = undefined;
+    expect(getBasePath()).toBeUndefined();
+  });
+
+  it('returns basepath set for CRA', () => {
+    const basepath = `/_vercel-${Math.random()}/insights`;
+    process.env.REACT_APP_VERCEL_OBSERVABILITY_BASEPATH = basepath;
+    expect(getBasePath()).toBe(basepath);
+  });
+});
diff --git a/packages/web/src/react/utils.ts b/packages/web/src/react/utils.ts
new file mode 100644
index 0000000..fec75a7
--- /dev/null
+++ b/packages/web/src/react/utils.ts
@@ -0,0 +1,10 @@
+export function getBasePath(): string | undefined {
+  // !! important !!
+  // do not access env variables using process.env[varname]
+  // some bundles won't replace the value at build time.
+  // eslint-disable-next-line @typescript-eslint/prefer-optional-chain -- we can't use optionnal here, it'll break if process does not exist.
+  if (typeof process === 'undefined' || typeof process.env === 'undefined') {
+    return undefined;
+  }
+  return process.env.REACT_APP_VERCEL_OBSERVABILITY_BASEPATH;
+}
diff --git a/packages/web/src/remix/index.tsx b/packages/web/src/remix/index.tsx
index f743233..dddb7ba 100644
--- a/packages/web/src/remix/index.tsx
+++ b/packages/web/src/remix/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { SpeedInsights as SpeedInsightsScript } from '../react';
 import type { SpeedInsightsProps } from '../types';
-import { useRoute } from './utils';
+import { getBasePath, useRoute } from './utils';
 
 export function SpeedInsights(
   props: Omit<SpeedInsightsProps, 'route'>,
@@ -10,9 +10,10 @@ export function SpeedInsights(
 
   return (
     <SpeedInsightsScript
-      {...(route && { route })}
+      route={route}
       {...props}
       framework="remix"
+      basePath={getBasePath()}
     />
   );
 }
diff --git a/packages/web/src/remix/utils.test.ts b/packages/web/src/remix/utils.test.ts
new file mode 100644
index 0000000..87480c1
--- /dev/null
+++ b/packages/web/src/remix/utils.test.ts
@@ -0,0 +1,24 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { getBasePath } from './utils';
+
+describe('getBasePath()', () => {
+  const processSave = { ...process };
+  const envSave = { ...process.env };
+
+  afterEach(() => {
+    global.process = { ...processSave };
+    process.env = { ...envSave };
+  });
+
+  it('returns basepath set for Remix', () => {
+    const basepath = `/_vercel-${Math.random()}/insights`;
+    import.meta.env.VITE_VERCEL_OBSERVABILITY_BASEPATH = basepath;
+    expect(getBasePath()).toBe(basepath);
+  });
+
+  it('returns null without import.meta', () => {
+    // @ts-expect-error -- yes, we want to completely drop import.meta.env for this test!!
+    import.meta.env = undefined;
+    expect(getBasePath()).toBeUndefined();
+  });
+});
diff --git a/packages/web/src/remix/utils.ts b/packages/web/src/remix/utils.ts
index 22c81ac..17856cf 100644
--- a/packages/web/src/remix/utils.ts
+++ b/packages/web/src/remix/utils.ts
@@ -7,3 +7,16 @@ export const useRoute = (): string | null => {
 
   return computeRoute(location.pathname, params as never);
 };
+
+export function getBasePath(): string | undefined {
+  // !! important !!
+  // do not access env variables using import.meta.env[varname]
+  // some bundles won't replace the value at build time.
+  try {
+    return import.meta.env.VITE_VERCEL_OBSERVABILITY_BASEPATH as
+      | string
+      | undefined;
+  } catch {
+    // do nothing
+  }
+}
diff --git a/packages/web/src/sveltekit/index.ts b/packages/web/src/sveltekit/index.ts
index 6df6708..66322d0 100644
--- a/packages/web/src/sveltekit/index.ts
+++ b/packages/web/src/sveltekit/index.ts
@@ -3,6 +3,7 @@ import {
   injectSpeedInsights as genericInject,
   type SpeedInsightsProps,
 } from '../generic';
+import { getBasePath } from './utils';
 import { page } from '$app/stores';
 import { browser } from '$app/environment';
 import type {} from '@sveltejs/kit'; // don't remove, ensures ambient types for $app/* are loaded
@@ -16,6 +17,7 @@ export function injectSpeedInsights(
       route: get(page).route?.id,
       ...props,
       framework: 'sveltekit',
+      basePath: getBasePath(),
     });
 
     if (speedInsights) {
diff --git a/packages/web/src/sveltekit/utils.test.ts b/packages/web/src/sveltekit/utils.test.ts
new file mode 100644
index 0000000..4d94fdd
--- /dev/null
+++ b/packages/web/src/sveltekit/utils.test.ts
@@ -0,0 +1,24 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { getBasePath } from './utils';
+
+describe('getBasePath()', () => {
+  const processSave = { ...process };
+  const envSave = { ...process.env };
+
+  afterEach(() => {
+    global.process = { ...processSave };
+    process.env = { ...envSave };
+  });
+
+  it('returns basepath set for Sveltekit', () => {
+    const basepath = `/_vercel-${Math.random()}/insights`;
+    import.meta.env.VITE_VERCEL_OBSERVABILITY_BASEPATH = basepath;
+    expect(getBasePath()).toBe(basepath);
+  });
+
+  it('returns null without import.meta', () => {
+    // @ts-expect-error -- yes, we want to completely drop import.meta.env for this test!!
+    import.meta.env = undefined;
+    expect(getBasePath()).toBeUndefined();
+  });
+});
diff --git a/packages/web/src/sveltekit/utils.ts b/packages/web/src/sveltekit/utils.ts
new file mode 100644
index 0000000..34e3957
--- /dev/null
+++ b/packages/web/src/sveltekit/utils.ts
@@ -0,0 +1,12 @@
+export function getBasePath(): string | undefined {
+  // !! important !!
+  // do not access env variables using import.meta.env[varname]
+  // some bundles won't replace the value at build time.
+  try {
+    return import.meta.env.VITE_VERCEL_OBSERVABILITY_BASEPATH as
+      | string
+      | undefined;
+  } catch {
+    // do nothing
+  }
+}
diff --git a/packages/web/src/utils.test.ts b/packages/web/src/utils.test.ts
index 48e45e9..230f1f5 100644
--- a/packages/web/src/utils.test.ts
+++ b/packages/web/src/utils.test.ts
@@ -1,5 +1,5 @@
 import { afterEach, describe, it, expect } from 'vitest';
-import { computeRoute, getBasePath, getScriptSrc } from './utils';
+import { computeRoute, getScriptSrc } from './utils';
 
 describe('utils', () => {
   describe('computeRoute()', () => {
@@ -117,58 +117,6 @@ describe('utils', () => {
     });
   });
 
-  describe('getBasePath()', () => {
-    const processSave = { ...process };
-    const envSave = { ...process.env };
-
-    afterEach(() => {
-      global.process = { ...processSave };
-      process.env = { ...envSave };
-    });
-
-    it('returns null without process', () => {
-      // @ts-expect-error -- yes, we want to completely drop process for this test!!
-      global.process = undefined;
-      expect(getBasePath()).toBe(null);
-    });
-
-    it('returns null without process.env', () => {
-      // @ts-expect-error -- yes, we want to completely drop process.env for this test!!
-      process.env = undefined;
-      expect(getBasePath()).toBe(null);
-    });
-
-    it('returns basepath set for Nextjs', () => {
-      const basepath = `/_vercel-${Math.random()}/insights`;
-      process.env.NEXT_PUBLIC_VERCEL_OBSERVABILITY_BASEPATH = basepath;
-      expect(getBasePath()).toBe(basepath);
-    });
-
-    it('returns basepath set for Sveltekit, Nuxt, Vue, Remix', () => {
-      const basepath = `/_vercel-${Math.random()}/insights`;
-      import.meta.env.VITE_VERCEL_OBSERVABILITY_BASEPATH = basepath;
-      expect(getBasePath()).toBe(basepath);
-    });
-
-    it('returns basepath set for Astro', () => {
-      const basepath = `/_vercel-${Math.random()}/insights`;
-      import.meta.env.PUBLIC_VERCEL_OBSERVABILITY_BASEPATH = basepath;
-      expect(getBasePath()).toBe(basepath);
-    });
-
-    it('returns basepath set for CRA', () => {
-      const basepath = `/_vercel-${Math.random()}/insights`;
-      process.env.REACT_APP_VERCEL_OBSERVABILITY_BASEPATH = basepath;
-      expect(getBasePath()).toBe(basepath);
-    });
-
-    it('returns null without import.meta', () => {
-      // @ts-expect-error -- yes, we want to completely drop import.meta.env for this test!!
-      import.meta.env = undefined;
-      expect(getBasePath()).toBe(null);
-    });
-  });
-
   describe('getScriptSrc()', () => {
     const envSave = { ...process.env };
 
@@ -203,15 +151,16 @@ describe('utils', () => {
 
     it('returns base path in production', () => {
       process.env.NODE_ENV = 'production';
-      const basepath = `/_vercel-${Math.random()}`;
-      process.env.NEXT_PUBLIC_VERCEL_OBSERVABILITY_BASEPATH = basepath;
-      expect(getScriptSrc({})).toBe(`${basepath}/speed-insights/script.js`);
+      const basePath = `/_vercel-${Math.random()}`;
+      expect(getScriptSrc({ basePath })).toBe(
+        `${basePath}/speed-insights/script.js`,
+      );
     });
 
-    it('ignores basepath when using dsn and bas', () => {
+    it('ignores base path when using dsn and bas', () => {
       process.env.NODE_ENV = 'production';
-      process.env.NEXT_PUBLIC_VERCEL_OBSERVABILITY_BASEPATH = `/_vercel-${Math.random()}`;
-      expect(getScriptSrc({ dsn: 'test' })).toBe(
+      const basePath = `/_vercel-${Math.random()}`;
+      expect(getScriptSrc({ basePath, dsn: 'test' })).toBe(
         'https://va.vercel-scripts.com/v1/speed-insights/script.js',
       );
     });
diff --git a/packages/web/src/utils.ts b/packages/web/src/utils.ts
index 303aff1..502c1bd 100644
--- a/packages/web/src/utils.ts
+++ b/packages/web/src/utils.ts
@@ -67,48 +67,9 @@ function escapeRegExp(string: string): string {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 
-export function getBasePath(): null | string {
-  // !! important !!
-  // do not access env variables using process.env[varname] or import.meta.env[varname].
-  // some bundles won't replace the value at build time.
-
-  // vite-powered apps (sveltekit, nuxt, vue, astro, remix)
-  try {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error -- only TS during build time will complain.
-    // @ts-ignore -- Rollup will fail to generate d.ts because it doesn't know import.meta.env.
-    const viteValue = import.meta.env
-      .VITE_VERCEL_OBSERVABILITY_BASEPATH as string;
-    if (viteValue) {
-      return viteValue;
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error -- only TS during build time will complain.
-    // @ts-ignore -- Rollup will fail to generate d.ts because it doesn't know import.meta.env.
-    const astroValue = import.meta.env
-      .PUBLIC_VERCEL_OBSERVABILITY_BASEPATH as string;
-    if (astroValue) {
-      return astroValue;
-    }
-  } catch {
-    // do nothing
-  }
-  // eslint-disable-next-line @typescript-eslint/prefer-optional-chain -- we can't use optionnal here, it'll break if process does not exist.
-  if (typeof process === 'undefined' || typeof process.env === 'undefined') {
-    return null;
-  }
-  // nextjs apps
-  const nextValue = process.env.NEXT_PUBLIC_VERCEL_OBSERVABILITY_BASEPATH;
-  if (nextValue) {
-    return nextValue;
-  }
-  // create-react-app
-  const craValue = process.env.REACT_APP_VERCEL_OBSERVABILITY_BASEPATH;
-  if (craValue) {
-    return craValue;
-  }
-  return null;
-}
-
-export function getScriptSrc(props: SpeedInsightsProps): string {
+export function getScriptSrc(
+  props: SpeedInsightsProps & { basePath?: string },
+): string {
   if (props.scriptSrc) {
     return props.scriptSrc;
   }
@@ -118,9 +79,8 @@ export function getScriptSrc(props: SpeedInsightsProps): string {
   if (props.dsn) {
     return 'https://va.vercel-scripts.com/v1/speed-insights/script.js';
   }
-  const basePath = getBasePath();
-  if (basePath) {
-    return `${basePath}/speed-insights/script.js`;
+  if (props.basePath) {
+    return `${props.basePath}/speed-insights/script.js`;
   }
   return '/_vercel/speed-insights/script.js';
 }
diff --git a/packages/web/src/vue/create-component.ts b/packages/web/src/vue/create-component.ts
index 657c79b..7dd767b 100644
--- a/packages/web/src/vue/create-component.ts
+++ b/packages/web/src/vue/create-component.ts
@@ -3,6 +3,7 @@ import { defineComponent, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { injectSpeedInsights, type SpeedInsightsProps } from '../generic';
 import { computeRoute } from '../utils';
+import { getBasePath } from './utils';
 
 export function createComponent(
   framework = 'vue',
@@ -18,7 +19,11 @@ export function createComponent(
     ],
     setup(props: Omit<SpeedInsightsProps, 'framework'>) {
       const route = useRoute();
-      const configure = injectSpeedInsights({ ...props, framework });
+      const configure = injectSpeedInsights({
+        ...props,
+        framework,
+        basePath: getBasePath(),
+      });
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- route is undefined for barebone vue project
       if (route && configure) {
         const changeRoute = (): void => {
diff --git a/packages/web/src/vue/utils.test.ts b/packages/web/src/vue/utils.test.ts
new file mode 100644
index 0000000..e93d720
--- /dev/null
+++ b/packages/web/src/vue/utils.test.ts
@@ -0,0 +1,24 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { getBasePath } from './utils';
+
+describe('getBasePath()', () => {
+  const processSave = { ...process };
+  const envSave = { ...process.env };
+
+  afterEach(() => {
+    global.process = { ...processSave };
+    process.env = { ...envSave };
+  });
+
+  it('returns basepath set for Vue', () => {
+    const basepath = `/_vercel-${Math.random()}/insights`;
+    import.meta.env.VITE_VERCEL_OBSERVABILITY_BASEPATH = basepath;
+    expect(getBasePath()).toBe(basepath);
+  });
+
+  it('returns null without import.meta', () => {
+    // @ts-expect-error -- yes, we want to completely drop import.meta.env for this test!!
+    import.meta.env = undefined;
+    expect(getBasePath()).toBeUndefined();
+  });
+});
diff --git a/packages/web/src/vue/utils.ts b/packages/web/src/vue/utils.ts
new file mode 100644
index 0000000..34e3957
--- /dev/null
+++ b/packages/web/src/vue/utils.ts
@@ -0,0 +1,12 @@
+export function getBasePath(): string | undefined {
+  // !! important !!
+  // do not access env variables using import.meta.env[varname]
+  // some bundles won't replace the value at build time.
+  try {
+    return import.meta.env.VITE_VERCEL_OBSERVABILITY_BASEPATH as
+      | string
+      | undefined;
+  } catch {
+    // do nothing
+  }
+}