fix: src and endpoint paths do not work when relative (#186)

Author: feugy

.gitignore

@@ -4,3 +4,4 @@ dist
 .vscode
 .vercel
 .claude
+.env*.local

packages/web/src/utils.test.ts

@@ -271,6 +271,13 @@ describe('utils', () => {
         ).toBe(scriptSrc);
       });
 
+      it('adds leading slash to config value', () => {
+        const scriptSrc = `${Math.random()}.js`;
+        expect(
+          loadProps({}, JSON.stringify({ analytics: { scriptSrc } })).src,
+        ).toBe(`/${scriptSrc}`);
+      });
+
       it('uses props over config string', () => {
         const scriptSrc = `https://example.com/${Math.random()}.js`;
         expect(
@@ -280,6 +287,16 @@ describe('utils', () => {
           ).src,
         ).toBe(scriptSrc);
       });
+
+      it('adds leading slash to props value', () => {
+        const scriptSrc = `${Math.random()}.js`;
+        expect(
+          loadProps(
+            { scriptSrc },
+            JSON.stringify({ analytics: { scriptSrc: 'notused' } }),
+          ).src,
+        ).toBe(`/${scriptSrc}`);
+      });
     });
 
     describe('dataset', () => {

packages/web/src/utils.ts

@@ -126,13 +126,13 @@ function escapeRegExp(string: string): string {
 
 function getScriptSrc(props: AnalyticsProps & { basePath?: string }): string {
   if (props.scriptSrc) {
-    return props.scriptSrc;
+    return makeAbsolute(props.scriptSrc);
   }
   if (isDevelopment()) {
     return 'https://va.vercel-scripts.com/v1/script.debug.js';
   }
   if (props.basePath) {
-    return `${props.basePath}/insights/script.js`;
+    return makeAbsolute(`${props.basePath}/insights/script.js`);
   }
   return '/_vercel/insights/script.js';
 }
@@ -166,13 +166,13 @@ export function loadProps(
     dataset.disableAutoTrack = '1';
   }
   if (props.viewEndpoint) {
-    dataset.viewEndpoint = props.viewEndpoint;
+    dataset.viewEndpoint = makeAbsolute(props.viewEndpoint);
   }
   if (props.eventEndpoint) {
-    dataset.eventEndpoint = props.eventEndpoint;
+    dataset.eventEndpoint = makeAbsolute(props.eventEndpoint);
   }
   if (props.sessionEndpoint) {
-    dataset.sessionEndpoint = props.sessionEndpoint;
+    dataset.sessionEndpoint = makeAbsolute(props.sessionEndpoint);
   }
   if (isDevelopment() && props.debug === false) {
     dataset.debug = 'false';
@@ -184,7 +184,7 @@ export function loadProps(
   if (props.endpoint) {
     dataset.endpoint = props.endpoint;
   } else if (props.basePath) {
-    dataset.endpoint = `${props.basePath}/insights`;
+    dataset.endpoint = makeAbsolute(`${props.basePath}/insights`);
   }
 
   return {
@@ -193,3 +193,11 @@ export function loadProps(
     dataset,
   };
 }
+
+function makeAbsolute(url: string): string {
+  return url.startsWith('http://') ||
+    url.startsWith('https://') ||
+    url.startsWith('/')
+    ? url
+    : `/${url}`;
+}

packages/web/src/vue/create-component.ts

@@ -14,7 +14,10 @@ export function createComponent(
       const route = useRoute();
       inject(
         {
-          ...props,
+          // trim out undefined values to avoid overriding config values
+          ...Object.fromEntries(
+            Object.entries(props).filter(([_, v]) => v !== undefined),
+          ),
           basePath: getBasePath(),
           // keep auto-tracking unless we have route support (Nuxt or vue-router).
           disableAutoTrack: Boolean(route),