posthog-js 1.36.1 → 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;
@@ -1167,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
@@ -1444,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.1";
+var version = "1.37.0";
 
 // e.g.     Config.DEBUG = Config.DEBUG || instance.get_config('debug')
 
@@ -1868,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
 
@@ -1899,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);
@@ -1937,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');
   }
 }
 /*
@@ -2141,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);
     }
 
@@ -2252,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;
 
@@ -2332,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) {
@@ -2353,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.
@@ -5301,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) {
@@ -6124,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: '',
@@ -6227,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);
@@ -6283,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 () {};
 
@@ -7289,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