fix(analytics): switch to @openpanel/nextjs SDK

apps/docs/app/r/[name]/route.ts

@@ -1,15 +1,15 @@
 /**
  * Dynamic registry route with download tracking.
  *
- * Serves registry items at /r/[name].json with Umami event tracking.
+ * Serves registry items at /r/[name].json with OpenPanel event tracking.
  * Uses generateStaticParams for build-time route generation while
  * still running tracking code at request time.
  */
 
 import { type NextRequest, NextResponse } from "next/server"
 import { notFound } from "next/navigation"
 import { getAllItemNames, buildRegistryItemResponse } from "@/lib/registry"
-import { trackEvent } from "@/lib/umami"
+import { trackEvent } from "@/lib/openpanel"
 
 interface RouteParams {
   params: Promise<{ name: string }>
@@ -31,7 +31,6 @@ export async function GET(_request: NextRequest, { params }: RouteParams) {
   if (process.env.NODE_ENV === "production") {
     trackEvent({
       name: "registry-download",
-      url: `/r/${name}`,
       data: { component: itemName },
     })
   }

apps/docs/components/analytics.tsx

@@ -1,14 +1,14 @@
 "use client"
 
-import { useEffect } from "react"
-import { op } from "@/lib/openpanel"
+import { OpenPanelComponent } from "@openpanel/nextjs"
 
 export function Analytics() {
-  useEffect(() => {
-    // OpenPanel auto-tracks screen views, outgoing links, and data-track attributes
-    // Accessing op ensures the client is initialized on mount
-    void op
-  }, [])
-
-  return null
+  return (
+    <OpenPanelComponent
+      clientId={process.env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID ?? ""}
+      trackScreenViews
+      trackOutgoingLinks
+      trackAttributes
+    />
+  )
 }

apps/docs/lib/analytics.ts

@@ -1,13 +1,13 @@
-declare global {
-  interface Window {
-    umami?: {
-      track: (event: string, properties?: Record<string, unknown>) => void
-    }
-  }
-}
+/**
+ * Client-side analytics helper for OpenPanel.
+ *
+ * Provides a simple track function that can be called from anywhere.
+ * Uses the global OpenPanel instance injected by OpenPanelComponent.
+ */
 
 export function track(event: string, properties?: Record<string, unknown>) {
-  if (typeof window !== "undefined" && window.umami) {
-    window.umami.track(event, properties)
+  if (typeof window !== "undefined" && "op" in window) {
+    const op = window.op as { track: (event: string, properties?: Record<string, unknown>) => void }
+    op.track(event, properties)
   }
 }

apps/docs/lib/openpanel.ts

@@ -1,8 +1,33 @@
-import { OpenPanel } from "@openpanel/web"
-
-export const op = new OpenPanel({
-  clientId: process.env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID ?? "",
-  trackScreenViews: true,
-  trackOutgoingLinks: true,
-  trackAttributes: true,
-})
+/**
+ * OpenPanel server-side tracking for registry downloads.
+ *
+ * Sends events to OpenPanel without blocking the response.
+ * Requires NEXT_PUBLIC_OPENPANEL_CLIENT_ID and OPENPANEL_CLIENT_SECRET env vars.
+ */
+
+import { OpenPanel } from "@openpanel/nextjs"
+
+const clientId = process.env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID
+const clientSecret = process.env.OPENPANEL_CLIENT_SECRET
+
+export const opServer =
+  clientId && clientSecret
+    ? new OpenPanel({ clientId, clientSecret })
+    : null
+
+interface TrackEventOptions {
+  name: string
+  data?: Record<string, string | number | boolean>
+}
+
+export async function trackEvent({ name, data }: TrackEventOptions): Promise<void> {
+  if (!opServer) {
+    return
+  }
+
+  try {
+    await opServer.track(name, data ?? {})
+  } catch {
+    // Silently fail — don't block registry responses for analytics
+  }
+}

apps/docs/package.json

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@chenglou/pretext": "^0.0.4",
-    "@openpanel/web": "^1.4.0",
+    "@openpanel/nextjs": "^1.5.0",
     "@orama/orama": "^3.1.18",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-slot": "^1.2.3",