wizard-ci: react-router/shopper

Author: wizard-ci[bot]

apps/react-router/shopper/app/entry.client.tsx

@@ -0,0 +1,23 @@
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+import { HydratedRouter } from "react-router/dom";
+
+import posthog from 'posthog-js';
+import { PostHogProvider } from '@posthog/react'
+
+posthog.init(import.meta.env.VITE_PUBLIC_POSTHOG_KEY, {
+  api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
+  defaults: '2025-11-30',
+  __add_tracing_headers: [window.location.host, 'localhost'],
+});
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <PostHogProvider client={posthog}>
+      <StrictMode>
+        <HydratedRouter />
+      </StrictMode>
+    </PostHogProvider>,
+  );
+});

apps/react-router/shopper/app/lib/posthog-middleware.ts

@@ -0,0 +1,29 @@
+import { PostHog } from "posthog-node";
+import type { RouterContextProvider } from "react-router";
+import type { Route } from "../+types/root";
+
+export interface PostHogContext extends RouterContextProvider {
+  posthog?: PostHog;
+}
+
+export const posthogMiddleware: Route.MiddlewareFunction = async ({ request, context }, next) => {
+  const posthog = new PostHog(process.env.VITE_PUBLIC_POSTHOG_KEY!, {
+    host: process.env.VITE_PUBLIC_POSTHOG_HOST!,
+    flushAt: 1,
+    flushInterval: 0,
+  });
+
+  const sessionId = request.headers.get('X-POSTHOG-SESSION-ID');
+  const distinctId = request.headers.get('X-POSTHOG-DISTINCT-ID');
+
+  (context as PostHogContext).posthog = posthog;
+
+  const response = await posthog.withContext(
+    { sessionId: sessionId ?? undefined, distinctId: distinctId ?? undefined },
+    next
+  );
+
+  await posthog.shutdown().catch(() => {});
+
+  return response;
+};

apps/react-router/shopper/app/root.tsx

@@ -1,3 +1,4 @@
+import { usePostHog } from '@posthog/react';
 import {
   isRouteErrorResponse,
   Links,
@@ -11,6 +12,11 @@ import type { Route } from "./+types/root";
 import "./app.css";
 import { CartProvider } from "./context/CartContext";
 import Navbar from "./components/Navbar";
+import { posthogMiddleware } from "./lib/posthog-middleware";
+
+export const middleware: Route.MiddlewareFunction[] = [
+  posthogMiddleware,
+];
 
 export const links: Route.LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },
@@ -59,6 +65,9 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
   let details = "An unexpected error occurred.";
   let stack: string | undefined;
 
+  const posthog = usePostHog();
+  posthog?.captureException(error);
+
   if (isRouteErrorResponse(error)) {
     message = error.status === 404 ? "404" : "Error";
     details =

apps/react-router/shopper/app/routes/cart.tsx

@@ -1,15 +1,44 @@
 import { Link } from "react-router";
 import { useCart, type CartItem } from "../context/CartContext";
+import { usePostHog } from "@posthog/react";
 
 export default function Cart() {
   const { cart, removeFromCart, updateQuantity, getCartTotal } = useCart();
+  const posthog = usePostHog();
 
   const handleRemoveFromCart = (item: CartItem) => {
     removeFromCart(item.id);
+    posthog?.capture("product_removed_from_cart", {
+      product_id: item.id,
+      product_name: item.name,
+      product_price: item.price,
+      product_category: item.category,
+      quantity: item.quantity,
+    });
   };
 
   const handleUpdateQuantity = (item: CartItem, newQuantity: number) => {
     updateQuantity(item.id, newQuantity);
+    posthog?.capture("cart_quantity_updated", {
+      product_id: item.id,
+      product_name: item.name,
+      old_quantity: item.quantity,
+      new_quantity: newQuantity,
+    });
+  };
+
+  const handleCheckoutClick = () => {
+    posthog?.capture("checkout_started", {
+      cart_total: getCartTotal(),
+      cart_items_count: cart.length,
+    });
+  };
+
+  const handleContinueShoppingClick = () => {
+    posthog?.capture("continue_shopping_clicked", {
+      cart_total: getCartTotal(),
+      cart_items_count: cart.length,
+    });
   };
 
   if (cart.length === 0) {
@@ -154,13 +183,15 @@ export default function Cart() {
 
             <Link
               to="/checkout"
+              onClick={handleCheckoutClick}
               className="block w-full bg-indigo-600 text-white py-3 rounded-lg text-center font-semibold hover:bg-indigo-700 transition"
             >
               Proceed to Checkout
             </Link>
 
             <Link
               to="/products"
+              onClick={handleContinueShoppingClick}
               className="block w-full mt-3 bg-gray-200 text-gray-900 py-3 rounded-lg text-center font-semibold hover:bg-gray-300 transition"
             >
               Continue Shopping

apps/react-router/shopper/app/routes/checkout.tsx

@@ -1,11 +1,13 @@
 import { useState } from "react";
 import { useNavigate } from "react-router";
 import { useCart } from "../context/CartContext";
+import { usePostHog } from "@posthog/react";
 
 export default function Checkout() {
   const { cart, getCartTotal, clearCart } = useCart();
   const navigate = useNavigate();
   const [isProcessing, setIsProcessing] = useState(false);
+  const posthog = usePostHog();
   const [formData, setFormData] = useState({
     fullName: "",
     email: "",
@@ -43,6 +45,30 @@ export default function Checkout() {
     setIsProcessing(true);
 
     setTimeout(() => {
+      const orderTotal = getCartTotal() * 1.1;
+      const itemCount = cart.reduce((sum, item) => sum + item.quantity, 0);
+
+      posthog?.capture("order_completed", {
+        order_total: orderTotal,
+        order_items_count: itemCount,
+        order_subtotal: getCartTotal(),
+        order_tax: getCartTotal() * 0.1,
+        products: cart.map((item) => ({
+          product_id: item.id,
+          product_name: item.name,
+          product_price: item.price,
+          quantity: item.quantity,
+        })),
+      });
+
+      // Identify user with email from checkout form
+      if (formData.email) {
+        posthog?.identify(formData.email, {
+          email: formData.email,
+          name: formData.fullName,
+        });
+      }
+
       clearCart();
       setIsProcessing(false);
       alert("Order placed successfully! Thank you for your purchase.");

apps/react-router/shopper/app/routes/home.tsx

@@ -1,5 +1,6 @@
 import { Link } from "react-router";
 import type { Route } from "./+types/home";
+import { usePostHog } from "@posthog/react";
 
 export function meta({}: Route.MetaArgs) {
   return [
@@ -9,6 +10,12 @@ export function meta({}: Route.MetaArgs) {
 }
 
 export default function Home() {
+  const posthog = usePostHog();
+
+  const handleStartShoppingClick = () => {
+    posthog?.capture("start_shopping_clicked");
+  };
+
   return (
     <div className="container mx-auto px-4 py-16">
       <div className="text-center max-w-3xl mx-auto">
@@ -20,6 +27,7 @@ export default function Home() {
         </p>
         <Link
           to="/products"
+          onClick={handleStartShoppingClick}
           className="inline-block bg-indigo-600 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-indigo-700 transition shadow-lg hover:shadow-xl"
         >
           Start Shopping

apps/react-router/shopper/app/routes/products.$productId.tsx

@@ -3,6 +3,7 @@ import type { Route } from "./+types/products.$productId";
 import { getProductById } from "../data/products";
 import { useCart } from "../context/CartContext";
 import { useState } from "react";
+import { usePostHog } from "@posthog/react";
 
 export async function clientLoader({ params }: Route.LoaderArgs) {
   const productId = parseInt(params.productId);
@@ -19,11 +20,19 @@ export default function ProductDetail({ loaderData }: Route.ComponentProps) {
   const { product } = loaderData;
   const { addToCart } = useCart();
   const [quantity, setQuantity] = useState(1);
+  const posthog = usePostHog();
 
   const handleAddToCart = () => {
     for (let i = 0; i < quantity; i++) {
       addToCart(product);
     }
+    posthog?.capture("product_added_to_cart", {
+      product_id: product.id,
+      product_name: product.name,
+      product_price: product.price,
+      product_category: product.category,
+      quantity: quantity,
+    });
   };
 
   return (

apps/react-router/shopper/app/routes/products.tsx

@@ -3,6 +3,7 @@ import type { Route } from "./+types/products";
 import { getProducts, getCategories, type Product } from "../data/products";
 import { useState } from "react";
 import { useCart } from "../context/CartContext";
+import { usePostHog } from "@posthog/react";
 
 export async function clientLoader() {
   return {
@@ -16,17 +17,32 @@ export default function Products({ loaderData }: Route.ComponentProps) {
   const { addToCart } = useCart();
   const [selectedCategory, setSelectedCategory] = useState<string>("");
   const [searchTerm, setSearchTerm] = useState<string>("");
+  const posthog = usePostHog();
 
   const handleAddToCart = (product: Product) => {
     addToCart(product);
+    posthog?.capture("product_added_to_cart", {
+      product_id: product.id,
+      product_name: product.name,
+      product_price: product.price,
+      product_category: product.category,
+    });
   };
 
   const handleSearch = (term: string) => {
     setSearchTerm(term);
+    if (term.trim()) {
+      posthog?.capture("product_searched", {
+        search_term: term,
+      });
+    }
   };
 
   const handleCategoryChange = (category: string) => {
     setSelectedCategory(category);
+    posthog?.capture("category_filtered", {
+      category: category || "All Categories",
+    });
   };
 
   const filteredProducts = products.filter((product) => {