posthog-js-lite 3.0.2 → 3.2.0

package/lib/index.esm.js

@@ -5,6 +5,8 @@ var PostHogPersistedProperty;
     PostHogPersistedProperty["Props"] = "props";
     PostHogPersistedProperty["FeatureFlags"] = "feature_flags";
     PostHogPersistedProperty["FeatureFlagPayloads"] = "feature_flag_payloads";
+    PostHogPersistedProperty["BootstrapFeatureFlags"] = "bootstrap_feature_flags";
+    PostHogPersistedProperty["BootstrapFeatureFlagPayloads"] = "bootstrap_feature_flag_payloads";
     PostHogPersistedProperty["OverrideFeatureFlags"] = "override_feature_flags";
     PostHogPersistedProperty["Queue"] = "queue";
     PostHogPersistedProperty["OptedOut"] = "opted_out";
@@ -14,6 +16,8 @@ var PostHogPersistedProperty;
     PostHogPersistedProperty["GroupProperties"] = "group_properties";
     PostHogPersistedProperty["InstalledAppBuild"] = "installed_app_build";
     PostHogPersistedProperty["InstalledAppVersion"] = "installed_app_version";
+    PostHogPersistedProperty["SessionReplay"] = "session_replay";
+    PostHogPersistedProperty["DecideEndpointWasHit"] = "decide_endpoint_was_hit";
 })(PostHogPersistedProperty || (PostHogPersistedProperty = {}));
 
 function assert(truthyValue, message) {
@@ -944,6 +948,7 @@ class PostHogCoreStateless {
     constructor(apiKey, options) {
         this.flushPromise = null;
         this.disableGeoip = true;
+        this.historicalMigration = false;
         this.disabled = false;
         this.defaultOptIn = true;
         this.pendingPromises = {};
@@ -957,7 +962,7 @@ class PostHogCoreStateless {
         this.maxBatchSize = Math.max(this.flushAt, options?.maxBatchSize ?? 100);
         this.maxQueueSize = Math.max(this.flushAt, options?.maxQueueSize ?? 1000);
         this.flushInterval = options?.flushInterval ?? 10000;
-        this.captureMode = options?.captureMode || 'form';
+        this.captureMode = options?.captureMode || 'json';
         // If enable is explicitly set to false we override the optout
         this.defaultOptIn = options?.defaultOptIn ?? true;
         this._retryOptions = {
@@ -969,15 +974,19 @@ class PostHogCoreStateless {
         this.featureFlagsRequestTimeoutMs = options?.featureFlagsRequestTimeoutMs ?? 3000; // 3 seconds
         this.disableGeoip = options?.disableGeoip ?? true;
         this.disabled = options?.disabled ?? false;
+        this.historicalMigration = options?.historicalMigration ?? false;
         // Init promise allows the derived class to block calls until it is ready
         this._initPromise = Promise.resolve();
         this._isInitialized = true;
     }
+    logMsgIfDebug(fn) {
+        if (this.isDebug) {
+            fn();
+        }
+    }
     wrap(fn) {
         if (this.disabled) {
-            if (this.isDebug) {
-                console.warn('[PostHog] The client is disabled');
-            }
+            this.logMsgIfDebug(() => console.warn('[PostHog] The client is disabled'));
             return;
         }
         if (this._isInitialized) {
@@ -1021,6 +1030,9 @@ class PostHogCoreStateless {
     get isDebug() {
         return !!this.removeDebugCallback;
     }
+    get isDisabled() {
+        return this.disabled;
+    }
     buildPayload(payload) {
         return {
             distinct_id: payload.distinct_id,
@@ -1047,7 +1059,7 @@ class PostHogCoreStateless {
     identifyStateless(distinctId, properties, options) {
         this.wrap(() => {
             // The properties passed to identifyStateless are event properties.
-            // To add person properties, pass in all person properties to the `$set` key.
+            // To add person properties, pass in all person properties to the `$set` and `$set_once` keys.
             const payload = {
                 ...this.buildPayload({
                     distinct_id: distinctId,
@@ -1217,7 +1229,7 @@ class PostHogCoreStateless {
             const queue = this.getPersistedProperty(PostHogPersistedProperty.Queue) || [];
             if (queue.length >= this.maxQueueSize) {
                 queue.shift();
-                console.info('Queue is full, the oldest event is dropped.');
+                this.logMsgIfDebug(() => console.info('Queue is full, the oldest event is dropped.'));
             }
             queue.push({ message });
             this.setPersistedProperty(PostHogPersistedProperty.Queue, queue);
@@ -1283,6 +1295,9 @@ class PostHogCoreStateless {
             batch: messages,
             sent_at: currentISOTime(),
         };
+        if (this.historicalMigration) {
+            data.historical_migration = true;
+        }
         const payload = JSON.stringify(data);
         const url = this.captureMode === 'form'
             ? `${this.host}/e/?ip=1&_=${currentTimestamp()}&v=${this.getLibraryVersion()}`
@@ -1346,33 +1361,45 @@ class PostHogCoreStateless {
         }, { ...this._retryOptions, ...retryOptions });
     }
     async shutdown(shutdownTimeoutMs = 30000) {
+        // A little tricky - we want to have a max shutdown time and enforce it, even if that means we have some
+        // dangling promises. We'll keep track of the timeout and resolve/reject based on that.
         await this._initPromise;
+        let hasTimedOut = false;
         this.clearFlushTimer();
-        try {
-            await Promise.all(Object.values(this.pendingPromises));
-            const startTimeWithDelay = Date.now() + shutdownTimeoutMs;
-            while (true) {
-                const queue = this.getPersistedProperty(PostHogPersistedProperty.Queue) || [];
-                if (queue.length === 0) {
-                    break;
-                }
-                // flush again to make sure we send all events, some of which might've been added
-                // while we were waiting for the pending promises to resolve
-                // For example, see sendFeatureFlags in posthog-node/src/posthog-node.ts::capture
-                await this.flush();
-                // If we've been waiting for more than the shutdownTimeoutMs, stop it
-                const now = Date.now();
-                if (startTimeWithDelay < now) {
-                    break;
+        const doShutdown = async () => {
+            try {
+                await Promise.all(Object.values(this.pendingPromises));
+                while (true) {
+                    const queue = this.getPersistedProperty(PostHogPersistedProperty.Queue) || [];
+                    if (queue.length === 0) {
+                        break;
+                    }
+                    // flush again to make sure we send all events, some of which might've been added
+                    // while we were waiting for the pending promises to resolve
+                    // For example, see sendFeatureFlags in posthog-node/src/posthog-node.ts::capture
+                    await this.flush();
+                    if (hasTimedOut) {
+                        break;
+                    }
                 }
             }
-        }
-        catch (e) {
-            if (!isPostHogFetchError(e)) {
-                throw e;
+            catch (e) {
+                if (!isPostHogFetchError(e)) {
+                    throw e;
+                }
+                this.logMsgIfDebug(() => console.error('Error while shutting down PostHog', e));
             }
-            console.error('Error while shutting down PostHog', e);
-        }
+        };
+        return Promise.race([
+            new Promise((_, reject) => {
+                safeSetTimeout(() => {
+                    this.logMsgIfDebug(() => console.error('Timed out while shutting down PostHog'));
+                    hasTimedOut = true;
+                    reject('Timeout while shutting down PostHog. Some events may not have been sent.');
+                }, shutdownTimeoutMs);
+            }),
+            doShutdown(),
+        ]);
     }
 }
 class PostHogCore extends PostHogCoreStateless {
@@ -1388,20 +1415,44 @@ class PostHogCore extends PostHogCoreStateless {
         this._sessionExpirationTimeSeconds = options?.sessionExpirationTimeSeconds ?? 1800; // 30 minutes
     }
     setupBootstrap(options) {
-        if (options?.bootstrap?.distinctId) {
-            if (options?.bootstrap?.isIdentifiedId) {
-                this.setPersistedProperty(PostHogPersistedProperty.DistinctId, options.bootstrap.distinctId);
+        const bootstrap = options?.bootstrap;
+        if (!bootstrap) {
+            return;
+        }
+        // bootstrap options are only set if no persisted values are found
+        // this is to prevent overwriting existing values
+        if (bootstrap.distinctId) {
+            if (bootstrap.isIdentifiedId) {
+                const distinctId = this.getPersistedProperty(PostHogPersistedProperty.DistinctId);
+                if (!distinctId) {
+                    this.setPersistedProperty(PostHogPersistedProperty.DistinctId, bootstrap.distinctId);
+                }
             }
             else {
-                this.setPersistedProperty(PostHogPersistedProperty.AnonymousId, options.bootstrap.distinctId);
+                const anonymousId = this.getPersistedProperty(PostHogPersistedProperty.AnonymousId);
+                if (!anonymousId) {
+                    this.setPersistedProperty(PostHogPersistedProperty.AnonymousId, bootstrap.distinctId);
+                }
             }
         }
-        if (options?.bootstrap?.featureFlags) {
-            const activeFlags = Object.keys(options.bootstrap?.featureFlags || {})
-                .filter((flag) => !!options.bootstrap?.featureFlags?.[flag])
-                .reduce((res, key) => ((res[key] = options.bootstrap?.featureFlags?.[key] || false), res), {});
-            this.setKnownFeatureFlags(activeFlags);
-            options?.bootstrap.featureFlagPayloads && this.setKnownFeatureFlagPayloads(options?.bootstrap.featureFlagPayloads);
+        const bootstrapfeatureFlags = bootstrap.featureFlags;
+        if (bootstrapfeatureFlags && Object.keys(bootstrapfeatureFlags).length) {
+            const bootstrapFlags = Object.keys(bootstrapfeatureFlags)
+                .filter((flag) => !!bootstrapfeatureFlags[flag])
+                .reduce((res, key) => ((res[key] = bootstrapfeatureFlags[key] || false), res), {});
+            if (Object.keys(bootstrapFlags).length) {
+                this.setPersistedProperty(PostHogPersistedProperty.BootstrapFeatureFlags, bootstrapFlags);
+                const currentFlags = this.getPersistedProperty(PostHogPersistedProperty.FeatureFlags) || {};
+                const newFeatureFlags = { ...bootstrapFlags, ...currentFlags };
+                this.setKnownFeatureFlags(newFeatureFlags);
+            }
+            const bootstrapFlagPayloads = bootstrap.featureFlagPayloads;
+            if (bootstrapFlagPayloads && Object.keys(bootstrapFlagPayloads).length) {
+                this.setPersistedProperty(PostHogPersistedProperty.BootstrapFeatureFlagPayloads, bootstrapFlagPayloads);
+                const currentFlagPayloads = this.getPersistedProperty(PostHogPersistedProperty.FeatureFlagPayloads) || {};
+                const newFeatureFlagPayloads = { ...bootstrapFlagPayloads, ...currentFlagPayloads };
+                this.setKnownFeatureFlagPayloads(newFeatureFlagPayloads);
+            }
         }
     }
     // NOTE: Props are lazy loaded from localstorage hence the complex getter setter logic
@@ -1417,6 +1468,7 @@ class PostHogCore extends PostHogCoreStateless {
     clearProps() {
         this.props = undefined;
         this.sessionProps = {};
+        this.flagCallReported = {};
     }
     on(event, cb) {
         return this._events.on(event, cb);
@@ -1475,6 +1527,7 @@ class PostHogCore extends PostHogCoreStateless {
     resetSessionId() {
         this.wrap(() => {
             this.setPersistedProperty(PostHogPersistedProperty.SessionId, null);
+            this.setPersistedProperty(PostHogPersistedProperty.SessionLastTimestamp, null);
         });
     }
     /**
@@ -1534,10 +1587,15 @@ class PostHogCore extends PostHogCoreStateless {
             if (properties?.$groups) {
                 this.groups(properties.$groups);
             }
+            // promote $set and $set_once to top level
+            const userPropsOnce = properties?.$set_once;
+            delete properties?.$set_once;
+            // if no $set is provided we assume all properties are $set
+            const userProps = properties?.$set || properties;
             const allProperties = this.enrichProperties({
-                ...properties,
                 $anon_distinct_id: this.getAnonymousId(),
-                $set: properties,
+                $set: userProps,
+                $set_once: userPropsOnce,
             });
             if (distinctId !== previousDistinctId) {
                 // We keep the AnonymousId to be used by decide calls and identify to link the previousId
@@ -1691,6 +1749,10 @@ class PostHogCore extends PostHogCoreStateless {
             };
             return super.getDecide(distinctId, groups, personProperties, groupProperties, extraProperties).then((res) => {
                 if (res?.featureFlags) {
+                    // clear flag call reported if we have new flags since they might have changed
+                    if (this.sendFeatureFlagEvent) {
+                        this.flagCallReported = {};
+                    }
                     let newFeatureFlags = res.featureFlags;
                     let newFeatureFlagPayloads = res.featureFlagPayloads;
                     if (res.errorsWhileComputingFlags) {
@@ -1702,6 +1764,17 @@ class PostHogCore extends PostHogCoreStateless {
                     }
                     this.setKnownFeatureFlags(newFeatureFlags);
                     this.setKnownFeatureFlagPayloads(Object.fromEntries(Object.entries(newFeatureFlagPayloads || {}).map(([k, v]) => [k, this._parsePayload(v)])));
+                    // Mark that we hit the /decide endpoint so we can capture this in the $feature_flag_called event
+                    this.setPersistedProperty(PostHogPersistedProperty.DecideEndpointWasHit, true);
+                    const sessionReplay = res?.sessionRecording;
+                    if (sessionReplay) {
+                        this.setPersistedProperty(PostHogPersistedProperty.SessionReplay, sessionReplay);
+                        this.logMsgIfDebug(() => console.log('PostHog Debug', 'Session replay config: ', JSON.stringify(sessionReplay)));
+                    }
+                    else {
+                        this.logMsgIfDebug(() => console.info('PostHog Debug', 'Session replay config disabled.'));
+                        this.setPersistedProperty(PostHogPersistedProperty.SessionReplay, null);
+                    }
                 }
                 return res;
             });
@@ -1739,6 +1812,10 @@ class PostHogCore extends PostHogCoreStateless {
             this.capture('$feature_flag_called', {
                 $feature_flag: key,
                 $feature_flag_response: response,
+                $feature_flag_bootstrapped_response: this.getPersistedProperty(PostHogPersistedProperty.BootstrapFeatureFlags)?.[key],
+                $feature_flag_bootstrapped_payload: this.getPersistedProperty(PostHogPersistedProperty.BootstrapFeatureFlagPayloads)?.[key],
+                // If we haven't yet received a response from the /decide endpoint, we must have used the bootstrapped value
+                $used_bootstrap_value: !this.getPersistedProperty(PostHogPersistedProperty.DecideEndpointWasHit),
             });
         }
         // If we have flags we either return the value (true or string) or false
@@ -1803,7 +1880,7 @@ class PostHogCore extends PostHogCoreStateless {
             .catch((e) => {
             cb?.(e, undefined);
             if (!cb) {
-                console.log('[PostHog] Error reloading feature flags', e);
+                this.logMsgIfDebug(() => console.log('[PostHog] Error reloading feature flags', e));
             }
         });
     }
@@ -1836,14 +1913,14 @@ class PostHogCore extends PostHogCoreStateless {
     }
 }
 
-var version = "3.0.2";
+var version = "3.2.0";
 
 function getContext(window) {
   let context = {};
-
   if (window.navigator) {
     const userAgent = window.navigator.userAgent;
-    context = { ...context,
+    context = {
+      ...context,
       $os: os(window),
       $browser: browser(userAgent, window.navigator.vendor, !!window.opera),
       $referrer: window.document.referrer,
@@ -1858,29 +1935,24 @@ function getContext(window) {
       $screen_dpr: window.devicePixelRatio
     };
   }
-
-  context = { ...context,
+  context = {
+    ...context,
     $lib: 'js',
     $lib_version: version,
     $insert_id: Math.random().toString(36).substring(2, 10) + Math.random().toString(36).substring(2, 10),
     $time: currentTimestamp() / 1000 // epoch time in seconds
-
   };
   return context; // TODO: strip empty props?
 }
-
 function includes(haystack, needle) {
   return haystack.indexOf(needle) >= 0;
 }
-
 function browser(userAgent, vendor, opera) {
   vendor = vendor || ''; // vendor is undefined for at least IE9
-
   if (opera || includes(userAgent, ' OPR/')) {
     if (includes(userAgent, 'Mini')) {
       return 'Opera Mini';
     }
-
     return 'Opera';
   } else if (/(BlackBerry|PlayBook|BB10)/i.test(userAgent)) {
     return 'BlackBerry';
@@ -1905,7 +1977,6 @@ function browser(userAgent, vendor, opera) {
     if (includes(userAgent, 'Mobile')) {
       return 'Mobile Safari';
     }
-
     return 'Safari';
   } else if (includes(userAgent, 'Android')) {
     return 'Android Mobile';
@@ -1921,7 +1992,6 @@ function browser(userAgent, vendor, opera) {
     return '';
   }
 }
-
 function browserVersion(userAgent, vendor, opera) {
   const regexList = {
     'Internet Explorer Mobile': /rv:(\d+(\.\d+)?)/,
@@ -1943,28 +2013,21 @@ function browserVersion(userAgent, vendor, opera) {
   };
   const browserString = browser(userAgent, vendor, opera);
   const regex = regexList[browserString] || undefined;
-
   if (regex === undefined) {
     return null;
   }
-
   const matches = userAgent.match(regex);
-
   if (!matches) {
     return null;
   }
-
   return parseFloat(matches[matches.length - 2]);
 }
-
 function os(window) {
   const a = window.navigator.userAgent;
-
   if (/Windows/i.test(a)) {
     if (/Phone/.test(a) || /WPDesktop/.test(a)) {
       return 'Windows Phone';
     }
-
     return 'Windows';
   } else if (/(iPhone|iPad|iPod)/.test(a)) {
     return 'iOS';
@@ -1982,7 +2045,6 @@ function os(window) {
     return '';
   }
 }
-
 function device(userAgent) {
   if (/Windows Phone/i.test(userAgent) || /WPDesktop/.test(userAgent)) {
     return 'Windows Phone';
@@ -2000,14 +2062,11 @@ function device(userAgent) {
     return '';
   }
 }
-
 function referringDomain(referrer) {
   const split = referrer.split('/');
-
   if (split.length >= 3) {
     return split[2];
   }
-
   return '';
 }
 
@@ -2017,35 +2076,29 @@ const cookieStore = {
     try {
       const nameEQ = key + '=';
       const ca = document.cookie.split(';');
-
       for (let i = 0; i < ca.length; i++) {
         let c = ca[i];
-
         while (c.charAt(0) == ' ') {
           c = c.substring(1, c.length);
         }
-
         if (c.indexOf(nameEQ) === 0) {
           return decodeURIComponent(c.substring(nameEQ.length, c.length));
         }
       }
     } catch (err) {}
-
     return null;
   },
-
   setItem(key, value) {
     try {
       const cdomain = '',
-            expires = '',
-            secure = '';
+        expires = '',
+        secure = '';
       const new_cookie_val = key + '=' + encodeURIComponent(value) + expires + '; path=/' + cdomain + secure;
       document.cookie = new_cookie_val;
     } catch (err) {
       return;
     }
   },
-
   removeItem(name) {
     try {
       cookieStore.setItem(name, '');
@@ -2053,147 +2106,110 @@ const cookieStore = {
       return;
     }
   },
-
   clear() {
     document.cookie = '';
   },
-
   getAllKeys() {
     const ca = document.cookie.split(';');
     const keys = [];
-
     for (let i = 0; i < ca.length; i++) {
       let c = ca[i];
-
       while (c.charAt(0) == ' ') {
         c = c.substring(1, c.length);
       }
-
       keys.push(c.split('=')[0]);
     }
-
     return keys;
   }
-
 };
-
 const createStorageLike = store => {
   return {
     getItem(key) {
       return store.getItem(key);
     },
-
     setItem(key, value) {
       store.setItem(key, value);
     },
-
     removeItem(key) {
       store.removeItem(key);
     },
-
     clear() {
       store.clear();
     },
-
     getAllKeys() {
       const keys = [];
-
       for (const key in localStorage) {
         keys.push(key);
       }
-
       return keys;
     }
-
   };
 };
-
 const checkStoreIsSupported = (storage, key = '__mplssupport__') => {
   if (!window) {
     return false;
   }
-
   try {
     const val = 'xyz';
     storage.setItem(key, val);
-
     if (storage.getItem(key) !== val) {
       return false;
     }
-
     storage.removeItem(key);
     return true;
   } catch (err) {
     return false;
   }
 };
-
 let localStore = undefined;
 let sessionStore = undefined;
-
 const createMemoryStorage = () => {
   const _cache = {};
   const store = {
     getItem(key) {
       return _cache[key];
     },
-
     setItem(key, value) {
       _cache[key] = value !== null ? value : undefined;
     },
-
     removeItem(key) {
       delete _cache[key];
     },
-
     clear() {
       for (const key in _cache) {
         delete _cache[key];
       }
     },
-
     getAllKeys() {
       const keys = [];
-
       for (const key in _cache) {
         keys.push(key);
       }
-
       return keys;
     }
-
   };
   return store;
 };
-
 const getStorage = (type, window) => {
   if (window) {
     if (!localStore) {
       const _localStore = createStorageLike(window.localStorage);
-
       localStore = checkStoreIsSupported(_localStore) ? _localStore : undefined;
     }
-
     if (!sessionStore) {
       const _sessionStore = createStorageLike(window.sessionStorage);
-
       sessionStore = checkStoreIsSupported(_sessionStore) ? _sessionStore : undefined;
     }
   }
-
   switch (type) {
     case 'cookie':
       return cookieStore || localStore || sessionStore || createMemoryStorage();
-
     case 'localStorage':
       return localStore || sessionStore || createMemoryStorage();
-
     case 'sessionStorage':
       return sessionStore || createMemoryStorage();
-
     case 'memory':
       return createMemoryStorage();
-
     default:
       return createMemoryStorage();
   }
@@ -2201,61 +2217,50 @@ const getStorage = (type, window) => {
 
 class PostHog extends PostHogCore {
   constructor(apiKey, options) {
-    super(apiKey, options); // posthog-js stores options in one object on
-
+    super(apiKey, options);
+    // posthog-js stores options in one object on
     this._storageKey = options?.persistence_name ? `ph_${options.persistence_name}` : `ph_${apiKey}_posthog`;
     this._storage = getStorage(options?.persistence || 'localStorage', window);
     this.setupBootstrap(options);
-
     if (options?.preloadFeatureFlags !== false) {
       this.reloadFeatureFlags();
     }
   }
-
   getPersistedProperty(key) {
     if (!this._storageCache) {
       this._storageCache = JSON.parse(this._storage.getItem(this._storageKey) || '{}') || {};
     }
-
     return this._storageCache[key];
   }
-
   setPersistedProperty(key, value) {
     if (!this._storageCache) {
       this._storageCache = JSON.parse(this._storage.getItem(this._storageKey) || '{}') || {};
     }
-
     if (value === null) {
       delete this._storageCache[key];
     } else {
       this._storageCache[key] = value;
     }
-
     this._storage.setItem(this._storageKey, JSON.stringify(this._storageCache));
   }
-
   fetch(url, options) {
     return window.fetch(url, options);
   }
-
   getLibraryId() {
     return 'posthog-js-lite';
   }
-
   getLibraryVersion() {
     return version;
   }
-
   getCustomUserAgent() {
     return;
   }
-
   getCommonEventProperties() {
-    return { ...super.getCommonEventProperties(),
+    return {
+      ...super.getCommonEventProperties(),
       ...getContext(window)
     };
   }
-
 }
 
 export { PostHog, PostHog as default };