Use debug script during development mode (#15)

packages/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/analytics",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "keywords": [
     "analytics",
     "vercel"
@@ -32,6 +32,7 @@
   },
   "scripts": {
     "build": "tsup",
+    "dev": "tsup --watch",
     "lint": "eslint .",
     "lint-fix": "eslint . --fix",
     "type-check": "tsc --noEmit"

packages/web/src/generic.ts

@@ -1,23 +1,29 @@
 import { initQueue } from './queue';
-import type { BeforeSend } from './types';
+import type { AnalyticsProps } from './types';
+import { isBrowser, isDevelopment } from './utils';
 
-const isBrowser = typeof window !== 'undefined';
-
-export const inject = ({
-  beforeSend,
-}: { beforeSend?: BeforeSend } = {}): void => {
-  if (!isBrowser) return;
+export const inject = (
+  { beforeSend, debug }: AnalyticsProps = { debug: isDevelopment() },
+): void => {
+  if (!isBrowser()) return;
   initQueue();
 
   if (beforeSend) {
     window.va?.('beforeSend', beforeSend);
   }
+  const src = isDevelopment()
+    ? 'https://cdn.vercel-insights.com/v1/script.debug.js'
+    : '/_vercel/insights/script.js';
 
-  if (document.head.querySelector('script[src="/va/script.js"]')) return;
+  if (document.head.querySelector(`script[src*="${src}"]`)) return;
 
   const script = document.createElement('script');
-  script.src = '/va/script.js';
+  script.src = src;
   script.defer = true;
 
+  if (isDevelopment() && debug === false) {
+    script.setAttribute('data-debug', 'false');
+  }
+
   document.head.appendChild(script);
 };

packages/web/src/react.tsx

@@ -1,34 +1,15 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { inject } from './generic';
-import type { BeforeSend } from './types';
+import type { AnalyticsProps } from './types';
+import { isDevelopment } from './utils';
 
-interface AnalyticsProps {
-  beforeSend?: BeforeSend;
-}
-
-export function Analytics(props: AnalyticsProps): JSX.Element {
-  if (process.env.NODE_ENV !== 'production') {
-    return <NoopAnalytics />;
-  }
-
-  return <EnabledAnalytics {...props} />;
-}
-
-function EnabledAnalytics({ beforeSend }: AnalyticsProps): null {
-  useEffect(() => {
-    inject({ beforeSend });
-  }, [beforeSend]);
-
-  return null;
-}
-
-function NoopAnalytics(): null {
+export function Analytics({
+  beforeSend,
+  debug = isDevelopment(),
+}: AnalyticsProps): null {
   useEffect(() => {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'Vercel Analytics is set up, but detected a non-production environment.\n\nPlease note that no analytics events will be sent.',
-    );
-  }, []);
+    inject({ beforeSend, debug });
+  }, [beforeSend, debug]);
 
   return null;
 }

packages/web/src/types.ts

@@ -5,7 +5,10 @@ interface PageViewEvent {
 type IEvent = PageViewEvent;
 
 export type BeforeSend = (event: IEvent) => IEvent | null;
-
+export interface AnalyticsProps {
+  beforeSend?: BeforeSend;
+  debug?: boolean;
+}
 declare global {
   interface Window {
     // Base interface

packages/web/src/utils.ts

@@ -0,0 +1,9 @@
+export function isBrowser(): boolean {
+  return typeof window !== 'undefined';
+}
+
+export function isDevelopment(): boolean {
+  return (
+    typeof process !== 'undefined' && process.env.NODE_ENV !== 'production'
+  );
+}