feat: add cross-origin reporting for telemetry in the dashboard

kylecarbs · kylecarbs · commit df9ecd70864a · 2024-06-20T17:40:28.000Z
diff --git a/site/jest.setup.ts b/site/jest.setup.ts
@@ -41,6 +41,7 @@ global.scrollTo = jest.fn();
 
 window.HTMLElement.prototype.scrollIntoView = jest.fn();
 window.open = jest.fn();
+navigator.sendBeacon = jest.fn();
 
 // Polyfill the getRandomValues that is used on utils/random.ts
 Object.defineProperty(global.self, "crypto", {
diff --git a/site/src/pages/LoginPage/LoginPage.tsx b/site/src/pages/LoginPage/LoginPage.tsx
@@ -8,6 +8,7 @@ import { useAuthContext } from "contexts/auth/AuthProvider";
 import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
 import { getApplicationName } from "utils/appearance";
 import { retrieveRedirect } from "utils/redirect";
+import { sendDeploymentEvent } from "utils/telemetry";
 import { LoginPageView } from "./LoginPageView";
 
 export const LoginPage: FC = () => {
@@ -19,6 +20,7 @@ export const LoginPage: FC = () => {
     signIn,
     isSigningIn,
     signInError,
+    user,
   } = useAuthContext();
   const authMethodsQuery = useQuery(authMethods());
   const redirectTo = retrieveRedirect(location.search);
@@ -29,6 +31,16 @@ export const LoginPage: FC = () => {
   const buildInfoQuery = useQuery(buildInfo(metadata["build-info"]));
 
   if (isSignedIn) {
+    // This uses `navigator.sendBeacon`, so window.href
+    // will not stop the request from being sent!
+    sendDeploymentEvent({
+      type: "deployment_login",
+      // This should work most of the time because of embedded
+      // metadata and the user being logged in.
+      deployment_id: buildInfoQuery.data?.deployment_id || "",
+      user_id: user?.id,
+    })
+
     // If the redirect is going to a workspace application, and we
     // are missing authentication, then we need to change the href location
     // to trigger a HTTP request. This allows the BE to generate the auth
@@ -74,6 +86,13 @@ export const LoginPage: FC = () => {
         isSigningIn={isSigningIn}
         onSignIn={async ({ email, password }) => {
           await signIn(email, password);
+          // This uses `navigator.sendBeacon`, so navigating away
+          // will not prevent it!
+          sendDeploymentEvent({
+            type: "deployment_login",
+            deployment_id: buildInfoQuery.data?.deployment_id || "",
+            user_id: user?.id,
+          })
           navigate("/");
         }}
       />
diff --git a/site/src/pages/SetupPage/SetupPage.test.tsx b/site/src/pages/SetupPage/SetupPage.test.tsx
@@ -3,7 +3,7 @@ import userEvent from "@testing-library/user-event";
 import { HttpResponse, http } from "msw";
 import { createMemoryRouter } from "react-router-dom";
 import type { Response, User } from "api/typesGenerated";
-import { MockUser } from "testHelpers/entities";
+import { MockBuildInfo, MockUser } from "testHelpers/entities";
 import {
   renderWithRouter,
   waitForLoaderToBeRemoved,
@@ -99,4 +99,34 @@ describe("Setup Page", () => {
     await fillForm();
     await waitFor(() => screen.findByText("Templates"));
   });
+  it("calls sendBeacon with telemetry", async () => {
+    const sendBeacon = jest.fn();
+    Object.defineProperty(window.navigator, "sendBeacon", {
+      value: sendBeacon,
+    });
+    renderWithRouter(
+      createMemoryRouter(
+        [
+          {
+            path: "/setup",
+            element: <SetupPage />,
+          },
+          {
+            path: "/templates",
+            element: <h1>Templates</h1>,
+          },
+        ],
+        { initialEntries: ["/setup"] },
+      ),
+    );
+    await waitForLoaderToBeRemoved();
+    await waitFor(() => {
+      expect(navigator.sendBeacon).toBeCalledWith("https://coder.com/api/track-deployment", new Blob([JSON.stringify({
+        type: "deployment_setup",
+        deployment_id: MockBuildInfo.deployment_id,
+      })], {
+        type: "application/json",
+      }))
+    })
+  })
 });
diff --git a/site/src/pages/SetupPage/SetupPage.tsx b/site/src/pages/SetupPage/SetupPage.tsx
@@ -1,14 +1,19 @@
-import type { FC } from "react";
+import { useEffect, type FC } from "react";
 import { Helmet } from "react-helmet-async";
-import { useMutation } from "react-query";
+import { useMutation, useQuery } from "react-query";
 import { Navigate, useNavigate } from "react-router-dom";
+import { buildInfo } from "api/queries/buildInfo";
 import { createFirstUser } from "api/queries/users";
 import { Loader } from "components/Loader/Loader";
 import { useAuthContext } from "contexts/auth/AuthProvider";
+import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
 import { pageTitle } from "utils/page";
+import { sendDeploymentEvent } from "utils/telemetry";
 import { SetupPageView } from "./SetupPageView";
 
-export const SetupPage: FC = () => {
+export const SetupPage: FC<{
+  telemetryURL?: string;
+}> = ({ telemetryURL }) => {
   const {
     isLoading,
     signIn,
@@ -18,7 +23,21 @@ export const SetupPage: FC = () => {
   } = useAuthContext();
   const createFirstUserMutation = useMutation(createFirstUser());
   const setupIsComplete = !isConfiguringTheFirstUser;
+  const { metadata } = useEmbeddedMetadata();
+  const buildInfoQuery = useQuery(buildInfo(metadata["build-info"]));
   const navigate = useNavigate();
+  useEffect(() => {
+    if (!buildInfoQuery.data) {
+      return;
+    }
+    sendDeploymentEvent(
+      {
+        type: "deployment_setup",
+        deployment_id: buildInfoQuery.data.deployment_id,
+      },
+      telemetryURL,
+    );
+  }, [buildInfoQuery.data, telemetryURL]);
 
   if (isLoading) {
     return <Loader fullscreen />;
diff --git a/site/src/utils/telemetry.ts b/site/src/utils/telemetry.ts
@@ -0,0 +1,18 @@
+// sendDeploymentEvent sends a CORs payload to coder.com
+// to track a deployment event.
+export const sendDeploymentEvent = (payload: {
+  type: "deployment_setup" | "deployment_login";
+  deployment_id: string;
+  user_id?: string;
+}) => {
+  if (typeof navigator === "undefined" || !navigator.sendBeacon) {
+    // It's fine if we don't report this, it's not required!
+    return;
+  }
+  navigator.sendBeacon(
+    "https://coder.com/api/track-deployment",
+    new Blob([JSON.stringify(payload)], {
+      type: "application/json",
+    }),
+  );
+};
