DOM event plugin add data-rum-id attribute

aws-observability · May 20, 2022 · f45180a · f45180a
1 parent 6cec9da
commit f45180a
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 2 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,13 @@
         </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>
+        <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,13 @@
         </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>
+        <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
@@ -20,6 +20,10 @@
         "cssLocator": {
             "type": "string",
             "description": "CSS Locator string."
+        },
+        "elementRumId": {
+            "type": "string",
+            "description": "DOM element data-rum-id attribute."
         }
     },
     "additionalProperties": false,

diff --git a/src/plugins/event-plugins/DomEventPlugin.ts b/src/plugins/event-plugins/DomEventPlugin.ts
@@ -129,13 +129,30 @@ export class DomEventPlugin implements Plugin {
             };
             if (cssLocator !== undefined) {
                 eventData.cssLocator = cssLocator;
+                const elementRumId = this.getElementRumId(event, cssLocator);
+                if (elementRumId) {
+                    eventData.elementRumId = elementRumId;
+                }
             }
             if (this.recordEvent) {
                 this.recordEvent(DOM_EVENT_TYPE, eventData);
             }
         };
     }
 
+    private getElementRumId(event: Event, cssLocator: string): string {
+        if (event.composedPath) {
+            const eventPath = event.composedPath();
+            const firstMatchingElement = eventPath.find((element: Element) =>
+                element.matches(cssLocator)
+            ) as Element;
+            if (firstMatchingElement.hasAttribute('data-rum-id')) {
+                return firstMatchingElement.getAttribute('data-rum-id');
+            }
+        }
+        return '';
+    }
+
     private getElementId(event: Event) {
         if (!event.target) {
             return '';