Add PostHog telemetry support

brendan-kellam · brendan-kellam · commit 3ef9be2b6b9c · 2024-09-16T21:37:34.000-07:00
diff --git a/.dockerignore b/.dockerignore
@@ -7,4 +7,5 @@ README.md
 !.next/static
 !.next/standalone
 .git
-.sourcebot
+.sourcebot
+.env.local
diff --git a/.env b/.env
@@ -0,0 +1,4 @@
+NEXT_PUBLIC_POSTHOG_KEY=phc_VFn4CkEGHRdlVyOOw8mfkoj1DKVoG6y1007EClvzAnS
+NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+NEXT_PUBLIC_POSTHOG_ASSET_HOST=https://us-assets.i.posthog.com
+NEXT_PUBLIC_POSTHOG_UI_HOST=https://us.posthog.com
diff --git a/Dockerfile b/Dockerfile
@@ -22,6 +22,8 @@ RUN yarn config set network-timeout 1200000
 RUN yarn --frozen-lockfile
 COPY . .
 ENV NEXT_TELEMETRY_DISABLED=1
+# @see: https://phase.dev/blog/nextjs-public-runtime-variables/
+ARG NEXT_PUBLIC_SOURCEBOT_TELEMETRY_DISABLED=BAKED_NEXT_PUBLIC_SOURCEBOT_TELEMETRY_DISABLED
 RUN yarn run build
 
 # ------ Runner ------
@@ -33,6 +35,9 @@ ENV DATA_DIR=/data
 ENV CONFIG_PATH=$DATA_DIR/config.json
 ENV DATA_CACHE_DIR=$DATA_DIR/.sourcebot
 
+# Sourcebot collects anonymous usage data using [PostHog](https://posthog.com/). Uncomment this line to disable.
+# ENV SOURCEBOT_TELEMETRY_DISABLED=1
+
 # Configure dependencies
 RUN apk add --no-cache git ca-certificates bind-tools tini jansson wget supervisor
 
diff --git a/README.md b/README.md
@@ -65,20 +65,26 @@ zoekt will now index your repositories (at `HEAD`). By default, it will re-index
 
 4. Go to `http://localhost:3000` - once a index has been created, you should get results.
 
-
-
 ## Building Sourcebot
 
 TODO
 
-## GitLab
+## Disabling Telemetry
+
+By default, Sourcebot collects anonymous usage data using [PostHog](https://posthog.com/). You can disable this by setting the environment variable `SOURCEBOT_TELEMETRY_DISABLED` to `1` in the docker run command. Example:
+```sh
+docker run -e SOURCEBOT_TELEMETRY_DISABLED=1 ...stuff... ghcr.io/taqlaai/sourcebot:main
+```
+
+
+# GitLab
 
 TODO
 
-## BitBucket
+# BitBucket
 
 TODO
 
-### Todos
+# Todos
 - Add instructions on using GitLab and BitBucket
 - Add instructions on building Sourcebot locally
diff --git a/entrypoint.sh b/entrypoint.sh
@@ -1,7 +1,6 @@
 #!/bin/sh
 set -e
 
-
 # Check if CONFIG_PATH is set
 if [ -z "$CONFIG_PATH" ]; then
     echo "\e[33mWarning: CONFIG_PATH environment variable is not set.\e[0m"
@@ -35,4 +34,17 @@ else
     echo -e "\e[33mWarning: GitLab repositories will not be indexed since GITLAB_TOKEN was not set. If you are not using GitLab, disregard.\e[0m"
 fi
 
+# Update nextjs public env variables w/o requiring a rebuild.
+# @see: https://phase.dev/blog/nextjs-public-runtime-variables/
+
+# Infer NEXT_PUBLIC_SOURCEBOT_TELEMETRY_DISABLED if it is not set
+if [ -z "$NEXT_PUBLIC_SOURCEBOT_TELEMETRY_DISABLED" ] && [ ! -z "$SOURCEBOT_TELEMETRY_DISABLED" ]; then
+    export NEXT_PUBLIC_SOURCEBOT_TELEMETRY_DISABLED="$SOURCEBOT_TELEMETRY_DISABLED"
+fi
+
+find /app/public /app/.next -type f -name "*.js" |
+while read file; do
+    sed -i "s|BAKED_NEXT_PUBLIC_SOURCEBOT_TELEMETRY_DISABLED|${NEXT_PUBLIC_SOURCEBOT_TELEMETRY_DISABLED}|g" "$file"
+done
+
 exec supervisord -c /etc/supervisor/conf.d/supervisord.conf
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,6 +1,26 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: "standalone"
+    output: "standalone",
+
+    // @see : https://posthog.com/docs/advanced/proxy/nextjs
+    async rewrites() {
+        return [
+            {
+                source: "/ingest/static/:path*",
+                destination: `${process.env.NEXT_PUBLIC_POSTHOG_ASSET_HOST}/static/:path*`,
+            },
+            {
+                source: "/ingest/:path*",
+                destination: `${process.env.NEXT_PUBLIC_POSTHOG_HOST}/:path*`,
+            },
+            {
+                source: "/ingest/decide",
+                destination: `${process.env.NEXT_PUBLIC_POSTHOG_HOST}/decide`,
+            },
+        ];
+    },
+    // This is required to support PostHog trailing slash API requests
+    skipTrailingSlashRedirect: true, 
 };
 
 export default nextConfig;
diff --git a/package.json b/package.json
@@ -27,17 +27,20 @@
     "@tanstack/react-table": "^8.20.5",
     "@uiw/react-codemirror": "^4.23.0",
     "class-variance-authority": "^0.7.0",
+    "client-only": "^0.0.1",
     "clsx": "^2.1.1",
     "escape-string-regexp": "^5.0.0",
     "http-status-codes": "^2.3.0",
     "lucide-react": "^0.435.0",
     "next": "14.2.6",
     "next-themes": "^0.3.0",
+    "posthog-js": "^1.161.5",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.53.0",
     "react-hotkeys-hook": "^4.5.1",
     "react-resizable-panels": "^2.1.1",
+    "server-only": "^0.0.1",
     "sharp": "^0.33.5",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,9 +4,15 @@ import "./globals.css";
 import { ThemeProvider } from "next-themes";
 import { Suspense } from "react";
 import { QueryClientProvider } from "./queryClientProvider";
+import { PHProvider } from "./posthogProvider";
+import dynamic from "next/dynamic";
 
 const inter = Inter({ subsets: ["latin"] });
 
+const PostHogPageView = dynamic(() => import('./posthogPageView'), {
+    ssr: false,
+  })
+
 export const metadata: Metadata = {
     title: "Sourcebot",
     description: "Sourcebot",
@@ -24,22 +30,25 @@ export default function RootLayout({
             suppressHydrationWarning
         >
             <body className={inter.className}>
-                <ThemeProvider
-                    attribute="class"
-                    defaultTheme="system"
-                    enableSystem
-                    disableTransitionOnChange
-                >
-                    <QueryClientProvider>
-                        {/*
-                            @todo : ideally we don't wrap everything in a suspense boundary.
-                            @see : https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
-                        */}
-                        <Suspense>
-                            {children}
-                        </Suspense>
-                    </QueryClientProvider>
-                </ThemeProvider>
+                <PHProvider>
+                    <PostHogPageView />
+                    <ThemeProvider
+                        attribute="class"
+                        defaultTheme="system"
+                        enableSystem
+                        disableTransitionOnChange
+                    >
+                        <QueryClientProvider>
+                            {/*
+                                @todo : ideally we don't wrap everything in a suspense boundary.
+                                @see : https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
+                            */}
+                            <Suspense>
+                                {children}
+                            </Suspense>
+                        </QueryClientProvider>
+                    </ThemeProvider>
+                </PHProvider>
             </body>
         </html>
     );
diff --git a/src/app/posthogPageView.tsx b/src/app/posthogPageView.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+import { usePostHog } from 'posthog-js/react';
+
+export default function PostHogPageView(): null {
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const posthog = usePostHog();
+    useEffect(() => {
+        // Track pageviews
+        if (pathname && posthog) {
+            let url = window.origin + pathname
+            if (searchParams.toString()) {
+                url = url + `?${searchParams.toString()}`
+            }
+            posthog.capture(
+                '$pageview',
+                {
+                    '$current_url': url,
+                }
+            )
+        }
+    }, [pathname, searchParams, posthog])
+
+    return null
+}
diff --git a/src/app/posthogProvider.tsx b/src/app/posthogProvider.tsx
@@ -0,0 +1,25 @@
+'use client'
+import { NEXT_PUBLIC_POSTHOG_KEY, NEXT_PUBLIC_POSTHOG_UI_HOST, NEXT_PUBLIC_SOURCEBOT_TELEMETRY_DISABLED } from '@/lib/environment.client'
+import posthog from 'posthog-js'
+import { PostHogProvider } from 'posthog-js/react'
+
+if (typeof window !== 'undefined') {
+    if (!NEXT_PUBLIC_SOURCEBOT_TELEMETRY_DISABLED) {
+        posthog.init(NEXT_PUBLIC_POSTHOG_KEY!, {
+            api_host: "/ingest",
+            ui_host: NEXT_PUBLIC_POSTHOG_UI_HOST,
+            person_profiles: 'identified_only',
+            capture_pageview: false, // Disable automatic pageview capture, as we capture manually
+        });
+    } else {
+        console.log("PostHog telemetry disabled");
+    }
+}
+
+export function PHProvider({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    return <PostHogProvider client={posthog}>{children}</PostHogProvider>
+}
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
@@ -13,14 +13,15 @@ import { SymbolIcon } from "@radix-ui/react-icons";
 import { useQuery } from "@tanstack/react-query";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import logoDark from "../../../public/sb_logo_dark.png";
 import logoLight from "../../../public/sb_logo_light.png";
 import { fetchFileSource, search } from "../api/(client)/client";
 import { SearchBar } from "../searchBar";
 import { SettingsDropdown } from "../settingsDropdown";
 import { CodePreviewFile, CodePreviewPanel } from "./codePreviewPanel";
 import { SearchResultsPanel } from "./searchResultsPanel";
+import useCaptureEvent from "@/hooks/useCaptureEvent";
 
 const DEFAULT_NUM_RESULTS = 100;
 
@@ -33,15 +34,50 @@ export default function SearchPage() {
     const [selectedMatchIndex, setSelectedMatchIndex] = useState(0);
     const [selectedFile, setSelectedFile] = useState<SearchResultFile | undefined>(undefined);
 
+    const captureEvent = useCaptureEvent();
+
     const { data: searchResponse, isLoading } = useQuery({
         queryKey: ["search", searchQuery, numResults],
         queryFn: () => search({
             query: searchQuery,
             numResults,
         }),
         enabled: searchQuery.length > 0,
+        refetchOnWindowFocus: false,
     });
 
+    useEffect(() => {
+        if (!searchResponse) {
+            return;
+        }
+
+        const fileLanguages = searchResponse.Result.Files?.map(file => file.Language) || [];
+
+        captureEvent("search_finished", {
+            contentBytesLoaded: searchResponse.Result.ContentBytesLoaded,
+            indexBytesLoaded: searchResponse.Result.IndexBytesLoaded,
+            crashes: searchResponse.Result.Crashes,
+            durationMs: searchResponse.Result.Duration / 1000000,
+            fileCount: searchResponse.Result.FileCount,
+            shardFilesConsidered: searchResponse.Result.ShardFilesConsidered,
+            filesConsidered: searchResponse.Result.FilesConsidered,
+            filesLoaded: searchResponse.Result.FilesLoaded,
+            filesSkipped: searchResponse.Result.FilesSkipped,
+            shardsScanned: searchResponse.Result.ShardsScanned,
+            shardsSkipped: searchResponse.Result.ShardsSkipped,
+            shardsSkippedFilter: searchResponse.Result.ShardsSkippedFilter,
+            matchCount: searchResponse.Result.MatchCount,
+            ngramMatches: searchResponse.Result.NgramMatches,
+            ngramLookups: searchResponse.Result.NgramLookups,
+            wait: searchResponse.Result.Wait,
+            matchTreeConstruction: searchResponse.Result.MatchTreeConstruction,
+            matchTreeSearch: searchResponse.Result.MatchTreeSearch,
+            regexpsConsidered: searchResponse.Result.RegexpsConsidered,
+            flushReason: searchResponse.Result.FlushReason,
+            fileLanguages,
+        });
+    }, [captureEvent, searchResponse]);
+
     const { fileMatches, searchDurationMs } = useMemo((): { fileMatches: SearchResultFile[], searchDurationMs: number } => {
         if (!searchResponse) {
             return {
@@ -104,7 +140,7 @@ export default function SearchPage() {
                             onClick={() => {
                                 const url = createPathWithQueryParams('/search',
                                     ["query", searchQuery],
-                                    ["numResults", `${numResults*2}`],
+                                    ["numResults", `${numResults * 2}`],
                                 )
                                 router.push(url);
                             }}
diff --git a/src/hooks/useCaptureEvent.ts b/src/hooks/useCaptureEvent.ts
@@ -0,0 +1,26 @@
+'use client';
+
+import { CaptureOptions } from "posthog-js";
+import posthog from "posthog-js";
+import { PosthogEvent, PosthogEventMap } from "../lib/posthogEvents";
+
+export function captureEvent<E extends PosthogEvent>(event: E, properties: PosthogEventMap[E], options?: CaptureOptions) {
+    if(!options) {
+        options = {};
+    }
+    options.send_instantly = true;
+    posthog.capture(event, properties, options);
+}
+
+/**
+ * Captures a distinct action as a event and forwards it to the event service
+ * (i.e., PostHog).
+ *
+ * @returns A callback for capturing events.
+ * @see: https://posthog.com/docs/libraries/js#capturing-events
+ */
+const useCaptureEvent = () => {
+    return captureEvent;
+}
+
+export default useCaptureEvent;
diff --git a/src/lib/environment.client.ts b/src/lib/environment.client.ts
@@ -0,0 +1,9 @@
+import 'client-only';
+
+import { getEnv, getEnvBoolean } from "./utils";
+
+export const NEXT_PUBLIC_POSTHOG_KEY = getEnv(process.env.NEXT_PUBLIC_POSTHOG_KEY);
+export const NEXT_PUBLIC_POSTHOG_HOST = getEnv(process.env.NEXT_PUBLIC_POSTHOG_HOST);
+export const NEXT_PUBLIC_POSTHOG_UI_HOST = getEnv(process.env.NEXT_PUBLIC_POSTHOG_UI_HOST);
+export const NEXT_PUBLIC_POSTHOG_ASSET_HOST = getEnv(process.env.NEXT_PUBLIC_POSTHOG_ASSET_HOST);
+export const NEXT_PUBLIC_SOURCEBOT_TELEMETRY_DISABLED = getEnvBoolean(process.env.NEXT_PUBLIC_SOURCEBOT_TELEMETRY_DISABLED, false);
diff --git a/src/lib/environment.ts b/src/lib/environment.ts
@@ -1,14 +1,8 @@
+import 'server-only';
 
-const getEnv = (env: string | undefined, defaultValue = '') => {
-	return env ?? defaultValue;
-}
-
-const getEnvNumber = (env: string | undefined, defaultValue: number = 0) => {
-	return Number(env) ?? defaultValue;
-}
+import { getEnv, getEnvNumber } from "./utils";
 
 export const ZOEKT_WEBSERVER_URL = getEnv(process.env.ZOEKT_WEBSERVER_URL, "http://localhost:6070");
 export const SHARD_MAX_MATCH_COUNT = getEnvNumber(process.env.SHARD_MAX_MATCH_COUNT, 10000);
 export const TOTAL_MAX_MATCH_COUNT = getEnvNumber(process.env.TOTAL_MAX_MATCH_COUNT, 100000);
-
 export const NODE_ENV = process.env.NODE_ENV;
diff --git a/src/lib/posthogEvents.ts b/src/lib/posthogEvents.ts
diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
diff --git a/yarn.lock b/yarn.lock
