feat: setup posthog

.env.example

@@ -0,0 +1,2 @@
+VITE_SENTRY_DSN=
+VITE_POSTHOG_KEY=

package.json

@@ -29,6 +29,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "lucide-react": "^0.334.0",
+    "posthog-js": "^1.161.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.2",

src/components/sheets/edit-entity-group.tsx

@@ -1,6 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useQuery } from '@tanstack/react-query'
 import { ChevronsUpDown, Edit, X } from 'lucide-react'
+import { usePostHog } from 'posthog-js/react'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
@@ -73,6 +74,7 @@ export function EditEntityGroupSheet({ entityGroup }: EditEntityGroupProps) {
     defaultValues: entityGroup,
   })
   const [open, setOpen] = useState(false)
+  const posthog = usePostHog()
 
   const originalName = entityGroup.name
   const components = data?.components ?? []
@@ -95,6 +97,13 @@ export function EditEntityGroupSheet({ entityGroup }: EditEntityGroupProps) {
     toast({
       title: 'Successfully updated entity group',
     })
+    const fieldsUpdated = Object.keys(entityGroup).filter((k) => {
+      const key = k as 'name' | 'components'
+      return entityGroup[key] !== values[key]
+    })
+    posthog.capture('Entity Group Edited', {
+      fieldsUpdated: fieldsUpdated,
+    })
   }
   const handleDelete = () => {
     const newEntityGroups = entityGroups.filter((eg) => eg.name !== originalName)
@@ -103,6 +112,9 @@ export function EditEntityGroupSheet({ entityGroup }: EditEntityGroupProps) {
     toast({
       title: 'Successfully deleted entity group',
     })
+    posthog.capture('Entity Group Deleted', {
+      componentsCount: entityGroup.components.length,
+    })
   }
 
   return (

src/components/sheets/new-entity-group.tsx

@@ -1,6 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useQuery } from '@tanstack/react-query'
 import { ChevronsUpDown, X } from 'lucide-react'
+import { usePostHog } from 'posthog-js/react'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
@@ -59,6 +60,7 @@ export function NewEntityGroupSheet() {
     },
   })
   const [open, setOpen] = useState(false)
+  const posthog = usePostHog()
 
   const components = data?.components ?? []
   const options = components.map((c) => ({ label: c.name, value: c.name })) ?? []
@@ -84,12 +86,17 @@ export function NewEntityGroupSheet() {
     toast({
       title: 'Successfully created entity group',
     })
+    posthog.capture('Entity Group Created', {
+      componentsCount: values.components.length,
+    })
   }
 
   return (
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
-        <Button>New Entity Group</Button>
+        <Button onClick={() => posthog.capture('Entity Group Sheets Opened')}>
+          New Entity Group
+        </Button>
       </SheetTrigger>
       <SheetContent>
         <Form {...form}>

src/components/sidebar/messages.tsx

@@ -1,6 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useQueryClient } from '@tanstack/react-query'
 import { BookDashed, MessageSquareCode, Loader } from 'lucide-react'
+import { usePostHog } from 'posthog-js/react'
 import { useForm } from 'react-hook-form'
 
 import {
@@ -83,6 +84,7 @@ function Message({ message, namespace }: MessageProp) {
     defaultValues: defaultValues(message),
   })
   const { toast } = useToast()
+  const posthog = usePostHog()
 
   const handleSubmit = async (values: ComponentProperty) => {
     const { persona: personaTag, ...fields } = values
@@ -112,8 +114,12 @@ function Message({ message, namespace }: MessageProp) {
           return p.personaTag === personaTag ? { ...p, nonce: p.nonce + 1 } : p
         }),
       )
+      posthog.capture('Message Submitted')
     } catch (error) {
       errorToast(toast, error, 'Failed to send message')
+      posthog.capture('Failed to Submit Message', {
+        error: error,
+      })
     }
   }
 

src/components/sidebar/persona.tsx

@@ -1,6 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useQueryClient } from '@tanstack/react-query'
 import { Loader } from 'lucide-react'
+import { usePostHog } from 'posthog-js/react'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 
@@ -49,6 +50,7 @@ export function CreatePersona({ namespace }: CreatePersonaProps) {
     },
   })
   const { toast } = useToast()
+  const posthog = usePostHog()
 
   const handleSubmit = async ({ personaTag }: z.infer<typeof formSchema>) => {
     const { privateKey, address, sign } = createPersonaAccount(personaTag)
@@ -93,8 +95,12 @@ export function CreatePersona({ namespace }: CreatePersonaProps) {
       // only set the personas if there is no error
       const newPersona = { personaTag, privateKey, address, nonce: nonce + 1 }
       setPersonas([...personas, newPersona])
+      posthog.capture('Persona Created')
     } catch (error) {
       errorToast(toast, error, 'Error creating persona')
+      posthog.capture('Failed to Create Persona', {
+        error: error,
+      })
     }
   }
 

src/components/sidebar/queries.tsx

@@ -1,6 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useQueryClient } from '@tanstack/react-query'
 import { BookDashed, Loader, SearchCode } from 'lucide-react'
+import { usePostHog } from 'posthog-js/react'
 import { useForm } from 'react-hook-form'
 
 import {
@@ -82,6 +83,7 @@ function Query({ query }: QueryProp) {
     defaultValues: defaultValues(query),
   })
   const { toast } = useToast()
+  const posthog = usePostHog()
 
   const handleSubmit = (values: ComponentProperty) => {
     queryClient
@@ -93,8 +95,15 @@ function Query({ query }: QueryProp) {
           body: values,
         }),
       )
-      .then(() => true)
-      .catch((error) => errorToast(toast, error, 'Error sending query'))
+      .then(() => {
+        posthog.capture('Query Submitted')
+      })
+      .catch((error) => {
+        errorToast(toast, error, 'Error sending query')
+        posthog.capture('Failed to Submit Query', {
+          error: error as string,
+        })
+      })
   }
 
   return (

src/main.tsx

@@ -1,6 +1,7 @@
 import * as Sentry from '@sentry/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { PostHogProvider } from 'posthog-js/react'
 import { StrictMode } from 'react'
 import ReactDOM from 'react-dom/client'
 
@@ -52,18 +53,25 @@ Sentry.init({
   profilesSampleRate: 1.0,
 })
 
+const postHogConfig = {
+  apiKey: import.meta.env.VITE_POSTHOG_KEY as string,
+  options: {},
+}
+
 const rootElement = document.getElementById('root')!
 if (!rootElement.innerHTML) {
   const root = ReactDOM.createRoot(rootElement)
   root.render(
     <StrictMode>
-      <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
-        <QueryClientProvider client={queryClient}>
-          <CardinalProvider>
-            <RouterProvider router={router} />
-          </CardinalProvider>
-        </QueryClientProvider>
-      </ThemeProvider>
+      <PostHogProvider apiKey={postHogConfig.apiKey} options={postHogConfig.options}>
+        <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
+          <QueryClientProvider client={queryClient}>
+            <CardinalProvider>
+              <RouterProvider router={router} />
+            </CardinalProvider>
+          </QueryClientProvider>
+        </ThemeProvider>
+      </PostHogProvider>
     </StrictMode>,
   )
 }