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

@@ -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/

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 }];
+}

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

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) {