From 471787315953227d296b06ced7c679542f76adfc Mon Sep 17 00:00:00 2001 From: Vercel Date: Wed, 15 Jul 2026 07:55:30 +0000 Subject: [PATCH] Install Vercel Web Analytics MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Vercel Web Analytics Implementation Successfully installed and configured Vercel Web Analytics for the TanStack Start application. ## Changes Made ### 1. Package Installation - **File Modified**: `apps/web/package.json` - **Action**: Added `@vercel/analytics` version `^2.0.1` as a dependency - **Method**: Used `pnpm add @vercel/analytics` in the apps/web directory ### 2. Analytics Component Integration - **File Modified**: `apps/web/src/routes/__root.tsx` - **Actions**: - Added import: `import { Analytics } from "@vercel/analytics/react";` - Added `` component in the body section, after other components like `` and `` ### 3. Lock File Update - **File Modified**: `pnpm-lock.yaml` - **Action**: Updated automatically when installing the package to ensure dependency consistency ## Implementation Details According to the official Vercel Analytics documentation (fetched from https://vercel.com/docs/analytics/quickstart), for React applications using frameworks like TanStack Start, the correct approach is to: 1. Import from `@vercel/analytics/react` 2. Add the `` component to the root layout This implementation follows the framework-specific instructions for React applications. The Analytics component was placed in the `RootDocument` shell component within the `` tag, alongside other application-level components, ensuring it tracks all page views across the application. ## Verification - ✅ **Linting**: The modified `__root.tsx` file passes all Biome checks with no errors - ✅ **Tests**: All 418 existing passing tests continue to pass - ⚠️ **Build**: There are pre-existing build issues in the project related to `react-aria-components` module resolution that are unrelated to the Analytics changes - ✅ **Lock File**: The pnpm-lock.yaml file has been properly updated with the new dependency ## Next Steps for the User To complete the Vercel Web Analytics setup: 1. **Enable Analytics in Vercel Dashboard**: - Navigate to your project in the Vercel dashboard - Go to the Analytics section - Click "Enable" to activate Web Analytics - This will add routes at `/_vercel/insights/*` after your next deployment 2. **Deploy the Application**: - Deploy this branch to Vercel using `vercel deploy` - The Analytics tracking will automatically start collecting data 3. **Verify Installation**: - After deployment, visit your site - Open browser DevTools → Network tab - Look for a Fetch/XHR request to `/_vercel/insights/view` - This confirms Analytics is working correctly 4. **View Analytics Data**: - Return to the Vercel dashboard - Navigate to your project's Analytics section - View real-time and historical analytics data ## Notes - The Analytics component is lightweight and adds minimal overhead to the application - It automatically tracks page views and web vitals - No additional configuration is required for basic analytics tracking - The implementation follows the official Vercel documentation guidelines Co-authored-by: Vercel --- apps/web/package.json | 3 ++- apps/web/src/routes/__root.tsx | 2 ++ pnpm-lock.yaml | 41 ++++++++++++++++++++++++++++++++-- 3 files changed, 43 insertions(+), 3 deletions(-) diff --git a/apps/web/package.json b/apps/web/package.json index 78e90793..ed7d7d24 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -20,7 +20,6 @@ "@repo/i18n": "workspace:*", "@repo/libs": "workspace:*", "@repo/ui": "workspace:*", - "axios": "^1.13.5", "@tanstack/react-devtools": "^0.7.0", "@tanstack/react-query": "^5.66.5", "@tanstack/react-query-devtools": "^5.84.2", @@ -32,6 +31,8 @@ "@vanilla-extract/css": "^1.18.0", "@vanilla-extract/recipes": "^0.5.7", "@vanilla-extract/sprinkles": "^1.6.5", + "@vercel/analytics": "^2.0.1", + "axios": "^1.13.5", "js-cookie": "^3.0.7", "lucide-react": "^0.545.0", "motion": "^12.34.3", diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx index 982a9ba1..08711ee1 100644 --- a/apps/web/src/routes/__root.tsx +++ b/apps/web/src/routes/__root.tsx @@ -7,6 +7,7 @@ import { useRouterState, } from "@tanstack/react-router"; import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"; +import { Analytics } from "@vercel/analytics/react"; import { type ReactNode, useEffect, useState } from "react"; import "@repo/ui/styles/global.css"; import { languageTag, m } from "@repo/i18n"; @@ -407,6 +408,7 @@ function RootDocument({ children }: { children: ReactNode }) { + ); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 008cff37..548609b3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -70,7 +70,7 @@ importers: version: 12.34.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4) nitro: specifier: npm:nitro-nightly@3.0.1-20260410-164248-8ab58a4b - version: nitro-nightly@3.0.1-20260410-164248-8ab58a4b(@electric-sql/pglite@0.3.15)(chokidar@4.0.3)(dotenv@16.6.1)(drizzle-orm@0.45.1(@electric-sql/pglite@0.3.15)(@prisma/client@7.4.2(prisma@7.4.2(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3))(typescript@5.9.3))(kysely@0.27.6)(mysql2@3.15.3)(postgres@3.4.7)(prisma@7.4.2(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)))(giget@2.0.0)(jiti@2.6.1)(lru-cache@11.2.6)(mongodb@7.1.0)(mysql2@3.15.3)(vite@7.3.1(@types/node@24.11.0)(jiti@2.6.1)(tsx@4.21.0)) + version: nitro-nightly@3.0.1-20260410-164248-8ab58a4b(@electric-sql/pglite@0.3.15)(chokidar@4.0.3)(dotenv@16.6.1)(drizzle-orm@0.45.1(@electric-sql/pglite@0.3.15)(@prisma/client@7.4.2(prisma@7.4.2(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3))(typescript@5.9.3))(kysely@0.28.11)(mysql2@3.15.3)(postgres@3.4.7)(prisma@7.4.2(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)))(giget@2.0.0)(jiti@2.6.1)(lru-cache@11.2.6)(mongodb@7.1.0)(mysql2@3.15.3)(vite@7.3.1(@types/node@24.11.0)(jiti@2.6.1)(tsx@4.21.0)) react: specifier: ^19.2.0 version: 19.2.4 @@ -217,6 +217,9 @@ importers: '@vanilla-extract/sprinkles': specifier: ^1.6.5 version: 1.6.5(@vanilla-extract/css@1.18.0) + '@vercel/analytics': + specifier: ^2.0.1 + version: 2.0.1(react@19.2.4) axios: specifier: ^1.13.5 version: 1.13.6 @@ -231,7 +234,7 @@ importers: version: 12.34.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4) nitro: specifier: npm:nitro-nightly@3.0.1-20260410-164248-8ab58a4b - version: nitro-nightly@3.0.1-20260410-164248-8ab58a4b(@electric-sql/pglite@0.3.15)(chokidar@4.0.3)(dotenv@16.6.1)(drizzle-orm@0.45.1(@electric-sql/pglite@0.3.15)(@prisma/client@7.4.2(prisma@7.4.2(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3))(typescript@5.9.3))(kysely@0.28.11)(mysql2@3.15.3)(postgres@3.4.7)(prisma@7.4.2(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)))(giget@2.0.0)(jiti@2.6.1)(lru-cache@11.2.6)(mongodb@7.1.0)(mysql2@3.15.3)(vite@7.3.1(@types/node@24.11.0)(jiti@2.6.1)(tsx@4.21.0)) + version: nitro-nightly@3.0.1-20260410-164248-8ab58a4b(@electric-sql/pglite@0.3.15)(chokidar@4.0.3)(dotenv@16.6.1)(drizzle-orm@0.45.1(@electric-sql/pglite@0.3.15)(@prisma/client@7.4.2(prisma@7.4.2(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3))(typescript@5.9.3))(kysely@0.27.6)(mysql2@3.15.3)(postgres@3.4.7)(prisma@7.4.2(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)))(giget@2.0.0)(jiti@2.6.1)(lru-cache@11.2.6)(mongodb@7.1.0)(mysql2@3.15.3)(vite@7.3.1(@types/node@24.11.0)(jiti@2.6.1)(tsx@4.21.0)) react: specifier: ^19.2.0 version: 19.2.4 @@ -2537,6 +2540,35 @@ packages: peerDependencies: vite: ^5.0.0 || ^6.0.0 || ^7.0.0 + '@vercel/analytics@2.0.1': + resolution: {integrity: sha512-MTQG6V9qQrt1tsDeF+2Uoo5aPjqbVPys1xvnIftXSJYG2SrwXRHnqEvVoYID7BTruDz4lCd2Z7rM1BdkUehk2g==} + peerDependencies: + '@remix-run/react': ^2 + '@sveltejs/kit': ^1 || ^2 + next: '>= 13' + nuxt: '>= 3' + react: ^18 || ^19 || ^19.0.0-rc + svelte: '>= 4' + vue: ^3 + vue-router: ^4 + peerDependenciesMeta: + '@remix-run/react': + optional: true + '@sveltejs/kit': + optional: true + next: + optional: true + nuxt: + optional: true + react: + optional: true + svelte: + optional: true + vue: + optional: true + vue-router: + optional: true + '@vitejs/plugin-react@5.1.4': resolution: {integrity: sha512-VIcFLdRi/VYRU8OL/puL7QXMYafHmqOnwTZY50U1JPlCNj30PxCMx65c494b1K9be9hX83KVt0+gTEwTWLqToA==} engines: {node: ^20.19.0 || >=22.12.0} @@ -4144,6 +4176,7 @@ packages: tsconfck@3.1.6: resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==} engines: {node: ^18 || >=20} + deprecated: unmaintained hasBin: true peerDependencies: typescript: ^5.0.0 @@ -7061,6 +7094,10 @@ snapshots: - tsx - yaml + '@vercel/analytics@2.0.1(react@19.2.4)': + optionalDependencies: + react: 19.2.4 + '@vitejs/plugin-react@5.1.4(vite@7.3.1(@types/node@24.11.0)(jiti@2.6.1)(tsx@4.21.0))': dependencies: '@babel/core': 7.29.0