fix(browser): Skip CLS on browsers without Array.prototype.at

.github/workflows/build.yml

@@ -745,6 +745,39 @@ jobs:
           overwrite: true
           retention-days: 7
 
+  # Runs the CDN bundles in the oldest Chromium we support. Chromium snapshots only exist for x64.
+  job_browser_min_version_tests:
+    name: Minimum Chromium Version Tests
+    needs: [job_get_metadata, job_build, job_build_bundles]
+    if: needs.job_build.outputs.changed_browser_integration == 'true' || github.event_name != 'pull_request'
+    runs-on: ubuntu-24.04
+    timeout-minutes: 5
+    steps:
+      - name: Check out current commit (${{ needs.job_get_metadata.outputs.commit_label }})
+        uses: actions/checkout@v7
+        with:
+          ref: ${{ env.HEAD_COMMIT }}
+      - name: Set up Node
+        uses: ./.github/actions/setup-node
+      - name: Restore caches
+        uses: ./.github/actions/restore-cache
+        with:
+          dependency_cache_key: ${{ needs.job_build.outputs.dependency_cache_key }}
+
+      - name: Restore build bundle artifacts
+        uses: actions/download-artifact@v8
+        with:
+          name: build-bundle-output
+          path: ${{ env.BUNDLE_ARTIFACT_DOWNLOAD_PATH }}
+
+      # Chromium itself isn't cached: `run.mjs` downloads the 127 MB zip on each run, which is about as quick as a
+      # cache restore.
+      - name: Install Chromium dependencies
+        run: dev-packages/browser-min-version-tests/install-deps.sh
+
+      - name: Run tests
+        run: node dev-packages/browser-min-version-tests/run.mjs
+
   job_node_integration_tests:
     name: Node (${{ matrix.node }}) Integration Tests (${{ matrix.shard }}/${{ matrix.shards }})
     needs: [job_get_metadata, job_build]
@@ -1207,6 +1240,7 @@ jobs:
         job_deno_integration_tests,
         job_browser_playwright_tests,
         job_browser_loader_tests,
+        job_browser_min_version_tests,
         job_e2e_tests_1,
         job_e2e_tests_2,
         job_e2e_aws_layer_tests,

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-cls-without-array-at/subject.js

@@ -0,0 +1,3 @@
+import { simulateCLS } from '../../../../utils/web-vitals/cls.ts';
+
+simulateCLS(0.15).then(() => window.dispatchEvent(new Event('cls-done')));

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-cls-without-array-at/template.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div id="content"></div>
+    <p>Some content</p>
+  </body>
+</html>

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-cls-without-array-at/test.ts

@@ -0,0 +1,34 @@
+import { expect } from '@playwright/test';
+import { sentryTest } from '../../../../utils/fixtures';
+import { hidePage, shouldSkipTracingTest } from '../../../../utils/helpers';
+import { getSpanOp, waitForStreamedSpan } from '../../../../utils/spanUtils';
+
+sentryTest.beforeEach(async ({ browserName, page }) => {
+  if (shouldSkipTracingTest() || browserName !== 'chromium') {
+    sentryTest.skip();
+  }
+
+  await page.setViewportSize({ width: 800, height: 1200 });
+});
+
+// Chromium 80-91 is within our supported range and reports layout shifts, but has no `Array.prototype.at`,
+// which web-vitals' CLS code relies on.
+sentryTest('does not throw on layout shifts without Array.prototype.at', async ({ getLocalTestUrl, page }) => {
+  const pageErrors: string[] = [];
+  page.on('pageerror', error => pageErrors.push(error.message));
+
+  await page.addInitScript(() => {
+    // @ts-expect-error - emulating Chromium < 92
+    delete Array.prototype.at;
+  });
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+  const pageloadSpanPromise = waitForStreamedSpan(page, span => getSpanOp(span) === 'pageload');
+
+  await page.goto(url);
+  await page.evaluate(() => new Promise(resolve => window.addEventListener('cls-done', resolve)));
+  await hidePage(page);
+  await pageloadSpanPromise;
+
+  expect(pageErrors).toEqual([]);
+});

dev-packages/browser-min-version-tests/.gitignore

@@ -0,0 +1 @@
+.chromium/

dev-packages/browser-min-version-tests/install-deps.sh

@@ -0,0 +1,9 @@
+#!/bin/sh
+# Old Chromium links against libXss, which current runner images don't ship. Installing from the image's
+# package lists is fast; only refresh them when they are too stale to resolve the package.
+set -eu
+
+if ! sudo apt-get install -y --no-install-recommends libxss1; then
+  sudo apt-get update
+  sudo apt-get install -y --no-install-recommends libxss1
+fi

dev-packages/browser-min-version-tests/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@sentry-internal/browser-min-version-tests",
+  "version": "11.12.0",
+  "license": "MIT",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": ">=20.19.0 <22.0.0 || >=22.12.0 <23.0.0 || >=23.2.0"
+  },
+  "devDependencies": {
+    "@sentry-internal/test-utils": "11.12.0"
+  }
+}

dev-packages/browser-min-version-tests/page.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <script src="/bundle.js"></script>
+    <script>
+      Sentry.init({
+        dsn: '__DSN__',
+        integrations: [Sentry.browserTracingIntegration()],
+        tracesSampleRate: 1,
+        debug: true,
+      });
+    </script>
+  </head>
+  <body>
+    <h1 style="font-size: 64px">Largest contentful paint</h1>
+    <p id="shift" style="position: absolute; top: 200px; width: 800px; height: 100px; background: #aaa">Shifting</p>
+    <button id="button" style="position: absolute; top: 800px">Click me</button>
+    <script>
+      document.getElementById('button').addEventListener('click', event => {
+        const start = Date.now();
+        while (Date.now() - start < 100) {
+          // Block long enough for the click to count as an interaction.
+        }
+        event.target.dataset.clicked = 'true';
+      });
+    </script>
+  </body>
+</html>