Unify browser dimension checks

Should address issues where NaN values are included in generated values for document/viewport/screen size dimensions, which cause events to be invalid when they fail to match the regex pattern that validates these fields.

Issue: AISP-527

Author: jethron

common/changes/@snowplow/browser-tracker-core/fix-AISP-527-viewportdims_2025-08-15-01-05.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@snowplow/browser-tracker-core",
+      "comment": "Unify browser dimension checks to avoid including NaN values",
+      "type": "none"
+    }
+  ],
+  "packageName": "@snowplow/browser-tracker-core"
+}

libraries/browser-tracker-core/src/helpers/browser_props.ts

@@ -46,9 +46,6 @@ function initializeResizeObserver() {
 
 let cachedProperties: BrowserProperties;
 
-/* Separator used for dimension values e.g. widthxheight */
-const DIMENSION_SEPARATOR = 'x';
-
 /**
  * Gets various browser properties (that are expensive to read!)
  * - Will use a "ResizeObserver" approach in modern browsers to update cached properties only on change
@@ -75,9 +72,9 @@ export function getBrowserProperties() {
  */
 function readBrowserProperties(): BrowserProperties {
   return {
-    viewport: floorDimensionFields(detectViewport()),
-    documentSize: floorDimensionFields(detectDocumentSize()),
-    resolution: floorDimensionFields(detectScreenResolution()),
+    viewport: detectViewport(),
+    documentSize: detectDocumentSize(),
+    resolution: detectScreenResolution(),
     colorDepth: screen.colorDepth,
     devicePixelRatio: window.devicePixelRatio,
     cookiesEnabled: window.navigator.cookieEnabled,
@@ -109,7 +106,7 @@ function detectViewport() {
     height = e['clientHeight'];
   }
 
-  return Math.max(0, width) + DIMENSION_SEPARATOR + Math.max(0, height);
+  return makeDimension(Math.max(0, width), Math.max(0, height));
 }
 
 /**
@@ -124,21 +121,21 @@ function detectDocumentSize() {
     be = document.body,
     // document.body may not have rendered, so check whether be.offsetHeight is null
     bodyHeight = be ? Math.max(be.offsetHeight, be.scrollHeight) : 0;
-  var w = Math.max(de.clientWidth, de.offsetWidth, de.scrollWidth);
-  var h = Math.max(de.clientHeight, de.offsetHeight, de.scrollHeight, bodyHeight);
-  return isNaN(w) || isNaN(h) ? '' : w + DIMENSION_SEPARATOR + h;
+
+  return makeDimension(
+    Math.max(de.clientWidth, de.offsetWidth, de.scrollWidth),
+    Math.max(de.clientHeight, de.offsetHeight, de.scrollHeight, bodyHeight)
+  );
 }
 
 function detectScreenResolution() {
-  return screen.width + DIMENSION_SEPARATOR + screen.height;
+  return makeDimension(screen.width, screen.height);
 }
 
-export function floorDimensionFields(field?: string | null) {
-  return (
-    field &&
-    field
-      .split(DIMENSION_SEPARATOR)
-      .map((dimension) => Math.floor(Number(dimension)))
-      .join(DIMENSION_SEPARATOR)
-  );
+export function makeDimension(width: number, height: number): string | null {
+  if (isNaN(width) || isNaN(height)) {
+    return null;
+  }
+
+  return Math.floor(width) + 'x' + Math.floor(height);
 }

libraries/browser-tracker-core/test/browser_props.test.ts

@@ -1,14 +1,17 @@
-import { floorDimensionFields, getBrowserProperties } from '../src/helpers/browser_props';
+import { makeDimension, getBrowserProperties } from '../src/helpers/browser_props';
 
 describe('Browser props', () => {
-  it('floorDimensionFields correctly floors dimension type values', () => {
+  it('makeDimension correctly floors dimension type values', () => {
     const testDimensions = '100x100';
-    expect(floorDimensionFields(testDimensions)).toEqual(testDimensions);
+    expect(makeDimension(100, 100)).toEqual(testDimensions);
   });
 
-  it('floorDimensionFields correctly floors dimension type values with fractional numbers', () => {
-    const testFractionalDimensions = '100.2x100.1';
-    expect(floorDimensionFields(testFractionalDimensions)).toEqual('100x100');
+  it('makeDimension correctly floors dimension type values with fractional numbers', () => {
+    expect(makeDimension(100.2, 100.1)).toEqual('100x100');
+  });
+
+  it('makeDimension correctly drops invalid values', () => {
+    expect(makeDimension(undefined as any, 100.1)).toEqual(null);
   });
 
   describe('#getBrowserProperties', () => {
@@ -17,7 +20,7 @@ describe('Browser props', () => {
         // @ts-expect-error
         document = undefined;
       });
-  
+
       it('does not invoke the resize observer if the document is null', () => {
         const browserProperties = getBrowserProperties();
         expect(browserProperties).not.toEqual(null);