feat: add Vercel Analytics integration#76
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
More reviews will be available in 38 minutes and 59 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThis PR integrates Vercel Analytics across the site by adding a dependency, creating client and server tracking libraries, wiring a VercelAnalytics component into the root layout, and instrumenting the consultation API endpoint and signup forms to capture user events and submission outcomes. ChangesVercel Analytics Integration
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
This PR adds Vercel Analytics to the Next.js site, instrumenting key user flows (“Hire Us”, “Join Us”, and the consultations API) for richer client- and server-side event tracking alongside existing Fathom tracking.
Changes:
- Added client and server analytics helper modules (
src/lib/analytics.ts,src/lib/server-analytics.ts) and a<VercelAnalytics />component to initialize Vercel Analytics + track[data-click]CTAs. - Instrumented “Hire Us” and “Join Us” forms with analytics events for attempts, successes, and error cases.
- Instrumented the consultations API route to emit success/failure analytics events; added
@vercel/analyticsdependency and lockfile updates.
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/lib/server-analytics.ts | Adds server-side tracking wrapper for Vercel Analytics events. |
| src/lib/analytics.ts | Adds client-side event definitions and a tracking helper. |
| src/components/VercelAnalytics.tsx | Initializes Vercel Analytics and tracks CTA clicks; redacts URL query/hash in beforeSend. |
| src/components/JoinUs.tsx | Emits analytics events for signup attempt/success/error. |
| src/components/HireUs.tsx | Emits analytics events for form view, step completion, submit attempt/success/error. |
| src/app/layout.tsx | Mounts the Vercel Analytics component in the root layout. |
| src/app/api/consultations/route.ts | Adds server-side analytics events for consultation submission success/failure reasons. |
| package.json | Adds @vercel/analytics dependency. |
| bun.lock | Lockfile update to include @vercel/analytics. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/HireUs.tsx (1)
480-488:⚠️ Potential issue | 🟠 Major | ⚡ Quick winFix error-reason classification for non-400 responses with
details.Line 480 currently treats any
detailsarray as validation, but your consultation API can returndetailson HTTP 500 too (notification failures). That mislabels server failures asserver_validationand skews analytics.Use HTTP status (or explicit error code) to classify validation, e.g. only
response.status === 400as validation.Suggested fix
- if (result.details && Array.isArray(result.details)) { + if (response.status === 400 && result.details && Array.isArray(result.details)) { console.error("Validation errors:", result.details); setValidationErrors(result.details); setErrorMessage("Please fix the validation errors below."); trackAnalyticsEvent(analyticsEvents.hireFormSubmitError, { reason: "server_validation", step: "submit", }); } else { setErrorMessage( result.error || "Failed to submit consultation. Please try again." ); trackAnalyticsEvent(analyticsEvents.hireFormSubmitError, { reason: "server_error", step: "submit", }); }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/HireUs.tsx` around lines 480 - 488, The code currently treats any result.details array as validation errors; change the branching in the submission handling so you only classify as validation when the HTTP status indicates a 400 (or an explicit validation error code) instead of presence of result.details alone: inspect the response status (e.g., response.status or result.statusCode) and only call setValidationErrors(result.details), setErrorMessage("Please fix the validation errors below."), and trackAnalyticsEvent(analyticsEvents.hireFormSubmitError, { reason: "server_validation", step: "submit" }) when status === 400; for other statuses with result.details (e.g., 500), log them and classify the analytics reason as a server error (e.g., reason: "server_failure") while preserving existing error handling flow.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/app/api/consultations/route.ts`:
- Around line 222-229: The telemetry calls (trackServerAnalyticsEvent) are
currently awaited and block API responses; change them to fire-and-forget
background calls instead (e.g., call trackServerAnalyticsEvent without awaiting
and attach a .catch to handle/log failures) for every occurrence including the
instances that reference serverAnalyticsEvents.consultationSubmitFailed and the
other events noted; this keeps the API response path non-blocking while still
capturing errors from the analytics call.
---
Outside diff comments:
In `@src/components/HireUs.tsx`:
- Around line 480-488: The code currently treats any result.details array as
validation errors; change the branching in the submission handling so you only
classify as validation when the HTTP status indicates a 400 (or an explicit
validation error code) instead of presence of result.details alone: inspect the
response status (e.g., response.status or result.statusCode) and only call
setValidationErrors(result.details), setErrorMessage("Please fix the validation
errors below."), and trackAnalyticsEvent(analyticsEvents.hireFormSubmitError, {
reason: "server_validation", step: "submit" }) when status === 400; for other
statuses with result.details (e.g., 500), log them and classify the analytics
reason as a server error (e.g., reason: "server_failure") while preserving
existing error handling flow.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 2a876151-481b-493e-a38f-c47b7e0a21aa
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (8)
package.jsonsrc/app/api/consultations/route.tssrc/app/layout.tsxsrc/components/HireUs.tsxsrc/components/JoinUs.tsxsrc/components/VercelAnalytics.tsxsrc/lib/analytics.tssrc/lib/server-analytics.ts
|
Addressed the remaining CodeRabbit outside-diff item in 8b57f8a: hire-us submission errors now classify validation only on HTTP 400, so 500 responses with details are treated as server errors. Verified with bun run lint and bun run build. |
This pull request introduces comprehensive integration with Vercel Analytics for both client-side and server-side event tracking. The main focus is on improving analytics for user interactions with the "Hire Us" and "Join Us" forms, as well as backend consultation submissions. It adds new utility modules for analytics events and tracking, and ensures that important user actions and errors are consistently reported for better observability.
Analytics Integration
@vercel/analyticsas a dependency inpackage.jsonto support Vercel Analytics tracking.src/lib/analytics.tsfor client-side analytics event definitions and tracking, andsrc/lib/server-analytics.tsfor server-side event tracking. [1] [2]VercelAnalyticscomponent that sets up page analytics and tracks[data-click]CTA clicks.VercelAnalyticscomponent into the main layout (src/app/layout.tsx). [1] [2]"Hire Us" Form Analytics
src/components/HireUs.tsx. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]"Join Us" Form Analytics
src/components/JoinUs.tsx. [1] [2] [3]Backend Consultation API Analytics
src/app/api/consultations/route.ts) to track successful submissions and different failure reasons (validation, notification, exception) using server-side analytics events. [1] [2] [3] [4] [5]These changes provide much richer analytics for key user flows, enabling better monitoring and future optimization of the forms and consultation process.
Summary by CodeRabbit