d770386c-4ec4-4262-acd2-d5922c976ef1

Committed 24 Jul 2025 03:18PM UTC coverage: 86.288%. Remained the same

Build # d770386c-4ec4-4262-acd2-d5922c976ef1

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #5730 from mozilla/MPP-4282-bugfix-domain-mock-leak

MPP-4282: (bugfix) Removed Hardcoded Domain in PROD

Run Details

2736 of 3943 branches covered (69.39%)

Branch coverage included in aggregate %.

0 of 2 new or added lines in 1 file covered. (0.0%)

1 existing line in 1 file now uncovered.

17879 of 19948 relevant lines covered (89.63%)

9.97 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/frontend/src/pages/_app.page.tsx

/* eslint-disable @typescript-eslint/no-explicit-any */
import "../styles/globals.scss";
import { createElement, useEffect, useRef, useState } from "react";
import type { AppProps } from "next/app";
import { useRouter } from "next/router";
import { LocalizationProvider, ReactLocalization } from "@fluent/react";
import { OverlayProvider } from "@react-aria/overlays";
import ReactGa from "react-ga";
import { getL10n } from "../functions/getL10n";
import { AddonDataContext, useAddonElementWatcher } from "../hooks/addon";
import { ReactAriaI18nProvider } from "../components/ReactAriaI18nProvider";
import { useIsLoggedIn } from "../hooks/session";
import { useMetrics } from "../hooks/metrics";
import {
  useGoogleAnalytics,
  initGoogleAnalytics,
} from "../hooks/googleAnalytics";
import "@stripe/stripe-js";

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();
  const isLoggedIn = useIsLoggedIn();
  const googleAnalytics = useGoogleAnalytics();
  const metricsEnabled = useMetrics();
  const addonDataElementRef = useRef<HTMLElement>(null);

  const addonData = useAddonElementWatcher(addonDataElementRef);
  const [l10n, setL10n] = useState<ReactLocalization>(
    getL10n({ deterministicLocales: true }),
  );

  useEffect(() => {
    // When pre-rendering and on the first render, we deterministically load the
    // `en` bundle.  After that, however, we want to load the bundles relevant
    // to the user's preferred locales. (See the `useL10n` hook for more detail
    // on why.) Unfortunately we can't load additional needed locales
    // asynchronously on the client-side yet using @fluent/react, see
    // https://github.com/projectfluent/fluent.js/wiki/ReactLocalization/43a959b35fbf9eea694367f948cfb1387914657c#flexibility
    setL10n(getL10n({ deterministicLocales: false }));
  }, []);

  useEffect(() => {
    if (metricsEnabled === "enabled" && !googleAnalytics) {
      initGoogleAnalytics();
    }
  }, [metricsEnabled, googleAnalytics]);

  useEffect(() => {
    if (!googleAnalytics) return;
    ReactGa.pageview(router.asPath);
  }, [router.asPath, googleAnalytics]);

  const [waitingForMsw, setIsWaitingForMsw] = useState(
    process.env.NEXT_PUBLIC_MOCK_API === "true",
  );
  useEffect(() => {
    if (process.env.NEXT_PUBLIC_MOCK_API !== "true") {
      return;
    }
    (async () => {
      const { initialiseApiMocks } = await import("../apiMocks/initialise");
      const { mockIds } = await import("../apiMocks/mockData");

      await initialiseApiMocks();

      if (
        typeof URLSearchParams !== "undefined" &&
        typeof document !== "undefined"
      ) {
        // When deploying the frontend with a mocked back-end,
        // this query parameter will allow us to automatically "sign in" with one
        // of the mock users. This is useful to be able to give testers a link
        // in which to see a particular feature:
        const searchParams = new URLSearchParams(document.location.search);
        const mockId = searchParams.get("mockId");
        const selectedMockId = mockIds.find((id) => id === mockId);
        if (typeof selectedMockId === "string") {
          // See `src/hooks/api/api.ts`; this localStorage entry is how we tell the
          // API mock what mock data we want to load:
          localStorage.setItem("authToken", selectedMockId);
        }
      }

      setIsWaitingForMsw(false);
    })();
  }, []);

  if (waitingForMsw) {
    // As soon as we start rendering the app, it will start sending requests.
    // If we're running the demo site, we want to hold off on doing that until
    // MSW is fully initialised. Usually, you'd run the initialisation before
    // rendering in the first place, but since Next.js handles the start of the
    // rendering (which it does to support server-side rendering), we're doing
    // it here instead. For more info, see
    // https://mswjs.io/docs/integrations/browser#conditionally-enable-mocking
    return <></>;
  }

  return (
    <LocalizationProvider l10n={l10n}>
      <ReactAriaI18nProvider>
        <AddonDataContext.Provider value={addonData}>
          {createElement("firefox-private-relay-addon", {
            // The following attributes are set by the add-on,
            // and read by the website (via the useAddonElementWatcher hook).
            "data-addon-installed": addonData.present,
            "data-local-labels": JSON.stringify(addonData.localLabels),
            // The following attributes are set by the website,
            // and read by the add-on.
            // Capitalised boolean for backwards compatibility;
            // this element was previously generated by Django:
            "data-user-logged-in":
              isLoggedIn === "logged-in" ? "True" : "False",
          })}
          <OverlayProvider id="overlayProvider">
            <Component {...pageProps} />
          </OverlayProvider>
        </AddonDataContext.Provider>
      </ReactAriaI18nProvider>
    </LocalizationProvider>
  );
}
export default MyApp;

1	/* eslint-disable @typescript-eslint/no-explicit-any */
2	import "../styles/globals.scss";	×
3	import { createElement, useEffect, useRef, useState } from "react";	×
4	import type { AppProps } from "next/app";
5	import { useRouter } from "next/router";	×
6	import { LocalizationProvider, ReactLocalization } from "@fluent/react";	×
7	import { OverlayProvider } from "@react-aria/overlays";	×
8	import ReactGa from "react-ga";	×
9	import { getL10n } from "../functions/getL10n";	×
10	import { AddonDataContext, useAddonElementWatcher } from "../hooks/addon";	×
11	import { ReactAriaI18nProvider } from "../components/ReactAriaI18nProvider";	×
12	import { useIsLoggedIn } from "../hooks/session";	×
13	import { useMetrics } from "../hooks/metrics";	×
14	import {
15	useGoogleAnalytics,
16	initGoogleAnalytics,
17	} from "../hooks/googleAnalytics";	×
18	import "@stripe/stripe-js";	×
19
20	function MyApp({ Component, pageProps }: AppProps) {
21	const router = useRouter();	×
22	const isLoggedIn = useIsLoggedIn();	×
23	const googleAnalytics = useGoogleAnalytics();	×
24	const metricsEnabled = useMetrics();	×
25	const addonDataElementRef = useRef<HTMLElement>(null);	×
26
27	const addonData = useAddonElementWatcher(addonDataElementRef);	×
28	const [l10n, setL10n] = useState<ReactLocalization>(	×
29	getL10n({ deterministicLocales: true }),
30	);
31
32	useEffect(() => {	×
33	// When pre-rendering and on the first render, we deterministically load the
34	// `en` bundle. After that, however, we want to load the bundles relevant
35	// to the user's preferred locales. (See the `useL10n` hook for more detail
36	// on why.) Unfortunately we can't load additional needed locales
37	// asynchronously on the client-side yet using @fluent/react, see
38	// https://github.com/projectfluent/fluent.js/wiki/ReactLocalization/43a959b35fbf9eea694367f948cfb1387914657c#flexibility
39	setL10n(getL10n({ deterministicLocales: false }));	×
40	}, []);
41
42	useEffect(() => {	×
43	if (metricsEnabled === "enabled" && !googleAnalytics) {	×
44	initGoogleAnalytics();	×
45	}
46	}, [metricsEnabled, googleAnalytics]);
47
48	useEffect(() => {	×
49	if (!googleAnalytics) return;	×
50	ReactGa.pageview(router.asPath);	×
51	}, [router.asPath, googleAnalytics]);
52
53	const [waitingForMsw, setIsWaitingForMsw] = useState(	×
54	process.env.NEXT_PUBLIC_MOCK_API === "true",
55	);
56	useEffect(() => {	×
57	if (process.env.NEXT_PUBLIC_MOCK_API !== "true") {	×
58	return;	×
59	}
60	(async () => {	×
NEW 61	const { initialiseApiMocks } = await import("../apiMocks/initialise");	×
NEW 62	const { mockIds } = await import("../apiMocks/mockData");	×
63
UNCOV 64	await initialiseApiMocks();	×
65
66	if (	×
67	typeof URLSearchParams !== "undefined" &&	×
68	typeof document !== "undefined"
69	) {
70	// When deploying the frontend with a mocked back-end,
71	// this query parameter will allow us to automatically "sign in" with one
72	// of the mock users. This is useful to be able to give testers a link
73	// in which to see a particular feature:
74	const searchParams = new URLSearchParams(document.location.search);	×
75	const mockId = searchParams.get("mockId");	×
76	const selectedMockId = mockIds.find((id) => id === mockId);	×
77	if (typeof selectedMockId === "string") {	×
78	// See `src/hooks/api/api.ts`; this localStorage entry is how we tell the
79	// API mock what mock data we want to load:
80	localStorage.setItem("authToken", selectedMockId);	×
81	}
82	}
83
84	setIsWaitingForMsw(false);	×
85	})();
86	}, []);
87
88	if (waitingForMsw) {	×
89	// As soon as we start rendering the app, it will start sending requests.
90	// If we're running the demo site, we want to hold off on doing that until
91	// MSW is fully initialised. Usually, you'd run the initialisation before
92	// rendering in the first place, but since Next.js handles the start of the
93	// rendering (which it does to support server-side rendering), we're doing
94	// it here instead. For more info, see
95	// https://mswjs.io/docs/integrations/browser#conditionally-enable-mocking
96	return <></>;	×
97	}
98
99	return (
100	<LocalizationProvider l10n={l10n}>
101	<ReactAriaI18nProvider>
102	<AddonDataContext.Provider value={addonData}>
103	{createElement("firefox-private-relay-addon", {
104	// The following attributes are set by the add-on,
105	// and read by the website (via the useAddonElementWatcher hook).
106	"data-addon-installed": addonData.present,
107	"data-local-labels": JSON.stringify(addonData.localLabels),
108	// The following attributes are set by the website,
109	// and read by the add-on.
110	// Capitalised boolean for backwards compatibility;
111	// this element was previously generated by Django:
112	"data-user-logged-in":
113	isLoggedIn === "logged-in" ? "True" : "False",	×
114	})}
115	<OverlayProvider id="overlayProvider">
116	<Component {...pageProps} />
117	</OverlayProvider>
118	</AddonDataContext.Provider>
119	</ReactAriaI18nProvider>
120	</LocalizationProvider>
121	);
122	}
123	export default MyApp;	×

mozilla / fx-private-relay / d770386c-4ec4-4262-acd2-d5922c976ef1

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous