feat(metrics): Set up Glean frontend metrics for Churn intervention

Author: xlisachan

.circleci/config.yml

@@ -299,12 +299,34 @@ commands:
           name: Wait for Customs
           command: yarn workspace fxa-customs-server start
 
+  ensure-glean-venv:
+    steps:
+      - run:
+          name: Ensure Python venv has pip and glean_parser
+          command: |
+            set -euxo pipefail
+
+            unset PYTHONDONTWRITEBYTECODE
+            export PIP_NO_COMPILE=1
+
+            python3 --version
+            rm -rf .venv
+            python3 -m venv .venv --without-pip
+            . .venv/bin/activate
+
+            curl -sSL https://bootstrap.pypa.io/get-pip.py -o /tmp/get-pip.py
+            python /tmp/get-pip.py --no-compile
+
+            python -m pip install --no-compile --upgrade 'glean_parser~=14.5'
+            python -m pip --version
+
   lint:
     parameters:
       nx_run:
         type: string
         default: run-many
     steps:
+      - ensure-glean-venv
       - run:
           name: Linting
           command: npx nx << parameters.nx_run >> --parallel=1 -t lint
@@ -315,6 +337,7 @@ commands:
         type: string
         default: run-many
     steps:
+      - ensure-glean-venv
       - run:
           name: Pre building shared libraries
           command: NODE_OPTIONS="--max-old-space-size=7168" npx nx run-many -t build --projects=tag:scope:shared:lib --parallel=2 --verbose
@@ -428,6 +451,7 @@ commands:
         type: string
         default: run-many
     steps:
+      - ensure-glean-venv
       - run:
           name: Build
           command: NODE_OPTIONS="--max-old-space-size=7168" npx nx << parameters.nx_run >> -t build --parallel=2 --all --verbose
@@ -712,6 +736,7 @@ jobs:
       - git-checkout
       - restore-workspace
       - gcp-cli/setup
+      - ensure-glean-venv
       - run:
           name: Build shared libs
           command: NODE_OPTIONS="--max-old-space-size=7168" npx nx run-many -t build --projects=tag:scope:shared:lib --parallel=2

_dev/docker/ci/Dockerfile

@@ -6,7 +6,8 @@
 # workspace will be restored into the project folder.
 FROM cimg/node:22.15.1 AS test-runner
 RUN sudo apt-get update && sudo apt-get install -y \
-    python3-venv
+    python3-venv \
+    python3-pip
 WORKDIR /home/circleci
 COPY --chown=circleci:circleci project project
 WORKDIR /home/circleci/project
@@ -39,7 +40,8 @@ RUN npx playwright install --with-deps firefox chromium webkit;
 # workspace will be restored into the project folder.
 FROM cimg/node:22.15.1-browsers AS functional-test-runner
 RUN sudo apt-get update && sudo apt-get install -y \
-    python3-venv
+    python3-venv \
+    python3-pip
 WORKDIR /home/circleci
 COPY --chown=circleci:circleci --from=playwright-install /home/circleci/.cache/ms-playwright .cache/ms-playwright/
 COPY --chown=circleci:circleci project project

apps/payments/api/.env

@@ -57,3 +57,9 @@ GLEAN_CONFIG__APPLICATION_ID=
 GLEAN_CONFIG__VERSION=0.0.0
 GLEAN_CONFIG__CHANNEL='development'
 GLEAN_CONFIG__LOGGER_APP_NAME='fxa-payments-next'
+
+# Glean Client Config
+GLEAN_CLIENT_CONFIG__ENABLED=true
+GLEAN_CLIENT_CONFIG__APPLICATION_ID=
+GLEAN_CLIENT_CONFIG__VERSION=0.0.0
+GLEAN_CLIENT_CONFIG__CHANNEL='development'

apps/payments/next/.env

@@ -110,6 +110,12 @@ GLEAN_CONFIG__APPLICATION_ID=
 GLEAN_CONFIG__CHANNEL='development'
 GLEAN_CONFIG__LOGGER_APP_NAME='fxa-payments-next'
 
+# Glean Client Config
+GLEAN_CLIENT_CONFIG__ENABLED=true
+GLEAN_CLIENT_CONFIG__APPLICATION_ID=
+# GLEAN_CLIENT_CONFIG__VERSION= # Set in next.config.js
+GLEAN_CLIENT_CONFIG__CHANNEL='development'
+
 # CSP Config
 CSP__ACCOUNTS_STATIC_CDN=https://cdn.accounts.firefox.com
 CSP__PAYPAL_API='https://www.sandbox.paypal.com'

apps/payments/next/app/[locale]/layout.tsx

@@ -26,6 +26,18 @@ export default async function RootProviderLayout({
       config={{
         stripePublicApiKey: config.stripePublicApiKey,
         paypalClientId: config.paypal.clientId,
+        glean:
+          config.gleanClientConfig?.enabled !== undefined &&
+          config.gleanClientConfig?.applicationId &&
+          config.gleanClientConfig?.version &&
+          config.gleanClientConfig?.channel
+            ? {
+                enabled: config.gleanClientConfig.enabled,
+                applicationId: config.gleanClientConfig.applicationId,
+                version: config.gleanClientConfig.version,
+                channel: config.gleanClientConfig.channel,
+              }
+            : undefined,
         sentry: {
           ...config.sentry, //spread to make sure its a POJO
         },

apps/payments/next/config/index.ts

@@ -159,6 +159,8 @@ export const config = validate(
   {
     ...process.env,
     GLEAN_CONFIG__VERSION: process.env['GLEAN_CONFIG__VERSION'],
+    GLEAN_CLIENT_CONFIG__VERSION:
+      process.env['GLEAN_CLIENT_CONFIG__VERSION'],
   },
   PaymentsNextConfig
 );

apps/payments/next/next.config.js

@@ -21,6 +21,7 @@ const nextConfig = {
   env: {
     version,
     GLEAN_CONFIG__VERSION: version,
+    GLEAN_CLIENT_CONFIG__VERSION: version,
   },
   distDir: 'build',
   experimental: {
@@ -96,11 +97,11 @@ const nextConfig = {
         headers: [
           {
             key: 'Strict-Transport-Security',
-            value: 'max-age=63072000; includeSubDomains; preload'
-          }
+            value: 'max-age=63072000; includeSubDomains; preload',
+          },
         ],
       },
-    ]
+    ];
   },
 };
 

apps/payments/next/project.json

@@ -5,7 +5,7 @@
   "projectType": "application",
   "targets": {
     "build": {
-      "dependsOn": ["l10n-bundle", "glean-generate"]
+      "dependsOn": ["l10n-bundle", "glean-generate", "payments-metrics:glean-generate-frontend"]
     },
     "dev": {
       "options": {
@@ -39,7 +39,7 @@
     },
     "start": {
       "command": "pm2 start apps/payments/next/pm2.config.js && yarn check:url localhost:3035/__heartbeat__",
-      "dependsOn": ["l10n-bundle", "glean-generate"]
+      "dependsOn": ["l10n-bundle", "glean-generate", "payments-metrics:glean-generate-frontend"]
     },
     "stop": {
       "command": "pm2 stop apps/payments/next/pm2.config.js"

libs/payments/cart/src/lib/cart.service.spec.ts

@@ -131,6 +131,7 @@ import {
   CommonMetricsFactory,
   MockPaymentsGleanConfigProvider,
   MockPaymentsGleanFactory,
+  MockPaymentsGleanClientFactory,
   PaymentsGleanManager,
   PaymentsGleanService,
 } from '@fxa/payments/metrics';
@@ -216,6 +217,7 @@ describe('CartService', () => {
         MockLocationConfigProvider,
         MockNotifierSnsConfigProvider,
         MockPaymentsGleanFactory,
+        MockPaymentsGleanClientFactory,
         MockPaymentsGleanConfigProvider,
         MockPaypalClientConfigProvider,
         MockProfileClientConfigProvider,

libs/payments/cart/src/lib/checkout.service.spec.ts

@@ -126,6 +126,7 @@ import {
   CommonMetricsFactory,
   MockPaymentsGleanConfigProvider,
   MockPaymentsGleanFactory,
+  MockPaymentsGleanClientFactory,
   PaymentsGleanManager,
   PaymentsGleanService,
 } from '@fxa/payments/metrics';
@@ -196,6 +197,7 @@ describe('CheckoutService', () => {
         MockCurrencyConfigProvider,
         MockFirestoreProvider,
         MockPaymentsGleanFactory,
+        MockPaymentsGleanClientFactory,
         MockLocationConfigProvider,
         MockNimbusManagerConfigProvider,
         MockNimbusClientConfigProvider,