feat(webapp): add tracking for Vercel GitHub steps#3093
feat(webapp): add tracking for Vercel GitHub steps#30930ski wants to merge 1 commit intooskar/feat-vercel-deployments-ui-improvementsfrom
Conversation
|
WalkthroughAdds telemetry tracking to the Vercel onboarding modal by emitting tracking events at multiple points in the GitHub connection flow (e.g., step viewed, GitHub app install clicked, completed, and skipped). Expands the main Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 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 |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Add telemetry events to the Vercel onboarding modal to better track user interactions with the GitHub integration flow. Specifically: - Fire an event when the GitHub step is shown, including whether the GitHub app is already installed (github_app_installed). - Track when the user clicks the "Install GitHub app" button. - Track when the user completes the GitHub onboarding step. - Track when the user skips the GitHub onboarding step (applies to multiple skip paths). Also add gitHubAppInstallations.length to the effect dependency array to ensure the "step viewed" event updates correctly when installation state changes. These events improve analytics for onboarding funnels and help identify drop-off or friction points in the GitHub integration flow.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
0ski
force-pushed
the
oskar/fix-more-posthog-vercel-events
branch
from
aa0421c to
a12317c
Compare
0ski
changed the title
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/webapp/app/components/integrations/VercelOnboardingModal.tsx (1)
1117-1160:⚠️ Potential issue | 🟡 Minor
"vercel onboarding completed"silently dropped on the redirect paths; double-fired on the skip-without-redirect path.Two inconsistencies arise from combining synchronous
window.location.hrefredirects with a state-machine–drivenuseEffectcompletion tracker (lines 582–590):
"Complete" button (line 1120–1127, marketplace + GitHub connected + nextUrl):
trackOnboarding("vercel onboarding github completed")fires, thensetState("completed"), thenwindow.location.href = validUrl. The page navigates away before React flushes effects, so theuseEffectat line 582 never executes and"vercel onboarding completed"is never emitted for this path.Skip button without redirect (lines 1135–1136 for non-marketplace, lines 1154–1155 for the cancel variant):
trackOnboarding("vercel onboarding github skipped")fires, thensetState("completed"). Because there is no redirect, the useEffect at line 582 does execute — emitting a second event"vercel onboarding completed"and callingonClose(). This path double-fires completion tracking.If
"vercel onboarding completed"is used as the canonical completion counter in any funnel, the marketplace-with-redirect path will be under-counted.🛠️ Suggested fix: emit `"vercel onboarding completed"` explicitly before redirecting and suppress the useEffect for GitHub-step transitions
- trackOnboarding("vercel onboarding github completed"); - setState("completed"); - const validUrl = safeRedirectUrl(nextUrl); - if (validUrl) { - window.location.href = validUrl; - } + trackOnboarding("vercel onboarding github completed"); + trackOnboarding("vercel onboarding completed", { github_connected: true }); + hasTrackedCompletionRef.current = true; // prevent useEffect double-fire + setState("completed"); + const validUrl = safeRedirectUrl(nextUrl); + if (validUrl) { + window.location.href = validUrl; + }Apply the same pattern for skip handlers that redirect:
trackOnboarding("vercel onboarding github skipped"); + trackOnboarding("vercel onboarding completed", { github_connected: isGitHubConnectedForOnboarding }); + hasTrackedCompletionRef.current = true; setState("completed"); if (fromMarketplaceContext && nextUrl) { ...🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/webapp/app/components/integrations/VercelOnboardingModal.tsx` around lines 1117 - 1160, The completion tracking is inconsistent because redirects happen before the useEffect that emits the canonical "vercel onboarding completed" runs and some non-redirect paths cause a double-fire; update the click handlers that perform a redirect (the Complete and any Skip handlers that call window.location.href via safeRedirectUrl) to call trackOnboarding("vercel onboarding github completed") immediately before doing the redirect, and add a boolean ref (e.g., suppressCompletionEffectRef) that you set true in those redirecting handlers so the existing useEffect that watches state === "completed" (the effect that currently emits "vercel onboarding completed" and calls onClose) will early-return when suppressCompletionEffectRef.current is true; for non-redirecting Skip handlers keep the existing setState("completed") so the useEffect emits once — use the existing symbols trackOnboarding, setState, safeRedirectUrl, onClose, and the useEffect that handles "completed".
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Use types over interfaces for TypeScript
Avoid using enums; prefer string unions or const objects instead
**/*.{ts,tsx}: Always import tasks from@trigger.dev/sdk, never use@trigger.dev/sdk/v3or deprecatedclient.defineJobpattern
Every Trigger.dev task must be exported and have a uniqueidproperty with no timeouts in the run function
Files:
apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
{packages/core,apps/webapp}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use zod for validation in packages/core and apps/webapp
Files:
apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use function declarations instead of default exports
Import from
@trigger.dev/coreusing subpaths only, never import from root
Files:
apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
apps/webapp/app/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/webapp.mdc)
Access all environment variables through the
envexport ofenv.server.tsinstead of directly accessingprocess.envin the Trigger.dev webapp
Files:
apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
apps/webapp/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/webapp.mdc)
apps/webapp/**/*.{ts,tsx}: When importing from@trigger.dev/corein the webapp, use subpath exports from the package.json instead of importing from the root path
Follow the Remix 2.1.0 and Express server conventions when updating the main trigger.dev webappAccess environment variables via
envexport fromapps/webapp/app/env.server.ts, never useprocess.envdirectly
Files:
apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
**/*.{js,ts,jsx,tsx,json,md,yaml,yml}
📄 CodeRabbit inference engine (AGENTS.md)
Format code using Prettier before committing
Files:
apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
🧠 Learnings (5)
📓 Common learnings
Learnt from: 0ski
Repo: triggerdotdev/trigger.dev PR: 2994
File: apps/webapp/app/presenters/v3/BranchesPresenter.server.ts:45-45
Timestamp: 2026-02-03T18:27:05.229Z
Learning: In the Vercel integration feature, the GitHub app is responsible for builds and provides git metadata (using source: "trigger_github_app"). The Vercel integration is only for linking deployments between platforms, not for triggering builds or providing git metadata.
📚 Learning: 2026-02-04T16:34:48.876Z
Learnt from: 0ski
Repo: triggerdotdev/trigger.dev PR: 2994
File: apps/webapp/app/routes/vercel.connect.tsx:13-27
Timestamp: 2026-02-04T16:34:48.876Z
Learning: In apps/webapp/app/routes/vercel.connect.tsx, configurationId may be absent for "dashboard" flows but must be present for "marketplace" flows. Enforce this with a Zod superRefine and pass installationId to repository methods only when configurationId is defined (omit the field otherwise).
Applied to files:
apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
📚 Learning: 2026-02-03T18:27:05.229Z
Learnt from: 0ski
Repo: triggerdotdev/trigger.dev PR: 2994
File: apps/webapp/app/presenters/v3/BranchesPresenter.server.ts:45-45
Timestamp: 2026-02-03T18:27:05.229Z
Learning: In the Vercel integration feature, the GitHub app is responsible for builds and provides git metadata (using source: "trigger_github_app"). The Vercel integration is only for linking deployments between platforms, not for triggering builds or providing git metadata.
Applied to files:
apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
📚 Learning: 2025-09-02T11:27:36.336Z
Learnt from: myftija
Repo: triggerdotdev/trigger.dev PR: 2463
File: apps/webapp/app/routes/_app.github.callback/route.tsx:33-44
Timestamp: 2025-09-02T11:27:36.336Z
Learning: In the GitHub App installation callback flow in apps/webapp/app/routes/_app.github.callback/route.tsx, the install session cookie is not cleared after use due to interface limitations with redirectWithSuccessMessage/redirectWithErrorMessage not supporting custom headers. The maintainer accepts this design as the 1-hour cookie expiration provides sufficient protection against replay attacks.
Applied to files:
apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
📚 Learning: 2026-02-11T16:37:32.429Z
Learnt from: matt-aitken
Repo: triggerdotdev/trigger.dev PR: 3019
File: apps/webapp/app/components/primitives/charts/Card.tsx:26-30
Timestamp: 2026-02-11T16:37:32.429Z
Learning: In projects using react-grid-layout, avoid relying on drag-handle class to imply draggability. Ensure drag-handle elements only affect dragging when the parent grid item is configured draggable in the layout; conditionally apply cursor styles based on the draggable prop. This improves correctness and accessibility.
Applied to files:
apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (27)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (4, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (5, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (2, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (5, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (2, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (8, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (1, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (8, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (3, 8)
- GitHub Check: sdk-compat / Deno Runtime
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (6, 8)
- GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - npm)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (4, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (1, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (3, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (7, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (7, 8)
- GitHub Check: e2e / 🧪 CLI v3 tests (ubuntu-latest - npm)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (6, 8)
- GitHub Check: sdk-compat / Cloudflare Workers
- GitHub Check: units / packages / 🧪 Unit Tests: Packages (1, 1)
- GitHub Check: sdk-compat / Bun Runtime
- GitHub Check: e2e / 🧪 CLI v3 tests (ubuntu-latest - pnpm)
- GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - pnpm)
- GitHub Check: sdk-compat / Node.js 20.20 (ubuntu-latest)
- GitHub Check: sdk-compat / Node.js 22.12 (ubuntu-latest)
- GitHub Check: typecheck / typecheck
🔇 Additional comments (1)
apps/webapp/app/components/integrations/VercelOnboardingModal.tsx (1)
546-553: Stale-stateconcern from prior review is resolved here.Using
capturedirectly withstep: "github-connection"hardcoded correctly sidesteps the closure-staleness problem —trackOnboarding's capturedstatewould have still held"build-settings"at the time of call. This is the right fix.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@apps/webapp/app/components/integrations/VercelOnboardingModal.tsx`:
- Around line 1117-1160: The completion tracking is inconsistent because
redirects happen before the useEffect that emits the canonical "vercel
onboarding completed" runs and some non-redirect paths cause a double-fire;
update the click handlers that perform a redirect (the Complete and any Skip
handlers that call window.location.href via safeRedirectUrl) to call
trackOnboarding("vercel onboarding github completed") immediately before doing
the redirect, and add a boolean ref (e.g., suppressCompletionEffectRef) that you
set true in those redirecting handlers so the existing useEffect that watches
state === "completed" (the effect that currently emits "vercel onboarding
completed" and calls onClose) will early-return when
suppressCompletionEffectRef.current is true; for non-redirecting Skip handlers
keep the existing setState("completed") so the useEffect emits once — use the
existing symbols trackOnboarding, setState, safeRedirectUrl, onClose, and the
useEffect that handles "completed".
---
Duplicate comments:
In `@apps/webapp/app/components/integrations/VercelOnboardingModal.tsx`:
- Line 554: The dependency array for the effect/callback in
VercelOnboardingModal currently uses the property access
gitHubAppInstallations.length; replace that entry with the full reference
gitHubAppInstallations so the hook depends on the array itself (i.e., change
gitHubAppInstallations.length to gitHubAppInstallations in the dependency
array), then run tests/linter to ensure react-hooks/exhaustive-deps is
satisfied.
1 participant
Add telemetry events to the Vercel onboarding modal to better track
user interactions with the GitHub integration flow. Specifically:
GitHub app is already installed (github_app_installed).
multiple skip paths).
Also add gitHubAppInstallations.length to the effect dependency array
to ensure the "step viewed" event updates correctly when installation
state changes.
These events improve analytics for onboarding funnels and help identify
drop-off or friction points in the GitHub integration flow.
This is part 1 of 1 in a stack made with GitButler: