feat(webapp): track logs search usage and outcomes

Mono-RevId: e0bebe4452f6a4dd76f167774a03d9b32cddaf48

Author: carderne

apps/webapp/app/hooks/useLogsSearchAnalytics.test.ts

@@ -0,0 +1,123 @@
+// @vitest-environment jsdom
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { act } from "react-dom/test-utils";
+import { createMemoryRouter, RouterProvider, useLoaderData } from "react-router-dom";
+import { expect, it } from "vitest";
+import { LogsSearchAnalytics, logsSearchKey } from "../utils/logsSearchAnalytics";
+import { useLogsSearchLifecycle } from "./useLogsSearchAnalytics";
+
+const logsPath = "/orgs/example/projects/project/env/prod/logs";
+const queryResult = {
+  logs: [{ message: "never sent" }],
+  filters: { from: new Date(0), to: new Date(3600_000) },
+  searchProgress: {
+    complete: true,
+    timedOut: false,
+    stopped: false,
+    expired: false,
+    queryElapsedMs: 10,
+  },
+};
+
+async function mount(data: Promise<typeof queryResult>) {
+  const events: { event: string; properties: Record<string, unknown> }[] = [];
+  const analytics = new LogsSearchAnalytics((event, properties) =>
+    events.push({ event, properties })
+  );
+  let releaseOtherPage!: () => void;
+  const otherPage = new Promise<void>((resolve) => {
+    releaseOtherPage = resolve;
+  });
+
+  function Page() {
+    const { requestFilterState } = useLoaderData() as { requestFilterState: string };
+    useLogsSearchLifecycle(analytics, data, requestFilterState);
+    return null;
+  }
+
+  const router = createMemoryRouter(
+    [
+      {
+        path: logsPath,
+        loader: ({ request }) => {
+          const url = new URL(request.url);
+          return { requestFilterState: logsSearchKey(url.pathname, url.search) };
+        },
+        element: createElement(Page),
+      },
+      { path: "/other", loader: () => otherPage, element: null },
+    ],
+    { initialEntries: [logsPath] }
+  );
+  const root = createRoot(document.createElement("div"));
+  await act(async () => {
+    root.render(createElement(RouterProvider, { router }));
+  });
+  return {
+    analytics,
+    events,
+    router,
+    cleanup: async () => {
+      await act(async () => {
+        root.unmount();
+      });
+      releaseOtherPage();
+      router.dispose();
+    },
+  };
+}
+
+it("keeps the search active across a BFCache restore without a React remount", async () => {
+  const page = await mount(Promise.resolve(queryResult));
+  try {
+    expect(page.events.map(({ event }) => event)).toEqual([
+      "logs_search_started",
+      "logs_search_result",
+    ]);
+    await act(async () => {
+      window.dispatchEvent(new PageTransitionEvent("pagehide", { persisted: true }));
+      window.dispatchEvent(new PageTransitionEvent("pageshow", { persisted: true }));
+    });
+    page.analytics.action("open_result");
+    expect(page.events.at(-1)?.properties).toMatchObject({
+      action: "open_result",
+      search_id: page.events[0].properties.search_id,
+    });
+    expect(page.events[1].properties).toMatchObject({
+      timing_origin: "route_mount",
+      time_range_bucket: "up_to_1h",
+    });
+    expect(JSON.stringify(page.events)).not.toContain("never sent");
+  } finally {
+    await page.cleanup();
+  }
+});
+
+it("does not cancel or restart a search for an interrupted navigation", async () => {
+  let resolveQuery!: (result: typeof queryResult) => void;
+  const data = new Promise<typeof queryResult>((resolve) => {
+    resolveQuery = resolve;
+  });
+  const page = await mount(data);
+  try {
+    await act(async () => {
+      void page.router.navigate("/other");
+    });
+    expect(page.events.map(({ event }) => event)).toEqual(["logs_search_started"]);
+    await act(async () => {
+      await page.router.navigate(logsPath);
+    });
+    expect(page.events.map(({ event }) => event)).toEqual(["logs_search_started"]);
+    await act(async () => {
+      resolveQuery(queryResult);
+    });
+    expect(page.events.map(({ event }) => event)).toEqual([
+      "logs_search_started",
+      "logs_search_result",
+    ]);
+    expect(page.events[1].properties.search_id).toBe(page.events[0].properties.search_id);
+  } finally {
+    await page.cleanup();
+  }
+});

apps/webapp/app/hooks/useLogsSearchAnalytics.ts

@@ -0,0 +1,105 @@
+import { useLocation, useNavigation } from "@remix-run/react";
+import { useEffect, useRef, useState } from "react";
+import { isLogsPage, LogsSearchAnalytics, logsSearchKey } from "~/utils/logsSearchAnalytics";
+import { usePostHogTracking } from "./usePostHog";
+
+type SearchData = {
+  logs: unknown[];
+  filters?: { from: Date; to: Date };
+  searchProgress: {
+    complete: boolean;
+    timedOut: boolean;
+    stopped: boolean;
+    expired: boolean;
+    queryElapsedMs: number;
+  };
+};
+
+export function reportLogsSearchResponse(
+  analytics: LogsSearchAnalytics,
+  key: string,
+  data: SearchData
+) {
+  analytics.response(key, {
+    resultCount: data.logs.length,
+    complete: data.searchProgress.complete,
+    timedOut: data.searchProgress.timedOut,
+    stopped: data.searchProgress.stopped,
+    expired: data.searchProgress.expired,
+    queryElapsedMs: data.searchProgress.queryElapsedMs,
+    rangeDurationMs: data.filters
+      ? data.filters.to.getTime() - data.filters.from.getTime()
+      : undefined,
+  });
+}
+
+export function useLogsSearchAnalytics(
+  data: Promise<SearchData | { error: string }>,
+  requestFilterState: string
+) {
+  const { capture } = usePostHogTracking();
+  const [analytics] = useState(() => new LogsSearchAnalytics(capture));
+  useLogsSearchLifecycle(analytics, data, requestFilterState);
+  return analytics;
+}
+
+export function useLogsSearchLifecycle(
+  analytics: LogsSearchAnalytics,
+  data: Promise<SearchData | { error: string }>,
+  requestFilterState: string
+) {
+  const location = useLocation();
+  const navigation = useNavigation();
+  const committedKey = logsSearchKey(location.pathname, location.search);
+  const pendingNavigation = useRef<{ key: string; startedAt: number }>();
+
+  useEffect(() => {
+    if (navigation.location && isLogsPage(navigation.location.pathname)) {
+      const key = logsSearchKey(navigation.location.pathname, navigation.location.search);
+      if (key !== committedKey && pendingNavigation.current?.key !== key) {
+        pendingNavigation.current = { key, startedAt: performance.now() };
+      }
+    } else if (navigation.state === "idle" && pendingNavigation.current?.key !== committedKey) {
+      pendingNavigation.current = undefined;
+    }
+  }, [committedKey, navigation.location, navigation.state]);
+
+  useEffect(() => {
+    if (!isLogsPage(location.pathname)) return;
+    const startedAt =
+      pendingNavigation.current?.key === committedKey
+        ? pendingNavigation.current.startedAt
+        : undefined;
+    analytics.start(committedKey, location.search, startedAt);
+    pendingNavigation.current = undefined;
+  }, [analytics, committedKey, location.pathname, location.search]);
+
+  useEffect(() => {
+    if (committedKey !== requestFilterState) return;
+    let cancelled = false;
+    void Promise.resolve(data).then(
+      (result) => {
+        if (cancelled) return;
+        if ("error" in result) analytics.result(requestFilterState, "error");
+        else reportLogsSearchResponse(analytics, requestFilterState, result);
+      },
+      () => {
+        if (!cancelled) analytics.result(requestFilterState, "error");
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [analytics, data, requestFilterState, committedKey]);
+
+  useEffect(() => {
+    const leave = (event: PageTransitionEvent) => {
+      if (!event.persisted) analytics.leave();
+    };
+    window.addEventListener("pagehide", leave);
+    return () => {
+      window.removeEventListener("pagehide", leave);
+      analytics.leave();
+    };
+  }, [analytics]);
+}

apps/webapp/app/hooks/usePostHog.ts

@@ -1,9 +1,14 @@
 import { useLocation } from "@remix-run/react";
 import posthog from "posthog-js";
 import { useCallback, useEffect, useRef } from "react";
-import { useOrganizationChanged } from "./useOrganizations";
+import { useOptionalOrganization, useOrganizationChanged } from "./useOrganizations";
 import { useOptionalUser, useUserChanged } from "./useUser";
-import { useProjectChanged } from "./useProject";
+import { useOptionalProject, useProjectChanged } from "./useProject";
+import { PostHogCaptureQueue } from "~/utils/postHogCaptureQueue";
+
+const captureQueue = new PostHogCaptureQueue((event, properties) =>
+  posthog.capture(event, properties)
+);
 
 export const usePostHog = (
   apiKey?: string,
@@ -14,10 +19,15 @@ export const usePostHog = (
   const postHogInitialized = useRef(false);
   const location = useLocation();
   const user = useOptionalUser();
+  const organization = useOptionalOrganization();
+  const project = useOptionalProject();
 
   //start PostHog once
   useEffect(() => {
-    if (apiKey === undefined || apiKey === "") return;
+    if (apiKey === undefined || apiKey === "") {
+      captureQueue.disable();
+      return;
+    }
     if (postHogInitialized.current === true) return;
     if (logging) console.log("Initializing PostHog");
     posthog.init(apiKey, {
@@ -42,10 +52,13 @@ export const usePostHog = (
           if (logging) console.log("Loaded: Identifying user", user);
           posthog.identify(user.id, { email: user.email });
         }
+        if (organization) posthog.group("organization", organization.id);
+        if (project) posthog.group("project", project.id);
+        captureQueue.ready();
       },
     });
     postHogInitialized.current = true;
-  }, [apiKey, uiHost, logging, debug, user]);
+  }, [apiKey, uiHost, logging, debug, user, organization, project]);
 
   useUserChanged((user) => {
     if (postHogInitialized.current === false) return;
@@ -88,7 +101,7 @@ export const usePostHog = (
 
 export function usePostHogTracking() {
   const capture = useCallback((eventName: string, properties?: Record<string, unknown>) => {
-    posthog.capture(eventName, properties);
+    captureQueue.capture(eventName, properties);
   }, []);
 
   const startSessionRecording = useCallback(() => {