[CI] (362fa9c) tanstack-router/tanstack-router-code-based-saas

[wizard-ci-bot]

Automated wizard CI run

Source: manual
Trigger ID: 362fa9c
App: tanstack-router/tanstack-router-code-based-saas
App directory: apps/tanstack-router/tanstack-router-code-based-saas
Workbench branch: wizard-ci-362fa9c-tanstack-router-tanstack-router-code-based-saas
Wizard branch: main
Context Mill branch: main
PostHog (MCP) branch: master
Timestamp: 2026-02-11T17:49:24.374Z
Duration: 413.3s

[wizard-ci-bot]

---

PR Evaluation Report

Summary

This PR integrates PostHog analytics into a TanStack Router-based React SaaS application (CloudFlow). The integration includes proper SDK installation, PostHogProvider setup with reverse proxy configuration, user identification on login/logout, and event tracking for key user actions including invoice CRUD operations, team member views, and upgrade clicks.

Files changed	Lines added	Lines removed
7	+562	-31

Confidence score: 3/5 🤔

• Error event capture in render body: The invoice_create_failed and invoice_update_failed events are captured inside an IIFE within the JSX render body. This causes the event to fire on every re-render when the error state is present, leading to duplicate events. Move these captures to the onError callback of the mutation or use useEffect. [CRITICAL]
• Missing useEffect dependency: In UserComponent, the useEffect that captures team_member_viewed is missing posthog in the dependency array, which is a React hooks lint warning. [LOW]
• Reverse proxy only works in dev: The Vite proxy configuration only applies during development (server.proxy). Production builds will not have this proxy and will send requests directly to PostHog, defeating the ad-blocker bypass purpose. A production proxy solution is needed. [MEDIUM]

---

File changes

Filename	Score	Description
.gitignore	5/5	Added .env to gitignore - correct security practice
package.json	5/5	Added @posthog/react and posthog-js dependencies correctly
pnpm-lock.yaml	5/5	Lock file updated with all PostHog dependencies and transitive deps
posthog-setup-report.md	4/5	Good documentation of the integration, events, and next steps
src/main.tsx	3/5	Core PostHog integration with Provider, identify, capture, and reset. However, error event captures in render body will cause duplicate events
tsconfig.json	5/5	Added vite/client types for proper import.meta.env TypeScript support
vite.config.js	4/5	Added reverse proxy for /ingest endpoint, but only works in dev mode

---

App sanity check: 4/5 ✅

Criteria	Result	Description
App builds and runs	Yes	Dependencies added correctly, TypeScript config updated for Vite client types
Preserves existing env vars & configs	Yes	Existing config preserved, only additive changes
No syntax or type errors	Yes	Code is syntactically correct with proper TypeScript
Correct imports/exports	Yes	PostHogProvider and usePostHog imported correctly from @posthog/react
Minimal, focused changes	Yes	Changes are focused on PostHog integration only

Issues

• Error capture in render causes duplicates: The IIFE pattern (() => { posthog.capture(...); return <div>...</div> })() in the error state rendering will fire the capture event on every re-render, not just when the error first occurs. This should be moved to an onError callback or handled via useEffect. [CRITICAL]

Other completed criteria

• Environment variables documented in setup report
• Build configuration is valid
• Clear, readable code structure
• Consistent with existing patterns (hooks, mutations)
• Appropriate use of React hooks for PostHog integration

---

PostHog implementation: 4/5 ✅

Criteria	Result	Description
PostHog SDKs installed	Yes	posthog-js@^1.345.5 and @posthog/react@^1.7.1 added to dependencies
PostHog client initialized	Yes	PostHogProvider wraps the root component with api_host: '/ingest', capture_exceptions: true, defaults: '2025-11-30'
capture()	Yes	Multiple posthog.capture() calls for user actions (invoice CRUD, upgrade, team views)
identify()	Yes	posthog.identify(username, { username }) called on login
Error tracking	Yes	capture_exceptions: true enabled in provider options
Reverse proxy	Partial	Vite dev server proxy configured at /ingest → PostHog host, but no production proxy

Issues

• Reverse proxy dev-only: The server.proxy configuration in vite.config.js only applies during development. Production builds require a separate proxy solution (e.g., Vercel rewrites, nginx, or edge function). Without this, production deployments will not benefit from ad-blocker bypass. [MEDIUM]
• API key via env var: Correctly uses import.meta.env.VITE_PUBLIC_POSTHOG_KEY - API key not hardcoded [LOW - positive]

Other completed criteria

• posthog.reset() called on logout to clear user session
• ui_host configured for proper PostHog UI redirects
• debug: import.meta.env.DEV for development debugging
• No PII in event properties (username is used as distinct_id which is appropriate)

---

PostHog insights and events: 4/5 ✅

Filename	PostHog events	Description
src/main.tsx	user_logged_in	Captured on successful login with username property
src/main.tsx	user_logged_out	Captured on logout (both LoginComponent and ProfileComponent)
src/main.tsx	invoice_created	Captured on successful invoice creation with invoice_id, invoice_title
src/main.tsx	invoice_create_failed	Captured on invoice creation failure with error message
src/main.tsx	invoice_updated	Captured on successful invoice update with invoice_id, invoice_title
src/main.tsx	invoice_update_failed	Captured on invoice update failure with invoice_id, error
src/main.tsx	invoice_notes_toggled	Captured when user shows/hides notes with invoice_id, action
src/main.tsx	upgrade_clicked	Captured on upgrade button click with current_plan, username
src/main.tsx	team_member_viewed	Captured when viewing team member with user_id, user_name, user_role
src/main.tsx	capturedException	Automatic via capture_exceptions: true

Issues

• Missing page view tracking: No explicit `` tracking configured. While PostHog can auto-capture pageviews, TanStack Router's client-side navigation may not trigger them automatically. Consider adding router-level pageview tracking. [MEDIUM]
• Error events fire on re-render: As noted above, error capture events will fire multiple times due to placement in render body. [CRITICAL]

Other completed criteria

• Events represent real user actions and product flows
• Events enriched with relevant properties (IDs, titles, error messages, roles)
• Good coverage of conversion funnel (login → invoice creation → upgrade)
• Feature engagement tracked (notes toggle, team member views)
• Events can be used for funnel analysis and retention insights

---

Reviewed by wizard workbench PR evaluator