feat(browser): Send CLS as standalone span (experimental) (#13056)

Add an experimental feature to `browserTracingIntegration` to no longer tie CLS reporting to the ongoing pageload span but instead send a standalone CLS span similarly to how we report INP. The big advantage of this reporting strategy is that layout shifts happening after the pageload idle span ended, will also get reported. This should give users more accurate CLS values in the web vitals performance insights module.
getsentry · Aug 13, 2024 · 5af8eb8 · 5af8eb8
1 parent 4311644
commit 5af8eb8
Show file tree

Hide file tree

Showing 11 changed files with 760 additions and 74 deletions.
diff --git a/.size-limit.js b/.size-limit.js
@@ -55,7 +55,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration', 'feedbackIntegration'),
     gzip: true,
-    limit: '90 KB',
+    limit: '91 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Replay, Feedback, metrics)',
@@ -143,7 +143,7 @@ module.exports = [
     name: 'CDN Bundle (incl. Tracing)',
     path: createCDNPath('bundle.tracing.min.js'),
     gzip: true,
-    limit: '37 KB',
+    limit: '38 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay)',
@@ -170,7 +170,7 @@ module.exports = [
     path: createCDNPath('bundle.tracing.min.js'),
     gzip: false,
     brotli: false,
-    limit: '110 KB',
+    limit: '111 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay) - uncompressed',
@@ -193,7 +193,7 @@ module.exports = [
     import: createImport('init'),
     ignore: ['next/router', 'next/constants'],
     gzip: true,
-    limit: '38.05 KB',
+    limit: '39 KB',
   },
   // SvelteKit SDK (ESM)
   {

diff --git a/.../browser-integration-tests/suites/tracing/metrics/web-vitals-cls-standalone-spans/init.js b/.../browser-integration-tests/suites/tracing/metrics/web-vitals-cls-standalone-spans/init.js
@@ -0,0 +1,17 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [
+    Sentry.browserTracingIntegration({
+      idleTimeout: 9000,
+      _experiments: {
+        enableStandaloneClsSpans: true,
+      },
+    }),
+  ],
+  tracesSampleRate: 1,
+  debug: true,
+});
diff --git a/...owser-integration-tests/suites/tracing/metrics/web-vitals-cls-standalone-spans/subject.js b/...owser-integration-tests/suites/tracing/metrics/web-vitals-cls-standalone-spans/subject.js
@@ -0,0 +1,17 @@
+import { simulateCLS } from '../../../../utils/web-vitals/cls.ts';
+
+// Simulate Layout shift right at the beginning of the page load, depending on the URL hash
+// don't run if expected CLS is NaN
+const expectedCLS = Number(location.hash.slice(1));
+if (expectedCLS && expectedCLS >= 0) {
+  simulateCLS(expectedCLS).then(() => window.dispatchEvent(new Event('cls-done')));
+}
+
+// Simulate layout shift whenever the trigger-cls event is dispatched
+// Cannot trigger cia a button click because expected layout shift after
+// an interaction doesn't contribute to CLS.
+window.addEventListener('trigger-cls', () => {
+  simulateCLS(0.1).then(() => {
+    window.dispatchEvent(new Event('cls-done'));
+  });
+});
diff --git a/...er-integration-tests/suites/tracing/metrics/web-vitals-cls-standalone-spans/template.html b/...er-integration-tests/suites/tracing/metrics/web-vitals-cls-standalone-spans/template.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div id="content"></div>
+    <p>
+      Some content
+    </p>
+  </body>
+</html>