[Analytics] Track install and error events (#1984)

This PR will track which plugins and themes were installed during boot
from a Blueprint, by sending a `installTheme` and `installPlugin`
events.
An `error` event will be sent if Playground experiences a boot or PHP
request error.

All events are sent to Google Analytics and don't contain any personal
data information.

`InstallTheme` and `InstallPlugin` events will include the resource type
and the theme/plugin slug if the resource type is WordPress.org.

`Error` events will only send an error `source` which can be:

- `bootSiteClient` - error occurred during boot.
- `request` - a PHP or SQL error occurred during a PHP request.
- `unknown` - for request errors that don't have a source. This
shouldn't happen but we still want to catch it to confirm it's not
happening in practice.

The purpose of the `error` event is to provide insights into how
frequently users experience issues.
It's not intended for logging or debugging.  

Fixes
[#1778](#1778)

## Testing Instructions (or ideally a Blueprint)

- The easiest way to see events is to add a `console.log` before this
line
https://github.com/WordPress/wordpress-playground/blob/acea593bc551aac14aebd982333be592ee4b298c/packages/playground/website/src/lib/tracking.ts#L26
- Open this link to
[http://127.0.0.1:5400/website-server/?plugin=friends&theme=twentytwentythree](http://127.0.0.1:5400/website-server/?plugin=friends&theme=twentytwentythree)
- Confirm that a `installPlugin` and `installTheme` install event were
sent with the slug and correct resource type
- Open this link to [install a plugin from a git
resource.](http://127.0.0.1:5400/website-server/#{%22steps%22:%20[{%20%22step%22:%20%22installPlugin%22,%20%22pluginData%22:%20{%20%22resource%22:%20%22git:directory%22,%20%22url%22:%20%22https://github.com/WordPress/block-development-examples%22,%20%22ref%22:%20%22HEAD%22,%20%22path%22:%20%22plugins/data-basics-59c8f8%22%20},%20%22options%22:%20{%20%22activate%22:%20true%20}%20}]})
- Confirm that a `installPlugin` event was sent with the correct
resource type
- Open this link
[http://127.0.0.1:5400/website-server/?plugin=friefffnds&theme=astra](http://127.0.0.1:5400/website-server/?plugin=friefffnds&theme=astra)
- Confirm that at `bootSiteClient` error was sent

Author: bgrgicak

packages/playground/blueprints/src/index.ts

@@ -25,6 +25,7 @@ export {
 	// BC:
 	compileBlueprintV1 as compileBlueprint,
 	runBlueprintV1Steps as runBlueprintSteps,
+	isStepDefinition,
 } from './lib/v1/compile';
 export type {
 	CompileBlueprintV1Options,

packages/playground/blueprints/src/lib/v1/compile.ts

@@ -607,7 +607,7 @@ function compileVersion<T>(
  * @param step The object to test
  * @returns Whether the object is a StepDefinition
  */
-function isStepDefinition(
+export function isStepDefinition(
 	step: Step | string | undefined | false | null
 ): step is StepDefinition {
 	return !!(typeof step === 'object' && step);

packages/playground/website/src/components/layout/index.tsx

@@ -5,7 +5,7 @@ import { CSSTransition } from 'react-transition-group';
 import type { PlaygroundReduxState } from '../../lib/state/redux/store';
 import { useAppSelector } from '../../lib/state/redux/store';
 import type { BlueprintV1Declaration } from '@wp-playground/blueprints';
-import { useState, useEffect, useRef } from 'react';
+import { useState, useRef } from 'react';
 import { acquireOAuthTokenIfNeeded } from '../../github/acquire-oauth-token-if-needed';
 import { GithubExportModal } from '../../github/github-export-form';
 import type { ExportFormValues } from '../../github/github-export-form/form';
@@ -125,9 +125,6 @@ function Modals(blueprint: BlueprintV1Declaration) {
 		return values;
 	});
 
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	useEffect(() => {}, []);
-
 	const currentModal = useAppSelector(
 		(state: PlaygroundReduxState) => state.ui.activeModal
 	);

packages/playground/website/src/lib/state/redux/boot-site-client.ts

@@ -9,7 +9,7 @@ import {
 	removeClientInfo,
 	updateClientInfo,
 } from './slice-clients';
-import { logTrackingEvent } from '../../tracking';
+import { logBlueprintEvents, logTrackingEvent } from '../../tracking';
 import {
 	type Blueprint,
 	BlueprintFilesystemRequiredError,
@@ -150,16 +150,8 @@ export function bootSiteClient(
 					playground = (window as any)['playground'] =
 						playgroundClient;
 				},
-				// Log the names of provided Blueprint's steps.
-				// Only the names (e.g. "runPhp" or "login") are logged. Step options like
-				// code, password, URLs are never sent anywhere.
-				onBlueprintValidated: (blueprint) => {
-					for (const step of blueprint.steps || []) {
-						if (typeof step === 'object' && step?.step) {
-							logTrackingEvent('step', { step: step.step });
-						}
-					}
-				},
+				// Log Blueprint events
+				onBlueprintValidated: logBlueprintEvents,
 				mounts: mountDescriptor
 					? [
 							{
@@ -174,6 +166,7 @@ export function bootSiteClient(
 			});
 		} catch (e) {
 			logger.error(e);
+			logTrackingEvent('error', { source: 'bootSiteClient' });
 
 			if (
 				(e as any).name === 'ArtifactExpiredError' ||

packages/playground/website/src/lib/tracking.ts

@@ -1,23 +1,78 @@
+import type { BlueprintV1 } from '@wp-playground/blueprints';
+import {
+	getBlueprintDeclaration,
+	isStepDefinition,
+} from '@wp-playground/blueprints';
+import { logger } from '@php-wasm/logger';
 /**
  * Declare the global window.gtag function
  */
 declare global {
-    interface Window { gtag: any; }
+	interface Window {
+		gtag: any;
+	}
 }
 
 /**
  * Google Analytics event names
  */
-type GAEvent = 'load' | 'step';
+type GAEvent = 'load' | 'step' | 'installPlugin' | 'installTheme' | 'error';
 
 /**
  * Log a tracking event to Google Analytics
  * @param GAEvent The event name
  * @param Object Event data
  */
-export const logTrackingEvent = (event: GAEvent, data?: {[key: string]: string}) => {
-    if (typeof window === 'undefined' || !window.gtag) {
-        return;
-    }
-    window.gtag('event', event, data);
-}
+export const logTrackingEvent = (
+	event: GAEvent,
+	data?: { [key: string]: string }
+) => {
+	try {
+		if (typeof window === 'undefined' || !window.gtag) {
+			return;
+		}
+		window.gtag('event', event, data);
+	} catch (error) {
+		logger.warn('Failed to log tracking event', event, data, error);
+	}
+};
+
+/**
+ * Log Blueprint events
+ * @param blueprint The Blueprint
+ */
+export const logBlueprintEvents = async (blueprint: BlueprintV1) => {
+	/**
+	 * Log the names of provided Blueprint steps.
+	 * Only the names (e.g. "runPhp" or "login") are logged. Step options like
+	 * code, password, URLs are never sent anywhere.
+	 *
+	 * For installPlugin and installTheme, the plugin/theme slug is logged.
+	 */
+	const blueprintDeclaration = await getBlueprintDeclaration(blueprint);
+	if (blueprintDeclaration.steps) {
+		for (const step of blueprintDeclaration.steps) {
+			if (!isStepDefinition(step)) {
+				continue;
+			}
+			logTrackingEvent('step', { step: step.step });
+			if (step.step === 'installPlugin') {
+				const data = {
+					resource: (step as any).pluginData.resource,
+				};
+				if ((step as any).pluginData.slug) {
+					(data as any).plugin = (step as any).pluginData.slug;
+				}
+				logTrackingEvent('installPlugin', data);
+			} else if (step.step === 'installTheme') {
+				const data = {
+					resource: (step as any).themeData.resource,
+				};
+				if ((step as any).themeData.slug) {
+					(data as any).theme = (step as any).themeData.slug;
+				}
+				logTrackingEvent('installTheme', data);
+			}
+		}
+	}
+};