update posthog, add useFeatureFlagsLoaded

frontends/main/package.json

@@ -34,7 +34,7 @@
     "next-nprogress-bar": "^2.4.2",
     "ol-components": "0.0.0",
     "ol-utilities": "0.0.0",
-    "posthog-js": "^1.157.2",
+    "posthog-js": "^1.297.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-slick": "^0.30.2",

frontends/main/src/app-pages/ProductPages/CoursePage.test.tsx

@@ -12,10 +12,13 @@ import { assertHeadings } from "ol-test-utilities"
 import { notFound } from "next/navigation"
 
 import { useFeatureFlagEnabled } from "posthog-js/react"
+import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
 import invariant from "tiny-invariant"
 
 jest.mock("posthog-js/react")
 const mockedUseFeatureFlagEnabled = jest.mocked(useFeatureFlagEnabled)
+jest.mock("@/common/useFeatureFlagsLoaded")
+const mockedUseFeatureFlagsLoaded = jest.mocked(useFeatureFlagsLoaded)
 
 const makeCourse = factories.courses.course
 const makePage = factories.pages.coursePageItem
@@ -46,12 +49,19 @@ const setupApis = ({
 describe("CoursePage", () => {
   beforeEach(() => {
     mockedUseFeatureFlagEnabled.mockReturnValue(true)
+    mockedUseFeatureFlagsLoaded.mockReturnValue(true)
   })
 
-  test.each([true, false])(
+  test.each([
+    { flagsLoaded: true, isEnabled: true, shouldNotFound: false },
+    { flagsLoaded: true, isEnabled: false, shouldNotFound: true },
+    { flagsLoaded: false, isEnabled: true, shouldNotFound: false },
+    { flagsLoaded: false, isEnabled: false, shouldNotFound: false },
+  ])(
     "Calls noFound if and only the feature flag is disabled",
-    async (isEnabled) => {
+    async ({ flagsLoaded, isEnabled, shouldNotFound }) => {
       mockedUseFeatureFlagEnabled.mockReturnValue(isEnabled)
+      mockedUseFeatureFlagsLoaded.mockReturnValue(flagsLoaded)
 
       const course = makeCourse()
       const page = makePage({ course_details: course })
@@ -60,10 +70,10 @@ describe("CoursePage", () => {
         url: `/courses/${course.readable_id}/`,
       })
 
-      if (isEnabled) {
-        expect(notFound).not.toHaveBeenCalled()
-      } else {
+      if (shouldNotFound) {
         expect(notFound).toHaveBeenCalled()
+      } else {
+        expect(notFound).not.toHaveBeenCalled()
       }
     },
   )

frontends/main/src/app-pages/ProductPages/CoursePage.tsx

@@ -22,6 +22,7 @@ import ProductPageTemplate, {
 } from "./ProductPageTemplate"
 import { CoursePageItem } from "@mitodl/mitxonline-api-axios/v2"
 import { DEFAULT_RESOURCE_IMG } from "ol-utilities"
+import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
 
 type CoursePageProps = {
   readableId: string
@@ -76,10 +77,11 @@ const CoursePage: React.FC<CoursePageProps> = ({ readableId }) => {
   const page = pages.data?.items[0]
   const course = courses.data?.results?.[0]
   const enabled = useFeatureFlagEnabled(FeatureFlags.ProductPageCourse)
-  if (enabled === false) {
-    return notFound()
+  const flagsLoaded = useFeatureFlagsLoaded()
+
+  if (!enabled) {
+    return flagsLoaded ? notFound() : null
   }
-  if (!enabled) return
 
   const doneLoading = pages.isSuccess && courses.isSuccess
 

frontends/main/src/app-pages/ProductPages/ProgramPage.test.tsx

@@ -18,9 +18,12 @@ import { notFound } from "next/navigation"
 import { useFeatureFlagEnabled } from "posthog-js/react"
 import invariant from "tiny-invariant"
 import { ResourceTypeEnum } from "api"
+import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
 
 jest.mock("posthog-js/react")
 const mockedUseFeatureFlagEnabled = jest.mocked(useFeatureFlagEnabled)
+jest.mock("@/common/useFeatureFlagsLoaded")
+const mockedUseFeatureFlagsLoaded = jest.mocked(useFeatureFlagsLoaded)
 
 const makeProgram = factories.programs.program
 const makePage = factories.pages.programPageItem
@@ -67,10 +70,16 @@ describe("ProgramPage", () => {
     mockedUseFeatureFlagEnabled.mockReturnValue(true)
   })
 
-  test.each([true, false])(
+  test.each([
+    { flagsLoaded: true, isEnabled: true, shouldNotFound: false },
+    { flagsLoaded: true, isEnabled: false, shouldNotFound: true },
+    { flagsLoaded: false, isEnabled: true, shouldNotFound: false },
+    { flagsLoaded: false, isEnabled: false, shouldNotFound: false },
+  ])(
     "Calls noFound if and only the feature flag is disabled",
-    async (isEnabled) => {
+    async ({ flagsLoaded, isEnabled, shouldNotFound }) => {
       mockedUseFeatureFlagEnabled.mockReturnValue(isEnabled)
+      mockedUseFeatureFlagsLoaded.mockReturnValue(flagsLoaded)
 
       const program = makeProgram()
       const page = makePage({ program_details: program })
@@ -79,10 +88,10 @@ describe("ProgramPage", () => {
         url: `/programs/${program.readable_id}/`,
       })
 
-      if (isEnabled) {
-        expect(notFound).not.toHaveBeenCalled()
-      } else {
+      if (shouldNotFound) {
         expect(notFound).toHaveBeenCalled()
+      } else {
+        expect(notFound).not.toHaveBeenCalled()
       }
     },
   )

frontends/main/src/app-pages/ProductPages/ProgramPage.tsx

@@ -24,6 +24,7 @@ import { ProgramSummary } from "./ProductSummary"
 import { DEFAULT_RESOURCE_IMG } from "ol-utilities"
 import { learningResourceQueries } from "api/hooks/learningResources"
 import { ResourceTypeEnum } from "api"
+import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
 
 type ProgramPageProps = {
   readableId: string
@@ -89,10 +90,11 @@ const ProgramPage: React.FC<ProgramPageProps> = ({ readableId }) => {
   const program = programs.data?.results?.[0]
   const programResource = programResources.data?.results?.[0]
   const enabled = useFeatureFlagEnabled(FeatureFlags.ProductPageCourse)
-  if (enabled === false) {
-    return notFound()
+  const flagsLoaded = useFeatureFlagsLoaded()
+
+  if (!enabled) {
+    return flagsLoaded ? notFound() : null
   }
-  if (!enabled) return
 
   const isLoading =
     pages.isLoading || programs.isLoading || programResources.isLoading

frontends/main/src/common/feature_flags.ts

@@ -11,3 +11,12 @@ export enum FeatureFlags {
   VideoShorts = "video-shorts",
   ProductPageCourse = "product-page-course",
 }
+
+/**
+ * A special flag that indicates feature flags are in their bootstrapped state,
+ * not yet loaded from PostHog server.
+ *
+ * DO NOT add this flag to PostHog!
+ */
+export const INTERNAL_BOOTSTRAPPING_FLAG =
+  "__flags_are_bootstrapped_do_not_add_this_to_posthog__"

frontends/main/src/common/useFeatureFlagsLoaded.ts

@@ -0,0 +1,53 @@
+import { INTERNAL_BOOTSTRAPPING_FLAG } from "@/common/feature_flags"
+import { useFeatureFlagEnabled, usePostHog } from "posthog-js/react"
+import { useEffect, useState } from "react"
+
+/**
+ * Returns `true` if feature flags have been loaded via posthog API, else `false`.
+ *
+ * NOTES:
+ * 1. Avoid using this! Really!:
+ *   - This can delay feature flag availability for users who have been to the
+ *     site before. Their flags will be bootstrapped from localStorage, and should
+ *     have the correct values immediately, before contacting the PostHog server.
+ *   - We generally shouldn't care if a flag is "false" or
+ *     "not loaded yet".
+ *
+ *     USE CASE: One case where this distinction matters is when an entire page
+ *     is behind a feature flag, and we don't want to 404 until the flags are
+ *     loaded.
+ * 2. Unlike posthog's `onFeatureFlags` callback, this hook enables you to
+ *   distinguish between bootstrapped flags and flags loaded from PostHog server.
+ *
+ * IMPLEMENTATION:
+ * Posthog does not make detecting "flags have loaded from server" easy.
+ * This approach relies on the fact that bootstrapped flags are completely
+ * discarded after flags are loaded from server, so `useFlagEnabled` will
+ * return `undefined` for any flag that was only bootstrapped locally.
+ */
+const useFeatureFlagsLoaded = () => {
+  const posthog = usePostHog()
+  const [hasBootstrapped, setHasBootstrapped] = useState(false)
+  useEffect(() => {
+    /**
+     * NOTE: this does not indicate flags have loaded from server, so they might
+     * be incomplete. It does at least indicate that localstorage/bootstrapped
+     * flags are ready
+     *
+     * If this event listener is added after posthog has fully loaded flags,
+     * the callback is still fired.
+     */
+    return posthog.onFeatureFlags(() => {
+      setHasBootstrapped(true)
+    })
+  }, [posthog])
+  const bootstrapFlag = useFeatureFlagEnabled(INTERNAL_BOOTSTRAPPING_FLAG)
+  /**
+   * bootstrapFlag will be undefined:
+   *  1. BEFORE posthog has initialized (nothing bootstrapped yet)
+   *  2. AFTER posthog has loaded flags from its server.
+   */
+  return hasBootstrapped && bootstrapFlag === undefined
+}
+
+export { useFeatureFlagsLoaded }

frontends/main/src/page-components/ConfiguredPostHogProvider/ConfiguredPostHogProvider.tsx

@@ -2,20 +2,12 @@ import React, { useEffect } from "react"
 import posthog from "posthog-js"
 import { PostHogProvider, usePostHog } from "posthog-js/react"
 import { useUserMe } from "api/hooks/user"
+import { INTERNAL_BOOTSTRAPPING_FLAG } from "@/common/feature_flags"
 
 const POSTHOG_API_KEY = process.env.NEXT_PUBLIC_POSTHOG_API_KEY
 const POSTHOG_API_HOST = process.env.NEXT_PUBLIC_POSTHOG_API_HOST
 const FEATURE_FLAGS = process.env.FEATURE_FLAGS
 
-if (POSTHOG_API_KEY) {
-  posthog.init(POSTHOG_API_KEY, {
-    api_host: POSTHOG_API_HOST,
-    bootstrap: {
-      featureFlags: FEATURE_FLAGS ? JSON.parse(FEATURE_FLAGS) : null,
-    },
-  })
-}
-
 const PosthogIdentifier = () => {
   const { data: user } = useUserMe()
   const posthog = usePostHog()
@@ -45,6 +37,22 @@ const PosthogIdentifier = () => {
 const ConfiguredPostHogProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
+  useEffect(() => {
+    if (POSTHOG_API_KEY) {
+      posthog.init(POSTHOG_API_KEY, {
+        api_host: POSTHOG_API_HOST,
+        bootstrap: {
+          featureFlags: FEATURE_FLAGS
+            ? {
+                ...JSON.parse(FEATURE_FLAGS),
+                [INTERNAL_BOOTSTRAPPING_FLAG]: true,
+              }
+            : null,
+        },
+      })
+    }
+  }, [])
+
   if (!POSTHOG_API_KEY) {
     return children
   }