@coralogix/browser 3.4.1 → 3.5.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 3.5.0 (2026-03-26)
+
+### 🚀 Features
+
+- Run SDK Web APIs outside zone.js by default for Angular applications
+
 ## 3.4.1 (2026-03-25)
 
 ### 🩹 Fixes

package/README.md

@@ -18,7 +18,6 @@
 
    - [Recording Manually](#recording-manually)
    - [Privacy & Security](#privacy--security)
-   - [Performance](#performance)
    - [Worker URL](#worker-url)
    - [Screenshots](#screenshots)
 
@@ -51,7 +50,8 @@
 
 26. [Soft Navigations (Experimental)](#soft-navigations--experimental)
 27. [Memory Usage (Experimental)](#memory-usage---experimental)
-28. [CDN](#cdn)
+28. [Angular Zone.js Configuration](#angular-zonejs-configuration)
+29. [CDN](#cdn)
 
     - [Specific Version](#specific-version-recommended)
     - [Add the CDN Script to Your Application](#add-the-cdn-script-to-your-application)
@@ -59,7 +59,7 @@
       - [Via JS File](#via-js-file)
       - [Via TS File](#via-ts-file)
 
-29. [Flutter Web](#flutter-web)
+30. [Flutter Web](#flutter-web)
 
 ---
 
@@ -352,22 +352,6 @@ CoralogixRum.init({
 });
 ```
 
-#### Performance
-
-Session Recording works by recording incremental DOM changes that occur in your web application.
-To avoid performance issues, Session Recording will stop recording if it detects a large number of mutations (Default: 5,000).
-
-```javascript
-CoralogixRum.init({
-  // ...
-  sessionRecordingConfig: {
-    // ...
-    // According to MutationObserver API, A large number of DOM mutations can negatively impact performance
-    maxMutations: 5000,
-  },
-});
-```
-
 #### Worker Url
 
 By default, Session recording uses an inline web worker script to compress data before transmission. For added flexibility, you can host a custom worker script on your own domain. Simply host the following file on your server: [worker.min.js](https://cdn.rum-ingress-coralogix.com/coralogix/browser/latest/worker.min.js)
@@ -872,8 +856,7 @@ This feature allows you to track multiple applications on the same page.<br>
 
 #### Pre Requisites
 
-To support microfrontend, you need to install one of these plugins: [webpack](https://www.npmjs.com/package/@coralogix/webpack-plugin), [esbuild](https://www.npmjs.com/package/@coralogix/esbuild-plugin) and include them in your build process.<br>
-Plugins for other bundlers are coming soon.
+To support microfrontend, you need to install one of these plugins: [webpack](https://www.npmjs.com/package/@coralogix/webpack-plugin), [esbuild](https://www.npmjs.com/package/@coralogix/esbuild-plugin), [vite](https://www.npmjs.com/package/@coralogix/vite-plugin) and include them in your build process.
 
 When an error occurs, the SDK will find the correlated microfrontend and will add a label with the microfrontend app/version to the error event.
 
@@ -1028,6 +1011,26 @@ self.onmessage = (message) => {
 
 ---
 
+## Angular Zone.js Configuration
+
+By default, the SDK runs its internal timers outside Angular's Zone.js to prevent unnecessary change detection cycles. This improves performance by avoiding redundant UI updates triggered by the SDK's background operations.
+
+```javascript
+CoralogixRum.init({
+  // ...
+  runOutsideAngularZone: true, // Defaults to true
+});
+```
+
+| Value   | Behavior                                                                 |
+| ------- | ------------------------------------------------------------------------ |
+| `true`  | SDK timers run outside Zone.js, preventing change detection triggers.   |
+| `false` | SDK timers run inside Zone.js, which may trigger change detection.      |
+
+> **Note:** In most cases, you should keep the default value (`true`) for optimal performance. Only set to `false` if you have a specific reason to include SDK operations in Angular's change detection.
+
+---
+
 ## CDN
 
 Coralogix Browser SDK is also provided via CDN.<br>

package/index.esm.js

@@ -1,4 +1,4 @@
-export { l as CoralogixEventType, j as CoralogixLogSeverity, i as CoralogixRum, O as OtelNetworkAttrs, P as PerformanceTypes, k as SessionRecordingEventType, U as UrlBasedLabelProvider, m as UrlType } from './index.esm2.js';
+export { s as CoralogixEventType, q as CoralogixLogSeverity, p as CoralogixRum, O as OtelNetworkAttrs, P as PerformanceTypes, r as SessionRecordingEventType, U as UrlBasedLabelProvider, t as UrlType } from './index.esm2.js';
 import 'tslib';
 import '@opentelemetry/sdk-trace-base';
 import '@opentelemetry/sdk-trace-web';

package/index.esm2.js

@@ -195,6 +195,9 @@ var CoralogixLogSeverity;
     CoralogixLogSeverity[CoralogixLogSeverity["Critical"] = 6] = "Critical";
 })(CoralogixLogSeverity || (CoralogixLogSeverity = {}));
 
+var SDK_CONFIG_KEY = 'sdkConfig';
+var USER_AGENT_KEY = 'userAgent';
+
 var millisecondsPerSecond = 1000;
 var millisecondsPerMinute = millisecondsPerSecond * 60;
 var MILLISECONDS_PER_HOUR = millisecondsPerMinute * 60;
@@ -212,7 +215,6 @@ var BATCH_TIME_DELAY = 1000;
 var SESSION_RECORDING_POSTFIX_URL = '/browser/alpha/sessionrecording';
 var SESSION_KEY = 'rum_session';
 var PREV_SESSION_KEY = 'rum_prev_session';
-var MUTATION_LIMIT = 10000;
 var DEFAULT_SESSION_CONFIG = {
     sessionSampleRate: 100,
     onlyWithErrorConfig: {
@@ -1303,6 +1305,64 @@ var IMG_EXTENSIONS = [
     '.webp',
 ];
 
+function getBrowserWindow() {
+    return CxGlobal;
+}
+function shouldRunOutsideZone() {
+    var _a;
+    return ((_a = getSdkConfig()) === null || _a === void 0 ? void 0 : _a.runOutsideAngularZone) !== false;
+}
+function getZoneJsOriginalDom(target, name) {
+    if (!shouldRunOutsideZone()) {
+        return target[name];
+    }
+    var browserWindow = getBrowserWindow();
+    var original;
+    if (browserWindow.Zone &&
+        typeof browserWindow.Zone.__symbol__ === 'function') {
+        original = target[browserWindow.Zone.__symbol__(name)];
+    }
+    if (!original) {
+        original = target[name];
+    }
+    return original;
+}
+function cxSetTimeout(callback, delay) {
+    var browserWindow = getBrowserWindow();
+    var originalSetTimeout = getZoneJsOriginalDom(browserWindow, 'setTimeout');
+    return originalSetTimeout.call(browserWindow, callback, delay);
+}
+function cxSetInterval(callback, delay) {
+    var browserWindow = getBrowserWindow();
+    var originalSetInterval = getZoneJsOriginalDom(browserWindow, 'setInterval');
+    return originalSetInterval.call(browserWindow, callback, delay);
+}
+function cxClearTimeout(id) {
+    var browserWindow = getBrowserWindow();
+    var originalClearTimeout = getZoneJsOriginalDom(browserWindow, 'clearTimeout');
+    originalClearTimeout.call(browserWindow, id);
+}
+function cxClearInterval(id) {
+    var browserWindow = getBrowserWindow();
+    var originalClearInterval = getZoneJsOriginalDom(browserWindow, 'clearInterval');
+    originalClearInterval.call(browserWindow, id);
+}
+function cxRequestAnimationFrame(callback) {
+    var browserWindow = getBrowserWindow();
+    var originalRaf = getZoneJsOriginalDom(browserWindow, 'requestAnimationFrame');
+    return originalRaf.call(browserWindow, callback);
+}
+function cxCancelAnimationFrame(id) {
+    var browserWindow = getBrowserWindow();
+    var originalCaf = getZoneJsOriginalDom(browserWindow, 'cancelAnimationFrame');
+    originalCaf.call(browserWindow, id);
+}
+function createCxMutationObserver(callback) {
+    var browserWindow = getBrowserWindow();
+    var OriginalMutationObserver = getZoneJsOriginalDom(browserWindow, 'MutationObserver');
+    return new OriginalMutationObserver(callback);
+}
+
 /** Original source: https://www.npmjs.com/package/tti-polyfill?activeTab=code
  * @license Apache-2.0
  * @version 0.2.2
@@ -1409,7 +1469,7 @@ function z(a, b) {
   return false;
 }
 function A(a) {
-  var b = new MutationObserver(function (c) {
+  var b = createCxMutationObserver(function (c) {
     c = t(c);
     for (var b = c.next(); !b.done; b = c.next()) b = b.value, 'childList' == b.type && z(b.addedNodes, y) ? a(b) : 'attributes' == b.type && y.includes(b.target.tagName.toLowerCase()) && a(b);
   });
@@ -1494,7 +1554,7 @@ function F(a) {
   G(a, Math.max(c + 5e3, b));
 }
 function G(a, b) {
-  !a.i || a.v > b || (clearTimeout(a.j), a.j = setTimeout(function () {
+  !a.i || a.v > b || (cxClearTimeout(a.j), a.j = cxSetTimeout(function () {
     var b = performance.timing.navigationStart,
       d = B(a.g, a.b),
       b = (CxGlobal.a && CxGlobal.a.A ? 1e3 * CxGlobal.a.A().C - b : 0) || performance.timing.domContentLoadedEventEnd - b;
@@ -1503,7 +1563,7 @@ function G(a, b) {
     null === f && G(a, Math.max(d + 5e3, e + 1e3));
     var g = a.a;
     5e3 > e - d ? d = null : (d = g.length ? g[g.length - 1].end : b, d = 5e3 > e - d ? null : Math.max(d, f));
-    d && (a.s(d), clearTimeout(a.j), a.i = false, a.c && a.c.disconnect(), a.h && a.h.disconnect());
+    d && (a.s(d), cxClearTimeout(a.j), a.i = false, a.c && a.c.disconnect(), a.h && a.h.disconnect());
     G(a, performance.now() + 1e3);
   }, b - performance.now()), a.v = b);
 }
@@ -1909,19 +1969,6 @@ var CoralogixResourcesInstrumentation = (function (_super) {
     return CoralogixResourcesInstrumentation;
 }(InstrumentationBase));
 
-function getZoneJsOriginalDom(target, name) {
-    var browserWindow = getCxGlobal();
-    var original;
-    if (browserWindow.Zone &&
-        typeof browserWindow.Zone.__symbol__ === 'function') {
-        original = target[browserWindow.Zone.__symbol__(name)];
-    }
-    if (!original) {
-        original = target[name];
-    }
-    return original;
-}
-
 function addEventListeners(eventTarget, eventNames, listener, _a) {
     var _b = _a === void 0 ? {} : _a, once = _b.once, capture = _b.capture, passive = _b.passive;
     var resolvedListener = once
@@ -2199,7 +2246,7 @@ var CoralogixMemoryUsageInstrumentation = (function (_super) {
     };
     CoralogixMemoryUsageInstrumentation.prototype.runMemoryMeasurements = function () {
         var _this = this;
-        this.timeoutId = setTimeout(function () { return _this.measureMemoryUsage(); }, this.memoryUsageInterval);
+        this.timeoutId = cxSetTimeout(function () { return _this.measureMemoryUsage(); }, this.memoryUsageInterval);
     };
     CoralogixMemoryUsageInstrumentation.prototype.measureMemoryUsage = function () {
         return __awaiter(this, void 0, void 0, function () {
@@ -2216,7 +2263,7 @@ var CoralogixMemoryUsageInstrumentation = (function (_super) {
     };
     CoralogixMemoryUsageInstrumentation.prototype.clearMeasurementsInterval = function () {
         if (this.timeoutId) {
-            clearTimeout(this.timeoutId);
+            cxClearTimeout(this.timeoutId);
         }
     };
     return CoralogixMemoryUsageInstrumentation;
@@ -2373,10 +2420,12 @@ var CoralogixDOMInstrumentation = (function (_super) {
         return _this;
     }
     CoralogixDOMInstrumentation.prototype.registerToDOMEvents = function () {
-        document.addEventListener('visibilitychange', this.visibilityChangeHandler);
+        var originalAddEventListener = getZoneJsOriginalDom(document, 'addEventListener');
+        originalAddEventListener.call(document, 'visibilitychange', this.visibilityChangeHandler);
     };
     CoralogixDOMInstrumentation.prototype.unregisterFromDOMEvents = function () {
-        document.removeEventListener('visibilitychange', this.visibilityChangeHandler);
+        var originalRemoveEventListener = getZoneJsOriginalDom(document, 'removeEventListener');
+        originalRemoveEventListener.call(document, 'visibilitychange', this.visibilityChangeHandler);
     };
     CoralogixDOMInstrumentation.prototype.init = function () { };
     CoralogixDOMInstrumentation.prototype.disable = function () {
@@ -2384,7 +2433,7 @@ var CoralogixDOMInstrumentation = (function (_super) {
     };
     CoralogixDOMInstrumentation.prototype.enable = function () {
         var _this = this;
-        setTimeout(function () {
+        cxSetTimeout(function () {
             _this.registerToDOMEvents();
         });
     };
@@ -2470,8 +2519,6 @@ var REQUIRED_CONFIG_KEYS = [
     'version',
     'coralogixDomain',
 ];
-var SDK_CONFIG_KEY = 'sdkConfig';
-var USER_AGENT_KEY = 'userAgent';
 var ID_MASK_KEY = '{id}';
 var UUID_REGEX = /[0-9a-fA-F-]{36}/g;
 var NANOID_REGEX = /^[a-zA-Z0-9-_]{21}$/;
@@ -3630,7 +3677,7 @@ var CoralogixExporter = (function () {
                     chunks.push(cachedLogs.slice(i, i + MAX_RUM_EVENTS_PER_REQUEST));
                 }
                 chunks.forEach(function (chunk) {
-                    setTimeout(function () { return _this.invokeLogRequest(chunk, true); }, _this.batchTimeDelay);
+                    cxSetTimeout(function () { return _this.invokeLogRequest(chunk, true); }, _this.batchTimeDelay);
                     _this.batchTimeDelay += BATCH_TIME_DELAY;
                 });
                 this.clearCachedDataForSessionWithError();
@@ -3673,22 +3720,28 @@ var SessionIdle = (function () {
         var _this = this;
         this.idleConfig = idleConfig;
         this._isIdleActive = false;
+        this.lastResetTime = 0;
+        this.THROTTLE_MS = 1000;
         this.stopCallbacks = {};
         this.resetTimeout = function () {
             var _a, _b;
             (_b = (_a = _this.stopCallbacks).clearTimeout) === null || _b === void 0 ? void 0 : _b.call(_a);
-            var id = setTimeout(function () {
+            var id = cxSetTimeout(function () {
                 _this._isIdleActive = true;
                 _this.idleConfig.onIdle();
             }, _this.idleConfig.timeoutDelay);
-            _this.stopCallbacks.clearTimeout = function () { return clearTimeout(id); };
+            _this.stopCallbacks.clearTimeout = function () { return cxClearTimeout(id); };
         };
         this.idlenessEventsHandler = function () {
             if (_this._isIdleActive) {
                 _this._isIdleActive = false;
                 _this.idleConfig.onActive();
             }
-            _this.resetTimeout();
+            var now = Date.now();
+            if (now - _this.lastResetTime >= _this.THROTTLE_MS) {
+                _this.lastResetTime = now;
+                _this.resetTimeout();
+            }
         };
     }
     Object.defineProperty(SessionIdle.prototype, "isIdleActive", {
@@ -4110,7 +4163,7 @@ function isInitialConfigValid(initConfig) {
     return true;
 }
 function validateAndResolveInitConfig(config) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (!isInitialConfigValid(config)) {
         return;
     }
@@ -4120,7 +4173,7 @@ function validateAndResolveInitConfig(config) {
     if (proxyUrl)
         resolvedIgnoreUrls.push(new RegExp(proxyUrl));
     OPTIONS_DEFAULTS.ignoreUrls && resolvedIgnoreUrls.push.apply(resolvedIgnoreUrls, __spreadArray([], __read$1(OPTIONS_DEFAULTS.ignoreUrls), false));
-    return __assign(__assign(__assign({}, OPTIONS_DEFAULTS), config), { maskInputTypes: (_a = config.maskInputTypes) !== null && _a !== void 0 ? _a : MASK_INPUT_TYPES_DEFAULT, maskClass: (_b = config.maskClass) !== null && _b !== void 0 ? _b : MASK_CLASS_DEFAULT, ignoreUrls: resolvedIgnoreUrls, urlBlueprinters: resolveUrlBlueprinters(urlBlueprinters), sessionSampleRate: (_c = config.sessionSampleRate) !== null && _c !== void 0 ? _c : 100, sessionConfig: resolveSessionConfig(config.sessionConfig), sessionRecordingConfig: resolveSessionRecordingConfig(config.sessionRecordingConfig), memoryUsageConfig: resolveMemoryUsageConfig(config.memoryUsageConfig), trackSoftNavigations: !!config.trackSoftNavigations, supportMfe: !!config.supportMfe });
+    return __assign(__assign(__assign({}, OPTIONS_DEFAULTS), config), { maskInputTypes: (_a = config.maskInputTypes) !== null && _a !== void 0 ? _a : MASK_INPUT_TYPES_DEFAULT, maskClass: (_b = config.maskClass) !== null && _b !== void 0 ? _b : MASK_CLASS_DEFAULT, ignoreUrls: resolvedIgnoreUrls, urlBlueprinters: resolveUrlBlueprinters(urlBlueprinters), sessionSampleRate: (_c = config.sessionSampleRate) !== null && _c !== void 0 ? _c : 100, sessionConfig: resolveSessionConfig(config.sessionConfig), sessionRecordingConfig: resolveSessionRecordingConfig(config.sessionRecordingConfig), memoryUsageConfig: resolveMemoryUsageConfig(config.memoryUsageConfig), trackSoftNavigations: !!config.trackSoftNavigations, supportMfe: !!config.supportMfe, runOutsideAngularZone: (_d = config.runOutsideAngularZone) !== null && _d !== void 0 ? _d : true });
 }
 function resolveMemoryUsageConfig(memoryUsageConfig) {
     var _a;
@@ -4154,7 +4207,7 @@ function resolveUrlBlueprinters(urlBlueprinters) {
     return resolvedUrlBlueprinters;
 }
 
-var SDK_VERSION = '3.4.1';
+var SDK_VERSION = '3.5.0';
 
 function shouldDropEvent(cxRumEvent, options) {
     if (isDocumentErrorWithoutMessage(cxRumEvent)) {
@@ -5031,13 +5084,13 @@ var CoralogixRum = {
             getSessionRecorder().startRecording();
             return;
         }
-        var intervalId = setInterval(function () {
+        var intervalId = cxSetInterval(function () {
             if (getSessionRecorder()) {
-                clearInterval(intervalId);
+                cxClearInterval(intervalId);
                 getSessionRecorder().startRecording();
             }
         }, 300);
-        setTimeout(function () { return clearInterval(intervalId); }, 3000);
+        cxSetTimeout(function () { return cxClearInterval(intervalId); }, 3000);
     },
     screenshot: function (description) {
         var _a;
@@ -5167,4 +5220,4 @@ var SessionRecordingEventType;
     SessionRecordingEventType[SessionRecordingEventType["Plugin"] = 6] = "Plugin";
 })(SessionRecordingEventType || (SessionRecordingEventType = {}));
 
-export { BATCH_TIME_DELAY as B, CxGlobal as C, MAX_BATCH_TIME_MS as M, OtelNetworkAttrs as O, PerformanceTypes as P, Request as R, SESSION_RECORDER_SEGMENTS_MAP as S, UrlBasedLabelProvider as U, getNowTime as a, SESSION_RECORDING_NETWORK_ERR0R_MESSAGE as b, SESSION_RECORDING_DEFAULT_HEADERS as c, SESSION_RECORDING_POSTFIX_URL as d, SESSION_RECORDER_KEY as e, MUTATION_LIMIT as f, getSdkConfig as g, SESSION_RECORDING_DEFAULT_ERROR_MESSAGE as h, CoralogixRum as i, CoralogixLogSeverity as j, SessionRecordingEventType as k, CoralogixEventType as l, UrlType as m, reportInternalEvent as r };
+export { BATCH_TIME_DELAY as B, CxGlobal as C, MAX_BATCH_TIME_MS as M, OtelNetworkAttrs as O, PerformanceTypes as P, Request as R, SESSION_RECORDER_SEGMENTS_MAP as S, UrlBasedLabelProvider as U, cxClearTimeout as a, createCxMutationObserver as b, cxSetTimeout as c, cxRequestAnimationFrame as d, cxCancelAnimationFrame as e, cxClearInterval as f, getZoneJsOriginalDom as g, getSdkConfig as h, getNowTime as i, SESSION_RECORDING_NETWORK_ERR0R_MESSAGE as j, cxSetInterval as k, SESSION_RECORDING_DEFAULT_HEADERS as l, SESSION_RECORDING_POSTFIX_URL as m, SESSION_RECORDER_KEY as n, SESSION_RECORDING_DEFAULT_ERROR_MESSAGE as o, CoralogixRum as p, CoralogixLogSeverity as q, SessionRecordingEventType as r, CoralogixEventType as s, UrlType as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coralogix/browser",
-  "version": "3.4.1",
+  "version": "3.5.0",
   "description": "Official Coralogix SDK for browsers",
   "license": "Apache-2.0",
   "author": "Coralogix",
@@ -27,9 +27,7 @@
     "@opentelemetry/propagator-b3": "1.25.1",
     "@opentelemetry/sdk-trace-base": "1.25.1",
     "@opentelemetry/sdk-trace-web": "1.25.1",
-    "@rrweb/rrweb-plugin-console-record": "2.0.0-alpha.15",
     "error-stack-parser": "2.1.4",
-    "rrweb": "2.0.0-alpha.15",
     "tslib": "2.6.3",
     "web-vitals": "4.2.3-soft-navs"
   },