[CI] (6b2dc8b) react-router/rrv7-starter

[wizard-ci-bot]

Automated wizard CI run

Source: wizard-pr
Trigger ID: 6b2dc8b
App: react-router/rrv7-starter
App directory: apps/react-router/rrv7-starter
Workbench branch: wizard-ci-6b2dc8b-react-router-rrv7-starter
Wizard branch: release-please--branches--main--components--wizard
Context Mill branch: main
PostHog (MCP) branch: master
Timestamp: 2026-09-01T15:57:33.718Z
Duration: 409.4s

YARA Scanner

✓ 143 tool calls scanned, 0 violations detected

No violations: ✓ 143 clean scans

[wizard-ci-bot]

---

PR Evaluation Report

Summary

This PR integrates PostHog into a React Router v7 (framework mode) starter app. It adds posthog-js and @posthog/react as dependencies, creates a custom PostHogProvider that lazy-loads PostHog via dynamic imports in a useEffect, wraps the app in the provider, and adds four custom capture events across three components. Error tracking is configured via PostHogErrorBoundary and capture_exceptions. No user identification or reverse proxy is set up.

Files changed	Lines added	Lines removed
8	+139	-44

Confidence score: 5/5 🧙

• No identify() call: The app has no user identification. While the app uses fake data with no real auth, PostHog best practice requires identifying users when possible. Any future auth integration would need this added. [MEDIUM]
• No reverse proxy configured: No reverse proxy or rewrite rules are set up, meaning client-side events are susceptible to ad blockers. [MEDIUM]
• Non-standard initialization pattern: PostHog is lazily loaded via dynamic imports inside useEffect rather than being initialized in entry.client.tsx as recommended by the React Router v7 framework mode docs. This delays PostHog availability and means early user interactions could be missed. [MEDIUM]

---

File changes

Filename	Score	Description
app/components/posthog-provider.tsx	3/5	New custom provider that lazy-loads PostHog via dynamic imports; functional but deviates from recommended pattern
app/root.tsx	4/5	Wraps app content with PostHogProvider; re-indentation is the only structural change
app/components/PostCard.tsx	5/5	Adds post_like_toggled capture with relevant properties in event handler
app/routes/buy-followers.tsx	5/5	Adds follower_package_selected and follower_purchase_completed captures with enriched properties
app/routes/profile.tsx	4/5	Adds follow_back_toggled capture; also refactors FollowButton to remove unused username prop
.env.example	5/5	Documents new PostHog env vars
env.d.ts	5/5	Adds TypeScript types for new env vars
package.json	5/5	Adds posthog-js and @posthog/react dependencies

---

App sanity check ⚠️

Criteria	Result	Description
App builds and runs	Yes	Dependencies added, imports valid, no syntax errors. Existing vite.config bundles all in production (noExternal: true) so SSR build should work
Preserves existing env vars & configs	Yes	Existing VITE_SITE_URL preserved; vite.config.ts untouched
No syntax or type errors	Yes	All TypeScript types correct, optional chaining used consistently
Correct imports/exports	Yes	usePostHog from @posthog/react, posthog-js default import are correct
Minimal, focused changes	Yes	All changes relate to PostHog; the FollowButton refactor is a minor cleanup related to the capture integration
Pre-existing issues	None	-

Issues

• Dev mode SSR externalization: The vite.config.ts has noExternal: ['gsap'] in dev mode, but the PostHog docs for React Router v7 framework mode recommend adding 'posthog-js' and '@posthog/react' to noExternal. Static imports of usePostHog in route components are processed during SSR. This likely works because @posthog/react doesn't access browser globals at import time, but it deviates from the docs. [LOW]

Other completed criteria

• Environment variables documented in .env.example
• TypeScript types added in env.d.ts
• Build configuration valid — package.json has correct dependency entries

---

PostHog implementation ⚠️

Criteria	Result	Description
PostHog SDKs installed	Yes	posthog-js ^1.424.0 and @posthog/react ^1.10.5 added to package.json
PostHog client initialized	Yes	posthog.init() called with api_host, defaults: '2026-05-30', and capture_exceptions config. Uses dynamic imports in custom provider
capture()	Yes	Four meaningful capture calls across three components
identify()	No	No posthog.identify() call anywhere in the codebase. No posthog.reset() on logout either
Error tracking	Yes	PostHogErrorBoundary wraps the app; capture_exceptions configured with capture_unhandled_errors: true and capture_unhandled_rejections: true
Reverse proxy	No	No reverse proxy, rewrites, or middleware configured

Issues

• Missing identify(): No posthog.identify() call exists. Even though this demo app uses fake data, the recommended pattern is to identify users when auth data is available. The fakeUser in the profile page could serve as a placeholder for where identify() should be called. [MEDIUM]
• Missing reverse proxy: No reverse proxy configured. For a client-only app using posthog-js, a reverse proxy (e.g., via Vite rewrites or the managed proxy) is recommended to prevent ad blockers from intercepting events. [MEDIUM]
• Non-standard lazy initialization: PostHog is loaded via dynamic import() inside a useEffect, meaning it is not available on the first render. Early user interactions before the async load completes will be silently dropped. The React Router v7 framework mode docs recommend initializing in entry.client.tsx for immediate availability. [MEDIUM]

Other completed criteria

• API key loaded from environment variable (VITE_PUBLIC_POSTHOG_PROJECT_TOKEN)
• API host loaded from environment variable (VITE_PUBLIC_POSTHOG_HOST)
• Helpful dev-mode error thrown when env vars are missing
• Optional chaining (posthog?.capture) used consistently to guard against uninitialized state

---

PostHog insights and events ✅

Filename	PostHog events	Description
app/components/PostCard.tsx	post_like_toggled	Tracks when a user likes/unlikes a post with post_id and liked state
app/routes/buy-followers.tsx	follower_package_selected, follower_purchase_completed	Tracks package selection and purchase completion with amount, bonus, total, and price properties — forms a natural funnel
app/routes/profile.tsx	follow_back_toggled	Tracks follow/unfollow actions with following boolean state
app/components/posthog-provider.tsx	captureException (via ErrorBoundary)	Captures unhandled errors and rejections via PostHogErrorBoundary and capture_exceptions config

Issues

No event quality issues.

Other completed criteria

• Events represent real user actions (like, select, purchase, follow)
• Events enable product insights — follower_package_selected → follower_purchase_completed is a clear funnel
• Events include relevant properties (post_id, package_amount, price, totals, states)
• No PII in event properties
• Event names are descriptive and follow consistent snake_case convention

---

Reviewed by wizard workbench PR evaluator