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

kylecarbs · kylecarbs · commit b701620a0149 · 2024-06-21T19:36:31.000Z
* feat: add cross-origin reporting for telemetry in the dashboard * Respect the telemetry flag * Fix embedded metadata * Fix compilation error * Fix linting (cherry picked from commit 0793a4b)
diff --git a/coderd/apidoc/docs.go b/coderd/apidoc/docs.go
diff --git a/coderd/apidoc/swagger.json b/coderd/apidoc/swagger.json
diff --git a/coderd/coderd.go b/coderd/coderd.go
@@ -450,6 +450,7 @@ func New(options *Options) *API {
 		WorkspaceProxy:  false,
 		UpgradeMessage:  api.DeploymentValues.CLIUpgradeMessage.String(),
 		DeploymentID:    api.DeploymentID,
+		Telemetry:       api.Telemetry.Enabled(),
 	}
 	api.SiteHandler = site.New(&site.Options{
 		BinFS:             binFS,
diff --git a/coderd/telemetry/telemetry.go b/coderd/telemetry/telemetry.go
@@ -100,6 +100,7 @@ type Reporter interface {
 	// database. For example, if a new user is added, a snapshot can
 	// contain just that user entry.
 	Report(snapshot *Snapshot)
+	Enabled() bool
 	Close()
 }
 
@@ -116,6 +117,10 @@ type remoteReporter struct {
 	shutdownAt *time.Time
 }
 
+func (*remoteReporter) Enabled() bool {
+	return true
+}
+
 func (r *remoteReporter) Report(snapshot *Snapshot) {
 	go r.reportSync(snapshot)
 }
@@ -992,4 +997,5 @@ type Experiment struct {
 type noopReporter struct{}
 
 func (*noopReporter) Report(_ *Snapshot) {}
+func (*noopReporter) Enabled() bool      { return false }
 func (*noopReporter) Close()             {}
diff --git a/codersdk/deployment.go b/codersdk/deployment.go
@@ -2162,11 +2162,12 @@ type BuildInfoResponse struct {
 	ExternalURL string `json:"external_url"`
 	// Version returns the semantic version of the build.
 	Version string `json:"version"`
-
 	// DashboardURL is the URL to hit the deployment's dashboard.
 	// For external workspace proxies, this is the coderd they are connected
 	// to.
 	DashboardURL string `json:"dashboard_url"`
+	// Telemetry is a boolean that indicates whether telemetry is enabled.
+	Telemetry bool `json:"telemetry"`
 
 	WorkspaceProxy bool `json:"workspace_proxy"`
 
diff --git a/docs/api/general.md b/docs/api/general.md
diff --git a/docs/api/schemas.md b/docs/api/schemas.md
diff --git a/enterprise/wsproxy/wsproxysdk/wsproxysdk_test.go b/enterprise/wsproxy/wsproxysdk/wsproxysdk_test.go
@@ -216,7 +216,7 @@ func TestDialCoordinator(t *testing.T) {
 			Node: &proto.Node{
 				Id:            55,
 				AsOf:          timestamppb.New(time.Unix(1689653252, 0)),
-				Key:           peerNodeKey[:],
+				Key:           peerNodeKey,
 				Disco:         string(peerDiscoKey),
 				PreferredDerp: 0,
 				DerpLatency: map[string]float64{
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/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
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);
@@ -40,6 +42,15 @@ export const LoginPage: FC = () => {
   }, [isSignedIn, buildInfoQuery.data, user?.id]);
 
   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
@@ -85,6 +96,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("/");
         }}
       />
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,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",
+          },
+        ),
+      );
+    });
+  });
 });
diff --git a/site/src/pages/SetupPage/SetupPage.tsx b/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 />;
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -202,6 +202,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[] = [
diff --git a/site/src/utils/telemetry.ts b/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",
+      },
+    ),
+  );
+};

Original file line number	Diff line number	Diff line change
`@@ -450,6 +450,7 @@ func New(options Options) API {`
`450`	`450`	`WorkspaceProxy: false,`
`451`	`451`	`UpgradeMessage: api.DeploymentValues.CLIUpgradeMessage.String(),`
`452`	`452`	`DeploymentID: api.DeploymentID,`
	`453`	`+ Telemetry: api.Telemetry.Enabled(),`
`453`	`454`	`}`
`454`	`455`	`api.SiteHandler = site.New(&site.Options{`
`455`	`456`	`BinFS: binFS,`