posthog-js 1.36.0 → 1.37.0

package/dist/module.d.ts

@@ -135,13 +135,40 @@ interface CaptureResult {
     timestamp?: Date;
 }
 declare type CaptureCallback = (response: any, data: any) => void;
+declare type AutocaptureCompatibleElement = 'a' | 'button' | 'form' | 'input' | 'select' | 'textarea' | 'label';
+declare type DomAutocaptureEvents = 'click' | 'change' | 'submit';
+/**
+ * If an array is passed for an allowlist, autocapture events will only be sent for elements matching
+ * at least one of the elements in the array. Multiple allowlists can be used
+ */
+interface AutocaptureConfig {
+    /**
+     * List of URLs to allow autocapture on, can be strings to match
+     * or regexes e.g. ['https://example.com', 'test.com/.*']
+     */
+    url_allowlist?: (string | RegExp)[];
+    /**
+     * List of DOM events to allow autocapture on  e.g. ['click', 'change', 'submit']
+     */
+    dom_event_allowlist?: DomAutocaptureEvents[];
+    /**
+     * List of DOM elements to allow autocapture on
+     * e.g. ['a', 'button', 'form', 'input', 'select', 'textarea', 'label']
+     */
+    element_allowlist?: AutocaptureCompatibleElement[];
+    /**
+     * List of CSS selectors to allow autocapture on
+     * e.g. ['[ph-capture]']
+     */
+    css_selector_allowlist?: string[];
+}
 interface PostHogConfig {
     api_host: string;
     api_method: string;
     api_transport: string;
     ui_host: string | null;
     token: string;
-    autocapture: boolean;
+    autocapture: boolean | AutocaptureConfig;
     rageclick: boolean;
     cross_subdomain_cookie: boolean;
     persistence: 'localStorage' | 'cookie' | 'memory' | 'localStorage+cookie';
@@ -908,7 +935,7 @@ declare class PostHog {
     _jsc: JSC;
     __captureHooks: ((eventName: string) => void)[];
     __request_queue: [url: string, data: Record<string, any>, options: XHROptions, callback?: RequestCallback][];
-    __autocapture_enabled: boolean | undefined;
+    __autocapture: boolean | AutocaptureConfig | undefined;
     decideEndpointWasHit: boolean;
     SentryIntegration: typeof SentryIntegration;
     segmentIntegration: () => any;
@@ -1098,6 +1125,10 @@ declare class PostHog {
      * @param {Object} groupPropertiesToSet Optional properties to set for group
      */
     group(groupType: string, groupKey: string, groupPropertiesToSet?: Properties): void;
+    /**
+     * Resets only the group properties of the user currently logged in.
+     */
+    resetGroups(): void;
     /**
      * Clears super properties and generates a new random distinct_id for this instance.
      * Useful for clearing data when a user logs out.
@@ -1163,8 +1194,8 @@ declare class PostHog {
      *       // Automatically capture clicks, form submissions and change events
      *       autocapture: true
      *
-     *       // Capture rage clicks (beta) - useful for session recording
-     *       rageclick: false
+     *       // Capture rage clicks
+     *       rageclick: true
      *
      *       // transport for sending requests ('XHR' or 'sendBeacon')
      *       // NB: sendBeacon should only be used for scenarios such as
@@ -1440,4 +1471,4 @@ declare class PostHog {
 
 declare const posthog: PostHog;
 
-export { AutoCaptureCustomProperty, Breaker, CaptureCallback, CaptureOptions, CaptureResult, Compression, CompressionData, DecideResponse, EventHandler, FeatureFlagsCallback, GDPROptions, JSC, OptInOutCapturingOptions, PersistentStore, PostData, PostHog, PostHogConfig, Properties, Property, QueuedRequestData, RequestCallback, RetryQueueElement, SessionRecordingOptions, SnippetArrayItem, ToolbarParams, ToolbarSource, ToolbarUserIntent, ToolbarVersion, XHROptions, XHRParams, posthog as default, isFeatureEnabledOptions, posthog };
+export { AutoCaptureCustomProperty, AutocaptureCompatibleElement, AutocaptureConfig, Breaker, CaptureCallback, CaptureOptions, CaptureResult, Compression, CompressionData, DecideResponse, DomAutocaptureEvents, EventHandler, FeatureFlagsCallback, GDPROptions, JSC, OptInOutCapturingOptions, PersistentStore, PostData, PostHog, PostHogConfig, Properties, Property, QueuedRequestData, RequestCallback, RetryQueueElement, SessionRecordingOptions, SnippetArrayItem, ToolbarParams, ToolbarSource, ToolbarUserIntent, ToolbarVersion, XHROptions, XHRParams, posthog as default, isFeatureEnabledOptions, posthog };

package/dist/module.js

@@ -921,7 +921,7 @@ var LZString = {
   }
 };
 
-var version = "1.36.0";
+var version = "1.37.0";
 
 // e.g.     Config.DEBUG = Config.DEBUG || instance.get_config('debug')
 
@@ -1203,7 +1203,6 @@ var _strip_empty_properties = function _strip_empty_properties(p) {
 
   return ret;
 };
-var COPY_IN_PROGRESS_ATTRIBUTE = typeof Symbol !== 'undefined' ? Symbol('__deepCircularCopyInProgress__') : '__deepCircularCopyInProgress__';
 /**
  * Deep copies an object.
  * It handles cycles by replacing all references to them with `undefined`
@@ -1211,35 +1210,39 @@ var COPY_IN_PROGRESS_ATTRIBUTE = typeof Symbol !== 'undefined' ? Symbol('__deepC
  *
  * @param value
  * @param customizer
- * @param [key] if provided this is the object key associated with the value to be copied. It allows the customizer function to have context when it runs
  * @returns {{}|undefined|*}
  */
 
-function deepCircularCopy(value, customizer, key) {
-  if (value !== Object(value)) return customizer ? customizer(value, key) : value; // primitive value
+function deepCircularCopy(value, customizer) {
+  var COPY_IN_PROGRESS_SET = new Set();
 
-  if (value[COPY_IN_PROGRESS_ATTRIBUTE]) return undefined;
-  value[COPY_IN_PROGRESS_ATTRIBUTE] = true;
-  var result;
+  function internalDeepCircularCopy(value, key) {
+    if (value !== Object(value)) return customizer ? customizer(value, key) : value; // primitive value
 
-  if (_isArray(value)) {
-    result = [];
+    if (COPY_IN_PROGRESS_SET.has(value)) return undefined;
+    COPY_IN_PROGRESS_SET.add(value);
+    var result;
 
-    _eachArray(value, function (it) {
-      result.push(deepCircularCopy(it, customizer));
-    });
-  } else {
-    result = {};
+    if (_isArray(value)) {
+      result = [];
 
-    _each(value, function (val, key) {
-      if (key !== COPY_IN_PROGRESS_ATTRIBUTE) {
-        result[key] = deepCircularCopy(val, customizer, key);
-      }
-    });
+      _eachArray(value, function (it) {
+        result.push(internalDeepCircularCopy(it));
+      });
+    } else {
+      result = {};
+
+      _each(value, function (val, key) {
+        if (!COPY_IN_PROGRESS_SET.has(val)) {
+          result[key] = internalDeepCircularCopy(val, key);
+        }
+      });
+    }
+
+    return result;
   }
 
-  delete value[COPY_IN_PROGRESS_ATTRIBUTE];
-  return result;
+  return internalDeepCircularCopy(value);
 }
 
 var LONG_STRINGS_ALLOW_LIST = ['$performance_raw'];
@@ -1865,20 +1868,64 @@ function isTextNode(el) {
 function isDocumentFragment(el) {
   return !!el && el.nodeType === 11; // Node.DOCUMENT_FRAGMENT_NODE - use integer constant for browser portability
 }
-var usefulElements = ['a', 'button', 'form', 'input', 'select', 'textarea', 'label'];
+var autocaptureCompatibleElements = ['a', 'button', 'form', 'input', 'select', 'textarea', 'label'];
 /*
  * Check whether a DOM event should be "captured" or if it may contain sentitive data
  * using a variety of heuristics.
  * @param {Element} el - element to check
  * @param {Event} event - event to check
+ * @param {Object} autocaptureConfig - autocapture config
  * @returns {boolean} whether the event should be captured
  */
 
 function shouldCaptureDomEvent(el, event) {
+  var autocaptureConfig = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+
   if (!el || isTag(el, 'html') || !isElementNode(el)) {
     return false;
   }
 
+  if (autocaptureConfig !== null && autocaptureConfig !== void 0 && autocaptureConfig.url_allowlist) {
+    var url = window.location.href;
+    var allowlist = autocaptureConfig.url_allowlist;
+
+    if (allowlist && !allowlist.some(function (regex) {
+      return url.match(regex);
+    })) {
+      return false;
+    }
+  }
+
+  if (autocaptureConfig !== null && autocaptureConfig !== void 0 && autocaptureConfig.dom_event_allowlist) {
+    var _allowlist = autocaptureConfig.dom_event_allowlist;
+
+    if (_allowlist && !_allowlist.some(function (eventType) {
+      return event.type === eventType;
+    })) {
+      return false;
+    }
+  }
+
+  if (autocaptureConfig !== null && autocaptureConfig !== void 0 && autocaptureConfig.element_allowlist) {
+    var _allowlist2 = autocaptureConfig.element_allowlist;
+
+    if (_allowlist2 && !_allowlist2.some(function (elementType) {
+      return el.tagName.toLowerCase() === elementType;
+    })) {
+      return false;
+    }
+  }
+
+  if (autocaptureConfig !== null && autocaptureConfig !== void 0 && autocaptureConfig.css_selector_allowlist) {
+    var _allowlist3 = autocaptureConfig.css_selector_allowlist;
+
+    if (_allowlist3 && !_allowlist3.some(function (selector) {
+      return el.matches(selector);
+    })) {
+      return false;
+    }
+  }
+
   var parentIsUsefulElement = false;
   var targetElementList = [el]; // TODO: remove this var, it's never queried
 
@@ -1896,7 +1943,7 @@ function shouldCaptureDomEvent(el, event) {
     parentNode = curEl.parentNode || false;
     if (!parentNode) break;
 
-    if (usefulElements.indexOf(parentNode.tagName.toLowerCase()) > -1) {
+    if (autocaptureCompatibleElements.indexOf(parentNode.tagName.toLowerCase()) > -1) {
       parentIsUsefulElement = true;
     } else {
       var _compStyles = window.getComputedStyle(parentNode);
@@ -1934,7 +1981,7 @@ function shouldCaptureDomEvent(el, event) {
 
     default:
       if (parentIsUsefulElement) return event.type === 'click';
-      return event.type === 'click' && (usefulElements.indexOf(tag) > -1 || el.getAttribute('contenteditable') === 'true');
+      return event.type === 'click' && (autocaptureCompatibleElements.indexOf(tag) > -1 || el.getAttribute('contenteditable') === 'true');
   }
 }
 /*
@@ -2138,7 +2185,7 @@ var autocapture = {
       tag_name: tag_name
     };
 
-    if (usefulElements.indexOf(tag_name) > -1 && !maskText) {
+    if (autocaptureCompatibleElements.indexOf(tag_name) > -1 && !maskText) {
       props['$el_text'] = getSafeText(elem);
     }
 
@@ -2249,7 +2296,7 @@ var autocapture = {
       (_this$rageclicks = this.rageclicks) === null || _this$rageclicks === void 0 ? void 0 : _this$rageclicks.click(e.clientX, e.clientY, new Date().getTime());
     }
 
-    if (target && shouldCaptureDomEvent(target, e)) {
+    if (target && shouldCaptureDomEvent(target, e, this.config)) {
       var targetElementList = [target];
       var curEl = target;
 
@@ -2329,7 +2376,21 @@ var autocapture = {
   },
   _customProperties: [],
   rageclicks: null,
+  config: undefined,
   init: function init(instance) {
+    var _this$config;
+
+    if (typeof instance.__autocapture !== 'boolean') {
+      this.config = instance.__autocapture;
+    } // precompile the regex
+
+
+    if ((_this$config = this.config) !== null && _this$config !== void 0 && _this$config.url_allowlist) {
+      this.config.url_allowlist = this.config.url_allowlist.map(function (url) {
+        return new RegExp(url);
+      });
+    }
+
     this.rageclicks = new RageClick(instance);
   },
   afterDecideResponse: function afterDecideResponse(response, instance) {
@@ -2350,7 +2411,7 @@ var autocapture = {
 
       this._addDomEventHandlers(instance);
     } else {
-      instance['__autocapture_enabled'] = false;
+      instance['__autocapture'] = false;
     }
   },
   // this is a mechanism to ramp up CE with no server-side interaction.
@@ -5298,6 +5359,10 @@ function strToU8(str, latin1) {
   return slc(ar, 0, ai);
 }
 
+/**
+ * If an array is passed for an allowlist, autocapture events will only be sent for elements matching
+ * at least one of the elements in the array. Multiple allowlists can be used
+ */
 exports.Compression = void 0;
 
 (function (Compression) {
@@ -6121,7 +6186,7 @@ var defaultConfig = function defaultConfig() {
     ui_host: null,
     token: '',
     autocapture: true,
-    rageclick: false,
+    rageclick: true,
     cross_subdomain_cookie: (document$1 === null || document$1 === void 0 ? void 0 : (_document$location = document$1.location) === null || _document$location === void 0 ? void 0 : (_document$location$ho = _document$location.hostname) === null || _document$location$ho === void 0 ? void 0 : _document$location$ho.indexOf('herokuapp.com')) === -1,
     persistence: 'cookie',
     persistence_name: '',
@@ -6224,17 +6289,18 @@ var create_mplib = function create_mplib(token, config, name) {
   instance.toolbar.maybeLoadToolbar();
   instance.sessionRecording = new SessionRecording(instance);
   instance.sessionRecording.startRecordingIfEnabled();
-  instance.__autocapture_enabled = instance.get_config('autocapture');
+  instance.__autocapture = instance.get_config('autocapture');
 
   if (instance.get_config('autocapture')) {
+    instance.__autocapture = instance.get_config('autocapture');
     var num_buckets = 100;
     var num_enabled_buckets = 100;
 
     if (!autocapture.enabledForProject(instance.get_config('token'), num_buckets, num_enabled_buckets)) {
-      instance.__autocapture_enabled = false;
+      instance.__autocapture = false;
       logger.log('Not in active bucket: disabling Automatic Event Collection.');
     } else if (!autocapture.isBrowserSupported()) {
-      instance.__autocapture_enabled = false;
+      instance.__autocapture = false;
       logger.log('Disabling Automatic Event Collection because this browser is not supported');
     } else {
       autocapture.init(instance);
@@ -6280,7 +6346,7 @@ var PostHog = /*#__PURE__*/function () {
     this.__captureHooks = [];
     this.__request_queue = [];
     this.__loaded = false;
-    this.__autocapture_enabled = undefined;
+    this.__autocapture = undefined;
 
     this._jsc = function () {};
 
@@ -7159,6 +7225,19 @@ var PostHog = /*#__PURE__*/function () {
         this.reloadFeatureFlags();
       }
     }
+    /**
+     * Resets only the group properties of the user currently logged in.
+     */
+
+  }, {
+    key: "resetGroups",
+    value: function resetGroups() {
+      this.register({
+        $groups: {}
+      }); // If groups changed, reload feature flags.
+
+      this.reloadFeatureFlags();
+    }
     /**
      * Clears super properties and generates a new random distinct_id for this instance.
      * Useful for clearing data when a user logs out.
@@ -7273,8 +7352,8 @@ var PostHog = /*#__PURE__*/function () {
      *       // Automatically capture clicks, form submissions and change events
      *       autocapture: true
      *
-     *       // Capture rage clicks (beta) - useful for session recording
-     *       rageclick: false
+     *       // Capture rage clicks
+     *       rageclick: true
      *
      *       // transport for sending requests ('XHR' or 'sendBeacon')
      *       // NB: sendBeacon should only be used for scenarios such as