Fix server side tracking for Remix actions (#124)

* Move env variables reading into track This fixes remix bundling issues leaking process into the client * Upgrade dependencies * Add analytics component * Update package.json
vercel · Jan 18, 2024 · c07d4b2 · c07d4b2 · vercel · Jan 18, 2024
1 parent ab1213b
commit c07d4b2
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 53 deletions.
diff --git a/apps/remix/app/root.tsx b/apps/remix/app/root.tsx
@@ -6,6 +6,7 @@ import {
   Scripts,
   ScrollRestoration,
 } from "@remix-run/react";
+import { Analytics } from "@vercel/analytics/react";
 
 export default function App() {
   return (
@@ -15,6 +16,7 @@ export default function App() {
         <Links />
       </head>
       <body>
+        <Analytics />
         <Outlet />
         <ScrollRestoration />
         <Scripts />

diff --git a/apps/remix/package.json b/apps/remix/package.json
@@ -9,12 +9,12 @@
   },
   "prettier": {},
   "dependencies": {
-    "@remix-run/node": "^2.0.1",
-    "@remix-run/react": "^2.0.1",
-    "@remix-run/serve": "^2.0.1",
-    "@remix-run/server-runtime": "^2.0.1",
+    "@remix-run/node": "^2.5.0",
+    "@remix-run/react": "^2.5.0",
+    "@remix-run/serve": "^2.5.0",
+    "@remix-run/server-runtime": "^2.5.0",
     "@vercel/analytics": "workspace:*",
-    "@vercel/remix": "2.0.1",
+    "@vercel/remix": "2.5.0",
     "isbot": "^3.6.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vercel/analytics",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Gain real-time traffic insights with Vercel Web Analytics",
   "keywords": [
     "analytics",

diff --git a/packages/web/src/server/index.ts b/packages/web/src/server/index.ts
@@ -2,9 +2,6 @@
 import type { AllowedPropertyValues } from '../types';
 import { isProduction, parseProperties } from '../utils';
 
-const ENDPOINT = process.env.VERCEL_URL || process.env.VERCEL_ANALYTICS_URL;
-const DISABLE_LOGS = Boolean(process.env.VERCEL_WEB_ANALYTICS_DISABLE_LOGS);
-
 type HeadersObject = Record<string, string | string[] | undefined>;
 type AllowedHeaders = Headers | HeadersObject;
 
@@ -38,6 +35,8 @@ export async function track(
   properties?: Record<string, AllowedPropertyValues>,
   context?: Context
 ): Promise<void> {
+  const ENDPOINT = process.env.VERCEL_URL || process.env.VERCEL_ANALYTICS_URL;
+  const DISABLE_LOGS = Boolean(process.env.VERCEL_WEB_ANALYTICS_DISABLE_LOGS);
   if (typeof window !== 'undefined') {
     if (!isProduction()) {
       throw new Error(