chore: ab-testing clean up and patches

Author: wackerow

app/api/ab-config/route.ts

@@ -1,5 +1,7 @@
 import { NextResponse } from "next/server"
 
+import { IS_PREVIEW_DEPLOY } from "@/lib/utils/env"
+
 type MatomoExperiment = {
   idexperiment: string
   name: string
@@ -21,31 +23,37 @@ type ABTestConfig = {
   }>
 }
 
-function isExperimentActive(experiment: MatomoExperiment): boolean {
+const isExperimentActive = (experiment: MatomoExperiment): boolean => {
   const now = new Date()
 
   // Check start date - if scheduled for future, not active yet
   if (experiment.start_date) {
     const startDate = new Date(experiment.start_date)
-    if (now < startDate) {
-      return false // Not started yet
-    }
+    if (now < startDate) return false
   }
 
   // Check end date - if past end date, not active anymore
   if (experiment.end_date) {
     const endDate = new Date(experiment.end_date)
-    if (now > endDate) {
-      return false // Already ended
-    }
+    if (now > endDate) return false
   }
 
   // If no scheduling constraints, enabled if created or running
-  // If within time window, enabled if running
   return ["created", "running"].includes(experiment.status)
 }
 
+const getPreviewConfig = () => ({
+  AppTest: {
+    id: "preview",
+    enabled: true,
+    variants: [{ name: "Original", weight: 100 }],
+  },
+})
+
 export async function GET() {
+  // Preview mode: Show menu with original default
+  if (IS_PREVIEW_DEPLOY) return NextResponse.json(getPreviewConfig())
+
   try {
     const matomoUrl = process.env.NEXT_PUBLIC_MATOMO_URL
     const apiToken = process.env.MATOMO_API_TOKEN
@@ -57,95 +65,65 @@ export async function GET() {
       )
     }
 
-    // Get the site ID from environment
-    const siteId = process.env.NEXT_PUBLIC_MATOMO_SITE_ID || "1"
-
-    // Try different API methods for A/B testing
-    const apiMethods = [
-      "ExperimentsPlatform.getExperiments",
-      "AbTesting.getExperiments",
-      "Experiments.getExperiments",
-      `AbTesting.getAllExperiments&idSite=${siteId}`,
-    ]
-
-    let experiments: MatomoExperiment[] = []
-    let apiError = null
-
-    for (const method of apiMethods) {
-      // Add cache busting for development
-      const cacheBuster =
-        process.env.NODE_ENV === "development" ? `&cb=${Date.now()}` : ""
-      const matomoApiUrl = `${matomoUrl}/index.php?module=API&method=${method}&format=json&token_auth=${apiToken}${cacheBuster}`
-
-      try {
-        const response = await fetch(matomoApiUrl, {
-          next: {
-            revalidate: process.env.NODE_ENV === "development" ? 0 : 3600,
-          }, // No cache in dev
-          headers: { "User-Agent": "ethereum.org-ab-testing/1.0" },
-        })
-
-        const data = await response.json()
-
-        if (data.result !== "error" && Array.isArray(data)) {
-          experiments = data
-          break
-        } else if (data.result === "error") {
-          apiError = data.message
-        }
-      } catch (error) {
-        // Continue to next method
-      }
-    }
+    const siteId = process.env.NEXT_PUBLIC_MATOMO_SITE_ID || "4"
 
-    // If no API method worked, use fallback
-    if (experiments.length === 0) {
-      console.warn(
-        `[AB Config] All API methods failed. Last error: ${apiError}`
-      )
+    // Add cache busting for development
+    const cacheBuster =
+      process.env.NODE_ENV === "development" ? `&cb=${Date.now()}` : ""
+    const matomoApiUrl = `${matomoUrl}/index.php?module=API&method=AbTesting.getAllExperiments&idSite=${siteId}&format=json&token_auth=${apiToken}${cacheBuster}`
 
-      const fallbackConfig = {}
+    const response = await fetch(matomoApiUrl, {
+      next: { revalidate: process.env.NODE_ENV === "development" ? 0 : 3600 },
+      headers: { "User-Agent": "ethereum.org-ab-testing/1.0" },
+    })
 
-      return NextResponse.json(fallbackConfig, {
-        headers: {
-          "Cache-Control": "s-max-age=300, stale-while-revalidate=600",
-        },
-      })
+    const data = await response.json()
+
+    if (data.result === "error" || !Array.isArray(data)) {
+      console.error(
+        "[AB Config] Matomo API error:",
+        data.message || "Invalid response"
+      )
+      return NextResponse.json(
+        {},
+        {
+          headers: {
+            "Cache-Control": "s-max-age=300, stale-while-revalidate=600",
+          },
+        }
+      )
     }
 
+    const experiments: MatomoExperiment[] = data
+
     // Transform Matomo experiments to our config format
     const config: Record<string, ABTestConfig> = {}
 
-    experiments.forEach((exp) => {
-      // Include all experiments with variations (let scheduling handle timing)
-      if (exp.variations && exp.variations.length > 0) {
+    experiments
+      .filter((exp) => exp.variations && exp.variations.length > 0)
+      .forEach((exp) => {
         // Calculate Original variant weight (100% - sum of all variations)
         const variationsTotalWeight = exp.variations.reduce(
-          (sum, variation) => {
-            return sum + (variation.percentage || 0)
-          },
+          (sum, variation) => sum + (variation.percentage || 0),
           0
         )
         const originalWeight = 100 - variationsTotalWeight
 
         // Build variants array starting with "Original"
-        const variants = [{ name: "Original", weight: originalWeight }]
-
-        // Add variations from Matomo (use actual percentages)
-        exp.variations.forEach((variation) => {
-          variants.push({
+        const variants = [
+          { name: "Original", weight: originalWeight },
+          ...exp.variations.map((variation) => ({
             name: variation.name,
             weight: variation.percentage || 0,
-          })
-        })
+          })),
+        ]
 
         config[exp.name] = {
           id: exp.idexperiment,
           enabled: isExperimentActive(exp),
-          variants: variants,
+          variants,
         }
-      }
-    })
+      })
 
     return NextResponse.json(config, {
       headers: {

src/components/AB/TestDebugPanel.tsx

@@ -8,18 +8,16 @@ import { Button } from "../ui/buttons/Button"
 
 import { useLocalStorage } from "@/hooks/useLocalStorage"
 import { useOnClickOutside } from "@/hooks/useOnClickOutside"
-import { ABTestAssignment } from "@/lib/ab-testing/types"
 
 type ABTestDebugPanelProps = {
   testKey: string
-  currentAssignment: ABTestAssignment | null
   availableVariants: string[]
 }
 
-export function ABTestDebugPanel({
+export const ABTestDebugPanel = ({
   testKey,
   availableVariants,
-}: ABTestDebugPanelProps) {
+}: ABTestDebugPanelProps) => {
   const [isOpen, setIsOpen] = useState(false)
   const [selectedVariant, setSelectedVariant] = useLocalStorage<number | null>(
     `ab-test-${testKey}`,
@@ -29,9 +27,8 @@ export function ABTestDebugPanel({
 
   useOnClickOutside(panelRef, () => setIsOpen(false))
 
-  const forceVariant = (variantIndex: number) => {
+  const forceVariant = (variantIndex: number) =>
     setSelectedVariant(variantIndex)
-  }
 
   return (
     <div
@@ -48,7 +45,7 @@ export function ABTestDebugPanel({
       {isOpen && (
         <div className="mt-2.5">
           <div>
-            <strong>Test:</strong> {testKey}
+            <strong>Experiment:</strong> {testKey}
           </div>
           <div>
             <strong>Select variant:</strong>

src/components/AB/TestTracker.tsx

@@ -9,14 +9,10 @@ import { ABTestAssignment } from "@/lib/ab-testing/types"
 
 type ABTestTrackerProps = {
   assignment: ABTestAssignment
-  testKey?: string
 }
 
-export function ABTestTracker({ assignment, testKey }: ABTestTrackerProps) {
+export function ABTestTracker({ assignment }: ABTestTrackerProps) {
   useEffect(() => {
-    // Don't set cookies here - let server handle cookie persistence
-    // This component only handles Matomo tracking
-
     if (!IS_PROD || IS_PREVIEW_DEPLOY) {
       console.debug(
         `DEV [Matomo] A/B test logged - Experiment: ${assignment.experimentName}, Variant: ${assignment.variant}`
@@ -39,7 +35,7 @@ export function ABTestTracker({ assignment, testKey }: ABTestTrackerProps) {
         variation: assignment.variant,
       },
     ] as [string, Record<string, string>])
-  }, [assignment, testKey])
+  }, [assignment])
 
   return null // This component doesn't render anything
 }

src/components/AB/TestWrapper.tsx

@@ -6,8 +6,11 @@ import { ClientABTestWrapper } from "./ClientABTestWrapper"
 import { ABTestDebugPanel } from "./TestDebugPanel"
 import { ABTestTracker } from "./TestTracker"
 
-import { getABTestConfigs } from "@/lib/ab-testing/config"
-import { getABTestAssignment, getVariantIndex } from "@/lib/ab-testing/server"
+import {
+  getABTestAssignment,
+  getABTestConfigs,
+  getVariantIndex,
+} from "@/lib/ab-testing/server"
 import { ABTestVariants } from "@/lib/ab-testing/types"
 
 type ABTestWrapperProps = {
@@ -22,34 +25,28 @@ const ABTestWrapper = async ({
   fallback,
 }: ABTestWrapperProps) => {
   try {
-    // Get deterministic assignment (cookie-less, based on fingerprint)
-    const assignment = await getABTestAssignment(testKey)
+    // Get deterministic assignment and configs
+    const [assignment, configs] = await Promise.all([
+      getABTestAssignment(testKey),
+      getABTestConfigs(),
+    ])
 
-    if (!assignment) {
-      // If no assignment, render fallback
-      return <>{fallback || variants[0]}</>
-    }
+    if (!assignment) throw new Error("No AB test assignment found")
 
     // Find the variant index based on the assignment
-    const variantIndex = getVariantIndex(assignment.variant, testKey)
-
-    // Get available variants for debug panel
-    const configs = await getABTestConfigs()
+    const variantIndex = getVariantIndex(assignment.variant, configs, testKey)
     const availableVariants =
       configs[testKey]?.variants.map((v) => v.name) || []
 
     return (
       <>
-        {/* Track assignment - only in production, not in preview */}
-        {!IS_PREVIEW_DEPLOY && (
-          <ABTestTracker assignment={assignment} testKey={testKey} />
-        )}
+        {/* Analogous to <Matomo /> at app layout level, pushes "AbTesting::enter" in production */}
+        <ABTestTracker assignment={assignment} />
 
         {/* Preview panel for development and preview deploys */}
         {(!IS_PROD || IS_PREVIEW_DEPLOY) && (
           <ABTestDebugPanel
             testKey={testKey}
-            currentAssignment={assignment}
             availableVariants={availableVariants}
           />
         )}