trying out analytics

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">
-                  <Icon as={RiFlaskLine} boxSize={4} mr={2} /> Experiments
-                </Flex>
-              </BreadcrumbLink>
+              <Flex alignItems="center">
+                <Icon as={RiFlaskLine} boxSize={4} mr={2} /> Experiments
+              </Flex>
             </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>>(
-  callback: T,
+type AsyncFunction<T extends unknown[], U> = (...args: T) => Promise<U>;
+
+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;