@pendo/agent 2.293.1 → 2.294.0

package/dist/pendo.module.js

@@ -3908,8 +3908,8 @@ var SERVER = '';
 var ASSET_HOST = '';
 var ASSET_PATH = '';
 var DESIGNER_SERVER = '';
-var VERSION = '2.293.1_';
-var PACKAGE_VERSION = '2.293.1';
+var VERSION = '2.294.0_';
+var PACKAGE_VERSION = '2.294.0';
 var LOADER = 'xhr';
 /* eslint-enable agent-eslint-rules/no-gulp-env-references */
 /**
@@ -12231,6 +12231,7 @@ class PerformanceMonitor {
         return detectNativeBrowserAPI('performance.mark') &&
             detectNativeBrowserAPI('performance.measure') &&
             detectNativeBrowserAPI('performance.getEntries') &&
+            detectNativeBrowserAPI('performance.getEntriesByName') &&
             detectNativeBrowserAPI('performance.clearMarks') &&
             detectNativeBrowserAPI('performance.clearMeasures');
     }
@@ -12250,8 +12251,10 @@ class PerformanceMonitor {
         name = `pendo-${name}`;
         const startMark = `${name}-start`;
         const stopMark = `${name}-stop`;
-        performance.measure(name, startMark, stopMark);
-        this._count(this._measures, name);
+        if (performance.getEntriesByName(startMark).length && performance.getEntriesByName(stopMark).length) {
+            performance.measure(name, startMark, stopMark);
+            this._count(this._measures, name);
+        }
     }
     _count(registry, name) {
         if (!registry[name]) {
@@ -13304,6 +13307,7 @@ var getValidTarget = function (node) {
  */
 var handle_event = function (evt) {
     try {
+        PerformanceMonitor$1.startTimer('event-captured');
         if (dom.data.get(evt, 'counted'))
             return;
         dom.data.set(evt, 'counted', true);
@@ -13343,6 +13347,9 @@ var handle_event = function (evt) {
     catch (e) {
         log.critical('pendo.io while handling event', { error: e });
     }
+    finally {
+        PerformanceMonitor$1.stopTimer('event-captured');
+    }
 };
 function getClickEventProperties(target) {
     const eventPropertyHandler = getEventPropertyHandler(target);
@@ -17866,6 +17873,9 @@ function getAllowedAttributes(attributeKeyValueMap, stepId, guideId, type) {
 function buildNodeFromJSON(json, step, guides) {
     step = step || { id: 'unknown', guideId: 'unknown' };
     json.props = getAllowedAttributes(json.props, step.id, step.guideId, json.type);
+    if (step.isDarkMode && json.darkModeProps) {
+        json.darkModeProps = getAllowedAttributes(json.darkModeProps, step.id, step.guideId, json.type);
+    }
     var curNode = dom(document.createElement(json.type));
     // APP-81040 calling code in the pendo app (and possibly elsewhere) depends on
     // curNode.getParent() returning non-null in some cases. The fact that it used to
@@ -17885,7 +17895,11 @@ function buildNodeFromJSON(json, step, guides) {
     }
     _.each(json.props, function (propValue, propKey) {
         if (propKey === 'style') {
-            curNode.css(json.props.style);
+            let nodeStyle = json.props.style;
+            if (step.isDarkMode && json.darkModeProps) {
+                nodeStyle = Object.assign(Object.assign({}, json.props.style), json.darkModeProps.style);
+            }
+            curNode.css(nodeStyle);
         }
         else if (propKey === 'data-pendo-code-block' && propValue === true && !ConfigReader.get('preventCodeInjection')) {
             const htmlString = step.getContent();
@@ -17910,13 +17924,23 @@ function buildNodeFromJSON(json, step, guides) {
         if (nonce) {
             curNode.attr('nonce', nonce);
         }
+        let css = json.css;
+        if (json.forDarkMode) {
+            const darkModeSelector = _.get(step, 'attributes.darkMode.selector', '');
+            css = _.map(css, function (rule) {
+                return {
+                    styles: rule.styles,
+                    selector: `${darkModeSelector} ${rule.selector}`
+                };
+            });
+        }
         // TODO: make this render building-block pseudo-styles properly for IE7-8. This current functionality allows guides to render in IE but there are lots of styling problems.
         // `curNode.text` specifically breaks in IE8 since style tags text attributes are read only. From researching `node.styleSheet.cssText` is the correct way to do it.
         if (curNode.styleSheet) {
-            curNode.styleSheet.cssText = buildStyleTagContent(json.css);
+            curNode.styleSheet.cssText = buildStyleTagContent(css);
         }
         else {
-            curNode.text(buildStyleTagContent(json.css));
+            curNode.text(buildStyleTagContent(css));
         }
     }
     if (json.svgWidgetId) {
@@ -20614,6 +20638,21 @@ class AutoDisplayPhase {
     }
 }
 
+function syncColorMode(step, rerender = false) {
+    const darkModeSelector = _.get(step, 'attributes.darkMode.selector', '');
+    if (!darkModeSelector)
+        return;
+    const isDarkMode = pendo$1.Sizzle(darkModeSelector).length > 0;
+    const darkModeChanged = step.isDarkMode !== isDarkMode;
+    if (darkModeChanged) {
+        step.isDarkMode = isDarkMode;
+        if (rerender) {
+            step.hide();
+            step.show(step.seenReason);
+        }
+    }
+}
+
 /*
 * Guide Loop
 *
@@ -20812,6 +20851,7 @@ function stepShowingProc(guide, step) {
             step.attributes.currentTextZoomFontSize = currentBrowserFontSize;
         }
     }
+    syncColorMode(step, true);
     if (step.elementPathRule && targetElement && !SizzleProxy.matchesSelector(targetElement, step.elementPathRule)) {
         step.hide();
         return;
@@ -26340,53 +26380,152 @@ class NetworkRequestIntercept {
     extractXHRHeaders(xhr) {
         return xhr[PENDO_HEADERS_KEY] || {};
     }
-    patchNetwork() {
+    generateRequestId() {
+        const $stringLength = 8;
+        return 'req_' + Date.now() + '_' + pendo$1.randomString($stringLength);
+    }
+    safelyReadResponse(response) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const contentType = response.headers.get('content-type') || '';
+                if (contentType.indexOf('application/json') !== -1) {
+                    return yield response.json();
+                }
+                else if (contentType.indexOf('text/') !== -1) {
+                    return yield response.text();
+                }
+                else {
+                    // For binary or unknown content types, just capture metadata
+                    return `[Binary content: ${contentType}]`;
+                }
+            }
+            catch (e) {
+                return '[Unable to read response body]';
+            }
+        });
+    }
+    extractResponseHeaders(response) {
+        let headers = {};
+        if (response.headers) {
+            const headerEntries = Array.from(response.headers.entries());
+            headers = this.entriesToObject(headerEntries);
+        }
+        return headers;
+    }
+    parseXHRResponseHeaders(headerString) {
+        const headers = {};
+        if (!headerString)
+            return headers;
+        const lines = headerString.split('\r\n');
+        _.each(lines, line => {
+            const parts = line.split(': ');
+            if (parts.length === 2) {
+                headers[parts[0]] = parts[1];
+            }
+        });
+        return headers;
+    }
+    patchFetch() {
         const networkInterceptor = this;
-        if (networkInterceptor._networkPatched)
-            return;
-        networkInterceptor._networkPatched = true;
-        networkInterceptor._originalSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
-        XMLHttpRequest.prototype.setRequestHeader = function (header, value) {
-            this[PENDO_HEADERS_KEY] = this[PENDO_HEADERS_KEY] || {};
-            this[PENDO_HEADERS_KEY][header] = value;
-            return networkInterceptor._originalSetRequestHeader.apply(this, arguments);
-        };
         networkInterceptor._originalFetch = window.fetch;
         window.fetch = function (...args) {
             return __awaiter(this, void 0, void 0, function* () {
                 const [url, config = {}] = args;
                 const method = config.method || 'GET';
+                const requestId = networkInterceptor.generateRequestId();
+                // Capture request data
                 try {
                     const headers = networkInterceptor.extractHeaders(config.headers);
                     const body = networkInterceptor.safelySerializeBody(config.body);
                     _.each(networkInterceptor.callbackFns, ({ request }) => {
                         if (_.isFunction(request))
-                            request({ method, url, body, headers });
+                            request({ requestId, method, url, body, headers });
                     });
                 }
                 catch (e) {
                     _.each(networkInterceptor.callbackFns, ({ error }) => {
                         if (_.isFunction(error))
-                            error({ context: 'fetch', error: e });
+                            error({ context: 'fetchRequest', error: e });
+                    });
+                }
+                // Make the actual fetch call and capture response
+                try {
+                    const res = yield networkInterceptor._originalFetch.apply(this, args);
+                    // Clone the response to avoid consuming the body
+                    const responseClone = res.clone();
+                    try {
+                        // Capture response data
+                        const responseBody = yield networkInterceptor.safelyReadResponse(responseClone);
+                        const { status, statusText } = res;
+                        const headers = networkInterceptor.extractResponseHeaders(res);
+                        _.each(networkInterceptor.callbackFns, ({ response }) => {
+                            if (_.isFunction(response)) {
+                                response({
+                                    requestId,
+                                    status,
+                                    statusText,
+                                    body: responseBody,
+                                    headers,
+                                    url,
+                                    method
+                                });
+                            }
+                        });
+                    }
+                    catch (e) {
+                        _.each(networkInterceptor.callbackFns, ({ error }) => {
+                            if (_.isFunction(error))
+                                error({ context: 'fetchResponse', error: e });
+                        });
+                    }
+                    return res;
+                }
+                catch (error) {
+                    // Handle network errors
+                    _.each(networkInterceptor.callbackFns, ({ response }) => {
+                        if (_.isFunction(response)) {
+                            response({
+                                requestId,
+                                status: 0,
+                                statusText: 'Network Error',
+                                headers: {},
+                                body: null,
+                                url,
+                                method,
+                                error: error.message
+                            });
+                        }
                     });
+                    throw error;
                 }
-                return networkInterceptor._originalFetch.apply(this, args);
             });
         };
+    }
+    patchXHR() {
+        const networkInterceptor = this;
+        networkInterceptor._originalSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
         networkInterceptor._originalXHROpen = XMLHttpRequest.prototype.open;
         networkInterceptor._originalXHRSend = XMLHttpRequest.prototype.send;
+        XMLHttpRequest.prototype.setRequestHeader = function (header, value) {
+            this[PENDO_HEADERS_KEY] = this[PENDO_HEADERS_KEY] || {};
+            this[PENDO_HEADERS_KEY][header] = value;
+            return networkInterceptor._originalSetRequestHeader.apply(this, arguments);
+        };
         XMLHttpRequest.prototype.open = function (method, url) {
-            this._method = method; // Store data per XHR instance
+            this._method = method;
             this._url = url;
+            this._requestId = networkInterceptor.generateRequestId();
             return networkInterceptor._originalXHROpen.apply(this, arguments);
         };
         XMLHttpRequest.prototype.send = function (body) {
+            const xhr = this;
+            const headers = networkInterceptor.extractXHRHeaders(this);
+            const safeBody = networkInterceptor.safelySerializeBody(body);
             try {
-                const headers = networkInterceptor.extractXHRHeaders(this);
-                const safeBody = networkInterceptor.safelySerializeBody(body);
                 _.each(networkInterceptor.callbackFns, ({ request }) => {
                     if (_.isFunction(request)) {
                         request({
+                            requestId: this._requestId,
                             method: this._method || 'GET',
                             url: this._url,
                             body: safeBody,
@@ -26398,7 +26537,7 @@ class NetworkRequestIntercept {
             catch (e) {
                 _.each(networkInterceptor.callbackFns, ({ error }) => {
                     if (_.isFunction(error))
-                        error({ context: 'xhr', error: e });
+                        error({ context: 'xhrRequest', error: e });
                 });
             }
             // Clean up custom headers after the request completes
@@ -26407,9 +26546,49 @@ class NetworkRequestIntercept {
                     delete this[PENDO_HEADERS_KEY];
                 }, { once: true });
             }
+            // Set up response tracking
+            const originalOnReadyStateChange = xhr.onreadystatechange;
+            xhr.onreadystatechange = function () {
+                if (xhr.readyState === 4) { // Request completed
+                    try {
+                        const headers = networkInterceptor.parseXHRResponseHeaders(xhr.getAllResponseHeaders());
+                        const { status, statusText, responseText: body, _url } = xhr;
+                        _.each(networkInterceptor.callbackFns, ({ response }) => {
+                            if (_.isFunction(response)) {
+                                response({
+                                    requestId: xhr._requestId,
+                                    status,
+                                    statusText,
+                                    headers,
+                                    body,
+                                    url: _url,
+                                    method: xhr._method || 'GET'
+                                });
+                            }
+                        });
+                    }
+                    catch (e) {
+                        _.each(networkInterceptor.callbackFns, ({ error }) => {
+                            if (_.isFunction(error))
+                                error({ context: 'xhrResponse', error: e });
+                        });
+                    }
+                }
+                if (originalOnReadyStateChange) {
+                    originalOnReadyStateChange.apply(this, arguments);
+                }
+            };
             return networkInterceptor._originalXHRSend.apply(this, arguments);
         };
     }
+    patchNetwork() {
+        const networkInterceptor = this;
+        if (networkInterceptor._networkPatched)
+            return;
+        networkInterceptor._networkPatched = true;
+        networkInterceptor.patchFetch();
+        networkInterceptor.patchXHR();
+    }
     on({ request, response, error } = {}) {
         if (!this.callbackFns) {
             this.callbackFns = [];
@@ -26417,7 +26596,7 @@ class NetworkRequestIntercept {
         if (_.isFunction(request) || _.isFunction(response) || _.isFunction(error)) {
             this.callbackFns.push({ request, response, error });
         }
-        if (!this._networkPatched && !this._patching) {
+        if (!this._networkPatched) {
             this.patchNetwork();
         }
         return this;
@@ -27237,6 +27416,8 @@ const PluginAPI = {
         collectEvent
     },
     attachEvent,
+    attachEventInternal,
+    detachEventInternal,
     ConfigReader,
     Events,
     EventTracer,
@@ -28201,6 +28382,9 @@ var BuildingBlockGuides = (function () {
     function renderGuideFromJSON(json, step, guides, options) {
         options = options || {};
         var guide = step.getGuide();
+        if (step.isDarkMode === undefined) {
+            syncColorMode(step);
+        }
         var containerJSON = findGuideContainerJSON(json);
         var isResourceCenter = _.get(guide, 'attributes.resourceCenter');
         if (isResourceCenter) {
@@ -31068,6 +31252,10 @@ var GuideDisplay = (function () {
             if (step.type !== 'whatsnew' && !step.isShown()) {
                 return false;
             }
+            if (isGuideRequestPending()) {
+                log.info('guides are loading.', { contexts: ['guides', 'loading'] });
+                return false;
+            }
             step.unlock();
             step._show(reason);
             return step.isShown();
@@ -31552,6 +31740,7 @@ function GuideStep(guide) {
             step.seenState = 'active';
             setSeenTime(getNow());
             var seenProps = {
+                color_mode: step.isDarkMode ? 'dark' : 'default',
                 last_updated_at: step.lastUpdatedAt
             };
             var pollTypes = this.getStepPollTypes(guide, step);
@@ -33243,7 +33432,7 @@ const DebuggerModule = (() => {
         location: { type: SYNC_TYPES.BOTTOM_UP, defaultValue: {} }
     };
     const actions = {
-        init: (context) => {
+        init: (context, buffer) => {
             context.commit('setFrameId', EventTracer.getFrameId());
             context.commit('setTabId', EventTracer.getTabId());
             context.commit('setInstallType', getInstallType());
@@ -33263,6 +33452,7 @@ const DebuggerModule = (() => {
                     frameId: context.state.frameId
                 });
             }
+            _.each(buffer.events, (event) => eventCapturedFn(event));
         },
         join: (context, data) => {
             if (context.state.frameId === data.frameId)
@@ -36956,12 +37146,18 @@ function disableDebugging() {
 _.extend(debug, debugging);
 
 const waitForLeader = (Events, store, q) => {
+    const buffer = {
+        events: []
+    };
+    Events.on('eventCaptured', (evt) => {
+        buffer.events.push(evt);
+    });
     if (store.getters['frames/leaderExists']()) {
-        return q.resolve();
+        return q.resolve(buffer);
     }
     const deferred = q.defer();
     Events.on('leaderChanged', () => {
-        deferred.resolve();
+        deferred.resolve(buffer);
     });
     return deferred.promise;
 };
@@ -36976,8 +37172,8 @@ const DebuggerLauncher = (function () {
     function initialize(pendo, PluginAPI) {
         const { Events, q } = PluginAPI;
         store = PluginAPI.store;
-        waitForLeader(Events, store, q).then(() => {
-            store.dispatch('debugger/init');
+        waitForLeader(Events, store, q).then((buffer) => {
+            store.dispatch('debugger/init', buffer);
             if (store.getters['frames/isLeader']()) {
                 startDebuggingModuleIfEnabled();
             }
@@ -44343,13 +44539,15 @@ class MutationBuffer {
         index.childNodes(textarea),
         (cn) => index.textContent(cn) || ""
       ).join("");
+      const needsMask = needMaskingText(textarea, this.maskTextClass, this.maskTextSelector, true);
       item.attributes.value = maskInputValue({
         element: textarea,
         maskInputOptions: this.maskInputOptions,
         tagName: textarea.tagName,
         type: getInputType(textarea),
         value,
-        maskInputFn: this.maskInputFn
+        maskInputFn: this.maskInputFn,
+        needsMask
       });
     });
     __publicField(this, "processMutation", (m) => {
@@ -52555,6 +52753,12 @@ class SessionRecorder {
             return;
         clearTimeout(this._changeIdentityTimer);
         if (this.isRecording()) {
+            this.logStopReason('IDENTITY_CHANGED', {
+                previousVisitorId: this.visitorId,
+                newVisitorId: identifyEvent.data[0].visitor_id,
+                previousAccountId: this.accountId,
+                newAccountId: identifyEvent.data[0].account_id
+            });
             this.stop();
         }
         this.visitorId = identifyEvent.data[0].visitor_id;
@@ -52650,7 +52854,7 @@ class SessionRecorder {
         this._start();
     }
     _markEvents(events) {
-        if (!this.recordingId)
+        if (!this.recordingId || !this.isRecording())
             return;
         for (var e of events) {
             if ((e.visitor_id === this.visitorId || e.visitorId === this.visitorId) && e.type !== 'identify') {
@@ -52968,6 +53172,8 @@ class SessionRecorder {
         }
     }
     addRecordingId(event) {
+        if (!this.isRecording())
+            return;
         if (!this.recordingId || !event || !event.data || !event.data.length)
             return;
         var capturedEvent = event.data[0];
@@ -52976,6 +53182,10 @@ class SessionRecorder {
         if (capturedEvent.visitor_id !== this.visitorId && capturedEvent.visitorId !== this.visitorId) {
             // visitor id has already diverged from the agent, we'll stop sending events and just return here
             this.api.log.warn('Visitor id has diverged from agent');
+            this.logStopReason('VISITOR_ID_DIVERGED', {
+                agentVisitorId: capturedEvent.visitor_id || capturedEvent.visitorId,
+                recordingVisitorId: this.visitorId
+            });
             this.stop();
             return;
         }
@@ -54155,6 +54365,168 @@ function scrubPII(string) {
     return Object.values(PII_PATTERN).reduce((str, pattern) => str.replace(pattern, PII_REPLACEMENT), string);
 }
 
+/**
+ * Determines the type of resource that was blocked based on the blocked URI and CSP directive.
+ *
+ * @param {string} blockedURI - The URI that was blocked by the CSP policy (can be 'inline', 'eval', or a URL)
+ * @param {string} directive - The CSP directive that caused the violation (e.g., 'script-src', 'style-src')
+ * @returns {string} A human-readable description of the resource type
+ *
+ * @example
+ * getResourceType('inline', 'script-src') // returns 'inline script'
+ * getResourceType('https://example.com/script.js', 'script-src') // returns 'script'
+ * getResourceType('https://example.com/image.jpg', 'img-src') // returns 'image'
+ * getResourceType('https://example.com/worker.js', 'worker-src') // returns 'worker'
+ */
+function getResourceType(blockedURI, directive) {
+    if (!directive || typeof directive !== 'string')
+        return 'resource';
+    const d = directive.toLowerCase();
+    if (blockedURI === 'inline') {
+        if (d.includes('script-src-attr')) {
+            return 'inline event handler';
+        }
+        if (d.includes('style-src-attr')) {
+            return 'inline style attribute';
+        }
+        if (d.includes('script')) {
+            return 'inline script';
+        }
+        if (d.includes('style')) {
+            return 'inline style';
+        }
+    }
+    if (blockedURI === 'eval') {
+        return 'eval script execution';
+    }
+    if (d.includes('worker'))
+        return 'worker';
+    if (d.includes('script')) {
+        return d.includes('elem') ? 'script element' : 'script';
+    }
+    if (d.includes('style')) {
+        return d.includes('elem') ? 'style element' : 'stylesheet';
+    }
+    if (d.includes('img'))
+        return 'image';
+    if (d.includes('font'))
+        return 'font';
+    if (d.includes('connect'))
+        return 'network request';
+    if (d.includes('media'))
+        return 'media resource';
+    if (d.includes('frame-ancestors'))
+        return 'display of your page in a frame';
+    if (d.includes('frame'))
+        return 'frame';
+    if (d.includes('manifest'))
+        return 'manifest';
+    if (d.includes('base-uri'))
+        return 'base URI';
+    if (d.includes('form-action'))
+        return 'form submission';
+    return 'resource';
+}
+/**
+ * Finds a specific directive in a CSP policy string and returns it with its value.
+ *
+ * @param {string} policy - The complete original CSP policy string (semicolon-separated directives)
+ * @param {string} directiveName - The name of the directive to find (e.g., 'script-src', 'style-src')
+ * @returns {string} The complete directive with its value if found, empty string otherwise
+ *
+ * @example
+ * getDirective('script-src \'self\'; style-src \'self\'', 'script-src') // returns 'script-src \'self\''
+ */
+function getDirective(policy, directiveName) {
+    if (!policy || !directiveName)
+        return '';
+    const needle = directiveName.toLowerCase();
+    for (const directive of policy.split(';')) {
+        const trimmed = directive.trim();
+        const lower = trimmed.toLowerCase();
+        if (lower === needle || lower.startsWith(`${needle} `)) {
+            return trimmed;
+        }
+    }
+    return '';
+}
+/**
+ * Determines the appropriate article (A/An) for a given phrase based on its first letter.
+ *
+ * @param {string} phrase - The phrase to determine the article for
+ * @returns {string} Either 'A' or 'An' based on whether the phrase starts with a vowel sound
+ *
+ * @example
+ * getArticle('script') // returns 'A'
+ * getArticle('image') // returns 'An'
+ * getArticle('stylesheet') // returns 'A'
+ * getArticle('') // returns 'A' (fallback for empty string)
+ * getArticle(undefined) // returns 'A' (fallback for undefined)
+ */
+function getArticle(phrase) {
+    if (!phrase || typeof phrase !== 'string')
+        return 'A';
+    const c = phrase.trim().charAt(0).toLowerCase();
+    return 'aeiou'.includes(c) ? 'An' : 'A';
+}
+/**
+ * Returns the original blocked URI when it looks like a URL or scheme,
+ * otherwise returns an empty string for special cases.
+ *
+ * @param {string} blockedURI - The URI that was blocked (can be 'inline', 'eval', or a URL/scheme)
+ * @returns {string} The blocked URI or an empty string for special cases like 'inline' or 'eval'
+ *
+ * @example
+ * formatBlockedUri('https://example.com/script.js') // returns 'https://example.com/script.js'
+ * formatBlockedUri('inline') // returns ''
+ * formatBlockedUri('blob') // returns 'blob'
+ */
+function formatBlockedUri(blockedURI) {
+    if (!blockedURI || blockedURI === 'inline' || blockedURI === 'eval')
+        return '';
+    return blockedURI;
+}
+/**
+ * Formats a CSP violation message for console output.
+ *
+ * @param {string} blockedURI - The URI that was blocked by the CSP policy (can be 'inline', 'eval', or a URL)
+ * @param {string} directive - The CSP directive that caused the violation (e.g., 'script-src', 'frame-ancestors')
+ * @param {boolean} isReportOnly - Whether this is a report-only policy violation (adds " (Report-Only)" to message)
+ * @param {string} originalPolicy - The complete CSP policy that was violated
+ * @returns {string} A formatted readable CSP violation message
+ *
+ * @example
+ * createCspViolationMessage(
+ *   'https://example.com/script.js',
+ *   'script-src',
+ *   false,
+ *   'script-src \'self\'; style-src \'self\''
+ * )
+ * // returns: "Content Security Policy: A script from https://example.com/script.js was blocked by your site's `script-src 'self'` policy.\nCurrent CSP: \"script-src 'self'; style-src 'self'\"."
+ */
+function createCspViolationMessage(blockedURI, directive, isReportOnly, originalPolicy) {
+    if (!directive || typeof directive !== 'string') {
+        return 'Content Security Policy: Unknown violation occurred.';
+    }
+    try {
+        const reportOnlyText = isReportOnly ? ' (Report-Only)' : '';
+        // special case for frame-ancestors since it doesn't fit our template at all
+        if ((directive === null || directive === void 0 ? void 0 : directive.toLowerCase()) === 'frame-ancestors') {
+            return `Content Security Policy${reportOnlyText}: The display of ${blockedURI} in a frame was blocked because an ancestor violates your site's frame-ancestors policy.\nCurrent CSP: "${originalPolicy}".`;
+        }
+        const resourceType = getResourceType(blockedURI, directive);
+        const article = getArticle(resourceType);
+        const source = formatBlockedUri(blockedURI);
+        const directiveValue = getDirective(originalPolicy, directive);
+        const policyDisplay = directiveValue || directive;
+        const resourceDescription = `${article} ${resourceType}${source ? ` from ${source}` : ''}`;
+        return `Content Security Policy${reportOnlyText}: ${resourceDescription} was blocked by your site's \`${policyDisplay}\` policy.\nCurrent CSP: "${originalPolicy}".`;
+    }
+    catch (error) {
+        return `Content Security Policy: Error formatting violation message: ${error.message}`;
+    }
+}
+
 const DEV_LOG_LEVELS = ['info', 'warn', 'error'];
 const TOKEN_MAX_SIZE = 100;
 const TOKEN_REFILL_RATE = 10;
@@ -56289,6 +56661,7 @@ function ConsoleCapture() {
         onAppUnloaded,
         onPtmPaused,
         onPtmUnpaused,
+        securityPolicyViolationFn,
         get buffer() {
             return buffer;
         },
@@ -56317,7 +56690,7 @@ function ConsoleCapture() {
             }
         }, SEND_INTERVAL);
         sendQueue.start();
-        pluginAPI.Events.ready.on(addIntercepts);
+        pluginAPI.Events.ready.on(readyHandler);
         pluginAPI.Events.appUnloaded.on(onAppUnloaded);
         pluginAPI.Events.appHidden.on(onAppHidden);
         pluginAPI.Events['ptm:paused'].on(onPtmPaused);
@@ -56352,6 +56725,10 @@ function ConsoleCapture() {
             url: globalPendo.url.get()
         };
     }
+    function readyHandler() {
+        addIntercepts();
+        pluginAPI.attachEventInternal(window, 'securitypolicyviolation', securityPolicyViolationFn);
+    }
     function addIntercepts() {
         _.each(CONSOLE_METHODS, function (methodName) {
             const originalMethod = console[methodName];
@@ -56368,7 +56745,21 @@ function ConsoleCapture() {
             };
         });
     }
-    function createConsoleEvent(args, methodName) {
+    function securityPolicyViolationFn(evt) {
+        if (!evt || typeof evt !== 'object')
+            return;
+        const { blockedURI, violatedDirective, effectiveDirective, disposition, originalPolicy } = evt;
+        const directive = violatedDirective || effectiveDirective;
+        const isReportOnly = disposition === 'report';
+        const message = createCspViolationMessage(blockedURI, directive, isReportOnly, originalPolicy);
+        if (isReportOnly) {
+            createConsoleEvent([message], 'warn', { skipStackTrace: true, skipScrubPII: true });
+        }
+        else {
+            createConsoleEvent([message], 'error', { skipStackTrace: true, skipScrubPII: true });
+        }
+    }
+    function createConsoleEvent(args, methodName, { skipStackTrace = false, skipScrubPII = false } = {}) {
         if (!args || args.length === 0)
             return;
         // stringify args
@@ -56385,8 +56776,11 @@ function ConsoleCapture() {
         if (!message)
             return;
         // capture stack trace
-        const maxStackFrames = methodName === 'error' ? 4 : 1;
-        let stackTrace = captureStackTrace(maxStackFrames);
+        let stackTrace = '';
+        if (!skipStackTrace) {
+            const maxStackFrames = methodName === 'error' ? 4 : 1;
+            stackTrace = captureStackTrace(maxStackFrames);
+        }
         // truncate message and stack trace
         message = truncate(message);
         stackTrace = truncate(stackTrace);
@@ -56397,7 +56791,7 @@ function ConsoleCapture() {
             return;
         }
         const devLogEnvelope = createDevLogEnvelope();
-        const consoleEvent = Object.assign(Object.assign({}, devLogEnvelope), { devLogLevel: methodName === 'log' ? 'info' : methodName, devLogMessage: scrubPII(message), devLogTrace: stackTrace, devLogCount: 1 });
+        const consoleEvent = Object.assign(Object.assign({}, devLogEnvelope), { devLogLevel: methodName === 'log' ? 'info' : methodName, devLogMessage: skipScrubPII ? message : scrubPII(message), devLogTrace: stackTrace, devLogCount: 1 });
         const wasAccepted = buffer.push(consoleEvent);
         if (wasAccepted) {
             if (!isPtmPaused) {
@@ -56459,6 +56853,7 @@ function ConsoleCapture() {
         pluginAPI.Events.appUnloaded.off(onAppUnloaded);
         pluginAPI.Events['ptm:paused'].off(onPtmPaused);
         pluginAPI.Events['ptm:unpaused'].off(onPtmUnpaused);
+        pluginAPI.detachEventInternal(window, 'securitypolicyviolation', securityPolicyViolationFn);
         _.each(CONSOLE_METHODS, function (methodName) {
             if (!console[methodName])
                 return _.noop;