@coralogix/browser 3.22.0 → 3.22.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 3.22.1 (2026-08-16)
+
+### 🩹 Fixes
+
+- Report a network request under the view it started in — a request still in flight when the page changed was previously tagged with the next view's number
+- Count full page loads as view changes in multi-page apps, where `view_number` previously stayed at 0 for the whole session (requires `sessionConfig.keepSessionAfterReload`)
+
 ## 3.22.0 (2026-08-13)
 
 ### 🚀 Features

package/README.md

@@ -80,8 +80,6 @@
 
 38. [Flutter Web](#flutter-web)
 
----
-
 </details>
 
 # Official Coralogix SDK for Browsers
@@ -555,7 +553,8 @@ CoralogixRum.init({
 });
 ```
 
-> **Note:** Higher values may have a performance impact, as the browser needs to capture more frames each time an error is created.
+> [!NOTE]
+> Higher values may have a performance impact, as the browser needs to capture more frames each time an error is created.
 
 ### Mask elements
 
@@ -609,7 +608,8 @@ The SDK uses various strategies to name click actions. For more control, define
 </nav>
 ```
 
-> **Note:** The `data-cx-action-name` attribute is never masked, even when the element has a mask class applied. This ensures your custom action names are always captured for tracking purposes.
+> [!NOTE]
+> The `data-cx-action-name` attribute is never masked, even when the element has a mask class applied. This ensures your custom action names are always captured for tracking purposes.
 
 ### Label Providers
 
@@ -920,7 +920,8 @@ CoralogixRum.init({
 });
 ```
 
-> **Note:** The `priority` hint only works in Chromium browsers (Chrome/Edge 101+) and is a no-op elsewhere. We type this option with our own `SdkFetchPriority` alias instead of the DOM `RequestPriority` type, so it still compiles on older TypeScript versions (the SDK supports `>= 4.4.2`).
+> [!NOTE]
+> The `priority` hint only works in Chromium browsers (Chrome/Edge 101+) and is a no-op elsewhere. We type this option with our own `SdkFetchPriority` alias instead of the DOM `RequestPriority` type, so it still compiles on older TypeScript versions (the SDK supports `>= 4.4.2`).
 
 ### Custom Measurement
 
@@ -1109,8 +1110,6 @@ Web Worker support enables the capture of events originating from Web Workers, i
 
 > By default, Web Worker support is **disabled**.
 
----
-
 ### Enabling Web Worker Support
 
 ```javascript
@@ -1119,8 +1118,6 @@ CoralogixRum.init({
 });
 ```
 
----
-
 #### Examples
 
 ```javascript
@@ -1148,8 +1145,6 @@ 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.
@@ -1166,9 +1161,8 @@ CoralogixRum.init({
 | `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.
-
----
+> [!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
 

package/index.esm2.js

@@ -228,6 +228,7 @@ var SESSION_MANAGER_KEY = 'rumSessionManager';
 var SESSION_RECORDER_KEY = 'rumSessionRecorder';
 var SESSION_RECORDER_SEGMENTS_MAP = 'rumSessionRecorderSegmentsMap';
 var VIEW_NUMBER_KEY = 'rum_view_number';
+var CURRENT_PAGE_FRAGMENT_KEY = 'rum_current_page_fragment';
 
 var SNAPSHOT_MANAGER_KEY = 'rumSnapshotManager';
 var SNAPSHOT_KEY = 'rum_snapshot';
@@ -3301,6 +3302,7 @@ var CoralogixAttributes = {
     TIMESTAMP: 'timestamp',
     INTERNAL: 'internal',
     PAGE_CONTEXT: 'page_context',
+    VIEW_NUMBER: 'view_number',
     IS_NAVIGATION_EVENT: 'is_navigation_event',
     IS_DEAD_CLICK: 'is_dead_click',
     IS_RAGE_CLICK: 'is_rage_click',
@@ -4722,6 +4724,7 @@ var SessionManager = (function (_super) {
         _this.initializeSession(recordConfig);
         if ((_b = _this._sessionConfig) === null || _b === void 0 ? void 0 : _b.keepSessionAfterReload) {
             _this.loadViewNumber();
+            _this.loadCurrentPageFragment();
         }
         return _this;
     }
@@ -4810,11 +4813,12 @@ var SessionManager = (function (_super) {
     });
     SessionManager.prototype.updateCurrentPage = function (fragment) {
         if (this.isIdleActive) {
-            this._currentPageFragment = undefined;
+            this.resetCurrentPageFragment();
             return;
         }
         this._currentPageFragment = fragment;
         this._currentPageTimestamp = getNowTime();
+        this.persistCurrentPageFragment(fragment);
     };
     SessionManager.prototype.incrementViewNumber = function () {
         this._viewNumber++;
@@ -4836,6 +4840,22 @@ var SessionManager = (function (_super) {
         this._viewNumber = 0;
         (_a = CxGlobal.sessionStorage) === null || _a === void 0 ? void 0 : _a.removeItem(VIEW_NUMBER_KEY);
     };
+    SessionManager.prototype.persistCurrentPageFragment = function (fragment) {
+        var _a, _b;
+        if ((_a = this._sessionConfig) === null || _a === void 0 ? void 0 : _a.keepSessionAfterReload) {
+            (_b = CxGlobal.sessionStorage) === null || _b === void 0 ? void 0 : _b.setItem(CURRENT_PAGE_FRAGMENT_KEY, fragment);
+        }
+    };
+    SessionManager.prototype.loadCurrentPageFragment = function () {
+        var _a;
+        this._currentPageFragment =
+            ((_a = CxGlobal.sessionStorage) === null || _a === void 0 ? void 0 : _a.getItem(CURRENT_PAGE_FRAGMENT_KEY)) || undefined;
+    };
+    SessionManager.prototype.resetCurrentPageFragment = function () {
+        var _a;
+        this._currentPageFragment = undefined;
+        (_a = CxGlobal.sessionStorage) === null || _a === void 0 ? void 0 : _a.removeItem(CURRENT_PAGE_FRAGMENT_KEY);
+    };
     SessionManager.prototype.getSessionKey = function () {
         return SESSION_KEY;
     };
@@ -4900,7 +4920,7 @@ var SessionManager = (function (_super) {
         (_d = getSnapshotManager()) === null || _d === void 0 ? void 0 : _d.resetSnapshot();
         clearStoredSnapshotState();
         (_e = getClickScreenshotManager()) === null || _e === void 0 ? void 0 : _e.reset();
-        this._currentPageFragment = undefined;
+        this.resetCurrentPageFragment();
         this.resetViewNumber();
         (_f = this.sessionRecorder) === null || _f === void 0 ? void 0 : _f.stopRecording();
         (_g = CxGlobal.sessionStorage) === null || _g === void 0 ? void 0 : _g.removeItem(SESSION_KEY);
@@ -5176,7 +5196,7 @@ function resolveUrlBlueprinters(urlBlueprinters) {
     return resolvedUrlBlueprinters;
 }
 
-var SDK_VERSION = '3.22.0';
+var SDK_VERSION = '3.22.1';
 
 function shouldDropEvent(cxRumEvent, options) {
     if (isDocumentErrorWithoutMessage(cxRumEvent)) {
@@ -5337,9 +5357,9 @@ var CoralogixSpanMapProcessor = (function () {
         return Promise.resolve(undefined);
     };
     CoralogixSpanMapProcessor.prototype._mapToCxSpan = function (span, session, prevSession, sessionHasRecording, sessionHasScreenshot, onlySessionWithErrorMode) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        var _m = session || {}, sessionId = _m.sessionId, sessionCreationDate = _m.sessionCreationDate;
-        var _o = prevSession || {}, prevSessionId = _o.sessionId, prevSessionCreationDate = _o.sessionCreationDate, prevSessionHasRecording = _o.hasRecording, prevSessionHasScreenshot = _o.hasScreenshot;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _o = session || {}, sessionId = _o.sessionId, sessionCreationDate = _o.sessionCreationDate;
+        var _p = prevSession || {}, prevSessionId = _p.sessionId, prevSessionCreationDate = _p.sessionCreationDate, prevSessionHasRecording = _p.hasRecording, prevSessionHasScreenshot = _p.hasScreenshot;
         var attributes = span.attributes;
         var user_context = JSON.parse(attributes[CoralogixAttributes.USER_CONTEXT]);
         var application_context = JSON.parse(attributes[CoralogixAttributes.APPLICATION_CONTEXT]);
@@ -5381,14 +5401,14 @@ var CoralogixSpanMapProcessor = (function () {
                         type: eventType,
                         source: attributes[CoralogixAttributes.SOURCE],
                         severity: severity,
-                    }, labels: labels, environment: attributes[CoralogixAttributes.ENVIRONMENT] || '', view_number: getSessionManager().viewNumber, layout_context: {
-                        viewport_width: (_c = window === null || window === void 0 ? void 0 : window.innerWidth) !== null && _c !== void 0 ? _c : 0,
-                        viewport_height: (_d = window === null || window === void 0 ? void 0 : window.innerHeight) !== null && _d !== void 0 ? _d : 0,
-                        view_width: (_f = (_e = document === null || document === void 0 ? void 0 : document.documentElement) === null || _e === void 0 ? void 0 : _e.scrollWidth) !== null && _f !== void 0 ? _f : 0,
-                        view_height: (_h = (_g = document === null || document === void 0 ? void 0 : document.documentElement) === null || _g === void 0 ? void 0 : _g.scrollHeight) !== null && _h !== void 0 ? _h : 0,
-                        device_pixel_ratio: (_j = window === null || window === void 0 ? void 0 : window.devicePixelRatio) !== null && _j !== void 0 ? _j : 1,
-                        scroll_x: (_k = window === null || window === void 0 ? void 0 : window.scrollX) !== null && _k !== void 0 ? _k : 0,
-                        scroll_y: (_l = window === null || window === void 0 ? void 0 : window.scrollY) !== null && _l !== void 0 ? _l : 0,
+                    }, labels: labels, environment: attributes[CoralogixAttributes.ENVIRONMENT] || '', view_number: (_c = span[CoralogixAttributes.VIEW_NUMBER]) !== null && _c !== void 0 ? _c : getSessionManager().viewNumber, layout_context: {
+                        viewport_width: (_d = window === null || window === void 0 ? void 0 : window.innerWidth) !== null && _d !== void 0 ? _d : 0,
+                        viewport_height: (_e = window === null || window === void 0 ? void 0 : window.innerHeight) !== null && _e !== void 0 ? _e : 0,
+                        view_width: (_g = (_f = document === null || document === void 0 ? void 0 : document.documentElement) === null || _f === void 0 ? void 0 : _f.scrollWidth) !== null && _g !== void 0 ? _g : 0,
+                        view_height: (_j = (_h = document === null || document === void 0 ? void 0 : document.documentElement) === null || _h === void 0 ? void 0 : _h.scrollHeight) !== null && _j !== void 0 ? _j : 0,
+                        device_pixel_ratio: (_k = window === null || window === void 0 ? void 0 : window.devicePixelRatio) !== null && _k !== void 0 ? _k : 1,
+                        scroll_x: (_l = window === null || window === void 0 ? void 0 : window.scrollX) !== null && _l !== void 0 ? _l : 0,
+                        scroll_y: (_m = window === null || window === void 0 ? void 0 : window.scrollY) !== null && _m !== void 0 ? _m : 0,
                     } }),
             },
         };
@@ -5708,22 +5728,23 @@ var CoralogixNavigationProcessor = (function () {
             var pageContext = resolvePageContext(location.href);
             if (pageContext) {
                 span[CoralogixAttributes.PAGE_CONTEXT] = pageContext;
-                var currentPageFragment = getSessionManager().currentPageFragment;
+                var previousPageFragment = getSessionManager().currentPageFragment;
                 var page_fragments = pageContext.page_fragments;
-                if (currentPageFragment !== page_fragments) {
+                if (previousPageFragment !== page_fragments) {
                     getSessionManager().updateCurrentPage(page_fragments);
                     span[CoralogixAttributes.IS_NAVIGATION_EVENT] = true;
-                    this.handlePageNavigation(currentPageFragment);
+                    this.handlePageNavigation(previousPageFragment);
                     (_a = getClickScreenshotManager()) === null || _a === void 0 ? void 0 : _a.onNavigation();
                 }
+                span[CoralogixAttributes.VIEW_NUMBER] = getSessionManager().viewNumber;
             }
         }
         finally {
             this.isResolving = false;
         }
     };
-    CoralogixNavigationProcessor.prototype.handlePageNavigation = function (currentPageFragment) {
-        if (currentPageFragment) {
+    CoralogixNavigationProcessor.prototype.handlePageNavigation = function (previousPageFragment) {
+        if (previousPageFragment) {
             getSessionManager().incrementViewNumber();
         }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coralogix/browser",
-  "version": "3.22.0",
+  "version": "3.22.1",
   "description": "Official Coralogix SDK for browsers",
   "license": "Apache-2.0",
   "author": "Coralogix",

package/src/constants.d.ts

@@ -59,6 +59,7 @@ export declare const CoralogixAttributes: {
     TIMESTAMP: string;
     INTERNAL: string;
     PAGE_CONTEXT: string;
+    VIEW_NUMBER: string;
     IS_NAVIGATION_EVENT: string;
     IS_DEAD_CLICK: string;
     IS_RAGE_CLICK: string;

package/src/session/session.consts.d.ts

@@ -17,3 +17,4 @@ export declare const SESSION_MANAGER_KEY = "rumSessionManager";
 export declare const SESSION_RECORDER_KEY = "rumSessionRecorder";
 export declare const SESSION_RECORDER_SEGMENTS_MAP = "rumSessionRecorderSegmentsMap";
 export declare const VIEW_NUMBER_KEY = "rum_view_number";
+export declare const CURRENT_PAGE_FRAGMENT_KEY = "rum_current_page_fragment";

package/src/session/sessionManager.d.ts

@@ -32,6 +32,9 @@ export declare class SessionManager extends SessionIdle {
     private persistViewNumber;
     private loadViewNumber;
     private resetViewNumber;
+    private persistCurrentPageFragment;
+    private loadCurrentPageFragment;
+    private resetCurrentPageFragment;
     getSessionKey(): string;
     getActiveSession(): Session;
     start(): void;

package/src/version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "3.22.0";
+export declare const SDK_VERSION = "3.22.1";