@thoughtspot/visual-embed-sdk 1.32.0 → 1.33.0-alpha.2

package/src/embed/search.ts

@@ -88,6 +88,19 @@ export interface SearchViewConfig
      * ```
      */
     collapseDataSources?: boolean;
+    /**
+     * If set to true, the data panel is collapsed on load,
+     * but can be expanded manually.
+     * @version: SDK: 1.34.0 | ThoughtSpot: 10.3.0.cl
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    collapseDataPanel:true,
+     * })
+     * ```
+     */
+    collapseDataPanel?: boolean;
     /**
      * Show or hide the data sources panel.
      * @version: SDK: 1.2.0 | ThoughtSpot: 9.1.0.sw
@@ -216,7 +229,7 @@ export interface SearchViewConfig
     hideSearchBar?: boolean;
     /**
      * Flag to control Data panel experience
-     * @default false
+     * @default true
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
      * @example
      * ```js
@@ -236,6 +249,7 @@ export interface SearchViewConfig
      * To set the initial state of the search bar in case of saved-answers.
      * @default false
      * @version SDK: 1.32.0 | Thoughtspot: 10.0.0.cl
+     * @deprecated Use {@link collapseSearchBar} instead
      */
     collapseSearchBarInitially?: boolean;
     /**
@@ -320,7 +334,8 @@ export class SearchEmbed extends TsEmbed {
      */
     private getDataSourceMode() {
         let dataSourceMode = DataSourceVisualMode.Expanded;
-        if (this.viewConfig.collapseDataSources === true) {
+        if (this.viewConfig.collapseDataSources === true
+            || this.viewConfig.collapseDataPanel === true) {
             dataSourceMode = DataSourceVisualMode.Collapsed;
         }
         if (this.viewConfig.hideDataSources === true) {
@@ -341,7 +356,7 @@ export class SearchEmbed extends TsEmbed {
             dataSources,
             excludeRuntimeFiltersfromURL,
             hideSearchBar,
-            dataPanelV2 = false,
+            dataPanelV2 = true,
             useLastSelectedSources = false,
             runtimeParameters,
             collapseSearchBarInitially = false,
@@ -351,6 +366,7 @@ export class SearchEmbed extends TsEmbed {
             dataPanelCustomGroupsAccordionInitialState = DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL,
             focusSearchBarOnRender = true,
             excludeRuntimeParametersfromURL,
+            collapseSearchBar = true,
         } = this.viewConfig;
         const queryParams = this.getBaseQueryParams();
 
@@ -406,7 +422,8 @@ export class SearchEmbed extends TsEmbed {
         }
 
         queryParams[Param.searchEmbed] = true;
-        queryParams[Param.CollapseSearchBarInitially] = collapseSearchBarInitially;
+        /* eslint-disable-next-line max-len */
+        queryParams[Param.CollapseSearchBarInitially] = collapseSearchBarInitially || collapseSearchBar;
         queryParams[Param.EnableCustomColumnGroups] = enableCustomColumnGroups;
         if (dataPanelCustomGroupsAccordionInitialState
             === DataPanelCustomColumnGroupsAccordionState.COLLAPSE_ALL

package/src/embed/ts-embed.ts

@@ -59,6 +59,7 @@ import {
 } from './base';
 import { AuthFailureType } from '../auth';
 import { getEmbedConfig } from './embedConfig';
+import { ERROR_MESSAGE } from '../errors';
 
 const { version } = pkgInfo;
 
@@ -347,7 +348,7 @@ export class TsEmbed {
                     data: { authToken },
                 });
             } catch (e) {
-                logger.error(`Received invalid token. Error : ${e?.message}`);
+                logger.error(`${ERROR_MESSAGE.INVALID_TOKEN_ERROR} Error : ${e?.message}`);
                 processAuthFailure(e, this.isPreRendered ? this.preRenderWrapper : this.el);
             }
         } else if (autoLogin) {
@@ -387,7 +388,9 @@ export class TsEmbed {
      * @param queryParams
      * @returns queryParams
      */
-    protected getBaseQueryParams(queryParams = {}) {
+    protected getBaseQueryParams(
+        queryParams: Record<any, any> = {},
+    ) {
         let hostAppUrl = window?.location?.host || '';
 
         // The below check is needed because TS Cloud firewall, blocks
@@ -438,6 +441,7 @@ export class TsEmbed {
             contextMenuTrigger,
             linkOverride,
             insertInToSlide,
+            disableRedirectionLinksInNewTab,
         } = this.viewConfig;
 
         if (Array.isArray(visibleActions) && Array.isArray(hiddenActions)) {
@@ -505,6 +509,9 @@ export class TsEmbed {
         if (insertInToSlide) {
             queryParams[Param.ShowInsertToSlide] = insertInToSlide;
         }
+        if (disableRedirectionLinksInNewTab) {
+            queryParams[Param.DisableRedirectionLinksInNewTab] = disableRedirectionLinksInNewTab;
+        }
 
         queryParams[Param.OverrideNativeConsole] = true;
         queryParams[Param.ClientLogLevel] = this.embedConfig.logLevel;
@@ -557,7 +564,7 @@ export class TsEmbed {
         iFrame.mozallowfullscreen = true;
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        iFrame.allow = 'clipboard-read; clipboard-write';
+        iFrame.allow = 'clipboard-read; clipboard-write fullscreen';
 
         const {
             height: frameHeight,
@@ -1000,7 +1007,7 @@ export class TsEmbed {
      */
     public preRender(showPreRenderByDefault = false): TsEmbed {
         if (!this.viewConfig.preRenderId) {
-            logger.error('PreRender id is required for preRender');
+            logger.error(ERROR_MESSAGE.PRERENDER_ID_MISSING);
             return this;
         }
         this.isPreRendered = true;
@@ -1107,7 +1114,7 @@ export class TsEmbed {
      */
     public showPreRender(): void {
         if (!this.viewConfig.preRenderId) {
-            logger.error('PreRender id is required for preRender');
+            logger.error(ERROR_MESSAGE.PRERENDER_ID_MISSING);
             return;
         }
         if (!this.isPreRenderAvailable()) {
@@ -1155,7 +1162,7 @@ export class TsEmbed {
      */
     public syncPreRenderStyle(): void {
         if (!this.isPreRenderAvailable() || !this.el) {
-            logger.error('PreRender should be called before using syncPreRenderStyle');
+            logger.error(ERROR_MESSAGE.SYNC_STYLE_CALLED_BEFORE_RENDER);
             return;
         }
         const elBoundingClient = this.el.getBoundingClientRect();

package/src/errors.ts

@@ -4,4 +4,15 @@ export const ERROR_MESSAGE = {
     TRIGGER_TIMED_OUT: 'Trigger timedout in getting response',
     SEARCHEMBED_BETA_WRANING_MESSAGE: 'Search Embed is in Beta in this release.',
     SAGE_EMBED_BETA_WARNING_MESSAGE: 'Sage Embed is in Beta in this release.',
+    THIRD_PARTY_COOKIE_BLOCKED_ALERT: 'Third party cookie access is blocked on this browser, please allow third party cookies for this to work properly. \nYou can use `suppressNoCookieAccessAlert` to suppress this message.',
+    DUPLICATE_TOKEN_ERR: 'Duplicate token, please issue a new token every time getAuthToken callback is called. See https://developers.thoughtspot.com/docs/?pageid=embed-auth#trusted-auth-embed for more details.',
+    SDK_NOT_INITIALIZED: 'SDK not initialized',
+    SESSION_INFO_FAILED: 'Failed to get session info',
+    INVALID_TOKEN_ERROR: 'Received invalid token from getAuthToken callback or authToken endpoint.',
+    MIXPANEL_TOKEN_NOT_FOUND: 'Mixpanel token not found in session info',
+    PRERENDER_ID_MISSING: 'PreRender id is required for preRender',
+    SYNC_STYLE_CALLED_BEFORE_RENDER: 'PreRender should be called before using syncPreRenderStyle',
+    CSP_VIOLATION_ALERT: 'CSP violation detected. Please check the console errors for more details.',
+    CSP_FRAME_HOST_VIOLATION_LOG_MESSAGE: 'Please setup CSP Correctly for the Application to start working. You can know more about setting CSP Correctly here: https://developers.thoughtspot.com/docs/security-settings#csp-viz-embed-hosts. \n In case you are still facing error, please read: https://developers.thoughtspot.com/docs/security-settings#csp-viz-embed-hosts',
+    MISSING_REPORTING_OBSERVER: 'ReportingObserver not supported',
 };

package/src/mixpanel-service.ts

@@ -1,6 +1,7 @@
 import * as mixpanel from 'mixpanel-browser';
 import { logger } from './utils/logger';
 import { SessionInfo } from './utils/sessionInfoService';
+import { ERROR_MESSAGE } from './errors';
 
 export const EndPoints = {
     CONFIG: '/callosum/v1/system/config',
@@ -57,7 +58,7 @@ function emptyQueue() {
  */
 export function initMixpanel(sessionInfo: SessionInfo): void {
     if (!sessionInfo || !sessionInfo.mixpanelToken) {
-        logger.error('Mixpanel token not found in session info');
+        logger.error(ERROR_MESSAGE.MIXPANEL_TOKEN_NOT_FOUND);
         return;
     }
     // On a public cluster the user is anonymous, so don't set the identify to

package/src/react/index.spec.tsx

@@ -56,7 +56,7 @@ describe('React Components', () => {
                 ),
             ).toBe(true);
             expect(getIFrameSrc(container)).toBe(
-                `http://${thoughtSpotHost}/?hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}&authType=None&blockNonEmbedFullAppAccess=true&hideAction=[%22${Action.ReportError}%22,%22editACopy%22,%22saveAsView%22,%22updateTSL%22,%22editTSL%22,%22onDeleteAnswer%22]&overrideConsoleLogs=true&clientLogLevel=ERROR&enableDataPanelV2=false&dataSourceMode=hide&useLastSelectedSources=false&isSearchEmbed=true&collapseSearchBarInitially=false&enableCustomColumnGroups=false&dataPanelCustomGroupsAccordionInitialState=EXPAND_ALL#/embed/answer`,
+                `http://${thoughtSpotHost}/?hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}&authType=None&blockNonEmbedFullAppAccess=true&hideAction=[%22${Action.ReportError}%22,%22editACopy%22,%22saveAsView%22,%22updateTSL%22,%22editTSL%22,%22onDeleteAnswer%22]&overrideConsoleLogs=true&clientLogLevel=ERROR&enableDataPanelV2=true&dataSourceMode=hide&useLastSelectedSources=false&isSearchEmbed=true&collapseSearchBarInitially=true&enableCustomColumnGroups=false&dataPanelCustomGroupsAccordionInitialState=EXPAND_ALL#/embed/answer`,
             );
         });
 

package/src/types.ts

@@ -201,6 +201,10 @@ export enum HomeLeftNavItem {
      * @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl
      */
     SpotIQAnalysis = 'spotiq-analysis',
+    /**
+     * @version SDK: 1.34.0| ThoughtSpot: 10.3.0.cl
+     */
+    LiveboardSchedules = 'liveboard-schedules'
 }
 export type DOMSelector = string | HTMLElement;
 
@@ -588,7 +592,7 @@ export interface EmbedConfig {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface LayoutConfig { }
+export interface LayoutConfig {}
 
 /**
  * Embedded iframe configuration
@@ -1012,6 +1016,30 @@ export interface ViewConfig {
      */
     // eslint-disable-next-line camelcase
     enableV2Shell_experimental?: boolean;
+    /**
+     * To set the initial state of the search bar in case of saved-answers.
+     * @default true
+     * @version SDK: 1.34.0 | Thoughtspot: 10.3.0.cl
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed', {
+     *   liveboardId: '123',
+     *   collapseSearchBar: true
+     * });
+     */
+    collapseSearchBar?: boolean;
+    /**
+     * This flag can be used to disable links inside the embedded app,
+     * and disables redirection of links in a new tab.
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed', {
+     *   disableRedirectionLinksInNewTab: true
+     * });
+     * ```
+     * @version SDK: 1.32.1 | ThoughtSpot: 10.3.0.cl
+     */
+    disableRedirectionLinksInNewTab?: boolean;
 }
 
 /**
@@ -2493,13 +2521,15 @@ export enum HostEvent {
      *
      * @example
      * ```js
-     * appEmbed.trigger(HostEvent.CreateMonitor)
+     * searchEmbed.trigger(HostEvent.CreateMonitor)
      * ```
      * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1.sw
      */
     CreateMonitor = 'createMonitor',
     /**
-     * Trigger the **Manage alerts** action on a visualization
+     * Trigger the **Manage alerts** action on a KPI chart
+     * in a visualization or saved Answer.
+     *
      * @param - an object with `vizId` as a key
      * @example
      * ```js
@@ -2507,6 +2537,16 @@ export enum HostEvent {
      *  vizId: '730496d6-6903-4601-937e-2c691821af3c'
      * })
      * ```
+     *
+     * @example
+     * ```js
+     * searchEmbed.trigger(HostEvent.ManageMonitor)
+     * ```
+     *
+     * @example
+     * ```js
+     * vizEmbed.trigger(HostEvent.ManageMonitor)
+     * ```
      * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1.sw
      */
     ManageMonitor = 'manageMonitor',
@@ -3084,6 +3124,8 @@ export enum Param {
     IsFullAppEmbed = 'isFullAppEmbed',
     IsOnBeforeGetVizDataInterceptEnabled = 'isOnBeforeGetVizDataInterceptEnabled',
     FocusSearchBarOnRender = 'focusSearchBarOnRender',
+    DisableRedirectionLinksInNewTab = 'disableRedirectionLinksInNewTab',
+    HomePageSearchBarMode = 'homePageSearchBarMode',
 }
 
 /**
@@ -3234,6 +3276,7 @@ export enum Action {
      */
     ConfigureFilter = 'configureFilter',
     CollapseDataSources = 'collapseDataSources',
+    CollapseDataPanel = 'collapseDataPanel',
     /**
      * The **Choose sources** button on Search page.
      * Allows selecting data sources for search queries.
@@ -3630,12 +3673,15 @@ export enum Action {
      * The Create alert action on KPI charts.
      * @example
      * ```js
-     * disabledActions: [Action.CreateMonitor ]
+     * disabledActions: [Action.CreateMonitor]
      * ```
      * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl, 8.4.1.sw
      */
     CreateMonitor = 'createMonitor',
     /**
+     * @deprecated
+     * Reports errors
+     *
      * @example
      * ```js
      * disabledActions: [Action.ReportError]
@@ -3860,35 +3906,84 @@ export enum Action {
      */
     RenameModalTitleDescription = 'renameModalTitleDescription',
     /**
+     *
+     * @example
+     * ```js
+     * disabledActions: [Action.RequestVerification]
+     * ```
      *
      * @version SDK: 1.25.0 | Thoughtspot: 9.6.0.cl
      */
     RequestVerification = 'requestVerification',
     /**
+     *
+     * Allows users to mark a Liveboard as verified.
+     *
+     * @example
+     * ```js
+     * disabledActions: [Action.MarkAsVerified]
+     * ```
      * @version SDK: 1.25.0 | Thoughtspot: 9.6.0.cl
      */
     MarkAsVerified = 'markAsVerified',
     /**
+     * The **Add Tab** action on a Liveboard.
+     * Allows adding a new tab to a Liveboard view.
+     *
+     * @example
+     * ```js
+     * disabledActions: [Action.AddTab]
+     * ```
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
      */
     AddTab = 'addTab',
     /**
+     *
+     * Initiates contextual change analysis on KPI charts.
+     *
+     * @example
+     * ```js
+     * disabledActions: [Action.EnableContextualChangeAnalysis]
+     * ```
      * @version SDK: 1.25.0 | Thoughtspot: 9.6.0.cl
      */
     EnableContextualChangeAnalysis = 'enableContextualChangeAnalysis',
     /**
+     *
+     * @example
+     * ```js
+     * disabledActions: [Action.ShowSageQuery]
+     * ```
+     *
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
      */
     ShowSageQuery = 'showSageQuery',
     /**
+     *
+     * @example
+     * ```js
+     * disabledActions: [Action.EditSageAnswer]
+     * ```
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
      */
     EditSageAnswer = 'editSageAnswer',
     /**
+     *
+     * This action allows users to send feedback on AI-generated Answers.
+     *
+     * @example
+     * ```js
+     * disabledActions: [Action.SageAnswerFeedback]
+     * ```
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
      */
     SageAnswerFeedback = 'sageAnswerFeedback',
     /**
+     *
+     * @example
+     * ```js
+     * disabledActions: [Action.ModifySageAnswer]
+     * ```
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
      */
     ModifySageAnswer = 'modifySageAnswer',
@@ -4018,6 +4113,66 @@ export enum Action {
      *  @version SDK: 1.27.10 | Thoughtspot: 9.12.5.cl
      */
     AIHighlights = 'AIHighlights',
+
+    /**
+     * Action ID for edit schedule action on schedule on homepage
+     * @example
+     * ```js
+     * disabledActions: [Action.EditScheduleHomepage]
+     * ```
+     *  @version SDK: 1.34.0 | Thoughtspot: 10.3.0.cl
+     */
+    EditScheduleHomepage = 'editScheduleHomepage',
+
+    /**
+     * Action ID for pause schedule action on schedule on homepage
+     * @example
+     * ```js
+     * disabledActions: [Action.PauseScheduleHomepage]
+     * ```
+     *  @version SDK: 1.34.0 | Thoughtspot: 10.3.0.cl
+     */
+    PauseScheduleHomepage = 'pauseScheduleHomepage',
+
+    /**
+     * Action ID for view schedule run action on schedule on homepage
+     * @example
+     * ```js
+     * disabledActions: [Action.ViewScheduleRunHomepage]
+     * ```
+     *  @version SDK: 1.34.0 | Thoughtspot: 10.3.0.cl
+     */
+    ViewScheduleRunHomepage = 'viewScheduleRunHomepage',
+
+    /**
+     * Action ID for unsubscribe schedule action on schedule on homepage
+     * @example
+     * ```js
+     * disabledActions: [Action.UnsubscribeScheduleHomepage]
+     * ```
+     *  @version SDK: 1.34.0 | Thoughtspot: 10.3.0.cl
+     */
+    UnsubscribeScheduleHomepage = 'unsubscribeScheduleHomepage',
+
+    /**
+     * Action ID for delete schedule action on schedule on homepage
+     * @example
+     * ```js
+     * disabledActions: [Action.DeleteScheduleHomepage]
+     * ```
+     *  @version SDK: 1.34.0 | Thoughtspot: 10.3.0.cl
+     */
+    DeleteScheduleHomepage = 'deleteScheduleHomepage',
+
+    /**
+     * The **Analyze CTA** action on KPI chart.
+     * @example
+     * ```js
+     * disabledActions: [Action.KPIAnalysisCTA]
+     * ```
+     *  @version SDK: 1.34.0 | Thoughtspot: 10.3.0.cl
+     */
+    KPIAnalysisCTA = 'kpiAnalysisCTA',
 }
 
 export interface AnswerServiceType {
@@ -4047,15 +4202,15 @@ export interface ColumnValue {
         [key: string]: any;
     };
     value:
-    | string
-    | number
-    | boolean
-    | {
-        v: {
-            s: number;
-            e: number;
-        };
-    };
+        | string
+        | number
+        | boolean
+        | {
+              v: {
+                  s: number;
+                  e: number;
+              };
+          };
 }
 
 export interface VizPoint {

package/src/utils/processData.ts

@@ -9,6 +9,7 @@ import { AuthFailureType } from '../auth';
 import { AuthType, CustomActionPayload, EmbedEvent } from '../types';
 import { AnswerService } from './graphql/answerService/answerService';
 import { resetCachedAuthToken } from '../authToken';
+import { ERROR_MESSAGE } from '../errors';
 
 /**
  *
@@ -62,9 +63,7 @@ function processNoCookieAccess(e: any, containerEl: Element) {
     if (!ignoreNoCookieAccess) {
         if (!suppressNoCookieAccessAlert && !suppressErrorAlerts) {
             // eslint-disable-next-line no-alert
-            alert(
-                'Third party cookie access is blocked on this browser, please allow third party cookies for this to work properly. \nYou can use `suppressNoCookieAccessAlert` to suppress this message.',
-            );
+            alert(ERROR_MESSAGE.THIRD_PARTY_COOKIE_BLOCKED_ALERT);
         }
         // eslint-disable-next-line no-param-reassign
         containerEl.innerHTML = loginFailedMessage;

package/src/utils/reporting.spec.ts

@@ -0,0 +1,91 @@
+import { setEmbedConfig } from '../embed/embedConfig';
+import { registerReportingObserver, getGlobalReportingObserver, resetGlobalReportingObserver } from './reporting';
+import { logger } from './logger';
+import { AuthType } from '../types';
+import { ERROR_MESSAGE } from '../errors';
+
+jest.mock('./logger');
+
+describe('ReportingObserver', () => {
+    let mockReportingObserver: jest.Mock;
+
+    beforeAll(() => {
+        // Mock the ReportingObserver
+        mockReportingObserver = jest.fn().mockImplementation((callback: any, options: any) => ({
+            observe: jest.fn(),
+            disconnect: jest.fn(),
+            takeRecords: jest.fn(),
+        }));
+        (window as any).ReportingObserver = mockReportingObserver;
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+        resetGlobalReportingObserver();
+    });
+
+    test('should warn if ReportingObserver is not supported', () => {
+        (window as any).ReportingObserver = undefined;
+        const observer = registerReportingObserver();
+        expect(observer).toBeNull();
+        expect(logger.warn).toHaveBeenCalledWith('ReportingObserver not supported');
+        (window as any).ReportingObserver = mockReportingObserver;
+    });
+
+    test('should return existing globalObserver if override is false', () => {
+        const firstObserver = registerReportingObserver();
+        const secondObserver = registerReportingObserver();
+        expect(firstObserver === secondObserver).toBe(true);
+    });
+
+    test('should override existing globalObserver if override is true', () => {
+        const firstObserver = registerReportingObserver();
+        const secondObserver = registerReportingObserver(true);
+        expect(firstObserver).not.toBe(secondObserver);
+    });
+
+    test('should return globalObserver', () => {
+        const observer = registerReportingObserver();
+        const globalObserver = getGlobalReportingObserver();
+        expect(globalObserver).toBe(observer);
+    });
+
+    test('Should register a global observer with callback', () => {
+        let callBackPassed: any;
+
+        // Mock the ReportingObserver
+        const NewMockRO = jest.fn().mockImplementation((callback: any, options: any) => {
+            callBackPassed = callback;
+            return ({
+                observe: jest.fn(),
+                disconnect: jest.fn(),
+                takeRecords: jest.fn(),
+            });
+        });
+        const currentObserver = (window as any).ReportingObserver;
+        (window as any).ReportingObserver = NewMockRO;
+
+        setEmbedConfig({
+            thoughtSpotHost: 'testHost',
+            authType: AuthType.None,
+        });
+
+        const mockAlert = jest.fn();
+        window.alert = mockAlert;
+
+        const observer = registerReportingObserver();
+        expect(observer).toBeDefined();
+        expect(NewMockRO).toHaveBeenCalled();
+        expect(callBackPassed).toBeDefined();
+
+        // call the callback
+        callBackPassed([{ type: 'csp-violation', url: 'testHost', body: { effectiveDirective: 'frame-ancestors' } }]);
+
+        expect(mockAlert).toHaveBeenCalledWith(ERROR_MESSAGE.CSP_VIOLATION_ALERT);
+        expect(logger.error).toHaveBeenCalledWith(
+            ERROR_MESSAGE.CSP_FRAME_HOST_VIOLATION_LOG_MESSAGE,
+        );
+
+        (window as any).ReportingObserver = currentObserver;
+    });
+});

package/src/utils/reporting.ts

@@ -0,0 +1,71 @@
+import { getEmbedConfig } from '../embed/embedConfig';
+import { logger } from './logger';
+import { ERROR_MESSAGE } from '../errors';
+
+enum ReportType {
+  CSP_VIOLATION = 'csp-violation',
+  DEPRECATION = 'deprecation',
+  INTERVENTION = 'intervention',
+}
+
+let globalObserver: ReportingObserver | null = null;
+
+/**
+ * Register a global ReportingObserver to capture all unhandled errors
+ * @param overrideExisting boolean to override existing observer
+ * @returns ReportingObserver | null
+ */
+export function registerReportingObserver(overrideExisting = false): ReportingObserver | null {
+    if (!((window as any).ReportingObserver)) {
+        logger.warn(ERROR_MESSAGE.MISSING_REPORTING_OBSERVER);
+        return null;
+    }
+
+    if (overrideExisting) {
+        resetGlobalReportingObserver();
+    }
+
+    if (globalObserver) {
+        return globalObserver;
+    }
+
+    const embedConfig = getEmbedConfig();
+
+    globalObserver = new ReportingObserver((reports) => {
+        reports.forEach((report) => {
+            const { type, url, body } = report;
+            const reportBody = body as any;
+
+            const isThoughtSpotHost = url
+                && url.startsWith(embedConfig.thoughtSpotHost);
+
+            const isFrameHostError = type === ReportType.CSP_VIOLATION
+                && reportBody.effectiveDirective === 'frame-ancestors';
+
+            if (isThoughtSpotHost && isFrameHostError) {
+                if (!embedConfig.suppressErrorAlerts) {
+                    alert(ERROR_MESSAGE.CSP_VIOLATION_ALERT);
+                }
+                logger.error(ERROR_MESSAGE.CSP_FRAME_HOST_VIOLATION_LOG_MESSAGE);
+            }
+        });
+    }, { buffered: true });
+    globalObserver.observe();
+    return globalObserver;
+}
+
+/**
+ * Get the global ReportingObserver
+ * @returns - ReportingObserver | null
+ */
+export function getGlobalReportingObserver(): ReportingObserver | null {
+    return globalObserver;
+}
+
+/**
+ * Resets the global ReportingObserver
+ */
+export function resetGlobalReportingObserver(): void {
+    if (globalObserver) globalObserver.disconnect();
+    globalObserver = null;
+}