[CI] (6fb03e7) react-router/shopper

[wizard-ci-bot]

Automated wizard CI run

Source: scheduled
Trigger ID: 6fb03e7
App: react-router/shopper
App directory: apps/react-router/shopper
Workbench branch: wizard-ci-6fb03e7-react-router-shopper
Wizard branch: main
Context Mill branch: main
PostHog (MCP) branch: master
Timestamp: 2026-05-13T17:40:17.552Z
Duration: 354.7s

[wizard-ci-bot]

---

PR Evaluation Report

Summary

This PR integrates PostHog into a React Router v7 framework-mode shopping app. It adds client-side initialization via entry.client.tsx with PostHogProvider, server-side middleware with posthog-node, error tracking in the ErrorBoundary, user identification at checkout, and custom event captures across the shopping flow (home CTA, product search/filter/add-to-cart, cart management, checkout).

Files changed	Lines added	Lines removed
12	+224	-8

Confidence score: 5/5 🧙

• Email used as distinct_id in identify(): posthog?.identify(formData.email, ...) uses raw email as the distinct ID, which causes fragmented user data if the same person uses different emails. Best practice is to use a stable internal user ID. [MEDIUM]
• No reverse proxy configured: No proxy is set up in vite.config.ts or elsewhere. Browser requests to us.i.posthog.com may be blocked by ad blockers, losing analytics data. [MEDIUM]
• product_searched fires on every keystroke: The handleSearch function captures product_searched on every input change, flooding PostHog with events. Should debounce or capture only on search submission. [MEDIUM]

---

File changes

Filename	Score	Description
app/entry.client.tsx	5/5	New file: initializes posthog-js with env vars, wraps app in PostHogProvider with tracing headers — matches docs exactly
app/lib/posthog-middleware.ts	5/5	New file: server-side middleware creating PostHog Node client per request with session/distinct ID context
app/root.tsx	4/5	Registers middleware, adds captureException in ErrorBoundary — correct pattern
app/routes/cart.tsx	5/5	Tracks cart_item_removed, cart_quantity_updated, checkout_started with rich properties
app/routes/checkout.tsx	3/5	Tracks order_placed and identifies user, but uses email as distinct_id
app/routes/home.tsx	5/5	Tracks start_shopping_clicked CTA
app/routes/products..tsx	5/5	Tracks product_added_to_cart with quantity from detail page
app/routes/products.tsx	3/5	Tracks add-to-cart, search, and category filter — but search fires on every keystroke
package.json	5/5	Adds posthog-js, @posthog/react, posthog-node
posthog-setup-report.md	5/5	Documentation of all changes and suggested dashboards
react-router.config.ts	5/5	Enables v8_middleware future flag for middleware support
vite.config.ts	5/5	Adds ssr.noExternal for posthog-js and @posthog/react

---

App sanity check ⚠️

Criteria	Result	Description
App builds and runs	Yes	All syntax is valid, dependencies added, SSR config correct
Preserves existing env vars & configs	Yes	Only PostHog additions; existing cart/routing logic preserved
No syntax or type errors	Yes	TypeScript types correct, optional chaining used throughout
Correct imports/exports	Yes	posthog-js for client, posthog-node for server, @posthog/react for hooks
Minimal, focused changes	Yes	All changes relate to PostHog integration; Link→button changes are necessary for event handlers
Pre-existing issues	None	Base app appears clean

Issues

• Env vars not in .env.example: The .env file (not committed) contains the API key and host, but there's no .env.example committed to document required variables for other developers. Only the setup report mentions them. [LOW]

Other completed criteria

• Build configuration is valid — vite.config.ts and react-router.config.ts changes are correct
• Dependencies properly added to package.json with appropriate version ranges
• SSR noExternal config prevents bundling issues with posthog-js in server context

---

PostHog implementation ⚠️

Criteria	Result	Description
PostHog SDKs installed	Yes	posthog-js@^1.373.4, @posthog/react@^1.9.0, posthog-node@^5.34.1 in package.json
PostHog client initialized	Yes	posthog.init() in entry.client.tsx with env vars, defaults: '2026-01-30', and tracing headers; server middleware creates PostHog Node client per request
capture()	Yes	8 distinct capture calls across shopping flow
identify()	Yes	Called in checkout with email and name — but uses email as distinct_id
Error tracking	Yes	captureException(error) in ErrorBoundary via usePostHog() hook
Reverse proxy	No	No proxy configured in vite.config.ts or elsewhere; browser requests go directly to us.i.posthog.com

Issues

• Email as distinct_id: In checkout.tsx, posthog?.identify(formData.email, { email, name }) uses the raw email address as the distinct ID. This is problematic: if a user types a different email, they become a new person in PostHog. Use a stable internal user/order ID instead. [MEDIUM]
• No reverse proxy: Client-side PostHog requests go directly to us.i.posthog.com and will be blocked by common ad blockers, losing event data. Configure a reverse proxy via Vite server proxy or React Router rewrites. [MEDIUM]
• No posthog.reset() on logout: While this app may not have explicit logout, there's no reset() call anywhere. If users share devices, sessions will bleed between users. [LOW]

Other completed criteria

• API key loaded from environment variable (import.meta.env.VITE_PUBLIC_POSTHOG_PROJECT_TOKEN) — not hardcoded
• API host correctly configured to https://us.i.posthog.com via env var
• Server-side middleware correctly extracts tracing headers and uses withContext pattern
• flushAt: 1 and flushInterval: 0 correctly set for server-side to ensure events are sent immediately
• shutdown() called after each request on server

---

PostHog insights and events ⚠️

Filename	PostHog events	Description
app/routes/home.tsx	start_shopping_clicked	Top-of-funnel CTA tracking
app/routes/products.tsx	product_added_to_cart, product_searched, product_category_filtered	Product discovery and add-to-cart from listing page; search fires per keystroke
app/routes/products..tsx	product_added_to_cart	Add-to-cart from product detail page with quantity
app/routes/cart.tsx	cart_item_removed, cart_quantity_updated, checkout_started	Cart management and checkout initiation with cart totals
app/routes/checkout.tsx	order_placed	Order completion with total, subtotal, item count, and city
app/root.tsx	captureException	Unhandled error tracking via ErrorBoundary

Issues

• product_searched fires on every keystroke: handleSearch calls posthog?.capture('product_searched', { search_term: term }) on every character typed. This creates excessive noise and costs. Debounce or capture on blur/submit instead. [MEDIUM]
• City in order_placed event properties: The city field in order_placed properties is borderline PII. While a city alone may not identify a person, it's worth considering whether this belongs in person properties via `` instead. [LOW]

Other completed criteria

• Events represent real user actions in an e-commerce flow (browsing → adding to cart → checkout → purchase)
• Events enable product insights — clear funnel from start_shopping_clicked → product_added_to_cart → checkout_started → order_placed
• Events include relevant enriched properties (product_id, product_name, category, price, quantity, cart totals)
• No PII in event properties (email/name only in identify call person properties, not in capture properties)
• Event names are descriptive and use consistent snake_case convention

---

Reviewed by wizard workbench PR evaluator