trying out analytics

Dockerfile

@@ -18,6 +18,8 @@ RUN pnpm install --frozen-lockfile
 FROM base as builder
 
 # Include all NEXT_PUBLIC_* env vars here
+ARG NEXT_PUBLIC_POSTHOG_KEY
+
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .

package.json

@@ -2,7 +2,7 @@
   "name": "prompt-lab",
   "type": "module",
   "version": "0.1.0",
-  "license": "AGPL",
+  "license": "AGPL-3.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
@@ -34,6 +34,7 @@
     "next": "^13.4.2",
     "next-auth": "^4.22.1",
     "nextjs-routes": "^2.0.1",
+    "posthog-js": "^1.68.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.10.1",

pnpm-lock.yaml

@@ -71,6 +71,9 @@ dependencies:
   nextjs-routes:
     specifier: ^2.0.1
     version: 2.0.1(next@13.4.2)
+  posthog-js:
+    specifier: ^1.68.4
+    version: 1.68.4
   react:
     specifier: 18.2.0
     version: 18.2.0
@@ -3158,6 +3161,10 @@ packages:
       reusify: 1.0.4
     dev: true
 
+  /fflate@0.4.8:
+    resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==}
+    dev: false
+
   /file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -4163,6 +4170,12 @@ packages:
       source-map-js: 1.0.2
     dev: false
 
+  /posthog-js@1.68.4:
+    resolution: {integrity: sha512-rHk4uk99nvWiDTU7P2mFdEfzFR6km0hvOpCR3tm/+F7kCJKs7QDkMblOZZHZultxM4wSNyB4neeohmnHjKYUhQ==}
+    dependencies:
+      fflate: 0.4.8
+    dev: false
+
   /preact-render-to-string@5.2.6(preact@10.15.1):
     resolution: {integrity: sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==}
     peerDependencies:

src/env.mjs

@@ -30,7 +30,7 @@ export const env = createEnv({
    * `NEXT_PUBLIC_`.
    */
   client: {
-    // NEXT_PUBLIC_CLIENTVAR: z.string().min(1),
+    NEXT_PUBLIC_POSTHOG_KEY: z.string(),
   },
 
   /**
@@ -45,6 +45,7 @@ export const env = createEnv({
     DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,
     DISCORD_CLIENT_SECRET: process.env.DISCORD_CLIENT_SECRET,
     OPENAI_API_KEY: process.env.OPENAI_API_KEY,
+    NEXT_PUBLIC_POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
   },
   /**
    * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.

src/pages/_app.tsx

@@ -5,6 +5,7 @@ import { api } from "~/utils/api";
 import { ChakraProvider } from "@chakra-ui/react";
 import theme from "~/utils/theme";
 import Favicon from "~/components/Favicon";
+import "~/utils/analytics";
 
 const MyApp: AppType<{ session: Session | null }> = ({
   Component,

src/pages/experiments/[id].tsx

@@ -2,7 +2,6 @@ import {
   Box,
   Breadcrumb,
   BreadcrumbItem,
-  BreadcrumbLink,
   Button,
   Center,
   Flex,
@@ -78,11 +77,9 @@ export default function Experiment() {
         <HStack px={4} py={2}>
           <Breadcrumb flex={1}>
             <BreadcrumbItem>
-              <BreadcrumbLink>
+              <Flex alignItems="center">
-                <Flex alignItems="center">
+                <Icon as={RiFlaskLine} boxSize={4} mr={2} /> Experiments
-                  <Icon as={RiFlaskLine} boxSize={4} mr={2} /> Experiments
+              </Flex>
-                </Flex>
-              </BreadcrumbLink>
             </BreadcrumbItem>
             <BreadcrumbItem isCurrentPage>
               <Input

src/utils/analytics.ts

@@ -0,0 +1,13 @@
+// Make sure we're in the browser
+import posthog from "posthog-js";
+import { env } from "~/env.mjs";
+
+const enableAnalytics = typeof window !== "undefined";
+
+if (enableAnalytics) {
+  if (env.NEXT_PUBLIC_POSTHOG_KEY) {
+    posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, {
+      api_host: "https://app.posthog.com",
+    });
+  }
+}

src/utils/hooks.ts

@@ -12,14 +12,16 @@ export const useExperiment = () => {
   return experiment;
 };
 
-export function useHandledAsyncCallback<T extends (...args: unknown[]) => Promise<unknown>>(
+type AsyncFunction<T extends unknown[], U> = (...args: T) => Promise<U>;
-  callback: T,
+
+export function useHandledAsyncCallback<T extends unknown[], U>(
+  callback: AsyncFunction<T, U>,
   deps: React.DependencyList
 ) {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
-  const wrappedCallback = useCallback((...args: Parameters<T>) => {
+  const wrappedCallback = useCallback((...args: T) => {
     setLoading(true);
     setError(null);
 
@@ -31,7 +33,8 @@ export function useHandledAsyncCallback<T extends (...args: unknown[]) => Promis
       .finally(() => {
         setLoading(false);
       });
-    /* eslint-disable react-hooks/exhaustive-deps */
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 
   return [wrappedCallback, loading, error] as const;