aws-rum-web - npm Package Compare versions

Comparing version 1.2.1 to 1.4.0

CHANGELOG.md

@@ -5,2 +5,24 @@ # Changelog
 
+## [1.4.0](https://github.com/aws-observability/aws-rum-web/compare/v1.2.1...v1.4.0) (2022-03-30)
+
+
+### Features
+
+* Page tagging ([#114](https://github.com/aws-observability/aws-rum-web/issues/114)) ([cb9cb13](https://github.com/aws-observability/aws-rum-web/commit/cb9cb1396a22b440ee7b62a0a02c30db54ff453f))
+
+
+### Bug Fixes
+
+* Add version property to http-event-schema ([#122](https://github.com/aws-observability/aws-rum-web/issues/122)) ([cf59ecb](https://github.com/aws-observability/aws-rum-web/commit/cf59ecb3e18e74e86eb5eccbcedcae8d20c1d83f))
+* Make dynamic DOM event handlers configurable ([#129](https://github.com/aws-observability/aws-rum-web/issues/129)) ([49eecfc](https://github.com/aws-observability/aws-rum-web/commit/49eecfc40879913260c6d91781c392fbe5921dcc))
+* Parse unhandledrejection error objects ([#123](https://github.com/aws-observability/aws-rum-web/issues/123)) ([f69c859](https://github.com/aws-observability/aws-rum-web/commit/f69c85919b8cc7f0f33418dc20455df4e4f42f9b))
+
+## [1.3.0](https://github.com/aws-observability/aws-rum-web/compare/v1.2.1...v1.3.0) (2022-03-08)
+
+
+### Features
+
+* Add registerDomEvents command ([#111](https://github.com/aws-observability/aws-rum-web/issues/111)) ([2a67daa](https://github.com/aws-observability/aws-rum-web/commit/2a67daafd889a6eda6186c38d3d930eba816d13c))
+* Dynamically update DOM event listeners ([#112](https://github.com/aws-observability/aws-rum-web/issues/112)) ([d4bfbb5](https://github.com/aws-observability/aws-rum-web/commit/d4bfbb5733e749bad5e6a2590f3d3fb2f43032c5))
+
 ### 1.2.1 (2022-02-25)
@@ -7,0 +29,0 @@

dist/cjs/CommandQueue.js

@@ -63,2 +63,5 @@ "use strict";
             },
+            registerDomEvents: function (payload) {
+                _this.orchestration.registerDomEvents(payload);
+            },
             dispatch: function () {
@@ -65,0 +68,0 @@ _this.orchestration.dispatch();

dist/cjs/event-cache/EventCache.d.ts

 import { Session } from '../sessions/SessionManager';
 import { Config } from '../orchestration/Orchestration';
+import { PageAttributes } from '../sessions/PageManager';
 import { AppMonitorDetails, UserDetails, RumEvent } from '../dispatch/dataplane';
@@ -38,3 +39,3 @@ /**
      */
-    recordPageView: (pageId: string) => void;
+    recordPageView: (payload: string | PageAttributes) => void;
     /**
@@ -41,0 +42,0 @@ * Add an event to the cache and reset the session timer.

dist/cjs/event-cache/EventCache.js

@@ -39,5 +39,5 @@ "use strict";
          */
-        this.recordPageView = function (pageId) {
+        this.recordPageView = function (payload) {
             if (_this.isCurrentUrlAllowed()) {
-                _this.pageManager.recordPageView(pageId);
+                _this.pageManager.recordPageView(payload);
             }
@@ -44,0 +44,0 @@ };

dist/cjs/events/http-event.d.ts

@@ -21,2 +21,6 @@ /**
         /**
+         * JSErrorEvent schema version.
+         */
+        version?: string;
+        /**
          * Error type (eg., TypeError, ParseError, etc).
@@ -23,0 +27,0 @@ */

dist/cjs/events/meta-data.d.ts

@@ -29,2 +29,3 @@ /**
     domain: string;
+    pageTags?: string[];
 }

dist/cjs/orchestration/Orchestration.d.ts

 import { Plugin } from '../plugins/Plugin';
+import { TargetDomEvent } from '../plugins/event-plugins/DomEventPlugin';
 import { ClientBuilder } from '../dispatch/Dispatch';
 import { CredentialProvider, Credentials } from '@aws-sdk/types';
+import { PageAttributes } from '../sessions/PageManager';
 export declare enum TELEMETRY_TYPES {
@@ -139,5 +141,7 @@ ERRORS = "errors",
      * Update the current page the user is interacting with.
-     * @param pageId The unique ID for the page within the application.
+     * @param payload Can be string or PageAttributes object
+     *      If string, payload is pageId (The unique ID for the page within the application).
+     *      If PageAttributes, payload contains pageId as well as page attributes to include in events with pageId
      */
-    recordPageView(pageId: string): void;
+    recordPageView(payload: string | PageAttributes): void;
     /**
@@ -148,2 +152,7 @@ * Record an error using the JS error plugin.
     recordError(error: any): void;
+    /**
+     * Update DOM plugin to record the (additional) provided DOM events.
+     * @param pluginConfig Target DOM events.
+     */
+    registerDomEvents(events: TargetDomEvent[]): void;
     private initEventCache;
@@ -150,0 +159,0 @@ private initDispatch;

dist/cjs/orchestration/Orchestration.js

@@ -166,6 +166,8 @@ "use strict";
      * Update the current page the user is interacting with.
-     * @param pageId The unique ID for the page within the application.
+     * @param payload Can be string or PageAttributes object
+     *      If string, payload is pageId (The unique ID for the page within the application).
+     *      If PageAttributes, payload contains pageId as well as page attributes to include in events with pageId
      */
-    Orchestration.prototype.recordPageView = function (pageId) {
-        this.eventCache.recordPageView(pageId);
+    Orchestration.prototype.recordPageView = function (payload) {
+        this.eventCache.recordPageView(payload);
     };
@@ -179,2 +181,9 @@ /**
     };
+    /**
+     * Update DOM plugin to record the (additional) provided DOM events.
+     * @param pluginConfig Target DOM events.
+     */
+    Orchestration.prototype.registerDomEvents = function (events) {
+        this.pluginManager.updatePlugin(DomEventPlugin_1.DOM_EVENT_PLUGIN_ID, events);
+    };
     Orchestration.prototype.initEventCache = function (applicationId, applicationVersion) {
@@ -181,0 +190,0 @@ return new EventCache_1.EventCache({

dist/cjs/plugins/event-plugins/DomEventPlugin.d.ts

@@ -22,7 +22,13 @@ import { Plugin, PluginContext } from '../Plugin';
 export declare type PartialDomEventPluginConfig = {
+    enableMutationObserver?: boolean;
     events?: TargetDomEvent[];
 };
 export declare type DomEventPluginConfig = {
+    enableMutationObserver?: boolean;
     events: TargetDomEvent[];
 };
+export declare type ElementEventListener = {
+    element: HTMLElement;
+    eventListener: EventListener;
+};
 export declare class DomEventPlugin implements Plugin {
@@ -34,2 +40,3 @@ private recordEvent;
     private config;
+    private observer;
     constructor(config?: PartialDomEventPluginConfig);
@@ -40,2 +47,3 @@ load(context: PluginContext): void;
     getPluginId(): string;
+    update(events: TargetDomEvent[]): void;
     private removeListeners;
@@ -47,2 +55,3 @@ private addListeners;
     private removeEventHandler;
+    private observeDOMMutation;
 }

dist/cjs/plugins/event-plugins/DomEventPlugin.js

@@ -18,2 +18,3 @@ "use strict";
 var defaultConfig = {
+    enableMutationObserver: false,
     events: []
@@ -33,2 +34,7 @@ };
     DomEventPlugin.prototype.enable = function () {
+        var _this = this;
+        if (document.readyState !== 'complete') {
+            window.addEventListener('load', function () { return _this.enable(); });
+            return;
+        }
         if (this.enabled) {
@@ -38,2 +44,5 @@ return;
         this.addListeners();
+        if (this.config.enableMutationObserver) {
+            this.observeDOMMutation();
+        }
         this.enabled = true;
@@ -46,2 +55,5 @@ };
         this.removeListeners();
+        if (this.observer) {
+            this.observer.disconnect();
+        }
         this.enabled = false;
@@ -52,2 +64,9 @@ };
     };
+    DomEventPlugin.prototype.update = function (events) {
+        var _this = this;
+        events.forEach(function (domEvent) {
+            _this.addEventHandler(domEvent);
+            _this.config.events.push(domEvent);
+        });
+    };
     DomEventPlugin.prototype.removeListeners = function () {
@@ -94,42 +113,52 @@ var _this = this;
     DomEventPlugin.prototype.addEventHandler = function (domEvent) {
-        var _a;
         var eventType = domEvent.event;
         var eventListener = this.getEventListener(domEvent.cssLocator);
-        this.eventListenerMap.set(domEvent, eventListener);
+        var identifiedElementList = [];
+        var elementEventListenerList = this.eventListenerMap.has(domEvent)
+            ? this.eventListenerMap.get(domEvent)
+            : [];
         // first add event listener to all elements identified by the CSS locator
         if (domEvent.cssLocator) {
-            var elementList = document.querySelectorAll(domEvent.cssLocator);
-            elementList.forEach(function (element) {
-                element.addEventListener(eventType, eventListener);
+            var cssLocatedElements = document.querySelectorAll(domEvent.cssLocator);
+            cssLocatedElements.forEach(function (element) {
+                identifiedElementList.push(element);
             });
         }
         else if (domEvent.elementId) {
-            (_a = document
-                .getElementById(domEvent.elementId)) === null || _a === void 0 ? void 0 : _a.addEventListener(eventType, eventListener);
+            var identifiedElement = document.getElementById(domEvent.elementId);
+            if (identifiedElement) {
+                identifiedElementList.push(identifiedElement);
+            }
         }
         else if (domEvent.element) {
-            domEvent.element.addEventListener(eventType, eventListener);
+            identifiedElementList.push(domEvent.element);
         }
+        identifiedElementList.forEach(function (element) {
+            element.addEventListener(eventType, eventListener);
+            elementEventListenerList.push({ element: element, eventListener: eventListener });
+        });
+        this.eventListenerMap.set(domEvent, elementEventListenerList);
     };
     DomEventPlugin.prototype.removeEventHandler = function (domEvent) {
-        var eventListener = this.eventListenerMap.get(domEvent);
-        if (domEvent.cssLocator && eventListener) {
-            var elementList = document.querySelectorAll(domEvent.cssLocator);
-            elementList.forEach(function (element) {
+        var elementEventListenerList = this.eventListenerMap.get(domEvent);
+        if (elementEventListenerList) {
+            elementEventListenerList.forEach(function (elementEventListener) {
+                var element = elementEventListener.element;
+                var eventListener = elementEventListener.eventListener;
                 element.removeEventListener(domEvent.event, eventListener);
             });
+            this.eventListenerMap.delete(domEvent);
         }
-        else if (domEvent.elementId && eventListener) {
-            var element = document.getElementById(domEvent.elementId);
-            if (element) {
-                element.removeEventListener(domEvent.event, eventListener);
-            }
-        }
-        else if (domEvent.element && eventListener) {
-            domEvent.element.removeEventListener(domEvent.event, eventListener);
-        }
-        this.eventListenerMap.delete(domEvent);
     };
+    DomEventPlugin.prototype.observeDOMMutation = function () {
+        var _this = this;
+        this.observer = new MutationObserver(function () {
+            _this.removeListeners();
+            _this.addListeners();
+        });
+        //  we track only changes to nodes/DOM elements, not attributes or characterData
+        this.observer.observe(document, { childList: true, subtree: true });
+    };
     return DomEventPlugin;
 }());
 exports.DomEventPlugin = DomEventPlugin;

dist/cjs/plugins/event-plugins/JsErrorPlugin.js

@@ -28,8 +28,6 @@ "use strict";
         this.promiseRejectEventHandler = function (event) {
-            var errorEvent = {
-                version: '1.0.0',
+            _this.eventHandler({
                 type: event.type,
-                message: event.reason
-            };
-            _this.recordEvent(constant_1.JS_ERROR_EVENT_TYPE, errorEvent);
+                error: event.reason
+            });
         };
@@ -36,0 +34,0 @@ this.pluginId = exports.JS_ERROR_EVENT_PLUGIN_ID;

dist/cjs/plugins/Plugin.d.ts

@@ -38,2 +38,7 @@ import { Config } from '../orchestration/Orchestration';
     record?(data: any): void;
+    /**
+     * Update the plugin.
+     * @param config Data that the plugin will use to update its config.
+     */
+    update?(config: object): void;
 }

dist/cjs/plugins/PluginManager.d.ts

@@ -16,2 +16,7 @@ import { Plugin, PluginContext } from './Plugin';
     /**
+     * Update an event plugin
+     * @param config The config to update the plugin with.
+     */
+    updatePlugin(pluginId: string, config: object): void;
+    /**
      * Enable all event plugins.
@@ -18,0 +23,0 @@ */

dist/cjs/plugins/PluginManager.js

@@ -30,2 +30,12 @@ "use strict";
     /**
+     * Update an event plugin
+     * @param config The config to update the plugin with.
+     */
+    PluginManager.prototype.updatePlugin = function (pluginId, config) {
+        var plugin = this.plugins.get(pluginId);
+        if (plugin && plugin.update instanceof Function) {
+            plugin.update(config);
+        }
+    };
+    /**
      * Enable all event plugins.
@@ -32,0 +42,0 @@ */

dist/cjs/plugins/utils/js-error-utils.js

@@ -32,3 +32,6 @@ "use strict";
 var appendErrorPrimitiveDetails = function (rumEvent, error) {
-    rumEvent.type = error.toString();
+    // Keep unhandledrejection as type as it will write to rumEvent.message
+    if (rumEvent.type !== 'unhandledrejection') {
+        rumEvent.type = error.toString();
+    }
     rumEvent.message = error.toString();
@@ -35,0 +38,0 @@ };

dist/cjs/sessions/PageManager.d.ts

@@ -15,3 +15,8 @@ import { Config } from '../orchestration/Orchestration';
     interaction?: number;
+    pageTags?: string[];
 };
+export declare type PageAttributes = {
+    pageId: string;
+    pageTags?: string[];
+};
 /**
@@ -44,3 +49,3 @@ * The page manager keeps the state of the current page and interaction level.
     resumeSession(pageId: string, interaction: number): void;
-    recordPageView(pageId: string): void;
+    recordPageView(payload: string | PageAttributes): void;
     private createResumedPage;
@@ -47,0 +52,0 @@ private createNextPage;

dist/cjs/sessions/PageManager.js

@@ -37,3 +37,10 @@ "use strict";
     };
-    PageManager.prototype.recordPageView = function (pageId) {
+    PageManager.prototype.recordPageView = function (payload) {
+        var pageId;
+        if (typeof payload === 'string') {
+            pageId = payload;
+        }
+        else {
+            pageId = payload.pageId;
+        }
         if (this.useCookies()) {
@@ -56,3 +63,3 @@ this.recordInteraction = true;
         // Attributes will be added to all events as meta data
-        this.collectAttributes();
+        this.collectAttributes(typeof payload === 'object' ? payload : undefined);
         // The SessionManager will update its cookie with the new page
@@ -85,3 +92,4 @@ this.recordPageViewEvent();
     };
-    PageManager.prototype.collectAttributes = function () {
+    PageManager.prototype.collectAttributes = function (customPageAttributes) {
+        var _this = this;
         this.attributes = {
@@ -97,2 +105,7 @@ title: document.title,
         }
+        if (customPageAttributes) {
+            Object.keys(customPageAttributes).forEach(function (attribute) {
+                _this.attributes[attribute] = customPageAttributes[attribute];
+            });
+        }
     };
@@ -99,0 +112,0 @@ PageManager.prototype.createPageViewEvent = function () {

dist/es/CommandQueue.js

@@ -60,2 +60,5 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
             },
+            registerDomEvents: function (payload) {
+                _this.orchestration.registerDomEvents(payload);
+            },
             dispatch: function () {
@@ -62,0 +65,0 @@ _this.orchestration.dispatch();

dist/es/event-cache/EventCache.d.ts

 import { Session } from '../sessions/SessionManager';
 import { Config } from '../orchestration/Orchestration';
+import { PageAttributes } from '../sessions/PageManager';
 import { AppMonitorDetails, UserDetails, RumEvent } from '../dispatch/dataplane';
@@ -38,3 +39,3 @@ /**
      */
-    recordPageView: (pageId: string) => void;
+    recordPageView: (payload: string | PageAttributes) => void;
     /**
@@ -41,0 +42,0 @@ * Add an event to the cache and reset the session timer.

dist/es/event-cache/EventCache.js

@@ -36,5 +36,5 @@ var __assign = (this && this.__assign) || function () {
          */
-        this.recordPageView = function (pageId) {
+        this.recordPageView = function (payload) {
             if (_this.isCurrentUrlAllowed()) {
-                _this.pageManager.recordPageView(pageId);
+                _this.pageManager.recordPageView(payload);
             }
@@ -41,0 +41,0 @@ };

dist/es/events/http-event.d.ts

@@ -21,2 +21,6 @@ /**
         /**
+         * JSErrorEvent schema version.
+         */
+        version?: string;
+        /**
          * Error type (eg., TypeError, ParseError, etc).
@@ -23,0 +27,0 @@ */

dist/es/events/meta-data.d.ts

@@ -29,2 +29,3 @@ /**
     domain: string;
+    pageTags?: string[];
 }

dist/es/orchestration/Orchestration.d.ts

 import { Plugin } from '../plugins/Plugin';
+import { TargetDomEvent } from '../plugins/event-plugins/DomEventPlugin';
 import { ClientBuilder } from '../dispatch/Dispatch';
 import { CredentialProvider, Credentials } from '@aws-sdk/types';
+import { PageAttributes } from '../sessions/PageManager';
 export declare enum TELEMETRY_TYPES {
@@ -139,5 +141,7 @@ ERRORS = "errors",
      * Update the current page the user is interacting with.
-     * @param pageId The unique ID for the page within the application.
+     * @param payload Can be string or PageAttributes object
+     *      If string, payload is pageId (The unique ID for the page within the application).
+     *      If PageAttributes, payload contains pageId as well as page attributes to include in events with pageId
      */
-    recordPageView(pageId: string): void;
+    recordPageView(payload: string | PageAttributes): void;
     /**
@@ -148,2 +152,7 @@ * Record an error using the JS error plugin.
     recordError(error: any): void;
+    /**
+     * Update DOM plugin to record the (additional) provided DOM events.
+     * @param pluginConfig Target DOM events.
+     */
+    registerDomEvents(events: TargetDomEvent[]): void;
     private initEventCache;
@@ -150,0 +159,0 @@ private initDispatch;

dist/es/orchestration/Orchestration.js

@@ -24,3 +24,3 @@ var __assign = (this && this.__assign) || function () {
 import { PluginManager } from '../plugins/PluginManager';
-import { DomEventPlugin } from '../plugins/event-plugins/DomEventPlugin';
+import { DomEventPlugin, DOM_EVENT_PLUGIN_ID } from '../plugins/event-plugins/DomEventPlugin';
 import { JsErrorPlugin, JS_ERROR_EVENT_PLUGIN_ID } from '../plugins/event-plugins/JsErrorPlugin';
@@ -162,6 +162,8 @@ import { EventCache } from '../event-cache/EventCache';
      * Update the current page the user is interacting with.
-     * @param pageId The unique ID for the page within the application.
+     * @param payload Can be string or PageAttributes object
+     *      If string, payload is pageId (The unique ID for the page within the application).
+     *      If PageAttributes, payload contains pageId as well as page attributes to include in events with pageId
      */
-    Orchestration.prototype.recordPageView = function (pageId) {
-        this.eventCache.recordPageView(pageId);
+    Orchestration.prototype.recordPageView = function (payload) {
+        this.eventCache.recordPageView(payload);
     };
@@ -175,2 +177,9 @@ /**
     };
+    /**
+     * Update DOM plugin to record the (additional) provided DOM events.
+     * @param pluginConfig Target DOM events.
+     */
+    Orchestration.prototype.registerDomEvents = function (events) {
+        this.pluginManager.updatePlugin(DOM_EVENT_PLUGIN_ID, events);
+    };
     Orchestration.prototype.initEventCache = function (applicationId, applicationVersion) {
@@ -177,0 +186,0 @@ return new EventCache({

dist/es/plugins/event-plugins/DomEventPlugin.d.ts

@@ -22,7 +22,13 @@ import { Plugin, PluginContext } from '../Plugin';
 export declare type PartialDomEventPluginConfig = {
+    enableMutationObserver?: boolean;
     events?: TargetDomEvent[];
 };
 export declare type DomEventPluginConfig = {
+    enableMutationObserver?: boolean;
     events: TargetDomEvent[];
 };
+export declare type ElementEventListener = {
+    element: HTMLElement;
+    eventListener: EventListener;
+};
 export declare class DomEventPlugin implements Plugin {
@@ -34,2 +40,3 @@ private recordEvent;
     private config;
+    private observer;
     constructor(config?: PartialDomEventPluginConfig);
@@ -40,2 +47,3 @@ load(context: PluginContext): void;
     getPluginId(): string;
+    update(events: TargetDomEvent[]): void;
     private removeListeners;
@@ -47,2 +55,3 @@ private addListeners;
     private removeEventHandler;
+    private observeDOMMutation;
 }

dist/es/plugins/event-plugins/DomEventPlugin.js

@@ -15,2 +15,3 @@ var __assign = (this && this.__assign) || function () {
 var defaultConfig = {
+    enableMutationObserver: false,
     events: []
@@ -30,2 +31,7 @@ };
     DomEventPlugin.prototype.enable = function () {
+        var _this = this;
+        if (document.readyState !== 'complete') {
+            window.addEventListener('load', function () { return _this.enable(); });
+            return;
+        }
         if (this.enabled) {
@@ -35,2 +41,5 @@ return;
         this.addListeners();
+        if (this.config.enableMutationObserver) {
+            this.observeDOMMutation();
+        }
         this.enabled = true;
@@ -43,2 +52,5 @@ };
         this.removeListeners();
+        if (this.observer) {
+            this.observer.disconnect();
+        }
         this.enabled = false;
@@ -49,2 +61,9 @@ };
     };
+    DomEventPlugin.prototype.update = function (events) {
+        var _this = this;
+        events.forEach(function (domEvent) {
+            _this.addEventHandler(domEvent);
+            _this.config.events.push(domEvent);
+        });
+    };
     DomEventPlugin.prototype.removeListeners = function () {
@@ -91,42 +110,52 @@ var _this = this;
     DomEventPlugin.prototype.addEventHandler = function (domEvent) {
-        var _a;
         var eventType = domEvent.event;
         var eventListener = this.getEventListener(domEvent.cssLocator);
-        this.eventListenerMap.set(domEvent, eventListener);
+        var identifiedElementList = [];
+        var elementEventListenerList = this.eventListenerMap.has(domEvent)
+            ? this.eventListenerMap.get(domEvent)
+            : [];
         // first add event listener to all elements identified by the CSS locator
         if (domEvent.cssLocator) {
-            var elementList = document.querySelectorAll(domEvent.cssLocator);
-            elementList.forEach(function (element) {
-                element.addEventListener(eventType, eventListener);
+            var cssLocatedElements = document.querySelectorAll(domEvent.cssLocator);
+            cssLocatedElements.forEach(function (element) {
+                identifiedElementList.push(element);
             });
         }
         else if (domEvent.elementId) {
-            (_a = document
-                .getElementById(domEvent.elementId)) === null || _a === void 0 ? void 0 : _a.addEventListener(eventType, eventListener);
+            var identifiedElement = document.getElementById(domEvent.elementId);
+            if (identifiedElement) {
+                identifiedElementList.push(identifiedElement);
+            }
         }
         else if (domEvent.element) {
-            domEvent.element.addEventListener(eventType, eventListener);
+            identifiedElementList.push(domEvent.element);
         }
+        identifiedElementList.forEach(function (element) {
+            element.addEventListener(eventType, eventListener);
+            elementEventListenerList.push({ element: element, eventListener: eventListener });
+        });
+        this.eventListenerMap.set(domEvent, elementEventListenerList);
     };
     DomEventPlugin.prototype.removeEventHandler = function (domEvent) {
-        var eventListener = this.eventListenerMap.get(domEvent);
-        if (domEvent.cssLocator && eventListener) {
-            var elementList = document.querySelectorAll(domEvent.cssLocator);
-            elementList.forEach(function (element) {
+        var elementEventListenerList = this.eventListenerMap.get(domEvent);
+        if (elementEventListenerList) {
+            elementEventListenerList.forEach(function (elementEventListener) {
+                var element = elementEventListener.element;
+                var eventListener = elementEventListener.eventListener;
                 element.removeEventListener(domEvent.event, eventListener);
             });
+            this.eventListenerMap.delete(domEvent);
         }
-        else if (domEvent.elementId && eventListener) {
-            var element = document.getElementById(domEvent.elementId);
-            if (element) {
-                element.removeEventListener(domEvent.event, eventListener);
-            }
-        }
-        else if (domEvent.element && eventListener) {
-            domEvent.element.removeEventListener(domEvent.event, eventListener);
-        }
-        this.eventListenerMap.delete(domEvent);
     };
+    DomEventPlugin.prototype.observeDOMMutation = function () {
+        var _this = this;
+        this.observer = new MutationObserver(function () {
+            _this.removeListeners();
+            _this.addListeners();
+        });
+        //  we track only changes to nodes/DOM elements, not attributes or characterData
+        this.observer.observe(document, { childList: true, subtree: true });
+    };
     return DomEventPlugin;
 }());
 export { DomEventPlugin };

dist/es/plugins/event-plugins/JsErrorPlugin.js

@@ -25,8 +25,6 @@ var __assign = (this && this.__assign) || function () {
         this.promiseRejectEventHandler = function (event) {
-            var errorEvent = {
-                version: '1.0.0',
+            _this.eventHandler({
                 type: event.type,
-                message: event.reason
-            };
-            _this.recordEvent(JS_ERROR_EVENT_TYPE, errorEvent);
+                error: event.reason
+            });
         };
@@ -33,0 +31,0 @@ this.pluginId = JS_ERROR_EVENT_PLUGIN_ID;

dist/es/plugins/Plugin.d.ts

@@ -38,2 +38,7 @@ import { Config } from '../orchestration/Orchestration';
     record?(data: any): void;
+    /**
+     * Update the plugin.
+     * @param config Data that the plugin will use to update its config.
+     */
+    update?(config: object): void;
 }

dist/es/plugins/PluginManager.d.ts

@@ -16,2 +16,7 @@ import { Plugin, PluginContext } from './Plugin';
     /**
+     * Update an event plugin
+     * @param config The config to update the plugin with.
+     */
+    updatePlugin(pluginId: string, config: object): void;
+    /**
      * Enable all event plugins.
@@ -18,0 +23,0 @@ */

dist/es/plugins/PluginManager.js

@@ -27,2 +27,12 @@ /**
     /**
+     * Update an event plugin
+     * @param config The config to update the plugin with.
+     */
+    PluginManager.prototype.updatePlugin = function (pluginId, config) {
+        var plugin = this.plugins.get(pluginId);
+        if (plugin && plugin.update instanceof Function) {
+            plugin.update(config);
+        }
+    };
+    /**
      * Enable all event plugins.
@@ -29,0 +39,0 @@ */

dist/es/plugins/utils/js-error-utils.js

@@ -29,3 +29,6 @@ var isObject = function (error) {
 var appendErrorPrimitiveDetails = function (rumEvent, error) {
-    rumEvent.type = error.toString();
+    // Keep unhandledrejection as type as it will write to rumEvent.message
+    if (rumEvent.type !== 'unhandledrejection') {
+        rumEvent.type = error.toString();
+    }
     rumEvent.message = error.toString();
@@ -32,0 +35,0 @@ };

dist/es/sessions/PageManager.d.ts

@@ -15,3 +15,8 @@ import { Config } from '../orchestration/Orchestration';
     interaction?: number;
+    pageTags?: string[];
 };
+export declare type PageAttributes = {
+    pageId: string;
+    pageTags?: string[];
+};
 /**
@@ -44,3 +49,3 @@ * The page manager keeps the state of the current page and interaction level.
     resumeSession(pageId: string, interaction: number): void;
-    recordPageView(pageId: string): void;
+    recordPageView(payload: string | PageAttributes): void;
     private createResumedPage;
@@ -47,0 +52,0 @@ private createNextPage;

dist/es/sessions/PageManager.js

@@ -34,3 +34,10 @@ export var PAGE_VIEW_TYPE = 'com.amazon.rum.page_view_event';
     };
-    PageManager.prototype.recordPageView = function (pageId) {
+    PageManager.prototype.recordPageView = function (payload) {
+        var pageId;
+        if (typeof payload === 'string') {
+            pageId = payload;
+        }
+        else {
+            pageId = payload.pageId;
+        }
         if (this.useCookies()) {
@@ -53,3 +60,3 @@ this.recordInteraction = true;
         // Attributes will be added to all events as meta data
-        this.collectAttributes();
+        this.collectAttributes(typeof payload === 'object' ? payload : undefined);
         // The SessionManager will update its cookie with the new page
@@ -82,3 +89,4 @@ this.recordPageViewEvent();
     };
-    PageManager.prototype.collectAttributes = function () {
+    PageManager.prototype.collectAttributes = function (customPageAttributes) {
+        var _this = this;
         this.attributes = {
@@ -94,2 +102,7 @@ title: document.title,
         }
+        if (customPageAttributes) {
+            Object.keys(customPageAttributes).forEach(function (attribute) {
+                _this.attributes[attribute] = customPageAttributes[attribute];
+            });
+        }
     };
@@ -96,0 +109,0 @@ PageManager.prototype.createPageViewEvent = function () {

package.json

 {
     "name": "aws-rum-web",
-    "version": "1.2.1",
+    "version": "1.4.0",
     "description": "The Amazon CloudWatch RUM web client.",
@@ -5,0 +5,0 @@ "license": "Apache-2.0",

README.md

@@ -8,18 +8,18 @@ # Amazon CloudWatch RUM Web Client
 
-## Installing
+## Install as a JavaScript Module
 
-The latest stable version of the web client is hosted on a content delivery
-network (CDN) hosted by CloudWatch RUM. See the [CloudWatch RUM
-documentation](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/CloudWatch-RUM.html)
-for instructions on how to create an AppMonitor and generate a code snippet
-which will install the web client in your application.
+See [Installing as a JavaScript Module](docs/npm_installation.md).
 
-## Documentation
+## Install as an Embedded Script
 
-1. [Installing from CDN](docs/cdn_installation.md)
-1. [Executing Commands](docs/cdn_commands.md)
-1. [Using the Web Client with Angular](docs/cdn_angular.md)
-1. [Using the Web Client with React](docs/cdn_react.md)
-1. [Troubleshooting CDN Installations](docs/cdn_troubleshooting.md)
+See [Installing as an Embedded Script](docs/cdn_installation.md).
 
+## Additional Documentation:
+
+1. [Configuring the web client](docs/configuration.md)
+1. [Executing commands](docs/cdn_commands.md)
+1. [Using the web client with Angular](docs/cdn_angular.md)
+1. [Using the web client with React](docs/cdn_react.md)
+1. [Troubleshooting](docs/cdn_troubleshooting.md)
+
 ## Getting Help
@@ -30,2 +30,3 @@
 -   View the [CloudWatch RUM documentation](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/CloudWatch-RUM.html).
+-   Ask a question in the [Amazon CloudWatch forum](https://forums.aws.amazon.com/forum.jspa?forumID=138)
 -   Open a support ticket with [AWS Support](https://docs.aws.amazon.com/awssupport/latest/user/getting-started.html).
@@ -36,10 +37,11 @@ -   If you think you may have found a bug, open an [issue](https://github.com/aws-observability/aws-rum-web/issues/new).
 
-If you encounter a bug with the CloudWatch RUM web client, we want to hear
-about it. Before opening a new issue, search the existing issues to see if
-others are also experiencing the issue. Include the version of the CloudWatch
-RUM Web Client, Node.js runtime, and other dependencies if applicable. In
-addition, include the repro case when appropriate.
+If you encounter a bug with the CloudWatch RUM web client, we want to hear about
+it. Before opening a new issue, [search the existing
+issues](https://github.com/aws-observability/aws-rum-web/issues?q=is%3Aissue) to
+see if others are also experiencing the issue. Include the version of the
+CloudWatch RUM web client, Node.js runtime, and other dependencies if
+applicable. In addition, include the repro case when appropriate.
 
 The GitHub issues are intended for bug reports and feature requests. For help
-and questions about using the CloudWatch RUM Web Client, use the resources
+and questions about using the CloudWatch RUM web client, use the resources
 listed in the Getting Help section. Keeping the list of open issues lean helps
@@ -115,5 +117,5 @@ us respond in a timely manner.
 
-The RUM Web Client uses pre-commit tasks to lint and format its source code.
-Before submitting code, check that all linter and formatter warnings have been
-resolved.
+The CloudWatch RUM web client uses pre-commit tasks to lint and format its
+source code. Before submitting code, check that all linter and formatter
+warnings have been resolved.
 
@@ -120,0 +122,0 @@ Attempt to automatically repair linter warnings:

No alert changes

Improved metrics

Total package byte prevSize

1131380

increased by0.87%

Lines of code

11594

increased by1.83%

Number of lines in readme file

138

increased by1.47%

No dependency changes