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

getsentry · Jul 25, 2024 · 9b4de9f · 9b4de9f
1 parent 81e20c3
commit 9b4de9f
Show file tree

Hide file tree

Showing 11 changed files with 673 additions and 75 deletions.
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,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div id="content"></div>
+  </body>
+</html>