WIP: break loading by handling abort as error

ninetailed-inc · Oct 8, 2024 · 247f6c8 · 247f6c8
1 parent a12a991
commit 247f6c8
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 68 deletions.
diff --git a/packages/playgrounds/easy-hr/pages/_app.tsx b/packages/playgrounds/easy-hr/pages/_app.tsx
@@ -11,6 +11,7 @@ import { HubspotProvider } from '@aaronhayes/react-use-hubspot-form';
 import { IPage } from '@/types/contentful';
 import type { ExposedAudienceDefinition } from '@ninetailed/experience.js-preview-bridge';
 import { NinetailedInsightsPlugin } from '@ninetailed/experience.js-plugin-insights';
+import { NinetailedPrivacyPlugin } from '@ninetailed/experience.js-plugin-privacy';
 
 type AppProps<P = unknown> = {
   pageProps: P;
@@ -35,6 +36,15 @@ const B2BDemoApp = ({ Component, pageProps }: AppProps<CustomPageProps>) => {
         <NinetailedProvider
           /* preview*/
           plugins={[
+            new NinetailedPrivacyPlugin({
+              allowedEvents: [],
+              allowedPageEventProperties: [],
+              allowedTrackEvents: [],
+              allowedTrackEventProperties: [],
+              allowedTraits: [],
+              blockProfileMerging: true,
+              enabledFeatures: [],
+            }),
             new NinetailedPreviewPlugin({
               experiences: pageProps.ninetailed?.preview.experiences || [],
               audiences: pageProps.ninetailed?.preview.audiences || [],

diff --git a/packages/plugins/privacy/src/NinetailedPrivacyPlugin.ts b/packages/plugins/privacy/src/NinetailedPrivacyPlugin.ts
@@ -219,33 +219,12 @@ export class NinetailedPrivacyPlugin extends NinetailedPlugin {
   };
 
   private notifyOnRejectedEvent() {
-    // TODO: This should get validated and put into a utility function
-    const fallbackProfile = this.instance.storage.getItem(
-      PROFILE_FALLBACK_CACHE
-    );
-    const fallbackExperiences =
-      this.instance.storage.getItem(EXPERIENCES_FALLBACK_CACHE) || [];
-
-    if (fallbackProfile) {
-      this.instance.dispatch({
-        type: PROFILE_CHANGE,
-        profile: fallbackProfile,
-        experiences: fallbackExperiences,
-      });
-    } else {
-      this.instance.dispatch({
-        type: PROFILE_CHANGE,
-        profile: null,
-        experiences: [],
-        /**
-         * Alex Braunreuther: I'm not sure if this is the right way to handle this. Maybe we should introduce a REJECTED state to the profile state?
-         * This would introduce a lot more complexity and needs changes throughout the SDK, but it would be more clear what is happening.
-         */
-        error: new Error(
-          'The request to Experience API was blocked by the privacy plugin. No profile was found in the cache.'
-        ),
-      });
-    }
+    this.instance.dispatch({
+      type: PROFILE_CHANGE,
+      error: new Error(
+        'The request to Experience API was blocked by the privacy plugin. No profile was found in the cache.'
+      ),
+    });
   }
 
   private handleEventStart =

diff --git a/packages/sdks/javascript/src/lib/Ninetailed.ts b/packages/sdks/javascript/src/lib/Ninetailed.ts
@@ -759,6 +759,19 @@ export class Ninetailed implements NinetailedInstance {
         return;
       }
 
+      console.log('variant', {
+        ...baseReturn,
+        status: 'success',
+        loading: false,
+        error: null,
+        experience: experienceWithStickyFromExperienceApi,
+        variant,
+        variantIndex: selectedExperience.variantIndex,
+        audience: experience.audience ? experience.audience : null,
+        profile,
+        isPersonalized: true,
+      });
+
       setSelectedVariant(
         overrideResult({
           ...baseReturn,

diff --git a/packages/sdks/javascript/src/lib/NinetailedCorePlugin/NinetailedCorePlugin.ts b/packages/sdks/javascript/src/lib/NinetailedCorePlugin/NinetailedCorePlugin.ts
@@ -348,8 +348,6 @@ export class NinetailedCorePlugin
         { locale: this.locale, enabledFeatures: this.enabledFeatures }
       );
       this.instance.storage.setItem(ANONYMOUS_ID, profile.id);
-      this.instance.storage.setItem(PROFILE_FALLBACK_CACHE, profile);
-      this.instance.storage.setItem(EXPERIENCES_FALLBACK_CACHE, experiences);
       logger.debug('Profile from api: ', profile);
       logger.debug('Experiences from api: ', experiences);
       this.instance.dispatch({
@@ -361,28 +359,10 @@ export class NinetailedCorePlugin
       return { success: true };
     } catch (error) {
       logger.debug('An error occurred during flushing the events: ', error);
-      const fallbackProfile = this.instance.storage.getItem(
-        PROFILE_FALLBACK_CACHE
-      );
-      const fallbackExperiences =
-        this.instance.storage.getItem(EXPERIENCES_FALLBACK_CACHE) || [];
-
-      if (fallbackProfile) {
-        logger.debug('Found a fallback profile - will use this.');
-        this.instance.dispatch({
-          type: PROFILE_CHANGE,
-          profile: fallbackProfile,
-          experiences: fallbackExperiences,
-        });
-      } else {
-        logger.debug('No fallback profile found - setting profile to null.');
-        this.instance.dispatch({
-          type: PROFILE_CHANGE,
-          profile: null,
-          experiences: fallbackExperiences,
-          error,
-        });
-      }
+      this.instance.dispatch({
+        type: PROFILE_CHANGE,
+        error,
+      });
 
       return { success: false };
     }

diff --git a/packages/sdks/javascript/src/lib/ProfileStateManager.ts b/packages/sdks/javascript/src/lib/ProfileStateManager.ts
@@ -1,4 +1,8 @@
-import { PROFILE_CHANGE } from '@ninetailed/experience.js-shared';
+import {
+  EXPERIENCES_FALLBACK_CACHE,
+  PROFILE_CHANGE,
+  PROFILE_FALLBACK_CACHE,
+} from '@ninetailed/experience.js-shared';
 import {
   Storage,
   ProfileState,
@@ -40,22 +44,33 @@ export class ProfileStateManager {
   private profilfeListeners: ((profile: ProfileState) => void)[] = [];
 
   private setProfileState(payload: ProfileChangedPayload) {
-    if (payload.error) {
-      this.state = {
-        ...this.state,
-        status: 'error',
-        profile: null,
-        experiences: null,
-        error: payload.error,
-      };
-    } else if (!payload.profile || !payload.experiences) {
-      this.state = {
-        ...this.state,
-        status: 'error',
-        profile: null,
-        experiences: null,
-        error: new Error('Profile or experiences are missing'),
-      };
+    console.log('payload', payload);
+
+    if (payload.error || !payload.profile || !payload.experiences) {
+      // TODO we could check if the in memory state is already there and if the fallback cache needs to get read from localstorage
+
+      const fallbackProfile = this.cache.getItem(PROFILE_FALLBACK_CACHE);
+      const fallbackExperiences =
+        this.cache.getItem(EXPERIENCES_FALLBACK_CACHE) || [];
+
+      if (fallbackProfile) {
+        this.state = {
+          ...this.state,
+          status: 'success',
+          profile: fallbackProfile,
+          experiences: fallbackExperiences,
+          error: null,
+        };
+      } else {
+        this.state = {
+          ...this.state,
+          status: 'error',
+          profile: null,
+          experiences: null,
+          error:
+            payload.error || new Error('Profile or experiences are missing'),
+        };
+      }
     } else {
       this.state = {
         ...this.state,
@@ -64,8 +79,14 @@ export class ProfileStateManager {
         experiences: payload.experiences,
         error: null,
       };
+
+      this.cache.setItem(PROFILE_FALLBACK_CACHE, this.state.profile);
+      this.cache.setItem(EXPERIENCES_FALLBACK_CACHE, this.state.experiences);
     }
 
+    console.log('Profile state updated', this.state);
+    console.log('Listeners', this.profilfeListeners);
+
     this.profilfeListeners.forEach((cb) => cb(this.state));
   }