feat: add cross-origin reporting for telemetry in the dashboard (#13612)

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

* Respect the telemetry flag

* Fix embedded metadata

* Fix compilation error

* Fix linting

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", {

site/src/api/typesGenerated.ts

@@ -171,6 +171,7 @@ export interface BuildInfoResponse {
   readonly external_url: string;
   readonly version: string;
   readonly dashboard_url: string;
+  readonly telemetry: boolean;
   readonly workspace_proxy: boolean;
   readonly agent_api_version: string;
   readonly upgrade_message: string;

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,15 @@ export const LoginPage: FC = () => {
   const buildInfoQuery = useQuery(buildInfo(metadata["build-info"]));
 
   if (isSignedIn) {
+    if (buildInfoQuery.data) {
+      // This uses `navigator.sendBeacon`, so window.href
+      // will not stop the request from being sent!
+      sendDeploymentEvent(buildInfoQuery.data, {
+        type: "deployment_login",
+        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 +85,15 @@ export const LoginPage: FC = () => {
         isSigningIn={isSigningIn}
         onSignIn={async ({ email, password }) => {
           await signIn(email, password);
+          if (buildInfoQuery.data) {
+            // This uses `navigator.sendBeacon`, so navigating away
+            // will not prevent it!
+            sendDeploymentEvent(buildInfoQuery.data, {
+              type: "deployment_login",
+              user_id: user?.id,
+            });
+          }
+
           navigate("/");
         }}
       />

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,42 @@ 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",
+          },
+        ),
+      );
+    });
+  });
 });

site/src/pages/SetupPage/SetupPage.tsx

@@ -1,11 +1,14 @@
-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 = () => {
@@ -18,7 +21,17 @@ 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(buildInfoQuery.data, {
+      type: "deployment_setup",
+    });
+  }, [buildInfoQuery.data]);
 
   if (isLoading) {
     return <Loader fullscreen />;

site/src/testHelpers/entities.ts

@@ -205,6 +205,7 @@ export const MockBuildInfo: TypesGen.BuildInfoResponse = {
   workspace_proxy: false,
   upgrade_message: "My custom upgrade message",
   deployment_id: "510d407f-e521-4180-b559-eab4a6d802b8",
+  telemetry: true,
 };
 
 export const MockSupportLinks: TypesGen.LinkConfig[] = [

site/src/utils/telemetry.ts

@@ -0,0 +1,33 @@
+import type { BuildInfoResponse } from "api/typesGenerated";
+
+// sendDeploymentEvent sends a CORs payload to coder.com
+// to track a deployment event.
+export const sendDeploymentEvent = (
+  buildInfo: BuildInfoResponse,
+  payload: {
+    type: "deployment_setup" | "deployment_login";
+    user_id?: string;
+  },
+) => {
+  if (typeof navigator === "undefined" || !navigator.sendBeacon) {
+    // It's fine if we don't report this, it's not required!
+    return;
+  }
+  if (!buildInfo.telemetry) {
+    return;
+  }
+  navigator.sendBeacon(
+    "https://coder.com/api/track-deployment",
+    new Blob(
+      [
+        JSON.stringify({
+          ...payload,
+          deployment_id: buildInfo.deployment_id,
+        }),
+      ],
+      {
+        type: "application/json",
+      },
+    ),
+  );
+};