posthog-js 1.16.0 → 1.16.4

package/dist/module.js

@@ -865,9 +865,9 @@ var LZString = {
   }
 };
 
-var version = "1.16.0";
+var version = "1.16.4";
 
-var Config = {
+var Config$1 = {
   DEBUG: false,
   LIB_VERSION: version
 };
@@ -905,7 +905,7 @@ var _ = {
 var console$1 = {
   /** @type {function(...*)} */
   log: function log() {
-    if (Config.DEBUG && !_.isUndefined(window.console) && window.console) {
+    if (Config$1.DEBUG && !_.isUndefined(window.console) && window.console) {
       try {
         window.console.log.apply(window.console, arguments);
       } catch (err) {
@@ -918,7 +918,7 @@ var console$1 = {
 
   /** @type {function(...*)} */
   error: function error() {
-    if (Config.DEBUG && !_.isUndefined(window.console) && window.console) {
+    if (Config$1.DEBUG && !_.isUndefined(window.console) && window.console) {
       var args = ['PostHog error:'].concat(Array.prototype.slice.call(arguments));
 
       try {
@@ -1142,7 +1142,7 @@ _.safewrap = function (f) {
     } catch (e) {
       console$1.critical('Implementation error. Please turn on debug and contact support@posthog.com.');
 
-      if (Config.DEBUG) {
+      if (Config$1.DEBUG) {
         console$1.critical(e);
       }
     }
@@ -1736,7 +1736,7 @@ _.info = {
       $viewport_height: window.innerHeight,
       $viewport_width: window.innerWidth,
       $lib: 'web',
-      $lib_version: Config.LIB_VERSION,
+      $lib_version: Config$1.LIB_VERSION,
       $insert_id: Math.random().toString(36).substring(2, 10) + Math.random().toString(36).substring(2, 10),
       $time: _.timestamp() / 1000 // epoch time in seconds
 
@@ -2008,16 +2008,16 @@ function shouldCaptureValue(value) {
   return true;
 }
 /*
- * Check whether an attribute name is an Angular content attr
+ * Check whether an attribute name is an Angular style attr (either _ngcontent or _nghost)
  * These update on each build and lead to noise in the element chain
- * https://stackoverflow.com/questions/45082129/what-does-ngcontent-c-mean-in-angular
+ * More details on the attributes here: https://angular.io/guide/view-encapsulation
  * @param {string} attributeName - string value to check
  * @returns {boolean} whether the element is an angular tag
  */
 
-function isAngularContentAttr(attributeName) {
+function isAngularStyleAttr(attributeName) {
   if (typeof attributeName === 'string') {
-    return attributeName.substring(0, 10) === '_ngcontent';
+    return attributeName.substring(0, 10) === '_ngcontent' || attributeName.substring(0, 7) === '_nghost';
   }
 
   return false;
@@ -2118,7 +2118,7 @@ var autocapture = {
       // Only capture attributes we know are safe
       if (isSensitiveElement(elem) && ['name', 'id', 'class'].indexOf(attr.name) === -1) return;
 
-      if (!maskInputs && shouldCaptureValue(attr.value) && !isAngularContentAttr(attr.name)) {
+      if (!maskInputs && shouldCaptureValue(attr.value) && !isAngularStyleAttr(attr.name)) {
         props['attr__' + attr.name] = attr.value;
       }
     });
@@ -2539,6 +2539,73 @@ var memoryStore = {
   remove: function remove(name) {
     delete memoryStorage[name];
   }
+}; // Storage that only lasts the length of a tab/window. Survives page refreshes
+
+var sessionStore = {
+  sessionStorageSupported: null,
+  is_supported: function is_supported() {
+    if (sessionStore.sessionStorageSupported !== null) {
+      return sessionStore.sessionStorageSupported;
+    }
+
+    sessionStore.sessionStorageSupported = true;
+
+    if (window) {
+      try {
+        var key = '__support__',
+            val = 'xyz';
+        sessionStore.set(key, val);
+
+        if (sessionStore.get(key) !== '"xyz"') {
+          sessionStore.sessionStorageSupported = false;
+        }
+
+        sessionStore.remove(key);
+      } catch (err) {
+        sessionStore.sessionStorageSupported = false;
+      }
+    } else {
+      sessionStore.sessionStorageSupported = false;
+    }
+
+    return sessionStore.sessionStorageSupported;
+  },
+  error: function error(msg) {
+    if (Config.DEBUG) {
+      console$1.error('sessionStorage error: ', msg);
+    }
+  },
+  get: function get(name) {
+    try {
+      return window.sessionStorage.getItem(name);
+    } catch (err) {
+      sessionStore.error(err);
+    }
+
+    return null;
+  },
+  parse: function parse(name) {
+    try {
+      return JSON.parse(sessionStore.get(name)) || null;
+    } catch (err) {// noop
+    }
+
+    return null;
+  },
+  set: function set(name, value) {
+    try {
+      window.sessionStorage.setItem(name, JSON.stringify(value));
+    } catch (err) {
+      sessionStore.error(err);
+    }
+  },
+  remove: function remove(name) {
+    try {
+      window.sessionStorage.removeItem(name);
+    } catch (err) {
+      sessionStore.error(err);
+    }
+  }
 };
 
 /**
@@ -3514,28 +3581,6 @@ PostHogPersistence.prototype.remove_event_timer = function (event_name) {
   return timestamp;
 };
 
-var SESSION_CHANGE_THRESHOLD = 30 * 60 * 1000; // 30 mins
-
-var sessionIdGenerator = (function (persistence, timestamp) {
-  var _ref = persistence['props'][SESSION_ID] || [0, null],
-      _ref2 = _slicedToArray(_ref, 2),
-      lastTimestamp = _ref2[0],
-      sessionId = _ref2[1];
-
-  var isNewSessionId = false;
-
-  if (Math.abs(timestamp - lastTimestamp) > SESSION_CHANGE_THRESHOLD) {
-    sessionId = _.UUID();
-    isNewSessionId = true;
-  }
-
-  persistence.register(_defineProperty({}, SESSION_ID, [timestamp, sessionId]));
-  return {
-    isNewSessionId: isNewSessionId,
-    sessionId: sessionId
-  };
-});
-
 var replacementImageURI = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNOCAwSDE2TDAgMTZWOEw4IDBaIiBmaWxsPSIjMkQyRDJEIi8+CjxwYXRoIGQ9Ik0xNiA4VjE2SDhMMTYgOFoiIGZpbGw9IiMyRDJEMkQiLz4KPC9zdmc+Cg==';
 /*
  * Check whether a data payload is nearing 5mb. If it is, it checks the data for
@@ -3587,6 +3632,10 @@ function filterDataURLsFromLargeDataObjects(data) {
 }
 
 var BASE_ENDPOINT = '/e/';
+var FULL_SNAPSHOT_EVENT_TYPE = 2;
+var META_EVENT_TYPE = 4;
+var INCREMENTAL_SNAPSHOT_EVENT_TYPE = 3;
+var MUTATION_SOURCE_TYPE = 3;
 var SessionRecording = /*#__PURE__*/function () {
   function SessionRecording(instance) {
     _classCallCheck(this, SessionRecording);
@@ -3597,6 +3646,8 @@ var SessionRecording = /*#__PURE__*/function () {
     this.emit = false;
     this.endpoint = BASE_ENDPOINT;
     this.stopRrweb = null;
+    this.windowId = null;
+    this.sessionId = null;
   }
 
   _createClass(SessionRecording, [{
@@ -3666,9 +3717,24 @@ var SessionRecording = /*#__PURE__*/function () {
 
       if (!this.captureStarted && !this.instance.get_config('disable_session_recording')) {
         this.captureStarted = true;
-        loadScript(this.instance.get_config('api_host') + '/static/recorder.js?v=' + Config.LIB_VERSION, _.bind(this._onScriptLoaded, this));
+        loadScript(this.instance.get_config('api_host') + '/static/recorder.js?v=' + Config$1.LIB_VERSION, _.bind(this._onScriptLoaded, this));
       }
     }
+  }, {
+    key: "_updateWindowAndSessionIds",
+    value: function _updateWindowAndSessionIds(event) {
+      var _this$instance$_sessi = this.instance._sessionIdManager.getSessionAndWindowId(event.timestamp || new Date().getTime(), event),
+          windowId = _this$instance$_sessi.windowId,
+          sessionId = _this$instance$_sessi.sessionId; // Event types FullSnapshot and Meta mean we're already in the process of sending a full snapshot
+
+
+      if ((this.windowId !== windowId || this.sessionId !== sessionId) && [FULL_SNAPSHOT_EVENT_TYPE, META_EVENT_TYPE].indexOf(event.type) === -1) {
+        window.rrweb.record.takeFullSnapshot();
+      }
+
+      this.windowId = windowId;
+      this.sessionId = sessionId;
+    }
   }, {
     key: "_onScriptLoaded",
     value: function _onScriptLoaded() {
@@ -3701,23 +3767,20 @@ var SessionRecording = /*#__PURE__*/function () {
       }
 
       this.stopRrweb = window.rrweb.record(_objectSpread2({
-        emit: function emit(data) {
-          data = filterDataURLsFromLargeDataObjects(data);
-          var sessionIdObject = sessionIdGenerator(_this2.instance.persistence, data.timestamp); // Data type 2 and 4 are FullSnapshot and Meta and they mean we're already
-          // in the process of sending a full snapshot
+        emit: function emit(event) {
+          event = filterDataURLsFromLargeDataObjects(event);
 
-          if (sessionIdObject.isNewSessionId && [2, 4].indexOf(data.type) === -1) {
-            window.rrweb.record.takeFullSnapshot();
-          }
+          _this2._updateWindowAndSessionIds(event);
 
           var properties = {
-            $snapshot_data: data,
-            $session_id: sessionIdObject.sessionId
+            $snapshot_data: event,
+            $session_id: _this2.sessionId,
+            $window_id: _this2.windowId
           };
 
           _this2.instance._captureMetrics.incr('rrweb-record');
 
-          _this2.instance._captureMetrics.incr("rrweb-record-".concat(data.type));
+          _this2.instance._captureMetrics.incr("rrweb-record-".concat(event.type));
 
           if (_this2.emit) {
             _this2._captureSnapshot(properties);
@@ -3748,7 +3811,7 @@ var SessionRecording = /*#__PURE__*/function () {
         _noTruncate: true,
         _batchKey: 'sessionRecording',
         _metrics: {
-          rrweb_full_snapshot: properties.$snapshot_data.type === 2
+          rrweb_full_snapshot: properties.$snapshot_data.type === FULL_SNAPSHOT_EVENT_TYPE
         }
       });
     }
@@ -3937,6 +4000,10 @@ var Toolbar = /*#__PURE__*/function () {
         var host = editorParams['jsURL'] || editorParams['apiURL'] || this.instance.get_config('api_host');
         var toolbarScript = 'toolbar.js';
         var editorUrl = host + (host.endsWith('/') ? '' : '/') + 'static/' + toolbarScript + '?_ts=' + new Date().getTime();
+        var disableToolbarMetrics = this.instance.get_config('api_host') !== 'https://app.posthog.com' && this.instance.get_config('advanced_disable_toolbar_metrics');
+        editorParams = _objectSpread2(_objectSpread2({}, editorParams), disableToolbarMetrics ? {
+          instrument: false
+        } : {});
         loadScript(editorUrl, function () {
           window['ph_load_editor'](editorParams, _this.instance);
         }); // Turbolinks doesn't fire an onload event but does replace the entire page, including the toolbar
@@ -5318,6 +5385,112 @@ var RetryQueue = /*#__PURE__*/function (_RequestQueueScaffold) {
   return RetryQueue;
 }(RequestQueueScaffold);
 
+var SESSION_CHANGE_THRESHOLD = 30 * 60 * 1000; // 30 mins
+
+var SessionIdManager = /*#__PURE__*/function () {
+  function SessionIdManager(config, persistence) {
+    _classCallCheck(this, SessionIdManager);
+
+    this.persistence = persistence;
+
+    if (config['persistence_name']) {
+      this.window_id_storage_key = 'ph_' + config['persistence_name'] + '_window_id';
+    } else {
+      this.window_id_storage_key = 'ph_' + config['token'] + '_window_id';
+    }
+  } // Note: this tries to store the windowId in sessionStorage. SessionStorage is unique to the current window/tab,
+  // and persists page loads/reloads. So it's uniquely suited for storing the windowId. This function also respects
+  // when persistence is disabled (by user config) and when sessionStorage is not supported (it *should* be supported on all browsers),
+  // and in that case, it falls back to memory (which sadly, won't persist page loads)
+
+
+  _createClass(SessionIdManager, [{
+    key: "_setWindowId",
+    value: function _setWindowId(windowId) {
+      if (windowId !== this.windowId) {
+        this.windowId = windowId;
+
+        if (!this.persistence.disabled && sessionStore.is_supported()) {
+          sessionStore.set(this.window_id_storage_key, windowId);
+        }
+      }
+    }
+  }, {
+    key: "_getWindowId",
+    value: function _getWindowId() {
+      if (this.windowId) {
+        return this.windowId;
+      }
+
+      if (!this.persistence.disabled && sessionStore.is_supported()) {
+        return sessionStore.parse(this.window_id_storage_key);
+      }
+
+      return null;
+    } // Note: 'this.persistence.register' can be disabled in the config.
+    // In that case, this works by storing sessionId and the timestamp in memory.
+
+  }, {
+    key: "_setSessionId",
+    value: function _setSessionId(sessionId, timestamp) {
+      if (sessionId !== this.sessionId || timestamp !== this.timestamp) {
+        this.timestamp = timestamp;
+        this.sessionId = sessionId;
+        this.persistence.register(_defineProperty({}, SESSION_ID, [timestamp, sessionId]));
+      }
+    }
+  }, {
+    key: "_getSessionId",
+    value: function _getSessionId() {
+      if (this.sessionId && this.timestamp) {
+        return [this.timestamp, this.sessionId];
+      }
+
+      return this.persistence['props'][SESSION_ID] || [0, null];
+    }
+  }, {
+    key: "getSessionAndWindowId",
+    value: function getSessionAndWindowId() {
+      var _recordingEvent$data;
+
+      var timestamp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      var recordingEvent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      // Some recording events are triggered by non-user events (e.g. "X minutes ago" text updating on the screen).
+      // We don't want to update the session and window ids in these cases. These events are designated by event
+      // type -> incremental update, and source -> mutation.
+      var isUserInteraction = !(recordingEvent && recordingEvent.type === INCREMENTAL_SNAPSHOT_EVENT_TYPE && ((_recordingEvent$data = recordingEvent.data) === null || _recordingEvent$data === void 0 ? void 0 : _recordingEvent$data.source) === MUTATION_SOURCE_TYPE);
+      timestamp = timestamp || new Date().getTime();
+
+      var _this$_getSessionId = this._getSessionId(),
+          _this$_getSessionId2 = _slicedToArray(_this$_getSessionId, 2),
+          lastTimestamp = _this$_getSessionId2[0],
+          sessionId = _this$_getSessionId2[1];
+
+      var windowId = this._getWindowId();
+
+      if (!sessionId || isUserInteraction && Math.abs(timestamp - lastTimestamp) > SESSION_CHANGE_THRESHOLD) {
+        sessionId = _.UUID();
+        windowId = _.UUID();
+      } else if (!windowId) {
+        windowId = _.UUID();
+      }
+
+      var newTimestamp = lastTimestamp === 0 || isUserInteraction ? timestamp : lastTimestamp;
+
+      this._setWindowId(windowId);
+
+      this._setSessionId(sessionId, newTimestamp);
+
+      return {
+        sessionId: sessionId,
+        windowId: windowId
+      };
+    }
+  }]);
+
+  return SessionIdManager;
+}();
+
 /*
 SIMPLE STYLE GUIDE:
 
@@ -5404,6 +5577,7 @@ var defaultConfig = function defaultConfig() {
     mask_all_element_attributes: false,
     mask_all_text: false,
     advanced_disable_decide: false,
+    advanced_disable_toolbar_metrics: false,
     on_xhr_error: function on_xhr_error(req) {
       var error = 'Bad HTTP status: ' + req.status + ' ' + req.statusText;
       console$1.error(error);
@@ -5481,7 +5655,7 @@ var create_mplib = function create_mplib(token, config, name) {
   // global debug to be true
 
 
-  Config.DEBUG = Config.DEBUG || instance.get_config('debug'); // if target is not defined, we called init after the lib already
+  Config$1.DEBUG = Config$1.DEBUG || instance.get_config('debug'); // if target is not defined, we called init after the lib already
   // loaded, so there won't be an array of things to execute
 
   if (!_.isUndefined(target) && _.isArray(target)) {
@@ -5558,6 +5732,7 @@ PostHogLib.prototype._init = function (token, config, name) {
   this.__captureHooks = [];
   this.__request_queue = [];
   this['persistence'] = new PostHogPersistence(this['config']);
+  this['_sessionIdManager'] = new SessionIdManager(this['config'], this['persistence']);
 
   this._gdpr_init();
 
@@ -5949,6 +6124,15 @@ PostHogLib.prototype._calculate_event_properties = function (event_name, event_p
   if (!_.isUndefined(start_timestamp)) {
     var duration_in_ms = new Date().getTime() - start_timestamp;
     properties['$duration'] = parseFloat((duration_in_ms / 1000).toFixed(3));
+  }
+
+  if (this._sessionIdManager) {
+    var _this$_sessionIdManag = this._sessionIdManager.getSessionAndWindowId(),
+        sessionId = _this$_sessionIdManag.sessionId,
+        windowId = _this$_sessionIdManag.windowId;
+
+    properties['$session_id'] = sessionId;
+    properties['$window_id'] = windowId;
   } // note: extend writes to the first object, so lets make sure we
   // don't write to the persistence properties object and info
   // properties object by passing in a new object
@@ -6464,7 +6648,7 @@ PostHogLib.prototype.set_config = function (config) {
       this['config']['debug'] = true;
     }
 
-    Config.DEBUG = Config.DEBUG || this.get_config('debug');
+    Config$1.DEBUG = Config$1.DEBUG || this.get_config('debug');
 
     if (this.sessionRecording && typeof config.disable_session_recording !== 'undefined') {
       if (oldConfig.disable_session_recording !== config.disable_session_recording) {
@@ -6876,7 +7060,7 @@ PostHogLib.prototype['onFeatureFlags'] = PostHogLib.prototype.onFeatureFlags;
 PostHogLib.prototype['decodeLZ64'] = PostHogLib.prototype.decodeLZ64;
 PostHogLib.prototype['SentryIntegration'] = PostHogLib.prototype.sentry_integration;
 PostHogLib.prototype['debug'] = PostHogLib.prototype.debug;
-PostHogLib.prototype['LIB_VERSION'] = Config.LIB_VERSION;
+PostHogLib.prototype['LIB_VERSION'] = Config$1.LIB_VERSION;
 PostHogLib.prototype['startSessionRecording'] = PostHogLib.prototype.startSessionRecording;
 PostHogLib.prototype['stopSessionRecording'] = PostHogLib.prototype.stopSessionRecording;
 PostHogLib.prototype['sessionRecordingStarted'] = PostHogLib.prototype.sessionRecordingStarted; // PostHogPersistence Exports

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "posthog-js",
-    "version": "1.16.0",
+    "version": "1.16.4",
     "description": "Posthog-js allows you to automatically capture usage and send events to PostHog.",
     "repository": "https://github.com/PostHog/posthog-js",
     "author": "hey@posthog.com",
@@ -60,7 +60,7 @@
         "posthog-js": "link:.",
         "prettier": "^2.0.5",
         "rollup": "^2.18.2",
-        "rrweb": "^1.0.3",
+        "rrweb": "^1.0.6",
         "sinon": "9.0.2",
         "testcafe": "^1.10.1",
         "testcafe-browser-provider-browserstack": "^1.13.2-alpha.1",