fix: surveys displayed only from cache (#2415)

* feat: ensure surveys are displayed on initial app launch

# Conflicts:
#	packages/react-native/src/posthog-rn.ts

* chore: add changeset

* fix: make onSurveysReady private

* fix: survey length check

* fix: dont clear survey cache

* fix: make onSurveysReady internal

* fix: add config parameter to flagsAsync

* fix: prevent surveys provider from hanging on initialization errors

* fix: add log

* fix: use _logger

Author: ioannisj

.changeset/warm-stars-juggle.md

@@ -0,0 +1,5 @@
+---
+'posthog-react-native': patch
+---
+
+fix surveys only appear on subsequent app launches after being loaded and cached

packages/core/src/posthog-core-stateless.ts

@@ -450,11 +450,13 @@ export abstract class PostHogCoreStateless {
     groups: Record<string, string | number> = {},
     personProperties: Record<string, string> = {},
     groupProperties: Record<string, Record<string, string>> = {},
-    extraPayload: Record<string, any> = {}
+    extraPayload: Record<string, any> = {},
+    fetchConfig: boolean = true
   ): Promise<PostHogFlagsResponse | undefined> {
     await this._initPromise
 
-    const url = `${this.host}/flags/?v=2&config=true`
+    const configParam = fetchConfig ? '&config=true' : ''
+    const url = `${this.host}/flags/?v=2${configParam}`
     const requestData: Record<string, any> = {
       token: this.apiKey,
       distinct_id: distinctId,

packages/core/src/posthog-core.ts

@@ -450,12 +450,15 @@ export abstract class PostHogCore extends PostHogCoreStateless {
   /***
    *** FEATURE FLAGS
    ***/
-  private async flagsAsync(sendAnonDistinctId: boolean = true): Promise<PostHogFlagsResponse | undefined> {
+  protected async flagsAsync(
+    sendAnonDistinctId: boolean = true,
+    fetchConfig: boolean = true
+  ): Promise<PostHogFlagsResponse | undefined> {
     await this._initPromise
     if (this._flagsResponsePromise) {
       return this._flagsResponsePromise
     }
-    return this._flagsAsync(sendAnonDistinctId)
+    return this._flagsAsync(sendAnonDistinctId, fetchConfig)
   }
 
   private cacheSessionReplay(source: string, response?: PostHogRemoteConfig): void {
@@ -545,7 +548,10 @@ export abstract class PostHogCore extends PostHogCoreStateless {
     return this._remoteConfigResponsePromise
   }
 
-  private async _flagsAsync(sendAnonDistinctId: boolean = true): Promise<PostHogFlagsResponse | undefined> {
+  private async _flagsAsync(
+    sendAnonDistinctId: boolean = true,
+    fetchConfig: boolean = true
+  ): Promise<PostHogFlagsResponse | undefined> {
     this._flagsResponsePromise = this._initPromise
       .then(async () => {
         const distinctId = this.getDistinctId()
@@ -565,7 +571,8 @@ export abstract class PostHogCore extends PostHogCoreStateless {
           groups as PostHogGroupProperties,
           personProperties,
           groupProperties,
-          extraProperties
+          extraProperties,
+          fetchConfig
         )
         // Add check for quota limitation on feature flags
         if (res?.quotaLimited?.includes(QuotaLimitedFeature.FeatureFlags)) {

packages/core/src/types.ts

@@ -173,7 +173,7 @@ export type PostHogRemoteConfig = {
 
 export type FeatureFlagValue = string | boolean
 
-export type PostHogFlagsResponse = Omit<PostHogRemoteConfig, 'surveys' | 'hasFeatureFlags'> & {
+export type PostHogFlagsResponse = Omit<PostHogRemoteConfig, 'hasFeatureFlags'> & {
   featureFlags: {
     [key: string]: FeatureFlagValue
   }

packages/react-native/src/posthog-rn.ts

@@ -9,6 +9,7 @@ import {
   PostHogFetchOptions,
   PostHogFetchResponse,
   PostHogPersistedProperty,
+  Survey,
   SurveyResponse,
   logFlushError,
   maybeAdd,
@@ -85,6 +86,8 @@ export class PostHog extends PostHogCore {
   private _disableSurveys: boolean
   private _disableRemoteConfig: boolean
   private _errorTracking: ErrorTracking
+  private _surveysReadyPromise: Promise<void> | null = null
+  private _surveysReady: boolean = false
 
   /**
    * Creates a new PostHog instance for React Native. You can find all configuration options in the [React Native SDK docs](https://posthog.com/docs/libraries/react-native#configuration-options).
@@ -180,13 +183,41 @@ export class PostHog extends PostHogCore {
 
       if (this._disableRemoteConfig === false) {
         this.reloadRemoteConfigAsync()
+          .then((response) => {
+            if (response) {
+              this._handleSurveysFromRemoteConfig(response)
+            }
+          })
+          .catch((error) => {
+            this._logger.error('Error loading remote config:', error)
+          })
+          .finally(() => {
+            this._notifySurveysReady()
+          })
       } else {
         this._logger.info('Remote config is disabled.')
+
         if (options?.preloadFeatureFlags !== false) {
           this._logger.info('Feature flags will be preloaded from Flags API.')
-          this.reloadFeatureFlags()
+          // Preload flags (and parse surveys as well since we are calling with config=true already)
+          this._flagsAsyncWithSurveys()
+            .catch((error) => {
+              this._logger.error('Error loading flags with surveys:', error)
+            })
+            .finally(() => {
+              this._notifySurveysReady()
+            })
         } else {
-          this._logger.info('preloadFeatureFlags is disabled.')
+          this._logger.info('preloadFeatureFlags is disabled, loading surveys from API.')
+          // Load surveys directly from API since both remote config and preloading feature flags are disabled
+          // Note: if flags are not loaded/cached then surveys will not be displayed until reloadFeatureFlags() is called, since surveys depend on internal flags
+          this._loadSurveysFromAPI()
+            .catch((error) => {
+              this._logger.error('Error loading surveys from API:', error)
+            })
+            .finally(() => {
+              this._notifySurveysReady()
+            })
         }
       }
 
@@ -846,7 +877,7 @@ export class PostHog extends PostHogCore {
   public async getSurveys(): Promise<SurveyResponse['surveys']> {
     if (this._disableSurveys === true) {
       this._logger.info('Loading surveys is disabled.')
-      this.setPersistedProperty<SurveyResponse['surveys']>(PostHogPersistedProperty.Surveys, null)
+      this._cacheSurveys(null, 'disabled in config')
       return []
     }
 
@@ -855,20 +886,133 @@ export class PostHog extends PostHogCore {
     if (surveys && surveys.length > 0) {
       this._logger.info('Surveys fetched from storage: ', JSON.stringify(surveys))
       return surveys
+    }
+
+    this._logger.info('No surveys found in storage')
+    return []
+  }
+
+  /**
+   * Returns a promise that resolves when surveys are ready to be loaded.
+   * If surveys are already loaded and ready to go, returns a resolved promise instead.
+   * @internal
+   */
+  _onSurveysReady(): Promise<void> {
+    if (this._surveysReady) {
+      // If surveys are already ready, resolve immediately
+      return Promise.resolve()
+    }
+
+    if (!this._surveysReadyPromise) {
+      this._surveysReadyPromise = new Promise<void>((resolve) => {
+        this._surveysReadyResolve = resolve
+      })
+    }
+
+    return this._surveysReadyPromise
+  }
+
+  private _surveysReadyResolve: (() => void) | null = null
+
+  /**
+   * Helper function to cache surveys to storage with consistent logging
+   */
+  private _cacheSurveys(surveys: Survey[] | null, source: string): void {
+    this.setPersistedProperty<SurveyResponse['surveys']>(PostHogPersistedProperty.Surveys, surveys)
+
+    if (surveys && surveys.length > 0) {
+      this._logger.info(`Surveys cached from ${source}:`, JSON.stringify(surveys))
+    } else if (surveys === null) {
+      this._logger.info(`Surveys cleared (${source})`)
     } else {
-      this._logger.info('No surveys found in storage')
+      this._logger.info(`No surveys to cache from ${source})`)
     }
+  }
 
-    if (this._disableRemoteConfig === true) {
-      const surveysFromApi = await super.getSurveysStateless()
+  /**
+   * Internal method to notify that surveys are ready
+   */
+  private _notifySurveysReady(): void {
+    this._surveysReady = true
+    if (this._surveysReadyResolve) {
+      this._surveysReadyResolve()
+      this._surveysReadyResolve = null
+      this._surveysReadyPromise = null
+    }
+  }
 
-      if (surveysFromApi && surveysFromApi.length > 0) {
-        this.setPersistedProperty<SurveyResponse['surveys']>(PostHogPersistedProperty.Surveys, surveysFromApi)
-        return surveysFromApi
+  /**
+   * Handle surveys from remote config response
+   */
+  private _handleSurveysFromRemoteConfig(response: any): void {
+    if (this._disableSurveys === true) {
+      this._logger.info('Loading surveys skipped, disabled.')
+      this._cacheSurveys(null, 'remote config (disabled)')
+      return
+    }
+
+    const surveys = response.surveys
+
+    // If surveys is not an array, it means there are no surveys (its a boolean)
+    if (Array.isArray(surveys) && surveys.length > 0) {
+      this._cacheSurveys(surveys as Survey[], 'remote config')
+    } else {
+      this._cacheSurveys(null, 'remote config')
+    }
+  }
+
+  /**
+   * Load flags AND handle surveys from the flags response (only when remote config is disabled)
+   */
+  private async _flagsAsyncWithSurveys(): Promise<void> {
+    try {
+      const flagsResponse = await this.flagsAsync(true, true)
+
+      // Only handle surveys from flags if remote config is disabled and surveys are enabled
+      // When remote config is enabled, surveys will come from there instead
+      if (this._disableRemoteConfig === true) {
+        if (this._disableSurveys === true) {
+          this._logger.info('Loading surveys skipped, disabled.')
+          this._cacheSurveys(null, 'flags (disabled)')
+          return
+        }
+
+        // Handle surveys from the response (surveys key is included when config=true)
+        const surveys = flagsResponse?.surveys
+
+        // If surveys is not an array, it means there are no surveys (its a boolean)
+        if (Array.isArray(surveys) && surveys.length > 0) {
+          this._cacheSurveys(surveys as Survey[], 'flags endpoint')
+        } else {
+          this._logger.info('No surveys in flags response')
+          this._cacheSurveys(null, 'flags endpoint')
+        }
       }
+    } catch (error) {
+      this._logger.error('Error in _flagsAsyncWithSurveys:', error)
     }
+  }
 
-    return []
+  /**
+   * Internal method to load surveys from API (when remote config is disabled)
+   */
+  private async _loadSurveysFromAPI(): Promise<void> {
+    if (this._disableSurveys === true) {
+      this._logger.info('Loading surveys skipped, disabled.')
+      this._cacheSurveys(null, 'API (disabled)')
+      return
+    }
+
+    try {
+      const surveysFromApi = await super.getSurveysStateless()
+      if (surveysFromApi && surveysFromApi.length > 0) {
+        this._cacheSurveys(surveysFromApi, 'API')
+      } else {
+        this._cacheSurveys(null, 'API')
+      }
+    } catch (error) {
+      this._logger.error('Error loading surveys from API:', error)
+    }
   }
 
   private async startSessionReplay(options?: PostHogOptions): Promise<void> {

packages/react-native/src/surveys/PostHogSurveyProvider.tsx

@@ -83,10 +83,9 @@ export function PostHogSurveyProvider(props: PostHogSurveyProviderProps): JSX.El
 
   // Load surveys once
   useEffect(() => {
-    // TODO: for the first time, sometimes the surveys are not fetched from storage, so we need to fetch them from the API
-    // because the remote config is still being fetched from the API
     posthog
       .ready()
+      .then(() => posthog._onSurveysReady())
       .then(() => posthog.getSurveys())
       .then(setSurveys)
       .catch(() => {})