From 0f9afbcbd77efea93f75efc95686fe4914543ef8 Mon Sep 17 00:00:00 2001
From: Vercel <vercel[bot]@users.noreply.github.com>
Date: Wed, 25 Feb 2026 03:38:14 +0000
Subject: [PATCH] Enable Vercel Speed Insights on Your Project
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Vercel Speed Insights Implementation

## Summary
Successfully implemented Vercel Speed Insights for the Link2Pay frontend application following the official Vercel documentation.

## Changes Made

### 1. Installed Dependencies
- Added `@vercel/speed-insights` package to the project dependencies using npm
- Package version: Latest available version installed via `npm install @vercel/speed-insights`

### 2. Modified Files

#### `frontend/package.json`
- Added `@vercel/speed-insights` to dependencies

#### `frontend/package-lock.json`
- Updated lockfile with the new package and its dependencies

#### `frontend/src/App.tsx`
- Added import statement: `import { SpeedInsights } from '@vercel/speed-insights/react';`
- Added `<SpeedInsights />` component at the root level of the application, placed after the `<BrowserRouter>` component and within the `<QueryClientProvider>`
- This ensures Speed Insights will track performance metrics across all routes in the application

## Implementation Details

The implementation follows the Create React App pattern from the Vercel documentation, which is appropriate for this React + Vite + TypeScript project:

1. **Component Placement**: The `<SpeedInsights />` component is placed at the application root level within the QueryClientProvider, ensuring it has access to all route changes and can track performance metrics across the entire application.

2. **Integration Method**: Using the React wrapper component (`@vercel/speed-insights/react`) which provides seamless integration with React applications.

3. **Build Verification**:
   - TypeScript type checking passed successfully
   - Production build completed successfully
   - No linting errors introduced

## Next Steps

After deployment to Vercel:
1. Enable Speed Insights in the Vercel dashboard under Project Settings > Speed Insights
2. The Speed Insights script will be available at `/_vercel/speed-insights/script.js` after deployment
3. Performance metrics will start being collected once users visit the deployed site
4. Data can be viewed in the Vercel dashboard under the Speed Insights tab

## Testing

- ✅ TypeScript type checking passed
- ✅ Production build successful
- ✅ No breaking changes to existing functionality
- ✅ Package properly integrated with React application structure

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
---
 frontend/package-lock.json | 35 +++++++++++++++++++++++++++++++++++
 frontend/package.json      |  1 +
 frontend/src/App.tsx       |  2 ++
 3 files changed, 38 insertions(+)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 68e06a1..4f6d187 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,6 +12,7 @@
         "@stellar/freighter-api": "^2.0.0",
         "@stellar/stellar-sdk": "^12.0.0",
         "@tanstack/react-query": "^5.0.0",
+        "@vercel/speed-insights": "^1.3.1",
         "lucide-react": "^0.263.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -1512,6 +1513,40 @@
         "@types/react": "^18.0.0"
       }
     },
+    "node_modules/@vercel/speed-insights": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@vercel/speed-insights/-/speed-insights-1.3.1.tgz",
+      "integrity": "sha512-PbEr7FrMkUrGYvlcLHGkXdCkxnylCWePx7lPxxq36DNdfo9mcUjLOmqOyPDHAOgnfqgGGdmE3XI9L/4+5fr+vQ==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@sveltejs/kit": "^1 || ^2",
+        "next": ">= 13",
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "svelte": ">= 4",
+        "vue": "^3",
+        "vue-router": "^4"
+      },
+      "peerDependenciesMeta": {
+        "@sveltejs/kit": {
+          "optional": true
+        },
+        "next": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        },
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 5c0b3af..21017ef 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
     "@stellar/freighter-api": "^2.0.0",
     "@stellar/stellar-sdk": "^12.0.0",
     "@tanstack/react-query": "^5.0.0",
+    "@vercel/speed-insights": "^1.3.1",
     "lucide-react": "^0.263.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 172fced..118a0b5 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,7 @@
 import { BrowserRouter, Routes, Route, Navigate, useParams } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Toaster } from 'react-hot-toast';
+import { SpeedInsights } from '@vercel/speed-insights/react';
 import Layout from './components/Layout';
 import Dashboard from './pages/Dashboard';
 import Clients from './pages/Clients';
@@ -84,6 +85,7 @@ export default function App() {
           <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>
       </BrowserRouter>
+      <SpeedInsights />
     </QueryClientProvider>
   );
 }