[CI] (bd496c4) react-router/react-router-v7-project

[wizard-ci-bot]

Automated wizard CI run

Trigger ID: bd496c4
App: react-router/react-router-v7-project
App directory: apps/react-router/react-router-v7-project
Workbench branch: wizard-ci-bd496c4-react-router-react-router-v7-project
Wizard branch: main
Examples branch: rearchitect-generator
PostHog (MCP) branch: master
Timestamp: 2026-01-14T16:18:15.315Z
Duration: 352.4s

[wizard-ci-bot]

Now I have all the information needed to provide a comprehensive PR evaluation. Let me generate the review:

---

PR Evaluation Report

Summary

This PR integrates PostHog analytics into a React Router v7 "Country Explorer" application. It adds client-side tracking via posthog-js and @posthog/react, server-side middleware using posthog-node, user identification on auth flows, error tracking in the ErrorBoundary, and comprehensive event capture for user interactions (claiming/liking/visiting countries, search, filters, CTA clicks).

Files changed	Lines added	Lines removed
13	+829	-24

Confidence score: 3/5 🤔

• Invalid defaults property in PostHog init: The defaults: '2025-11-30' config option in entry.client.tsx is not a valid PostHog configuration option. This likely represents a misunderstanding of the API and should be removed or replaced with a valid property. [CRITICAL]
• ErrorBoundary calls usePostHog() hook unconditionally during render: The ErrorBoundary in root.tsx calls posthog.captureException(error) directly in the render body (outside useEffect), which will fire on every re-render and may cause issues. Error tracking should be wrapped in a useEffect. [CRITICAL]
• Server middleware creates new PostHog instance per request but never uses it for events: The posthog-middleware.ts creates a PostHog server instance and attaches it to context, but no route actually consumes it. The middleware adds overhead without benefit. [MEDIUM]
• Reverse proxy only configured for dev server, not production: The /ingest proxy in vite.config.ts only applies to the Vite dev server. Production builds won't have this proxy, so ad-blockers will still block PostHog in production. [MEDIUM]
• Search tracking fires on every keystroke: The trackSearch function in countries.tsx fires on every character typed (despite the comment saying "debounced"), potentially creating excessive events. [MEDIUM]

---

File changes

Filename	Score	Description
app/entry.client.tsx	3/5	PostHog client initialization with PostHogProvider wrapping the app. Contains invalid defaults config property.
app/lib/posthog-middleware.ts	3/5	Server-side middleware for PostHog context. Well-structured but unused by any routes.
app/root.tsx	2/5	Adds middleware export and error tracking, but captureException called during render instead of in useEffect.
app/routes/countries.tsx	4/5	Comprehensive event tracking for country interactions. Good event properties. Search tracking could be debounced.
app/routes/home.tsx	5/5	Clean CTA click tracking with appropriate event properties.
app/routes/login.tsx	5/5	Proper user identification and login event tracking with success/failure paths.
app/routes/profile.tsx	5/5	Clean logout tracking with posthog.reset() to clear user session.
app/routes/signup.tsx	5/5	Proper user identification and signup tracking with exception handling.
package.json	5/5	Correct PostHog dependencies added: posthog-js, posthog-node, @posthog/react.
react-router.config.ts	5/5	Correctly enables v8_middleware future flag for server middleware support.
vite.config.ts	4/5	SSR noExternal config and dev proxy setup. Proxy won't work in production.
posthog-setup-report.md	4/5	Good documentation but claims .env was created which isn't in the diff.
package-lock.json	5/5	Lock file properly updated with PostHog dependencies.

---

App sanity check: 3/5 ⚠️

Criteria	Result	Description
App builds and runs	Likely	Dependencies installed, configs valid, but runtime issues possible due to ErrorBoundary bug
Preserves existing env vars & configs	Yes	Existing configs preserved, new PostHog configs added
No syntax or type errors	Mostly	Invalid defaults option may cause runtime warning; TypeScript should compile
Correct imports/exports	Yes	All imports are correct and modules properly exported
Minimal, focused changes	Yes	Changes are focused on PostHog integration with minimal scope creep

Issues

• ErrorBoundary side effect in render: posthog.captureException(error) is called directly in the render function body (lines 69-70 in root.tsx). This will execute on every re-render, not just when an error occurs. Should be wrapped in useEffect(() => { posthog.captureException(error); }, [error, posthog]). [CRITICAL]
• Invalid PostHog config option: defaults: '2025-11-30' in entry.client.tsx is not a valid PostHog init option. This may cause runtime warnings or be silently ignored. Remove this line. [CRITICAL]
• Missing .env file in diff: The posthog-setup-report.md claims a .env file was created, but it's not included in the changed files list. Environment variables may not be properly configured. [MEDIUM]

Other completed criteria

• Clear, readable code structure
• Consistent with existing patterns (handlers, hooks usage)
• Type imports correctly used
• No unnecessary file modifications

---

PostHog implementation: 3/5 ⚠️

Criteria	Result	Description
PostHog SDKs installed	Yes	posthog-js@^1.321.1, posthog-node@^5.21.0, @posthog/react@^1.5.2 in package.json
PostHog client initialized	Partial	Client init in entry.client.tsx with invalid defaults option; uses env vars for key/host
capture()	Yes	Multiple capture calls throughout routes for user actions
Identify()	Yes	User identification on login and signup with userId, username, email
Error tracking	Partial	captureException used in ErrorBoundary (incorrectly) and signup catch block
Reverse proxy	Partial	Dev-only proxy configured in vite.config.ts; no production proxy

Issues

• Reverse proxy is dev-only: The /ingest proxy in vite.config.ts is under server.proxy which only applies during vite dev. Production builds served via react-router-serve won't have this proxy, meaning ad-blockers will still block PostHog requests in production. Need server-side proxy setup (e.g., Express middleware, Cloudflare Worker, or nginx). [CRITICAL]
• Invalid PostHog init configuration: defaults: '2025-11-30' is not a valid PostHog option. Remove or replace with actual valid options like capture_pageview: true. [CRITICAL]
• Server middleware unused: posthog-middleware.ts creates server PostHog instance and attaches to context, but no route handlers use context.posthog to capture server-side events. This adds unnecessary overhead. [MEDIUM]
• No explicit pageview tracking: PostHog auto-captures pageviews by default, but this isn't explicitly configured. Consider adding capture_pageview: true or implementing manual pageview tracking with React Router navigation. [LOW]

Other completed criteria

• PostHogProvider properly wraps the app
• Session tracking with __add_tracing_headers configured
• User reset on logout with posthog.reset()
• Environment variables used for API key and host
• SSR noExternal configured to prevent bundling issues

---

PostHog insights and events: 4/5 ✅

Filename	PostHog events	Description
signup.tsx	user_signed_up, signup_failed, captureException	Full auth funnel tracking with identify call and error handling
login.tsx	user_logged_in, login_failed	Login success/failure with user identification
profile.tsx	user_logged_out	Logout tracking with posthog.reset() for session management
countries.tsx	country_claimed, country_liked, country_visited, countries_search, countries_filter_region, countries_load_failed, captureException	Comprehensive engagement tracking with rich properties
home.tsx	cta_explore_clicked	CTA conversion tracking with location property
root.tsx	captureException	Error boundary exception capture (but incorrectly implemented)

Issues

• Search tracking too granular: countries_search fires on every keystroke once 2+ characters are typed. This will create many events for a single search action. Should debounce (e.g., 500ms) or track on blur/submit. [MEDIUM]
• No unclaim/unlike/unvisit tracking: Country actions only track when first added, not when toggled off. Consider tracking removal actions for complete engagement picture. [LOW]

Other completed criteria

• Events capture real user actions (auth, engagement, navigation)
• Events enriched with relevant properties (country_name, country_region, totals, reasons)
• Failure events include reason codes for debugging
• User identification includes username and email for cohort analysis
• Events designed to support funnels (signup → country_claimed)
• No PII leaked in event properties (email only in identify, not in events)

---

Reviewed by wizard workbench PR evaluator