refactor: remove unstable posthog reference, make survey fetching deterministic after ph init

Author: ben-fornefeld

src/features/client-providers.tsx

@@ -4,9 +4,7 @@ import { Toaster } from '@/ui/primitives/sonner'
 import { ToastProvider } from '@/ui/primitives/toast'
 import { TooltipProvider } from '@/ui/primitives/tooltip'
 import { ThemeProvider } from 'next-themes'
-import posthog from 'posthog-js'
-import { PostHogProvider as PHProvider } from 'posthog-js/react'
-import { useEffect } from 'react'
+import { PostHogProvider } from './posthog-provider'
 
 interface ClientProvidersProps {
   children: React.ReactNode
@@ -29,30 +27,3 @@ export default function ClientProviders({ children }: ClientProvidersProps) {
     </PostHogProvider>
   )
 }
-
-export function PostHogProvider({ children }: { children: React.ReactNode }) {
-  useEffect(() => {
-    if (!process.env.NEXT_PUBLIC_POSTHOG_KEY) {
-      return
-    }
-
-    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
-      // Note that PostHog will automatically capture page views and common events
-      //
-      // This setup utilizes Next.js rewrites to act as a reverse proxy, to improve
-      // reliability of client-side tracking & make requests less likely to be intercepted by tracking blockers.
-      // https://posthog.com/docs/libraries/next-js#configuring-a-reverse-proxy-to-posthog
-      api_host: '/ph-proxy',
-      ui_host: 'https://us.posthog.com',
-      advanced_enable_surveys: true,
-      disable_session_recording: process.env.NODE_ENV !== 'production',
-      advanced_disable_toolbar_metrics: true,
-      opt_in_site_apps: true,
-      loaded: (posthog) => {
-        if (process.env.NODE_ENV === 'development') posthog.debug()
-      },
-    })
-  }, [])
-
-  return <PHProvider client={posthog}>{children}</PHProvider>
-}

src/features/dashboard/navbar/dashboard-survey-popover.tsx

@@ -1,55 +1,28 @@
 'use client'
 
+import { useAppPostHogProvider } from '@/features/posthog-provider'
 import { l } from '@/lib/clients/logger/logger'
-import { useToast } from '@/lib/hooks/use-toast'
 import { Popover, PopoverContent } from '@/ui/primitives/popover'
 import { SurveyContent } from '@/ui/survey'
 import { PopoverTrigger } from '@radix-ui/react-popover'
-import { Survey } from 'posthog-js'
 import { usePostHog } from 'posthog-js/react'
 import { useCallback, useState } from 'react'
-import useSWR from 'swr'
+import { toast } from 'sonner'
 
 interface DashboardSurveyPopoverProps {
   trigger: React.ReactNode
 }
 
 function DashboardSurveyPopover({ trigger }: DashboardSurveyPopoverProps) {
   const posthog = usePostHog()
-  const { toast } = useToast()
   const [isOpen, setIsOpen] = useState(false)
   const [wasSubmitted, setWasSubmitted] = useState(false)
 
-  const { data: survey, isLoading } = useSWR<Survey | undefined>(
-    ['dashboard-feedback-survey', posthog.__loaded],
-    () => {
-      return new Promise<Survey | undefined>((resolve) => {
-        posthog.getSurveys((surveys) => {
-          for (const survey of surveys) {
-            if (
-              survey.id ===
-              process.env.NEXT_PUBLIC_POSTHOG_DASHBOARD_FEEDBACK_SURVEY_ID
-            ) {
-              resolve(survey)
-              return
-            }
-          }
-          resolve(undefined)
-        })
-      })
-    },
-    {
-      revalidateOnFocus: false,
-      revalidateOnReconnect: false,
-      revalidateIfStale: false,
-      dedupingInterval: Infinity,
-      shouldRetryOnError: false,
-    }
-  )
+  const { dashboardFeedbackSurvey, isInitialized } = useAppPostHogProvider()
 
   const handleSubmit = useCallback(
     (responses: Record<number, string>) => {
-      if (!survey) return
+      if (!dashboardFeedbackSurvey) return
 
       const responseData = Object.entries(responses).reduce(
         (acc, [index, response]) => ({
@@ -60,31 +33,34 @@ function DashboardSurveyPopover({ trigger }: DashboardSurveyPopoverProps) {
       )
 
       posthog.capture('survey sent', {
-        $survey_id: survey.id,
+        $survey_id: dashboardFeedbackSurvey.id,
         ...responseData,
       })
 
       setWasSubmitted(true)
 
-      toast({
-        title: 'Thank you!',
-        description: 'Your feedback has been recorded.',
-      })
+      toast.success('Thank you! Your feedback has been recorded.')
 
       // reset states
       setIsOpen(false)
       setTimeout(() => {
         setWasSubmitted(false)
       }, 100)
     },
-    [survey, posthog, toast]
+    [dashboardFeedbackSurvey, posthog]
   )
 
+  // we will optimistically render the button on first render.
+  // if we can't resolve the survey on the client side, we hide the button.
+  if (!dashboardFeedbackSurvey && isInitialized) {
+    return null
+  }
+
   return (
     <Popover
       open={isOpen}
       onOpenChange={(open) => {
-        if (!survey) {
+        if (!dashboardFeedbackSurvey) {
           l.error(
             {
               key: 'dashboard_survey_popover:survey_not_found',
@@ -98,14 +74,14 @@ function DashboardSurveyPopover({ trigger }: DashboardSurveyPopoverProps) {
           return
         }
 
-        if (!open && !wasSubmitted && survey) {
+        if (!open && !wasSubmitted && dashboardFeedbackSurvey) {
           posthog.capture('survey dismissed', {
-            $survey_id: survey.id,
+            $survey_id: dashboardFeedbackSurvey.id,
           })
         }
-        if (open && survey) {
+        if (open && dashboardFeedbackSurvey) {
           posthog.capture('survey shown', {
-            $survey_id: survey.id,
+            $survey_id: dashboardFeedbackSurvey.id,
           })
         }
         setIsOpen(open)
@@ -118,10 +94,10 @@ function DashboardSurveyPopover({ trigger }: DashboardSurveyPopoverProps) {
         collisionPadding={20}
         sideOffset={25}
       >
-        {survey && (
+        {dashboardFeedbackSurvey && (
           <SurveyContent
-            survey={survey}
-            isLoading={isLoading}
+            survey={dashboardFeedbackSurvey}
+            isLoading={!isInitialized}
             onSubmit={handleSubmit}
           />
         )}

src/features/posthog-provider.tsx

@@ -0,0 +1,74 @@
+import posthog, { Survey } from 'posthog-js'
+import { PostHogProvider as PHProvider } from 'posthog-js/react'
+import { useEffect, useState } from 'react'
+
+import { createContext, useContext } from 'react'
+
+interface AppPostHogContextValue {
+  isInitialized: boolean
+  dashboardFeedbackSurvey: Survey | null
+}
+
+const AppPostHogContext = createContext<AppPostHogContextValue | undefined>(
+  undefined
+)
+
+export function useAppPostHogProvider() {
+  const ctx = useContext(AppPostHogContext)
+
+  if (!ctx) {
+    throw new Error(
+      'useAppPostHogProvider must be used within a PostHogProvider'
+    )
+  }
+
+  return ctx
+}
+
+export function PostHogProvider({ children }: { children: React.ReactNode }) {
+  const [dashboardFeedbackSurvey, setDashboardFeedbackSurvey] =
+    useState<Survey | null>(null)
+  const [isInitialized, setIsInitialized] = useState(false)
+
+  useEffect(() => {
+    if (!process.env.NEXT_PUBLIC_POSTHOG_KEY) {
+      return
+    }
+
+    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+      // Note that PostHog will automatically capture page views and common events
+      //
+      // This setup utilizes Next.js rewrites to act as a reverse proxy, to improve
+      // reliability of client-side tracking & make requests less likely to be intercepted by tracking blockers.
+      // https://posthog.com/docs/libraries/next-js#configuring-a-reverse-proxy-to-posthog
+      api_host: '/ph-proxy',
+      ui_host: 'https://us.posthog.com',
+      advanced_enable_surveys: true,
+      disable_session_recording: process.env.NODE_ENV !== 'production',
+      advanced_disable_toolbar_metrics: true,
+      opt_in_site_apps: true,
+      loaded: (posthog) => {
+        if (process.env.NODE_ENV === 'development') posthog.debug()
+      },
+    })
+
+    posthog.getSurveys((surveys) => {
+      for (const survey of surveys) {
+        switch (survey.id) {
+          case process.env.NEXT_PUBLIC_POSTHOG_DASHBOARD_FEEDBACK_SURVEY_ID:
+            setDashboardFeedbackSurvey(survey)
+            break
+        }
+      }
+      setIsInitialized(true)
+    })
+  }, [])
+
+  return (
+    <AppPostHogContext.Provider
+      value={{ dashboardFeedbackSurvey, isInitialized }}
+    >
+      <PHProvider client={posthog}>{children}</PHProvider>
+    </AppPostHogContext.Provider>
+  )
+}