Merge branch 'main' into lighthouse-report

flozia · web-flow · commit f34a5f81a540 · 2025-01-18T13:23:02.000+01:00
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/[[...slug]]/page.tsx b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/[[...slug]]/page.tsx
@@ -167,7 +167,7 @@ export default async function DashboardPage({ params, searchParams }: Props) {
       totalNumberOfPerformedScans={profileStats?.total}
       isNewUser={isNewUser}
       elapsedTimeInDaysSinceInitialScan={elapsedTimeInDaysSinceInitialScan}
-      experimentData={experimentData}
+      experimentData={experimentData["Features"]}
       activeTab={activeTab}
       hasFirstMonitoringScan={hasFirstMonitoringScan}
       signInCount={signInCount}
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/[[...slug]]/page.tsx b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/[[...slug]]/page.tsx
@@ -125,7 +125,7 @@ export default async function SettingsPage({ params, searchParams }: Props) {
       yearlySubscriptionUrl={`${yearlySubscriptionUrl}&${additionalSubplatParams.toString()}`}
       subscriptionBillingAmount={getSubscriptionBillingAmount()}
       enabledFeatureFlags={enabledFeatureFlags}
-      experimentData={experimentData}
+      experimentData={experimentData["Features"]}
       lastScanDate={lastOneRepScan?.created_at}
       isMonthlySubscriber={isMonthlySubscriber}
       activeTab={activeTab}
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/[[...slug]]/page.tsx b/src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/[[...slug]]/page.tsx
@@ -77,7 +77,7 @@ export default async function Onboarding({ params, searchParams }: Props) {
       breachesTotalCount={allBreachesCount}
       stepId={firstSlug === FreeScanSlug ? "enterInfo" : "getStarted"}
       previousRoute={previousRoute}
-      experimentData={experimentData}
+      experimentData={experimentData["Features"]}
     />
   );
 }
diff --git a/src/app/(proper_react)/(redesign)/(public)/page.tsx b/src/app/(proper_react)/(redesign)/(public)/page.tsx
@@ -59,39 +59,41 @@ export default async function Page({ searchParams }: Props) {
     oneRepActivations > monthlySubscribersQuota;
   return (
     <AccountsMetricsFlowProvider
-      enabled={experimentData["landing-page-free-scan-cta"].enabled}
+      enabled={experimentData["Features"]["landing-page-free-scan-cta"].enabled}
       metricsFlowParams={{
         entrypoint: CONST_URL_MONITOR_LANDING_PAGE_ID,
         entrypoint_experiment: "landing-page-free-scan-cta",
         entrypoint_variation:
-          experimentData["landing-page-free-scan-cta"].variant,
+          experimentData["Features"]["landing-page-free-scan-cta"].variant,
         form_type:
-          experimentData["landing-page-free-scan-cta"].variant ===
+          experimentData["Features"]["landing-page-free-scan-cta"].variant ===
           "ctaWithEmail"
             ? "email"
             : "button",
         service: process.env.OAUTH_CLIENT_ID as string,
       }}
     >
       {enabledFeatureFlags.includes("LandingPageRedesign") &&
-      experimentData["landing-page-redesign-plus-eligible-experiment"]
-        .enabled &&
-      experimentData["landing-page-redesign-plus-eligible-experiment"]
-        .variant === "redesign" ? (
+      experimentData["Features"][
+        "landing-page-redesign-plus-eligible-experiment"
+      ].enabled &&
+      experimentData["Features"][
+        "landing-page-redesign-plus-eligible-experiment"
+      ].variant === "redesign" ? (
         <LandingViewRedesign
           eligibleForPremium={eligibleForPremium}
           l10n={getL10n()}
           countryCode={countryCode}
           scanLimitReached={scanLimitReached}
-          experimentData={experimentData}
+          experimentData={experimentData["Features"]}
         />
       ) : (
         <LandingView
           eligibleForPremium={eligibleForPremium}
           l10n={getL10n()}
           countryCode={countryCode}
           scanLimitReached={scanLimitReached}
-          experimentData={experimentData}
+          experimentData={experimentData["Features"]}
         />
       )}
     </AccountsMetricsFlowProvider>
diff --git a/src/app/api/v1/user/welcome-scan/create/route.ts b/src/app/api/v1/user/welcome-scan/create/route.ts
@@ -98,7 +98,7 @@ export async function POST(
     previewMode: searchParams.get("nimbus_preview") === "true",
   });
   const optionalInfoExperimentData =
-    experimentData["welcome-scan-optional-info"];
+    experimentData["Features"]["welcome-scan-optional-info"];
 
   const profileData: CreateProfileRequest = {
     first_name: firstName,
diff --git a/src/app/functions/server/getExperiments.ts b/src/app/functions/server/getExperiments.ts
@@ -12,6 +12,14 @@ import {
 import { ExperimentationId } from "./getExperimentationId";
 import { getEnabledFeatureFlags } from "../../../db/tables/featureFlags";
 
+/**
+ * After we removing the `CirrusV2` flag, we can return the full `ExperimentData`/
+ * But until then, we can make the old experiment data object look like the new one,
+ * but we can't backfill the `Enrollments` property.
+ */
+export type ExperimentData_V2_Or_V2LikeV1 = Partial<ExperimentData> &
+  Required<Pick<ExperimentData, "Features">>;
+
 /**
  * Call the Cirrus sidecar, which returns a list of eligible experiments for the current user.
  *
@@ -28,9 +36,9 @@ export async function getExperiments(params: {
   locale: string;
   countryCode: string;
   previewMode: boolean;
-}): Promise<ExperimentData["Features"]> {
+}): Promise<ExperimentData_V2_Or_V2LikeV1> {
   if (["local"].includes(process.env.APP_ENV ?? "local")) {
-    return localExperimentData["Features"];
+    return localExperimentData;
   }
 
   if (!process.env.NIMBUS_SIDECAR_URL) {
@@ -78,19 +86,22 @@ export async function getExperiments(params: {
       throw new Error(`Cirrus request failed: ${response.statusText}`);
     }
 
-    const json = await response.json();
+    // With the `CirrusV2` flag enabled, the response is `ExperimentData`,
+    // otherwise, it's just `ExperimentData["Features"]`.
+    const json = (await response.json()) as
+      | ExperimentData
+      | ExperimentData["Features"];
 
-    let experimentData;
+    let experimentData: ExperimentData_V2_Or_V2LikeV1;
     if (flags.includes("CirrusV2")) {
-      experimentData = json["Features"];
+      experimentData = json as ExperimentData;
     } else {
-      experimentData = json;
+      experimentData = {
+        Features: json as ExperimentData["Features"],
+      };
     }
 
-    return (
-      (experimentData as ExperimentData["Features"]) ??
-      defaultExperimentData["Features"]
-    );
+    return (experimentData as ExperimentData) ?? defaultExperimentData;
   } catch (ex) {
     logger.error("Could not connect to Cirrus", {
       serverUrl,
@@ -99,6 +110,6 @@ export async function getExperiments(params: {
       params,
     });
     captureException(ex);
-    return defaultExperimentData["Features"];
+    return defaultExperimentData;
   }
 }
diff --git a/src/app/hooks/useGlean.ts b/src/app/hooks/useGlean.ts
@@ -9,9 +9,14 @@ import EventMetricType from "@mozilla/glean/private/metrics/event";
 import type { GleanMetricMap } from "../../telemetry/generated/_map";
 import { useSession } from "next-auth/react";
 import { hasPremium } from "../functions/universal/user";
+import { useExperiments } from "../../contextProviders/experiments";
 
 export const useGlean = () => {
   const session = useSession();
+  const experimentData = useExperiments();
+  // Telemetry recording is mocked in our unit tests, therefore we
+  // do not have test coverage for this method.
+  /* c8 ignore start */
   const isPremiumUser = hasPremium(session.data?.user);
   const record = useCallback(
     async <
@@ -36,10 +41,34 @@ export const useGlean = () => {
         ? "Plus"
         : "Free";
 
+      // Record the `nimbus_*` keys on all events.
+      // `nimbus_*` is set on every metric, but it's too much work for TypeScript
+      // to infer that — hence the type assertion.
+
+      if (
+        experimentData &&
+        typeof experimentData["Enrollments"] !== "undefined"
+      ) {
+        (data as GleanMetricMap["button"]["click"]).nimbus_user_id =
+          experimentData["Enrollments"]["nimbus_user_id"];
+        (data as GleanMetricMap["button"]["click"]).nimbus_app_id =
+          experimentData["Enrollments"]["app_id"];
+        (data as GleanMetricMap["button"]["click"]).nimbus_experiment =
+          experimentData["Enrollments"]["experiment"];
+        (data as GleanMetricMap["button"]["click"]).nimbus_branch =
+          experimentData["Enrollments"]["branch"];
+        (data as GleanMetricMap["button"]["click"]).nimbus_experiment_type =
+          experimentData["Enrollments"]["experiment_type"];
+        (data as GleanMetricMap["button"]["click"]).nimbus_is_preview =
+          experimentData["Enrollments"]["is_preview"].toString();
+      } else {
+        console.warn("No experiment data available for Glean");
+      }
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       mod[event].record(data as any);
     },
-    [isPremiumUser],
+    [isPremiumUser, experimentData],
   );
   /* c8 ignore end */
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -17,6 +17,10 @@ import { GoogleAnalyticsWorkaround } from "./components/client/GoogleAnalyticsWo
 import StripeScript from "./components/client/StripeScript";
 import { GleanScript } from "./components/client/GleanScript";
 import { getExperimentationId } from "./functions/server/getExperimentationId";
+import { getExperiments } from "./functions/server/getExperiments";
+import { getCountryCode } from "./functions/server/getCountryCode";
+import { ExperimentsProvider } from "../contextProviders/experiments";
+import * as Sentry from "@sentry/nextjs";
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
 
@@ -54,6 +58,29 @@ export default async function RootLayout({
   const nonce = headers().get("x-nonce") ?? "";
   const currentLocale = getLocale(getL10nBundles());
   const session = await getServerSession();
+  const headersList = headers();
+  const countryCode = getCountryCode(headersList);
+
+  // Check for Nimbus preview mode. Note that this requires a full page reload
+  // to activate: https://nextjs.org/docs/app/api-reference/file-conventions/layout#caveats
+  const nimbusPreviewMode = headers().get("x-nimbus-preview-mode");
+  const experimentationId = getExperimentationId(session?.user ?? null);
+  const experimentData = await getExperiments({
+    experimentationId: experimentationId,
+    countryCode: countryCode,
+    locale: currentLocale,
+    previewMode: nimbusPreviewMode === "true",
+  });
+
+  const nimbus_user_id = experimentData["Enrollments"]?.nimbus_user_id;
+  if (
+    typeof nimbus_user_id !== "undefined" &&
+    nimbus_user_id !== experimentationId
+  ) {
+    Sentry.captureMessage(
+      `Nimbus user ID from Cirrus: [${nimbus_user_id}] did not match experimentationId: [${experimentationId}]`,
+    );
+  }
 
   return (
     <html lang={currentLocale}>
@@ -64,12 +91,14 @@ export default async function RootLayout({
         data-ga4-measurement-id={CONST_GA4_MEASUREMENT_ID}
         data-node-env={process.env.NODE_ENV}
       >
-        <SessionProvider session={session}>{children}</SessionProvider>
+        <ExperimentsProvider experimentData={experimentData}>
+          <SessionProvider session={session}>{children}</SessionProvider>
+        </ExperimentsProvider>
       </body>
       <StripeScript />
       <GleanScript
         channel={process.env.APP_ENV ?? ""}
-        experimentationId={getExperimentationId(session?.user ?? null)}
+        experimentationId={experimentationId}
       />
       {headers().get("DNT") !== "1" && (
         <GoogleAnalyticsWorkaround
diff --git a/src/contextProviders/experiments.tsx b/src/contextProviders/experiments.tsx
@@ -0,0 +1,32 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use client";
+
+import { ReactNode, createContext, useContext } from "react";
+import { ExperimentData_V2_Or_V2LikeV1 } from "../app/functions/server/getExperiments";
+
+interface ExperimentsProviderProps {
+  children: ReactNode;
+  experimentData: ExperimentData_V2_Or_V2LikeV1;
+}
+
+export const ExperimentsContext =
+  createContext<ExperimentData_V2_Or_V2LikeV1 | null>(null);
+
+export const ExperimentsProvider = ({
+  children,
+  experimentData,
+}: ExperimentsProviderProps) => {
+  return (
+    <ExperimentsContext.Provider value={experimentData}>
+      {children}
+    </ExperimentsContext.Provider>
+  );
+};
+
+export const useExperiments = () => {
+  const context = useContext(ExperimentsContext);
+  return context;
+};
diff --git a/src/middleware.ts b/src/middleware.ts
@@ -29,6 +29,14 @@ export function middleware(request: NextRequest) {
     existingExperimentationId?.value ?? `guest-${crypto.randomUUID()}`;
   requestHeaders.set("x-experimentation-id", experimentationId);
 
+  // Check for Nimbus preview mode. Note that this requires a full page reload
+  // to activate: https://nextjs.org/docs/app/api-reference/file-conventions/layout#caveats
+  const nimbusPreviewMode = request.nextUrl.searchParams.get("nimbus_preview");
+  requestHeaders.set(
+    "x-nimbus-preview-mode",
+    nimbusPreviewMode === "true" ? "true" : "false",
+  );
+
   const response = NextResponse.next({
     request: {
       headers: requestHeaders,
diff --git a/src/telemetry/metrics.yaml b/src/telemetry/metrics.yaml

Original file line number	Diff line number	Diff line change
`@@ -77,7 +77,7 @@ export default async function Onboarding({ params, searchParams }: Props) {`
`77`	`77`	`breachesTotalCount={allBreachesCount}`
`78`	`78`	`stepId={firstSlug === FreeScanSlug ? "enterInfo" : "getStarted"}`
`79`	`79`	`previousRoute={previousRoute}`
`80`		`- experimentData={experimentData}`
	`80`	`+ experimentData={experimentData["Features"]}`
`81`	`81`	`/>`
`82`	`82`	`);`
`83`	`83`	`}`