From 8050a1132d191a180e1ca5eaca172e0196f27731 Mon Sep 17 00:00:00 2001 From: Vercel Date: Mon, 8 Jun 2026 04:23:04 +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 Integration Successfully installed and configured Vercel Web Analytics for the Satisfactory Planner project. ## Changes Made ### 1. Package Installation - Added `@vercel/analytics` (v2.0.1) to project dependencies - Updated `package.json` to include the new dependency - Updated `package-lock.json` with the resolved dependency tree ### 2. Analytics Integration Modified `satisfactory-planner/src/App.jsx`: - Added import statement: `import { Analytics } from "@vercel/analytics/react";` - Added `` component at the end of the App component's return statement (just before the closing div) ## Implementation Details Following the official Vercel documentation for React/Vite applications: - Used the React-specific Analytics component from `@vercel/analytics/react` - Placed the Analytics component at the root level of the App component - This enables automatic page view tracking and web vitals collection ## Verification - ✅ Build completed successfully (`npm run build`) - ✅ Linter passed with no new errors (`npm run lint`) - ✅ No breaking changes to existing functionality - ✅ Dependencies properly installed and lock file updated ## Notes The Analytics component is a lightweight wrapper around the Vercel tracking script that provides seamless integration with React applications. Once deployed to Vercel with Web Analytics enabled in the dashboard, the application will automatically track: - Page views - Web Vitals metrics - User interactions No additional configuration or environment variables are required. The analytics will be active when the application is deployed to Vercel. Co-authored-by: Vercel --- satisfactory-planner/package-lock.json | 73 +++++++++++++++----------- satisfactory-planner/package.json | 1 + satisfactory-planner/src/App.jsx | 4 +- 3 files changed, 47 insertions(+), 31 deletions(-) diff --git a/satisfactory-planner/package-lock.json b/satisfactory-planner/package-lock.json index c499d83..2c05c87 100644 --- a/satisfactory-planner/package-lock.json +++ b/satisfactory-planner/package-lock.json @@ -8,6 +8,7 @@ "name": "satisfactory-planner", "version": "0.0.0", "dependencies": { + "@vercel/analytics": "^2.0.1", "react": "^19.2.6", "react-dom": "^19.2.6" }, @@ -663,9 +664,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -683,9 +681,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -703,9 +698,6 @@ "ppc64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -723,9 +715,6 @@ "s390x" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -743,9 +732,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -763,9 +749,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -904,6 +887,48 @@ "@types/react": "^19.2.0" } }, + "node_modules/@vercel/analytics": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-2.0.1.tgz", + "integrity": "sha512-MTQG6V9qQrt1tsDeF+2Uoo5aPjqbVPys1xvnIftXSJYG2SrwXRHnqEvVoYID7BTruDz4lCd2Z7rM1BdkUehk2g==", + "license": "MIT", + "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 + } + } + }, "node_modules/@vitejs/plugin-react": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.2.tgz", @@ -1766,9 +1791,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -1790,9 +1812,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -1814,9 +1833,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -1838,9 +1854,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MPL-2.0", "optional": true, "os": [ diff --git a/satisfactory-planner/package.json b/satisfactory-planner/package.json index d671760..6fe237b 100644 --- a/satisfactory-planner/package.json +++ b/satisfactory-planner/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@vercel/analytics": "^2.0.1", "react": "^19.2.6", "react-dom": "^19.2.6" }, diff --git a/satisfactory-planner/src/App.jsx b/satisfactory-planner/src/App.jsx index 359e303..39c97cd 100644 --- a/satisfactory-planner/src/App.jsx +++ b/satisfactory-planner/src/App.jsx @@ -1,4 +1,5 @@ import { useState, useRef, useCallback, useEffect, useLayoutEffect, useMemo } from "react"; +import { Analytics } from "@vercel/analytics/react"; import { GRID, CELL, TOPBAR, BUILDINGS, BUILDING_MAP, CATS, CAT_ICON, BELT_TIERS, ZONE_PRESETS, FLOOR_OPTIONS, TRANSPORT_TYPES, BUILDING_ROLES, @@ -116,7 +117,7 @@ function BuildingRect({placed,def,selected,connectingFrom,tool,onMouseDown,onCon ); } -// ─── BELT LINE ──────────────────────────────────────────────────────────────── +// ─── BELT LINE ───────────────────────────────────────────────────────────��──── function BeltLine({conn,fromB,toB,selected,beltDef,onClick,itemMap}){ const fromSz=getRotatedSize(fromB), toSz=getRotatedSize(toB); const x1=(fromB.x+fromSz.w/2)*CELL, y1=(fromB.y+fromSz.h/2)*CELL; @@ -1447,6 +1448,7 @@ export default function App(){ {/* ═══ MODALS ═══ */} {zoneDraft&&setZoneDraft(null)}/>} {pendingConn&&setPendingConn(null)}/>} + ); }