Add previous and current rect attribution data for CLS (#242)

DataDog · Jan 6, 2025 · a9b4bc0 · a9b4bc0
1 parent adcc82d
commit a9b4bc0
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 1 deletion.
diff --git a/lib/cjs/generated/rum.d.ts b/lib/cjs/generated/rum.d.ts
@@ -1511,6 +1511,14 @@ export interface ViewPerformanceData {
          * CSS selector path of the first element (in document order) of the largest layout shift contributing to CLS
          */
         readonly target_selector?: string;
+        /**
+         * Bounding client rect of the element before the layout shift
+         */
+        previous_rect?: RumRect;
+        /**
+         * Bounding client rect of the element after the layout shift
+         */
+        current_rect?: RumRect;
         [k: string]: unknown;
     };
     /**
@@ -1575,3 +1583,25 @@ export interface ViewPerformanceData {
     };
     [k: string]: unknown;
 }
+/**
+ * Schema for DOMRect-like rectangles describing an element's bounding client rect
+ */
+export interface RumRect {
+    /**
+     * The x coordinate of the element's origin
+     */
+    readonly x: number;
+    /**
+     * The y coordinate of the element's origin
+     */
+    readonly y: number;
+    /**
+     * The element's width
+     */
+    readonly width: number;
+    /**
+     * The element's height
+     */
+    readonly height: number;
+    [k: string]: unknown;
+}
diff --git a/lib/esm/generated/rum.d.ts b/lib/esm/generated/rum.d.ts
@@ -1511,6 +1511,14 @@ export interface ViewPerformanceData {
          * CSS selector path of the first element (in document order) of the largest layout shift contributing to CLS
          */
         readonly target_selector?: string;
+        /**
+         * Bounding client rect of the element before the layout shift
+         */
+        previous_rect?: RumRect;
+        /**
+         * Bounding client rect of the element after the layout shift
+         */
+        current_rect?: RumRect;
         [k: string]: unknown;
     };
     /**
@@ -1575,3 +1583,25 @@ export interface ViewPerformanceData {
     };
     [k: string]: unknown;
 }
+/**
+ * Schema for DOMRect-like rectangles describing an element's bounding client rect
+ */
+export interface RumRect {
+    /**
+     * The x coordinate of the element's origin
+     */
+    readonly x: number;
+    /**
+     * The y coordinate of the element's origin
+     */
+    readonly y: number;
+    /**
+     * The element's width
+     */
+    readonly width: number;
+    /**
+     * The element's height
+     */
+    readonly height: number;
+    [k: string]: unknown;
+}
diff --git a/samples/rum-events/view.json b/samples/rum-events/view.json
@@ -104,7 +104,19 @@
     "cls": {
       "score": 0.1,
       "timestamp": 2000,
-      "target_selector": "#foo"
+      "target_selector": "#foo",
+      "previous_rect": {
+        "x": 0,
+        "y": 0,
+        "width": 0,
+        "height": 0
+      },
+      "current_rect": {
+        "x": 0,
+        "y": 0,
+        "width": 0,
+        "height": 0
+      }
     },
     "fcp": {
       "timestamp": 420725000

diff --git a/schemas/rum/_rect-schema.json b/schemas/rum/_rect-schema.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "rum/_rect-schema.json",
+  "title": "RumRect",
+  "type": "object",
+  "description": "Schema for DOMRect-like rectangles describing an element's bounding client rect",
+  "required": ["x", "y", "width", "height"],
+  "properties": {
+    "x": {
+      "type": "number",
+      "description": "The x coordinate of the element's origin",
+      "readOnly": true
+    },
+    "y": {
+      "type": "number",
+      "description": "The y coordinate of the element's origin",
+      "readOnly": true
+    },
+    "width": {
+      "type": "number",
+      "description": "The element's width",
+      "readOnly": true
+    },
+    "height": {
+      "type": "number",
+      "description": "The element's height",
+      "readOnly": true
+    }
+  }
+}
diff --git a/schemas/rum/_view-performance-schema.json b/schemas/rum/_view-performance-schema.json
@@ -29,6 +29,14 @@
           "description": "CSS selector path of the first element (in document order) of the largest layout shift contributing to CLS",
           "$comment": "Replaces the deprecated `view.cumulative_layout_shift_target_selector`",
           "readOnly": true
+        },
+        "previous_rect": {
+          "description": "Bounding client rect of the element before the layout shift",
+          "allOf": [{ "$ref": "_rect-schema.json" }]
+        },
+        "current_rect": {
+          "description": "Bounding client rect of the element after the layout shift",
+          "allOf": [{ "$ref": "_rect-schema.json" }]
         }
       },
       "readOnly": true