From 2a44c8f93201958fba2d1e83046eabcaef186b7c Mon Sep 17 00:00:00 2001
From: Erika <3019731+Princesseuh@users.noreply.github.com>
Date: Wed, 24 Jan 2024 15:13:51 -0500
Subject: [PATCH] feat: Add telemetry for toolbar apps (#9816)

* feat: server side event

* feat: send events to server

* fix: use proper event

* fix: remove unnecessary changes

* chore: changeset

* Update .changeset/spicy-tips-remember.md

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>

* fix: use id

---------

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
---
 .changeset/spicy-tips-remember.md             |  5 +++++
 packages/astro/src/events/toolbar.ts          | 16 ++++++++++++++
 .../src/runtime/client/dev-toolbar/toolbar.ts |  6 ++++++
 .../vite-plugin-dev-toolbar.ts                | 21 +++++++++++++++++++
 4 files changed, 48 insertions(+)
 create mode 100644 .changeset/spicy-tips-remember.md
 create mode 100644 packages/astro/src/events/toolbar.ts

diff --git a/.changeset/spicy-tips-remember.md b/.changeset/spicy-tips-remember.md
new file mode 100644
index 000000000000..d1a3b6f5e66b
--- /dev/null
+++ b/.changeset/spicy-tips-remember.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Adds telemetry for when apps are toggled in the dev toolbar. This data is completely anonymous and only the names of built-in apps are shared with us. This data will help us monitor how much the dev toolbar is used and which apps are used more. For more information on how Astro collects telemetry, visit the following page: https://astro.build/telemetry/
diff --git a/packages/astro/src/events/toolbar.ts b/packages/astro/src/events/toolbar.ts
new file mode 100644
index 000000000000..c9207a3fadae
--- /dev/null
+++ b/packages/astro/src/events/toolbar.ts
@@ -0,0 +1,16 @@
+const EVENT_TOOLBAR_APP_TOGGLED = 'ASTRO_TOOLBAR_APP_TOGGLED';
+
+interface AppToggledEventPayload {
+	app: string;
+}
+
+export function eventAppToggled(options: {
+	// eslint-disable-next-line @typescript-eslint/ban-types
+	appName: 'other' | (string & {});
+}): { eventName: string; payload: AppToggledEventPayload }[] {
+	const payload: AppToggledEventPayload = {
+		app: options.appName,
+	};
+
+	return [{ eventName: EVENT_TOOLBAR_APP_TOGGLED, payload }];
+}
diff --git a/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts b/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts
index 1c9257cf8897..12c1051e8391 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts
@@ -432,6 +432,12 @@ export class AstroDevToolbar extends HTMLElement {
 		// was to close that app, so no action needed.
 		if (app !== activeApp) {
 			await this.setAppStatus(app, true);
+
+			if (import.meta.hot && app.id !== 'astro:more') {
+				import.meta.hot.send('astro:devtoolbar:app:toggled', {
+					app: app,
+				});
+			}
 		}
 	}
 
diff --git a/packages/astro/src/vite-plugin-dev-toolbar/vite-plugin-dev-toolbar.ts b/packages/astro/src/vite-plugin-dev-toolbar/vite-plugin-dev-toolbar.ts
index 022a8586c87e..1c2d53e1cec8 100644
--- a/packages/astro/src/vite-plugin-dev-toolbar/vite-plugin-dev-toolbar.ts
+++ b/packages/astro/src/vite-plugin-dev-toolbar/vite-plugin-dev-toolbar.ts
@@ -1,10 +1,14 @@
 import type * as vite from 'vite';
 import type { AstroPluginOptions } from '../@types/astro.js';
+import { telemetry } from '../events/index.js';
+import { eventAppToggled } from '../events/toolbar.js';
 
 const VIRTUAL_MODULE_ID = 'astro:dev-toolbar';
 const resolvedVirtualModuleId = '\0' + VIRTUAL_MODULE_ID;
 
 export default function astroDevToolbar({ settings, logger }: AstroPluginOptions): vite.Plugin {
+	let telemetryTimeout: ReturnType<typeof setTimeout>;
+
 	return {
 		name: 'astro:dev-toolbar',
 		config() {
@@ -34,6 +38,23 @@ export default function astroDevToolbar({ settings, logger }: AstroPluginOptions
 					`Failed to initialize dev toolbar app ${args.app.name} (${args.app.id}):\n${args.error}`
 				);
 			});
+
+			server.ws.on('astro:devtoolbar:app:toggled', (args) => {
+				// Debounce telemetry to avoid recording events when the user is rapidly toggling apps for debugging
+				clearTimeout(telemetryTimeout);
+				telemetryTimeout = setTimeout(() => {
+					let nameToRecord = args?.app?.id;
+					// Only record apps names for apps that are built-in
+					if (!nameToRecord || !nameToRecord.startsWith('astro:')) {
+						nameToRecord = 'other';
+					}
+					telemetry.record(
+						eventAppToggled({
+							appName: nameToRecord,
+						})
+					);
+				}, 200);
+			});
 		},
 		async load(id) {
 			if (id === resolvedVirtualModuleId) {