Skip to content

Commit 5af8eb8

Browse files
Lms24Lms24
authored
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.
1 parent 4311644 commit 5af8eb8

File tree

11 files changed

+760
-74
lines changed

11 files changed

+760
-74
lines changed

‎.size-limit.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ module.exports = [
5555
path: 'packages/browser/build/npm/esm/index.js',
5656
import: createImport('init', 'browserTracingIntegration', 'replayIntegration', 'feedbackIntegration'),
5757
gzip: true,
58-
limit: '90 KB',
58+
limit: '91 KB',
5959
},
6060
{
6161
name: '@sentry/browser (incl. Tracing, Replay, Feedback, metrics)',
@@ -143,7 +143,7 @@ module.exports = [
143143
name: 'CDN Bundle (incl. Tracing)',
144144
path: createCDNPath('bundle.tracing.min.js'),
145145
gzip: true,
146-
limit: '37 KB',
146+
limit: '38 KB',
147147
},
148148
{
149149
name: 'CDN Bundle (incl. Tracing, Replay)',
@@ -170,7 +170,7 @@ module.exports = [
170170
path: createCDNPath('bundle.tracing.min.js'),
171171
gzip: false,
172172
brotli: false,
173-
limit: '110 KB',
173+
limit: '111 KB',
174174
},
175175
{
176176
name: 'CDN Bundle (incl. Tracing, Replay) - uncompressed',
@@ -193,7 +193,7 @@ module.exports = [
193193
import: createImport('init'),
194194
ignore: ['next/router', 'next/constants'],
195195
gzip: true,
196-
limit: '38.05 KB',
196+
limit: '39 KB',
197197
},
198198
// SvelteKit SDK (ESM)
199199
{

‎dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-cls-standalone-spans/init.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import * as Sentry from '@sentry/browser';
2+
3+
window.Sentry = Sentry;
4+
5+
Sentry.init({
6+
dsn: 'https://public@dsn.ingest.sentry.io/1337',
7+
integrations: [
8+
Sentry.browserTracingIntegration({
9+
idleTimeout: 9000,
10+
_experiments: {
11+
enableStandaloneClsSpans: true,
12+
},
13+
}),
14+
],
15+
tracesSampleRate: 1,
16+
debug: true,
17+
});

‎dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-cls-standalone-spans/subject.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { simulateCLS } from '../../../../utils/web-vitals/cls.ts';
2+
3+
// Simulate Layout shift right at the beginning of the page load, depending on the URL hash
4+
// don't run if expected CLS is NaN
5+
const expectedCLS = Number(location.hash.slice(1));
6+
if (expectedCLS && expectedCLS >= 0) {
7+
simulateCLS(expectedCLS).then(() => window.dispatchEvent(new Event('cls-done')));
8+
}
9+
10+
// Simulate layout shift whenever the trigger-cls event is dispatched
11+
// Cannot trigger cia a button click because expected layout shift after
12+
// an interaction doesn't contribute to CLS.
13+
window.addEventListener('trigger-cls', () => {
14+
simulateCLS(0.1).then(() => {
15+
window.dispatchEvent(new Event('cls-done'));
16+
});
17+
});

‎dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-cls-standalone-spans/template.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
</head>
6+
<body>
7+
<div id="content"></div>
8+
<p>
9+
Some content
10+
</p>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)