refactor: add build and rebuild related statistics and analytics

The new build and rebuild statistics are used by the CLI to submit build related information to GA.

Author: alan-agius4

docs/design/analytics.md

@@ -45,7 +45,7 @@ PROJECT NAME TO BUILD OR A MODULE NAME.**
 | User-scoped custom dimensions  	| 25                       	|
 | All custom metrics             	| 50                       	|
 
-### List Of User Custom Dimensions
+### List of User Custom Dimensions
 
 <!--USER_DIMENSIONS_TABLE_BEGIN-->
 | Name | Parameter | Type |
@@ -63,7 +63,7 @@ PROJECT NAME TO BUILD OR A MODULE NAME.**
 | Optimization | `ep.ng_optimization` | `string` |
 <!--USER_DIMENSIONS_TABLE_END-->
 
-### List Of Event Custom Dimensions
+### List of Event Custom Dimensions
 
 <!--DIMENSIONS_TABLE_BEGIN-->
 | Name | Parameter | Type |
@@ -81,7 +81,7 @@ PROJECT NAME TO BUILD OR A MODULE NAME.**
 | Optimization | `ep.ng_optimization` | `string` |
 <!--DIMENSIONS_TABLE_END-->
 
-### List Of Event Custom Metrics
+### List of Event Custom Metrics
 
 <!--METRICS_TABLE_BEGIN-->
 | Name | Parameter | Type |
@@ -91,6 +91,9 @@ PROJECT NAME TO BUILD OR A MODULE NAME.**
 | InitialChunksCount | `epn.ng_initial_chunks_count` | `number` |
 | ChangedChunksCount | `epn.ng_changed_chunks_count` | `number` |
 | DurationInMs | `epn.ng_duration_ms` | `number` |
+| CssSizeInBytes | `epn.ng_css_size_bytes` | `number` |
+| JsSizeInBytes | `epn.ng_js_size_bytes` | `number` |
+| NgComponentCount | `epn.ng_component_count` | `number` |
 <!--METRICS_TABLE_END-->
 
 ## Debugging

goldens/public-api/angular_devkit/build_angular/index.md

@@ -73,6 +73,7 @@ export interface BrowserBuilderOptions {
 
 // @public
 export type BrowserBuilderOutput = BuilderOutput & {
+    stats: BuildEventStats;
     baseOutputPath: string;
     outputPaths: string[];
     outputPath: string;
@@ -112,6 +113,7 @@ export type DevServerBuilderOptions = Schema;
 // @public
 export type DevServerBuilderOutput = DevServerBuildOutput & {
     baseUrl: string;
+    stats: BuildEventStats;
 };
 
 // @public

goldens/public-api/angular_devkit/build_webpack/index.md

@@ -49,6 +49,7 @@ export function runWebpack(config: webpack.Configuration, context: BuilderContex
 
 // @public (undocumented)
 export function runWebpackDevServer(config: webpack.Configuration, context: BuilderContext, options?: {
+    shouldProvideStats?: boolean;
     devServerConfig?: WebpackDevServer.Configuration;
     logging?: WebpackLoggingCallback;
     webpackFactory?: WebpackFactory;

packages/angular/cli/src/analytics/analytics-collector.ts

@@ -34,6 +34,7 @@ export class AnalyticsCollector {
     const requestParameters: Partial<Record<RequestParameter, PrimitiveTypes>> = {
       [RequestParameter.ProtocolVersion]: 2,
       [RequestParameter.ClientId]: userId,
+      [RequestParameter.UserId]: userId,
       [RequestParameter.TrackingId]:
         /^\d+\.\d+\.\d+$/.test(VERSION.full) && VERSION.full !== '0.0.0'
           ? TRACKING_ID_PROD

packages/angular/cli/src/analytics/analytics-parameters.ts

@@ -94,4 +94,7 @@ export enum EventCustomMetric {
   InitialChunksCount = 'epn.ng_initial_chunks_count',
   ChangedChunksCount = 'epn.ng_changed_chunks_count',
   DurationInMs = 'epn.ng_duration_ms',
+  CssSizeInBytes = 'epn.ng_css_size_bytes',
+  JsSizeInBytes = 'epn.ng_js_size_bytes',
+  NgComponentCount = 'epn.ng_component_count',
 }

packages/angular/cli/src/command-builder/architect-base-command-module.ts

@@ -16,7 +16,7 @@ import { spawnSync } from 'child_process';
 import { existsSync } from 'fs';
 import { resolve } from 'path';
 import { isPackageNameSafeForAnalytics } from '../analytics/analytics';
-import { EventCustomDimension } from '../analytics/analytics-collector';
+import { EventCustomDimension, EventCustomMetric } from '../analytics/analytics-parameters';
 import { assertIsError } from '../utilities/error';
 import { askConfirmation, askQuestion } from '../utilities/prompt';
 import { isTTY } from '../utilities/tty';
@@ -62,18 +62,79 @@ export abstract class ArchitectBaseCommandModule<T extends object>
       ? await this.getAnalytics()
       : undefined;
 
-    analytics?.reportArchitectRunEvent({
-      [EventCustomDimension.BuilderTarget]: builderName,
-    });
+    let outputSubscription;
+    if (analytics) {
+      analytics.reportArchitectRunEvent({
+        [EventCustomDimension.BuilderTarget]: builderName,
+      });
+
+      let firstRun = true;
+      outputSubscription = run.output.subscribe(({ stats }) => {
+        const parameters = this.builderStatsToAnalyticsParameters(stats, builderName);
+        if (!parameters) {
+          return;
+        }
 
-    const { error, success } = await run.output.toPromise();
-    await run.stop();
+        if (firstRun) {
+          firstRun = false;
+          analytics.reportBuildRunEvent(parameters);
+        } else {
+          analytics.reportRebuildRunEvent(parameters);
+        }
+      });
+    }
+
+    try {
+      const { error, success } = await run.output.toPromise();
 
-    if (error) {
-      logger.error(error);
+      if (error) {
+        logger.error(error);
+      }
+
+      return success ? 0 : 1;
+    } finally {
+      await run.stop();
+      outputSubscription?.unsubscribe();
+    }
+  }
+
+  private builderStatsToAnalyticsParameters(
+    stats: json.JsonValue,
+    builderName: string,
+  ): Partial<
+    | Record<EventCustomDimension & EventCustomMetric, string | number | undefined | boolean>
+    | undefined
+  > {
+    if (!stats || typeof stats !== 'object' || !('durationInMs' in stats)) {
+      return undefined;
     }
 
-    return success ? 0 : 1;
+    const {
+      optimization,
+      allChunksCount,
+      aot,
+      lazyChunksCount,
+      initialChunksCount,
+      durationInMs,
+      changedChunksCount,
+      cssSizeInBytes,
+      jsSizeInBytes,
+      ngComponentCount,
+    } = stats;
+
+    return {
+      [EventCustomDimension.BuilderTarget]: builderName,
+      [EventCustomDimension.Aot]: aot,
+      [EventCustomDimension.Optimization]: optimization,
+      [EventCustomMetric.AllChunksCount]: allChunksCount,
+      [EventCustomMetric.LazyChunksCount]: lazyChunksCount,
+      [EventCustomMetric.InitialChunksCount]: initialChunksCount,
+      [EventCustomMetric.ChangedChunksCount]: changedChunksCount,
+      [EventCustomMetric.DurationInMs]: durationInMs,
+      [EventCustomMetric.JsSizeInBytes]: jsSizeInBytes,
+      [EventCustomMetric.CssSizeInBytes]: cssSizeInBytes,
+      [EventCustomMetric.NgComponentCount]: ngComponentCount,
+    };
   }
 
   private _architectHost: WorkspaceNodeModulesArchitectHost | undefined;

packages/angular_devkit/build_angular/src/builders/browser-esbuild/schema.json

@@ -142,6 +142,7 @@
     "optimization": {
       "description": "Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining. For more information, see https://angular.io/guide/workspace-config#optimization-configuration.",
       "default": true,
+      "x-user-analytics": "ep.ng_optimization",
       "oneOf": [
         {
           "type": "object",