Add support for self-hosting (#24)

vercel · Dec 6, 2023 · e789253 · e789253 · vercel · Dec 6, 2023
1 parent 0ada827
commit e789253
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 15 deletions.
diff --git a/apps/nextjs/app/layout.tsx b/apps/nextjs/app/layout.tsx
@@ -9,7 +9,7 @@ export default function RootLayout({
 }): React.ReactNode {
   return (
     <html lang="en">
-      <SpeedInsights token={SPEED_INSIGHTS_ID} />
+      <SpeedInsights />
       <body>{children}</body>
     </html>
   );

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vercel/speed-insights",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Speed Insights is a tool for measuring web performance and providing suggestions for improvement.",
   "keywords": [
     "speed-insights",

diff --git a/packages/web/src/generic.ts b/packages/web/src/generic.ts
@@ -3,14 +3,19 @@ import { initQueue } from './queue';
 import type { SpeedInsightsProps } from './types';
 import { isBrowser, isDevelopment, computeRoute } from './utils';
 
-const DEV_SCRIPT_URL = `https://va.vercel-scripts.com/v1/speed-insights/script.debug.js`;
-const SCRIPT_URL = `/_vercel/speed-insights/script.js`;
+const SCRIPT_URL = `https://va.vercel-scripts.com/v1/speed-insights`;
+const PROD_SCRIPT_URL = `${SCRIPT_URL}/script.js`;
+const DEV_SCRIPT_URL = `${SCRIPT_URL}/script.debug.js`;
+const PROXY_SCRIPT_URL = `/_vercel/speed-insights/script.js`;
 
 /**
  * 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).
  * @param [props] - Speed Insights options.
  * @param [props.debug] - Whether to enable debug logging in development. Defaults to `true`.
  * @param [props.beforeSend] - A middleware function to modify events before they are sent. Should return the event object or `null` to cancel the event.
+ * @param [props.sampleRate] - When setting to 0.5, 50% of the events will be sent to Vercel Speed Insights. Defaults to `1`.
+ * @param [props.route] - The dynamic route of the page.
+ * @param [props.dsn] - The DSN of the project to send events to. Only required when self-hosting.
  */
 function injectSpeedInsights(
   props: SpeedInsightsProps & {
@@ -24,8 +29,11 @@ function injectSpeedInsights(
 
   initQueue();
 
-  const src =
-    props.scriptSrc || (isDevelopment() ? DEV_SCRIPT_URL : SCRIPT_URL);
+  const isSelfHosted = Boolean(props.dsn);
+
+  const productionScript = isSelfHosted ? PROD_SCRIPT_URL : PROXY_SCRIPT_URL;
+
+  const src = isDevelopment() ? DEV_SCRIPT_URL : productionScript;
 
   if (document.head.querySelector(`script[src*="${src}"]`)) return null;
 
@@ -49,21 +57,17 @@ function injectSpeedInsights(
   if (props.endpoint) {
     script.dataset.endpoint = props.endpoint;
   }
-  if (props.token) {
-    script.dataset.token = props.token;
+  if (props.dsn) {
+    script.dataset.dsn = props.dsn;
   }
   if (isDevelopment() && props.debug === false) {
     script.dataset.debug = 'false';
   }
 
   script.onerror = (): void => {
-    const errorMessage = isDevelopment()
-      ? 'Please check if any ad blockers are enabled and try again.'
-      : 'Be sure to enable Speed Insights for your project and deploy again. See https://vercel.com/docs/speed-insights for more information.';
-
     // eslint-disable-next-line no-console -- Logging is okay here
     console.log(
-      `[Vercel Speed Insights] Failed to load script from ${src}. ${errorMessage}`,
+      `[Vercel Speed Insights] Failed to load script from ${src}. Please check if any content blockers are enabled and try again.`,
     );
   };
 

diff --git a/packages/web/src/types.ts b/packages/web/src/types.ts
@@ -1,5 +1,5 @@
 export interface SpeedInsightsProps {
-  token?: string;
+  dsn?: string;
   sampleRate?: number; // Only send a percentage of events to the server to reduce costs
   route?: string | null; // The dynamic path if there is any (e.g. /blog/[slug]) otherwise the static path
   beforeSend?: BeforeSendMiddleware;

diff --git a/packages/web/src/vue/create-component.ts b/packages/web/src/vue/create-component.ts
@@ -9,7 +9,7 @@ export function createComponent(
 ): ReturnType<typeof defineComponent> {
   return defineComponent({
     props: [
-      'token',
+      'dsn',
       'sampleRate',
       'beforeSend',
       'debug',