DH-4718 [ai][admin-console] add frontend analytics (#176)

apps/ai/clients/admin-console/.env.example

@@ -8,4 +8,8 @@ AUTH0_BASE_URL='http://localhost:3000'
 AUTH0_SCOPE='openid profile email offline_access'
 AUTH0_API_AUDIENCE='https://hi-george.us.auth0.com/api/v2/'
 AUTH0_CLIENT_ID=
-AUTH0_CLIENT_SECRET=
+AUTH0_CLIENT_SECRET=
+
+NEXT_PUBLIC_POSTHOG_KEY=
+NEXT_PUBLIC_POSTHOG_HOST="https://app.posthog.com"
+NODE_ENV="development"

apps/ai/clients/admin-console/package.json

@@ -40,6 +40,7 @@
     "monaco-editor": "^0.40.0",
     "next": "13.4.10",
     "postcss": "8.4.26",
+    "posthog-js": "^1.81.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.46.1",

apps/ai/clients/admin-console/src/components/hoc/WithAnalytics.tsx

@@ -0,0 +1,47 @@
+import { posthog } from 'posthog-js'
+import { useUser } from '@auth0/nextjs-auth0/client'
+import { useRouter } from 'next/router'
+import { FC, ReactNode, useEffect } from 'react'
+import { User } from '@/models/api'
+import { PostHogProvider } from 'posthog-js/react'
+import { POSTHOG_HOST, POSTHOG_KEY } from '@/config'
+
+type WithAnalyticsProps = {
+  children: ReactNode
+}
+
+const WithAnalytics: FC<WithAnalyticsProps> = ({ children }) => {
+  const router = useRouter()
+  const { user: authUser, error } = useUser()
+  const user = authUser as User
+
+  // Check that PostHog is client-side (used to handle Next.js SSR)
+  if (typeof window !== 'undefined') {
+    posthog.init(POSTHOG_KEY || '', {
+      api_host: POSTHOG_HOST || 'https://app.posthog.com',
+      // Enable debug mode in development
+      loaded: (posthog) => {
+        if (process.env.NODE_ENV === 'development') posthog.debug()
+      },
+      capture_pageview: false, // Disable automatic pageview capture, as we capture manually
+    })
+  }
+
+  useEffect(() => {
+    if (error) {
+      console.error('Error fetching user:', error)
+      return
+    }
+    if (user && user.email) {
+      posthog.identify(user.email, {
+        email: user.email,
+        name: user.name,
+        organization_name: user.organization.name,
+      })
+    }
+  }, [user, error, router])
+
+  return <PostHogProvider>{children}</PostHogProvider>
+}
+
+export default WithAnalytics

apps/ai/clients/admin-console/src/components/query/workspace.tsx

@@ -57,6 +57,7 @@ const QueryWorkspace: FC<QueryWorkspaceProps> = ({
   onPatchQuery,
 }) => {
   const {
+    id,
     question,
     question_date,
     response,
@@ -186,7 +187,11 @@ const QueryWorkspace: FC<QueryWorkspaceProps> = ({
 
   return (
     <>
-      <div className="grow flex flex-col gap-5">
+      <div
+        className="grow flex flex-col gap-5"
+        data-ph-capture-attribute-query_id={id}
+        data-ph-capture-attribute-asker={username}
+      >
         <div id="header" className="flex justify-between gap-3">
           <QueryQuestion {...{ username, question, questionDate }} />
           <div className="flex items-center self-start gap-5">

apps/ai/clients/admin-console/src/config.ts

@@ -6,3 +6,5 @@ export const AUTH = {
   audience: process.env.AUTH0_API_AUDIENCE,
   scope: process.env.AUTH0_SCOPE,
 }
+export const POSTHOG_KEY = process.env.NEXT_PUBLIC_POSTHOG_KEY
+export const POSTHOG_HOST = process.env.NEXT_PUBLIC_POSTHOG_HOST

apps/ai/clients/admin-console/src/pages/_app.tsx

@@ -7,6 +7,7 @@ import type { AppProps } from 'next/app'
 import { Lato, Source_Code_Pro } from 'next/font/google'
 import { FC, ReactNode } from 'react'
 import { SWRConfig } from 'swr'
+import WithAnalytics from '@/components/hoc/WithAnalytics'
 
 const sourceCode = Source_Code_Pro({
   subsets: ['latin'],
@@ -38,11 +39,15 @@ export default function App({ Component, pageProps }: AppProps) {
   return (
     <UserProvider>
       <AuthProvider>
-        <SWRConfigWithAuth>
-          <div className={cn(lato.variable, sourceCode.variable, 'font-lato')}>
-            <Component {...pageProps} />
-          </div>
-        </SWRConfigWithAuth>
+        <WithAnalytics>
+          <SWRConfigWithAuth>
+            <div
+              className={cn(lato.variable, sourceCode.variable, 'font-lato')}
+            >
+              <Component {...pageProps} />
+            </div>
+          </SWRConfigWithAuth>
+        </WithAnalytics>
       </AuthProvider>
     </UserProvider>
   )