fix(browser/v7): Continuously record CLS (#11935)

getsentry · May 7, 2024 · 280a49e · 280a49e
1 parent a09daa4
commit 280a49e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 11 deletions.
diff --git a/packages/opentelemetry-node/test/spanprocessor.test.ts b/packages/opentelemetry-node/test/spanprocessor.test.ts
@@ -629,7 +629,7 @@ describe('SentrySpanProcessor', () => {
 
           expect(description).toBe('GET /my/route/{id}');
           expect(data).toEqual({
-            'http.method': 'GET',
+            'http.request.method': 'GET',
             'http.route': '/my/route/{id}',
             'http.target': '/my/route/123',
             'http.url': 'http://example.com/my/route/123',
@@ -661,7 +661,7 @@ describe('SentrySpanProcessor', () => {
 
           expect(description).toBe('GET http://example.com/my/route/123');
           expect(data).toEqual({
-            'http.method': 'GET',
+            'http.request.method': 'GET',
             'http.target': '/my/route/123',
             'http.url': 'http://example.com/my/route/123',
             'otel.kind': 'INTERNAL',
@@ -693,7 +693,7 @@ describe('SentrySpanProcessor', () => {
 
           expect(description).toBe('GET http://example.com/my/route/123');
           expect(data).toEqual({
-            'http.method': 'GET',
+            'http.request.method': 'GET',
             'http.target': '/my/route/123',
             'http.url': 'http://example.com/my/route/123?what=123#myHash',
             'otel.kind': 'INTERNAL',

diff --git a/packages/tracing-internal/src/browser/instrument.ts b/packages/tracing-internal/src/browser/instrument.ts
@@ -208,12 +208,15 @@ function triggerHandlers(type: InstrumentHandlerType, data: unknown): void {
 }
 
 function instrumentCls(): StopListening {
-  return onCLS(metric => {
-    triggerHandlers('cls', {
-      metric,
-    });
-    _previousCls = metric;
-  });
+  return onCLS(
+    metric => {
+      triggerHandlers('cls', {
+        metric,
+      });
+      _previousCls = metric;
+    },
+    { reportAllChanges: true },
+  );
 }
 
 function instrumentFid(): void {

diff --git a/packages/tracing-internal/src/browser/web-vitals/getCLS.ts b/packages/tracing-internal/src/browser/web-vitals/getCLS.ts
@@ -41,7 +41,10 @@ import type { CLSMetric, ReportCallback, StopListening } from './types';
  * hidden. As a result, the `callback` function might be called multiple times
  * during the same page load._
  */
-export const onCLS = (onReport: ReportCallback): StopListening | undefined => {
+export const onCLS = (
+  onReport: ReportCallback,
+  options: { reportAllChanges?: boolean } = {},
+): StopListening | undefined => {
   const metric = initMetric('CLS', 0);
   let report: ReturnType<typeof bindReporter>;
 
@@ -87,7 +90,7 @@ export const onCLS = (onReport: ReportCallback): StopListening | undefined => {
 
   const po = observe('layout-shift', handleEntries);
   if (po) {
-    report = bindReporter(onReport, metric);
+    report = bindReporter(onReport, metric, options.reportAllChanges);
 
     const stopListening = (): void => {
       handleEntries(po.takeRecords() as CLSMetric['entries']);