DOM event plugin add data-rum-id attribute

aws-observability · May 23, 2022 · 9b01f97 · 9b01f97
1 parent 6cec9da
commit 9b01f97
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 11 deletions.
diff --git a/app/dom_event.html b/app/dom_event.html
@@ -47,7 +47,8 @@
 
             function registerDomEvents() {
                 cwr('registerDomEvents', [
-                    { event: 'click', cssLocator: '[label="label2"]' }
+                    { event: 'click', cssLocator: '[label="label2"]' },
+                    { event: 'click', cssLocator: '[label^="button-"]' }
                 ]);
             }
         </script>
@@ -90,6 +91,14 @@
         </button>
         <button id="button5" label="label2">Button Five</button>
         <hr />
+        <button id="button6" data-rum-id="button-six" label="button-label1">
+            Button Six
+        </button>
+        <button id="button7" data-rum-id="button-seven" label="button-label2">
+            <span>Button Seven</span>
+        </button>
+        <button>Button Eight</button>
+        <hr />
         <button id="dispatch" onclick="dispatch()">Dispatch</button>
         <button id="clearRequestResponse" onclick="clearRequestResponse()">
             Clear

diff --git a/app/dom_event_mutation_observer_enabled.html b/app/dom_event_mutation_observer_enabled.html
@@ -47,7 +47,8 @@
 
             function registerDomEvents() {
                 cwr('registerDomEvents', [
-                    { event: 'click', cssLocator: '[label="label2"]' }
+                    { event: 'click', cssLocator: '[label="label2"]' },
+                    { event: 'click', cssLocator: '[label^="button-"]' }
                 ]);
             }
         </script>
@@ -90,6 +91,14 @@
         </button>
         <button id="button5" label="label2">Button Five</button>
         <hr />
+        <button id="button6" data-rum-id="button-six" label="button-label1">
+            Button Six
+        </button>
+        <button id="button7" data-rum-id="button-seven" label="button-label2">
+            <span>Button Seven</span>
+        </button>
+        <button>Button Eight</button>
+        <hr />
         <button id="dispatch" onclick="dispatch()">Dispatch</button>
         <button id="clearRequestResponse" onclick="clearRequestResponse()">
             Clear

diff --git a/src/event-schemas/dom-event.json b/src/event-schemas/dom-event.json
@@ -13,15 +13,23 @@
             "type": "string",
             "description": "DOM event type (e.g., click, scroll, hover, etc.)"
         },
+        "element": {
+            "type": "string",
+            "description": "DOM element type."
+        },
         "elementId": {
             "type": "string",
             "description": "DOM element ID."
         },
         "cssLocator": {
             "type": "string",
             "description": "CSS Locator string."
+        },
+        "rumId": {
+            "type": "string",
+            "description": "DOM element data-rum-id attribute."
         }
     },
     "additionalProperties": false,
-    "required": ["version", "event", "elementId"]
+    "required": ["version", "event", "element"]
 }
diff --git a/src/plugins/event-plugins/DomEventPlugin.ts b/src/plugins/event-plugins/DomEventPlugin.ts
@@ -122,21 +122,37 @@ export class DomEventPlugin implements Plugin {
 
     private getEventListener(cssLocator?: string): EventListener {
         return (event: Event): void => {
+            const elementId = this.getElementId(event);
+            const rumId = this.getRumId(event);
+
             const eventData: DomEvent = {
                 version: '1.0.0',
                 event: event.type,
-                elementId: this.getElementId(event)
+                element: this.getElement(event),
+                ...(elementId ? { elementId } : {}),
+                ...(rumId ? { rumId } : {}),
+                ...(cssLocator ? { cssLocator } : {})
             };
-            if (cssLocator !== undefined) {
-                eventData.cssLocator = cssLocator;
-            }
+
             if (this.recordEvent) {
                 this.recordEvent(DOM_EVENT_TYPE, eventData);
             }
         };
     }
 
-    private getElementId(event: Event) {
+    private getElement(event: Event): string {
+        if (!event.target) {
+            return '';
+        }
+
+        if (event.target instanceof Node) {
+            return event.target.nodeName;
+        }
+
+        return '';
+    }
+
+    private getElementId(event: Event): string {
         if (!event.target) {
             return '';
         }
@@ -145,10 +161,21 @@ export class DomEventPlugin implements Plugin {
             return event.target.id;
         }
 
-        if (event.target instanceof Node) {
-            return event.target.nodeName;
-        }
+        return '';
+    }
+
+    private getRumId(event: Event): string {
+        if (event.composedPath) {
+            const eventPath = event.composedPath();
+            const firstMatchingElement = eventPath.find(
+                (element: Element) =>
+                    element.hasAttribute && element.hasAttribute('data-rum-id')
+            ) as Element;
 
+            if (firstMatchingElement) {
+                return firstMatchingElement.getAttribute('data-rum-id');
+            }
+        }
         return '';
     }