Skip to content

Tags: Dargon789/uniswap.app

Tags

Uniswap-main-(#101)

Toggle Uniswap-main-(#101)'s commit message

Uniswap/main-(#100)

Toggle Uniswap/main-(#100)'s commit message

vercel-ai-next.js

Toggle vercel-ai-next.js's commit message

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
Add Vercel Speed Insights to Next.js (#94)

# Vercel Speed Insights Implementation Report

## Summary
Successfully installed and configured Vercel Speed Insights for the Uniswap web application.

## Important Note
This project is a **React application using Create React App**, not a Next.js application. The implementation uses the React variant of Vercel Speed Insights (`@vercel/speed-insights/react`) as per the official documentation for non-Next.js React applications.

## Changes Made

### 1. Package Installation
- **File Modified**: `apps/web/package.json`
- **Action**: Added `@vercel/speed-insights` version 1.3.1 as a dependency
- **Command Used**: `yarn workspace @uniswap/interface add @vercel/speed-insights`

### 2. SpeedInsights Component Integration
- **File Modified**: `apps/web/src/index.tsx`
- **Changes**:
  - Added import statement: `import { SpeedInsights } from '@vercel/speed-insights/react'`
  - Added `<SpeedInsights />` component to the render tree, placed after the `<App />` component and before the closing `</PortalProvider>` tag
  - This placement ensures Speed Insights tracks all routes and pages in the application

### 3. Lock File Update
- **File Modified**: `yarn.lock`
- **Action**: Updated with new dependency resolution for `@vercel/[email protected]`

## Implementation Details

The SpeedInsights component was added to the main application entry point (`apps/web/src/index.tsx`) within the component tree hierarchy:

```
<PortalProvider>
  <ThemedGlobalStyle />
  <App />
  <SpeedInsights />  // ← Added here
</PortalProvider>
```

This placement ensures that:
1. Speed Insights is initialized once when the app loads
2. It can track all route changes and page views throughout the application
3. It's rendered within the React tree but doesn't interfere with the main application logic

## Verification

The implementation follows the official Vercel Speed Insights documentation for React applications:
- Uses `@vercel/speed-insights/react` import path (correct for non-Next.js React apps)
- Component is added to the root-level render tree
- No additional configuration is required for basic functionality

## Next Steps

When deployed to Vercel:
1. Speed Insights will automatically start collecting performance metrics
2. Data will be visible in the Vercel Dashboard under the Speed Insights tab
3. Real User Monitoring (RUM) data will provide insights into actual user experience
4. Core Web Vitals (LCP, FID, CLS) will be tracked automatically

## Files Modified
- `apps/web/package.json` - Added dependency
- `apps/web/src/index.tsx` - Imported and rendered SpeedInsights component
- `yarn.lock` - Updated dependency lockfile

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>

snyk-fix-apps/extension(#89)

Toggle snyk-fix-apps/extension(#89)'s commit message

Unverified

This tag is not signed, but one or more authors requires that any tag attributed to them is signed.

web-dev-ai-(#1)

Toggle web-dev-ai-(#1)'s commit message

Unverified

This tag is not signed, but one or more authors requires that any tag attributed to them is signed.

sourcery-ai-bot]-codeql

Toggle sourcery-ai-bot]-codeql's commit message

Unverified

This tag is not signed, but one or more authors requires that any tag attributed to them is signed.

snyk-bot-fix-wallet

Toggle snyk-bot-fix-wallet's commit message

Unverified

This tag is not signed, but one or more authors requires that any tag attributed to them is signed.

gemini-code-assist-bot]-update-contributing.md

Toggle gemini-code-assist-bot]-update-contributing.md's commit message

Unverified

This tag is not signed, but one or more authors requires that any tag attributed to them is signed.

fix-packages/wallet/package.json-to-reduce-vulnerabilities-(#57)

Toggle fix-packages/wallet/package.json-to-reduce-vulnerabilities-(#57)'s commit message

Unverified

This tag is not signed, but one or more authors requires that any tag attributed to them is signed.

fix-packages/wallet/package.json-to-reduce-vulnerabilities-(#38)

Toggle fix-packages/wallet/package.json-to-reduce-vulnerabilities-(#38)'s commit message

Unverified

This tag is not signed, but one or more authors requires that any tag attributed to them is signed.