[CI] (c05eaeb) react-router/rrv7-starter

[wizard-ci-bot]

Automated wizard CI run

Trigger ID: c05eaeb
App: react-router/rrv7-starter
App directory: apps/react-router/rrv7-starter
Workbench branch: wizard-ci-c05eaeb-react-router-rrv7-starter
Wizard branch: main
Examples branch: main
PostHog (MCP) branch: master
Timestamp: 2026-01-14T16:18:11.243Z
Duration: 352.8s

[wizard-ci-bot]

The files don't exist locally, which means I need to evaluate this PR based on the diff content provided. Let me analyze the PR comprehensively using the diff information.

---

PR Evaluation Report

Summary

This PR integrates PostHog analytics into a React Router v7 starter application (CloutHub - a satirical fake influencer social network). The integration includes client-side initialization with PostHogProvider, server-side middleware for session correlation, error boundary tracking, and custom event capture across multiple user interactions including post likes, follower purchases, navigation, and profile follows.

Files changed	Lines added	Lines removed
18	+604	-141

Confidence score: 3/5 🤔

• Potential runtime error in ErrorBoundary: The posthog.captureException(error) call in root.tsx ErrorBoundary is called unconditionally without optional chaining (posthog?.captureException), which could throw if PostHog isn't initialized (e.g., during SSR or if PostHog fails to load). [CRITICAL]
• Missing environment variable documentation: The PR creates .env file mentioned in the setup report but the actual .env file is not included in the diff, and no .env.example file is provided for other developers. [MEDIUM]
• No reverse proxy configuration: Events are sent directly to PostHog servers (us.i.posthog.com), which can be blocked by ad blockers, reducing data collection reliability. [MEDIUM]

---

File changes

Filename	Score	Description
app/entry.client.tsx	4/5	New file with proper PostHog client initialization using PostHogProvider, API key from env vars, defaults config, and tracing headers
app/lib/posthog-middleware.ts	4/5	New server-side middleware for session/user tracking via headers; properly handles async context and shutdown
app/root.tsx	3/5	Adds middleware export and error tracking, but captureException lacks optional chaining which could cause runtime errors
app/components/PostCard.tsx	4/5	Adds like/unlike event tracking with relevant properties; formatting changes are benign
app/components/header.tsx	4/5	Adds navigation and buy followers button click tracking with location context
app/components/StatCard.tsx	5/5	Only formatting changes, no functional impact
app/routes/buy-followers.tsx	4/5	Adds purchase funnel events (package selection and purchase) with comprehensive properties
app/routes/home.tsx	4/5	Adds CTA click tracking with destination context
app/routes/profile.tsx	4/5	Adds user follow event with username and verified status
app/routes/feed.tsx	5/5	Only formatting changes
app/routes/analytics.tsx	5/5	Only formatting changes
app/hooks/use-hydrated.ts	5/5	Only semicolon formatting changes
app/lib/data/fake-data.ts	5/5	Only quote style formatting change
app/lib/utils/localStorage.ts	5/5	Only whitespace formatting changes
package.json	5/5	Adds required PostHog dependencies
pnpm-lock.yaml	5/5	Lock file updated with PostHog packages
react-router.config.ts	4/5	Enables v8_middleware future flag for middleware support
posthog-setup-report.md	4/5	Documentation file with events, env vars, and next steps

---

App sanity check: 3/5 ⚠️

Criteria	Result	Description
App builds and runs	Likely Yes	Dependencies added correctly, no obvious syntax errors
Preserves existing env vars & configs	Partial	Original configs preserved; .env mentioned but not in diff
No syntax or type errors	Likely Yes	TypeScript usage appears correct
Correct imports/exports	Yes	All PostHog imports use correct package names (@posthog/react, posthog-js, posthog-node)
Minimal, focused changes	No	Significant formatting changes across many files beyond PostHog integration

Issues

• ErrorBoundary runtime risk: In root.tsx, posthog.captureException(error) is called without optional chaining. During SSR or if PostHog fails to initialize, posthog from usePostHog() could be undefined, causing a runtime error in the error boundary. Fix: Change to posthog?.captureException(error). [CRITICAL]
• Excessive formatting changes: Many files have formatting/whitespace changes unrelated to PostHog (StatCard, analytics, feed, use-hydrated, localStorage, fake-data). This makes the diff harder to review and could introduce unintended changes. [MEDIUM]
• Missing .env file or .env.example: The setup report references environment variables but no .env or .env.example file is included in the diff for other developers. [MEDIUM]

Other completed criteria

• Consistent use of PostHog hooks across components
• Proper TypeScript types used for middleware context
• Build configuration updated correctly for middleware support

---

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 added to dependencies
PostHog client initialized	Yes	Initialized in entry.client.tsx with posthog.init() using env vars, wrapped with PostHogProvider
capture()	Yes	Multiple posthog?.capture() calls for user actions across components
identify()	No	No posthog.identify() calls for user identification
Error tracking	Partial	captureException in ErrorBoundary but missing optional chaining
Reverse proxy	No	Direct API host to us.i.posthog.com, no proxy configured

Issues

• Missing user identification: No posthog.identify() calls to link events to specific users. The app has a fakeUser but no identification is made, limiting ability to track user journeys. [CRITICAL]
• No reverse proxy: Events sent directly to PostHog servers (VITE_PUBLIC_POSTHOG_HOST) can be blocked by ad blockers. Should configure a reverse proxy route (e.g., /ingest/* proxying to PostHog). [MEDIUM]
• ErrorBoundary captureException unsafe: posthog.captureException(error) should use posthog?.captureException(error) to handle undefined PostHog instance. [CRITICAL]
• Server middleware may not be necessary: The middleware creates a new PostHog Node client per request but doesn't appear to be used for server-side event capture. The context is set but no server-side events are captured. [LOW]

Other completed criteria

• Proper defaults: '2025-11-30' configuration for latest API behavior
• __add_tracing_headers configured for localhost and host
• PostHogProvider correctly wraps the application
• Optional chaining used consistently in capture calls (posthog?.capture())
• Middleware includes proper shutdown handling

---

PostHog insights and events: 4/5 ✅

Filename	PostHog events	Description
PostCard.tsx	post_liked, post_unliked	Tracks engagement with posts including post_id, username, verified status, and new like count
header.tsx	navigation_clicked, buy_followers_header_clicked	Tracks navigation patterns with destination and location context
buy-followers.tsx	follower_package_selected, follower_package_purchased	Complete purchase funnel with package details, price, and price_per_follower
home.tsx	cta_clicked	Tracks CTA engagement with cta_name and destination
profile.tsx	user_followed	Tracks social engagement with followed_username and verified status
root.tsx	captureException	Captures errors from the ErrorBoundary

Issues

• No pageview tracking configuration: While autocapture may handle this, explicit pageview tracking for SPAs often requires additional configuration. [LOW]
• Missing conversion value tracking: follower_package_purchased captures price but could benefit from marking it as a conversion event with revenue tracking. [LOW]

Other completed criteria

• Events capture relevant properties (post_id, username, verified, price, location)
• Purchase funnel events enable conversion analysis
• Navigation events allow page flow analysis
• Engagement events (likes, follows) enable user behavior analysis
• Events are named with clear snake_case conventions
• No PII in event properties

---

Reviewed by wizard workbench PR evaluator