fix(website): Vercel Analytics, Speed Insights, and CSP fixes

[ajitpratap0]

Summary

• Fix missing Analytics component: @vercel/analytics was installed but <Analytics /> was never rendered in layout.tsx — Vercel had no tracking script, causing 0 data collection since launch
• Add Speed Insights: Install @vercel/speed-insights, render <SpeedInsights /> in root layout for real-user Core Web Vitals monitoring (available free on Hobby plan, up to 10k events/month)
• Fix CSP blocking Speed Insights beacons: Add https://vitals.vercel-insights.com to connect-src directive — without this the beacon requests would be silently blocked by the Content Security Policy

What still needs to be done after merge

Enable both in the Vercel Dashboard (code is deployed but collection requires a dashboard toggle):

• Project → Analytics → Enable
• Project → Speed Insights → Enable

Test plan

• Verify <Analytics /> and <SpeedInsights /> render in the page source after deploy
• Check browser DevTools Network tab — beacon requests to /_vercel/insights/ and vitals.vercel-insights.com should return 200, not be blocked
• Enable both features in Vercel Dashboard and confirm data starts appearing within 24h

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
gosqlx-website	Ready	Preview, Comment	Mar 25, 2026 8:43am

[github-actions]

Claude finished @ajitpratap0's task —— View job

---

Code Review Complete

I've completed a comprehensive review of this PR. Here's my analysis:

Todo List

• Review website analytics implementation (layout.tsx, package.json)
• Check CSP configuration changes
• Review Go configuration file changes
• Assess security considerations
• Check for performance implications
• Verify test coverage and best practices
• Provide comprehensive feedback

---

Code Review Results

✅ Excellent Implementation Overall

This PR properly implements Vercel Analytics and Speed Insights with appropriate security considerations. The changes are well-executed and follow best practices.

Website Analytics Implementation

Grade: A+

• Correct Component Usage: Properly imports and renders both <Analytics /> and <SpeedInsights /> in layout.tsx:96-97
• Package Management: Dependencies correctly added to package.json (@vercel/analytics@2.0.1, @vercel/speed-insights@2.0.0)
• Performance Impact: Both components are lightweight and won't affect bundle size significantly

Security (CSP) Configuration

Grade: A

• Critical Fix Applied: Added https://vitals.vercel-insights.com to CSP connect-src directive in next.config.ts:27
• Security Posture: CSP remains strict with appropriate allowlists
• Best Practice: Correctly identified that Speed Insights beacons would be blocked without CSP adjustment

Go Configuration Changes

Grade: A-

• Consistency: MariaDB dialect properly added across all config files
• Validation: Proper validation rules updated in both config packages
• Minor Issue: Some inconsistency between pkg/config/ and cmd/gosqlx/internal/config/ - the latter doesn't use pointer types for bools, but this appears intentional for CLI usage

Performance Considerations

Grade: A

• Zero Performance Impact: Analytics components are async and non-blocking
• Efficient Loading: Speed Insights uses efficient beacon requests
• Bundle Size: Minimal increase (~3-4KB gzipped)

Security Analysis

Grade: A

• No Vulnerabilities: All external domains properly allowlisted
• CSP Compliance: Security headers remain strict
• Best Practice: Analytics data collection requires dashboard activation (defense in depth)

Test Coverage

Grade: B+

• Go Tests Present: Configuration changes have corresponding test files (config_test.go, schema_test.go)
• Frontend Tests: No frontend tests visible, but this is typical for Next.js analytics integration
• Integration: Manual testing plan provided in PR description

---

Minor Recommendations

1. Documentation Update: Consider updating the README or docs to mention analytics are enabled (though not critical)

2. Environment Check: Consider adding environment checks to only load analytics in production:

   {process.env.NODE_ENV === 'production' && <Analytics />}
   {process.env.NODE_ENV === 'production' && <SpeedInsights />}

3. Privacy Consideration: Add privacy policy mention if collecting user data (though Vercel Analytics is privacy-friendly)

---

Summary

This is a high-quality PR that correctly implements the requested features:

• ✅ Fixes missing Analytics component rendering
• ✅ Adds Speed Insights for Core Web Vitals monitoring
• ✅ Properly configures CSP to allow beacon requests
• ✅ Maintains security best practices
• ✅ Follows repository conventions
• ✅ Includes proper validation and testing

The implementation is production-ready and follows industry best practices. I recommend approving this PR.

---

[github-actions]

Claude finished @ajitpratap0's task —— View job

---

Code Review Complete ✅

I've thoroughly reviewed this PR that adds Vercel Analytics and Speed Insights with CSP fixes. Here's my comprehensive feedback:

Todo List

• Review website analytics implementation (layout.tsx, package.json)
• Check CSP configuration changes
• Review package dependencies
• Assess security considerations
• Check for performance implications
• Verify test coverage and best practices
• Provide comprehensive feedback

---

✅ Positive Aspects

1. Correct Implementation: The Analytics and Speed Insights components are properly imported and rendered in the correct location at the bottom of the body tag (website/src/app/layout.tsx:96-97)

2. Proper CSP Fix: The addition of https://vitals.vercel-insights.com to the connect-src directive in CSP (website/next.config.ts:27) is exactly what's needed to allow Speed Insights beacons

3. Latest Versions: Using current stable versions of both packages:

   • @vercel/analytics: ^2.0.1
   • @vercel/speed-insights: ^2.0.0

4. Clean Integration: Both components are correctly imported from their respective Next.js-optimized packages

🔍 Security Considerations

✅ SECURE: The CSP changes are minimal and appropriate:

• Only adds the specific Vercel domain needed for Speed Insights
• Maintains strict security posture with no wildcard domains
• Existing security headers remain intact (HSTS, X-Frame-Options, etc.)

📊 Performance Analysis

✅ MINIMAL IMPACT:

• Both libraries are designed for minimal performance overhead
• Vercel Analytics: ~1KB gzipped, async loading
• Speed Insights: ~2KB gzipped, measures Core Web Vitals without blocking
• Components render at end of body, won't affect page load performance

🧪 Testing & Best Practices

Areas for Future Consideration:

1. Missing Environment Configuration: Consider adding environment-based toggles to disable analytics in development:

   {process.env.NODE_ENV === 'production' && <Analytics />}
   {process.env.NODE_ENV === 'production' && <SpeedInsights />}

2. No Tests: While analytics components typically don't require unit tests, consider adding smoke tests to verify they render without errors

🚀 Implementation Quality

✅ EXCELLENT:

• Follows Next.js best practices for analytics integration
• Proper component placement at end of body
• Clean imports using Next.js-optimized packages
• CSP fix is precise and minimal

📝 Code Quality

• File: website/src/app/layout.tsx: Clean, well-structured layout component
• File: website/next.config.ts: Proper CSP configuration with secure defaults
• File: website/package.json: Dependencies are properly versioned

🎯 Recommendations

1. Environment Toggle (Optional Enhancement):

   {process.env.NODE_ENV === 'production' && (
     <>
       <Analytics />
       <SpeedInsights />
     </>
   )}

2. Documentation: The PR description excellently covers the post-merge steps needed in Vercel Dashboard

🎉 Final Assessment

This is a high-quality, production-ready PR that:

• ✅ Fixes the missing Analytics component (critical bug fix)
• ✅ Adds Speed Insights properly with CSP fix
• ✅ Maintains security best practices
• ✅ Has minimal performance impact
• ✅ Follows Next.js conventions

Recommended Action: APPROVE 🚀

The implementation is clean, secure, and follows best practices. The CSP fix is essential and correctly implemented.

---