Use Vercel components only on Vercel deployments.

icratech · Feb 18, 2024 · 72bb318 · 72bb318
1 parent c6fcad0
commit 72bb318
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -20,6 +20,7 @@ import { ProviderSingleTab } from '~/common/providers/ProviderSingleTab';
 import { ProviderSnacks } from '~/common/providers/ProviderSnacks';
 import { ProviderTRPCQueryClient } from '~/common/providers/ProviderTRPCQueryClient';
 import { ProviderTheming } from '~/common/providers/ProviderTheming';
+import { isVercelFrontend } from '~/common/util/pwaUtils';
 
 
 const MyApp = ({ Component, emotionCache, pageProps }: MyAppProps) =>
@@ -44,8 +45,8 @@ const MyApp = ({ Component, emotionCache, pageProps }: MyAppProps) =>
       </ProviderSingleTab>
     </ProviderTheming>
 
-    <VercelAnalytics debug={false} />
-    <VercelSpeedInsights debug={false} sampleRate={1 / 10} />
+    {isVercelFrontend && <VercelAnalytics debug={false} />}
+    {isVercelFrontend && <VercelSpeedInsights debug={false} sampleRate={1 / 10} />}
 
   </>;
 

diff --git a/src/common/util/pwaUtils.ts b/src/common/util/pwaUtils.ts
@@ -10,6 +10,9 @@ export const isMacUser = /Macintosh|MacIntel|MacPPC|Mac68K/.test(safeUA);
 export const isChromeDesktop = safeUA.indexOf('Chrome') > -1 && safeUA.indexOf('Mobile') === -1;
 export const isFirefox = safeUA.indexOf('Firefox') > -1;
 
+// deployment environment
+export const isVercelBackend = !!process.env.VERCEL_ENV;
+export const isVercelFrontend = !!process.env.NEXT_PUBLIC_VERCEL_URL;
 
 /**
  * Returns 'true' if the application is been executed as a 'pwa' (e.g. installed, stand-alone)

diff --git a/src/common/util/urlUtils.ts b/src/common/util/urlUtils.ts
@@ -1,6 +1,6 @@
 // noinspection JSUnresolvedReference
 
-import { isBrowser } from './pwaUtils';
+import { isBrowser, isVercelBackend } from './pwaUtils';
 
 /**
  * Return the base URL for the current environment.
@@ -10,7 +10,7 @@ import { isBrowser } from './pwaUtils';
  */
 export function getBaseUrl(): string {
   if (isBrowser) return ''; // browser should use relative url
-  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
+  if (isVercelBackend) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
   return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
 }
 
@@ -20,7 +20,7 @@ export function getBaseUrl(): string {
  */
 export function getOriginUrl(): string {
   if (isBrowser) return window.location.origin;
-  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
+  if (isVercelBackend) return `https://${process.env.VERCEL_URL}`;
   return `http://localhost:${process.env.PORT ?? 3000}`;
 }