flagship-io / flagship-react-native-sdk

Official Flagship (by AB Tasty) REACT NATIVE SDK ⛵️
5 stars 1 forks source link

enableClientCache doesn't work as expected #73

Open Solly74 opened 8 months ago

Solly74 commented 8 months ago

In the FlagshipProvider we set enableClientCache to true. However, there are instances where we get a warning that the user has not been initialised. This can be reproduced roughly every 5th load of the app.

This is the error we get "flagship Visitor not initialized"

Screenshot 2024-02-26 at 12 12 49

Code sample:

import FlagshipProvider, {
  DecisionMode,
  FlagDTO,
  FlagshipStatus,
  FsStatus,
  IFlagshipConfig
} from '@flagship.io/react-native-sdk';
import React from 'react';
import { RootState } from 'typesafe-actions';
import { config } from 'core/config';
import { useStateSelector } from 'core/hooks';
import { crashlyticsLog } from 'core/crashlytics';
import { isAnalyticsAllowed } from 'core/analytics/helpers';

// Note: this is for A/B Testing
const FlagshipWrapper = (props: { children: React.ReactNode }) => {
  const hasConsented: boolean = useStateSelector((state: RootState) => {
    // console.log('====hasAllowedATT', hasAllowedATT, JSON.stringify(cookiesSettings, null, 3));
    const consented = isAnalyticsAllowed('abTasty', state);
    // console.log(`=== Flaship user consent is ${consented} ===`);
    return consented;
  });

  const userID: string | undefined = useStateSelector(
    (state: RootState) => state.app.jwt?.sub
  );

  return (
    <FlagshipProvider
      envId={config.flagshipEnvironmentID}
      apiKey={config.flagshipApiKey}
      enableClientCache
      // This is to avoid sending scroll events multiple times sometimes triggered by onViewableItemsChanged
      hitDeduplicationTime={2}
      logLevel={9} // level 5 means warnings included
      fetchNow // When sdk initialisez this triggers an automatic fetch
      onUpdate={(_params: {
        fsModifications: Map<string, FlagDTO>;
        config: IFlagshipConfig;
        status: FsStatus;
      }) => {
        // console.log('=== FLAGSHIP ON UPDATE ===', config, status);
      }}
      decisionMode={DecisionMode.DECISION_API}
      onInitStart={() => {
        crashlyticsLog('=== Flagship init start ===');
      }}
      onInitDone={() => {
        crashlyticsLog('=== Flagship init done ===');
      }}
      visitorData={{
        id: userID,
        hasConsented,
        isAuthenticated: !!userID
      }}
      statusChangedCallback={(status: FlagshipStatus) => {
        crashlyticsLog(`=== FLAGSHIP STATUS CHANGED TO: ${status} ===`);
      }}
    >
      {props.children}
    </FlagshipProvider>
  );
};

export default FlagshipWrapper;

Any feedback or a code sample on how this should be implemented will be greatly appreciated. Thank you for all the support.