@@ -16,8 +16,10 @@ import {
16
16
} from '@sentry/core' ;
17
17
import { DEBUG_BUILD } from '../debug-build' ;
18
18
import { addClsInstrumentationHandler } from './instrument' ;
19
+ import type { WebVitalReportEvent } from './utils' ;
19
20
import { msToSec , startStandaloneWebVitalSpan } from './utils' ;
20
21
import { onHidden } from './web-vitals/lib/onHidden' ;
22
+ import { runOnce } from './web-vitals/lib/runOnce' ;
21
23
22
24
/**
23
25
* Starts tracking the Cumulative Layout Shift on the current page and collects the value once
@@ -37,16 +39,13 @@ export function trackClsAsStandaloneSpan(): void {
37
39
return ;
38
40
}
39
41
40
- let sentSpan = false ;
41
- function _collectClsOnce ( ) {
42
- if ( sentSpan ) {
43
- return ;
44
- }
45
- sentSpan = true ;
46
- if ( pageloadSpanId ) {
47
- sendStandaloneClsSpan ( standaloneCLsValue , standaloneClsEntry , pageloadSpanId ) ;
48
- }
49
- cleanupClsHandler ( ) ;
42
+ function _collectClsOnce ( reportEvent : WebVitalReportEvent ) {
43
+ runOnce ( ( ) => {
44
+ if ( pageloadSpanId ) {
45
+ sendStandaloneClsSpan ( standaloneCLsValue , standaloneClsEntry , pageloadSpanId , reportEvent ) ;
46
+ }
47
+ cleanupClsHandler ( ) ;
48
+ } ) ;
50
49
}
51
50
52
51
const cleanupClsHandler = addClsInstrumentationHandler ( ( { metric } ) => {
@@ -59,7 +58,7 @@ export function trackClsAsStandaloneSpan(): void {
59
58
} , true ) ;
60
59
61
60
onHidden ( ( ) => {
62
- _collectClsOnce ( ) ;
61
+ _collectClsOnce ( 'pagehide' ) ;
63
62
} ) ;
64
63
65
64
// Since the call chain of this function is synchronous and evaluates before the SDK client is created,
@@ -73,7 +72,7 @@ export function trackClsAsStandaloneSpan(): void {
73
72
}
74
73
75
74
const unsubscribeStartNavigation = client . on ( 'beforeStartNavigationSpan' , ( ) => {
76
- _collectClsOnce ( ) ;
75
+ _collectClsOnce ( 'navigation' ) ;
77
76
unsubscribeStartNavigation ?.( ) ;
78
77
} ) ;
79
78
@@ -88,7 +87,12 @@ export function trackClsAsStandaloneSpan(): void {
88
87
} , 0 ) ;
89
88
}
90
89
91
- function sendStandaloneClsSpan ( clsValue : number , entry : LayoutShift | undefined , pageloadSpanId : string ) {
90
+ function sendStandaloneClsSpan (
91
+ clsValue : number ,
92
+ entry : LayoutShift | undefined ,
93
+ pageloadSpanId : string ,
94
+ reportEvent : WebVitalReportEvent ,
95
+ ) {
92
96
DEBUG_BUILD && logger . log ( `Sending CLS span (${ clsValue } )` ) ;
93
97
94
98
const startTime = msToSec ( ( browserPerformanceTimeOrigin ( ) || 0 ) + ( entry ?. startTime || 0 ) ) ;
@@ -102,6 +106,8 @@ function sendStandaloneClsSpan(clsValue: number, entry: LayoutShift | undefined,
102
106
[ SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME ] : entry ?. duration || 0 ,
103
107
// attach the pageload span id to the CLS span so that we can link them in the UI
104
108
'sentry.pageload.span_id' : pageloadSpanId ,
109
+ // describes what triggered the web vital to be reported
110
+ 'sentry.report_event' : reportEvent ,
105
111
} ;
106
112
107
113
// Add CLS sources as span attributes to help with debugging layout shifts
0 commit comments