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

[wizard-ci-bot]

Automated wizard CI run

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

YARA Scanner

✓ 136 tool calls scanned, 0 violations detected

No violations: ✓ 136 clean scans

[wizard-ci-bot]

---

PR Evaluation Report

Summary

This PR integrates PostHog into a React Router v7 framework-mode e-commerce ("shopper") app. It adds posthog-js and @posthog/react as dependencies, initializes PostHog in entry.client.tsx with a PostHogProvider and PostHogErrorBoundary, and adds well-structured capture() calls across the shopping flow (add to cart, remove, update quantity, checkout, order placed). Environment variables are documented in .env.example.

Files changed	Lines added	Lines removed
7	+101	-0

Confidence score: 4/5 👍

• Missing ssr.noExternal in vite.config.ts: React Router v7 framework mode docs explicitly require adding posthog-js and @posthog/react to ssr.noExternal in vite.config.ts to avoid SSR errors. This omission can cause build or runtime failures during server-side rendering. [MEDIUM]
• No identify() call: The app has no user identification anywhere. The checkout form collects name and email but never calls posthog.identify(), so all events remain anonymous and cannot be linked to users across sessions. [MEDIUM]
• No reverse proxy configured: No reverse proxy is set up, meaning client-side events are more likely to be blocked by ad blockers. [MEDIUM]

---

File changes

Filename	Score	Description
apps/basic-integration/react-router/shopper/.env.example	5/5	Adds PostHog env vars VITE_PUBLIC_POSTHOG_PROJECT_TOKEN and VITE_PUBLIC_POSTHOG_HOST
apps/basic-integration/react-router/shopper/app/entry.client.tsx	4/5	New file initializing PostHog with PostHogProvider and PostHogErrorBoundary; good dev-mode validation; graceful fallback when unconfigured
apps/basic-integration/react-router/shopper/app/context/CartContext.tsx	5/5	Adds three well-structured capture calls for cart actions with rich properties
apps/basic-integration/react-router/shopper/app/routes/cart.tsx	5/5	Adds checkout_started event in click handler with cart metrics
apps/basic-integration/react-router/shopper/app/routes/checkout.tsx	4/5	Adds order_placed capture; no identify call despite having user data
apps/basic-integration/react-router/shopper/app/routes/products.tsx	5/5	Adds category filter tracking in event handler
apps/basic-integration/react-router/shopper/package.json	5/5	Adds posthog-js and @posthog/react dependencies

---

App sanity check ⚠️

Criteria	Result	Description
App builds and runs	No	Missing ssr.noExternal config in vite.config.ts may cause SSR errors in framework mode
Preserves existing env vars & configs	Yes	No existing code removed; cart functionality intact
No syntax or type errors	Yes	All syntax is valid TypeScript/TSX
Correct imports/exports	Yes	All imports from posthog-js and @posthog/react are correct
Minimal, focused changes	Yes	Only PostHog-related additions
Pre-existing issues	None	—

Issues

• Missing ssr.noExternal in vite.config.ts: React Router v7 framework mode requires ssr: { noExternal: ['posthog-js', '@posthog/react'] } in vite.config.ts to prevent Vite from externalizing these packages during SSR bundling. Without this, the app may fail with SSR import errors. Add the config to vite.config.ts. [MEDIUM]

Other completed criteria

• Environment variables documented in .env.example
• Graceful fallback when PostHog env vars are missing (app renders without PostHog)
• Dev-mode throws helpful errors when env vars are missing

---

PostHog implementation ⚠️

Criteria	Result	Description
PostHog SDKs installed	Yes	posthog-js ^1.424.0 and @posthog/react ^1.10.5 in package.json
PostHog client initialized	Yes	posthog.init() in entry.client.tsx with api_host and defaults: "2026-05-30"
capture()	Yes	6 meaningful capture calls across cart context and route components
identify()	No	No identify call anywhere despite checkout form collecting name/email
Error tracking	Yes	PostHogErrorBoundary wraps the HydratedRouter in entry.client.tsx
Reverse proxy	No	No reverse proxy configured via rewrites or middleware

Issues

• No user identification: The checkout form collects firstName, lastName, and email but never calls posthog.identify(). All events are anonymous, making it impossible to track users across sessions or link to person profiles. Add posthog.identify(userId, { email, name }) after form submission or login. [MEDIUM]
• No reverse proxy: No rewrite rules or middleware proxy configured. Client-side PostHog requests go directly to us.i.posthog.com and may be blocked by ad blockers. Configure a reverse proxy via React Router rewrites or a managed proxy. [MEDIUM]

Other completed criteria

• API key loaded from environment variables (not hardcoded)
• Host correctly configured from environment variables
• PostHogErrorBoundary provides error tracking
• Conditional initialization handles missing config gracefully

---

PostHog insights and events ✅

Filename	PostHog events	Description
app/context/CartContext.tsx	product_added_to_cart, cart_item_removed, cart_quantity_updated	Tracks all cart mutations with product_id, category, quantity, and price properties
app/routes/cart.tsx	checkout_started	Captures checkout initiation with cart_item_count and cart_value
app/routes/checkout.tsx	order_placed	Captures completed orders with order_item_count and order_value (includes tax)
app/routes/products.tsx	product_category_filtered	Tracks category filter selections
app/entry.client.tsx	capturedExceptions (via PostHogErrorBoundary)	Automatic exception capture for unhandled React errors

Issues

• No issues with event quality. Events form a complete e-commerce funnel (browse → filter → add to cart → modify cart → checkout → order).

Other completed criteria

• Events represent real user actions mapping to actual shopping flows
• Events enable product insights (funnel from browse → add to cart → checkout → purchase)
• Events include rich contextual properties (product_id, category, quantities, values)
• No PII in event properties
• Consistent snake_case naming convention throughout

---

Reviewed by wizard workbench PR evaluator