@thoughtspot/visual-embed-sdk 1.27.0-alpha.0 → 1.27.0-loggers

package/src/embed/ts-embed.ts

@@ -8,6 +8,7 @@
  */
 
 import isEqual from 'lodash/isEqual';
+import { logger } from '../utils/logger';
 import { getAuthenticationToken } from '../authToken';
 import { AnswerService } from '../utils/graphql/answerService/answerService';
 import {
@@ -198,7 +199,7 @@ export class TsEmbed {
             error,
         });
         // Log error
-        console.error(error);
+        logger.error(error);
     }
 
     /**
@@ -282,7 +283,7 @@ export class TsEmbed {
             this.executeCallbacks(EmbedEvent.Error, {
                 offlineWarning,
             });
-            console.warn(offlineWarning);
+            logger.warn(offlineWarning);
         };
         window.addEventListener('offline', offlineEventListener);
 
@@ -502,6 +503,9 @@ export class TsEmbed {
             queryParams[Param.ShowInsertToSlide] = insertInToSlide;
         }
 
+        queryParams[Param.OverrideNativeConsole] = true;
+        queryParams[Param.ClientLogLevel] = this.embedConfig.logLevel;
+
         return queryParams;
     }
 
@@ -952,10 +956,10 @@ export class TsEmbed {
                 });
             } catch (e) {
                 eventPort.postMessage({ error: e });
-                console.log(e);
+                logger.log(e);
             }
         } else {
-            console.log('Event Port is not defined');
+            logger.log('Event Port is not defined');
         }
     }
 
@@ -983,10 +987,6 @@ export class TsEmbed {
         return this;
     }
 
-    public getIframeSrc(): string {
-        return '';
-    }
-
     protected handleRenderForPrerender() {
         this.render();
     }
@@ -998,7 +998,7 @@ export class TsEmbed {
      */
     public preRender(showPreRenderByDefault = false): TsEmbed {
         if (!this.viewConfig.preRenderId) {
-            console.error('PreRender id is required for preRender');
+            logger.error('PreRender id is required for preRender');
             return this;
         }
         this.isPreRendered = true;
@@ -1047,7 +1047,7 @@ export class TsEmbed {
             this.insertedDomEl?.parentNode.removeChild(this.insertedDomEl);
             this.unsubscribeToEvents();
         } catch (e) {
-            console.log('Error destroying TS Embed', e);
+            logger.log('Error destroying TS Embed', e);
         }
     }
 
@@ -1087,13 +1087,13 @@ export class TsEmbed {
                     !isUndefined(viewConfig[key])
                     && !isEqual(viewConfig[key], preRenderedObject.viewConfig[key])
                 ) {
-                    console.warn(
+                    logger.warn(
                         `${this.embedComponentType} was pre-rendered with `
-                        + `"${key}" as "${JSON.stringify(preRenderedObject.viewConfig[key])}" `
-                        + `but a different value "${JSON.stringify(viewConfig[key])}" `
-                        + 'was passed to the Embed component. '
-                        + 'The new value provided is ignored, the value provided during '
-                        + 'preRender is used.',
+                            + `"${key}" as "${JSON.stringify(preRenderedObject.viewConfig[key])}" `
+                            + `but a different value "${JSON.stringify(viewConfig[key])}" `
+                            + 'was passed to the Embed component. '
+                            + 'The new value provided is ignored, the value provided during '
+                            + 'preRender is used.',
                     );
                 }
             });
@@ -1108,7 +1108,7 @@ export class TsEmbed {
      */
     public showPreRender(): void {
         if (!this.viewConfig.preRenderId) {
-            console.error('PreRender id is required for preRender');
+            logger.error('PreRender id is required for preRender');
             return;
         }
         if (!this.isPreRenderAvailable()) {
@@ -1157,7 +1157,7 @@ export class TsEmbed {
      */
     public syncPreRenderStyle(): void {
         if (!this.isPreRenderAvailable() || !this.el) {
-            console.error('PreRender should be called before using syncPreRenderStyle');
+            logger.error('PreRender should be called before using syncPreRenderStyle');
             return;
         }
         const elBoundingClient = this.el.getBoundingClientRect();
@@ -1177,7 +1177,7 @@ export class TsEmbed {
     public hidePreRender(): void {
         if (!this.isPreRenderAvailable()) {
             // if the embed component is not preRendered , nothing to hide
-            console.warn('PreRender should be called before hiding it using hidePreRender.');
+            logger.warn('PreRender should be called before hiding it using hidePreRender.');
             return;
         }
         const preRenderHideStyles = {

package/src/mixpanel-service.ts

@@ -1,4 +1,5 @@
 import * as mixpanel from 'mixpanel-browser';
+import { logger } from './utils/logger';
 
 export const EndPoints = {
     CONFIG: '/callosum/v1/system/config',
@@ -77,7 +78,7 @@ export function initMixpanel(sessionInfo: any): void {
             emptyQueue();
         }
     } catch (e) {
-        console.error('Error initializing mixpanel', e);
+        logger.error('Error initializing mixpanel', e);
     }
 }
 

package/src/react/index.spec.tsx

@@ -49,7 +49,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]&enableDataPanelV2=false&dataSourceMode=hide&useLastSelectedSources=false&isSearchEmbed=true#/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=false&dataSourceMode=hide&useLastSelectedSources=false&isSearchEmbed=true#/embed/answer`,
             );
         });
 
@@ -222,7 +222,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]&dataSources=[%22test%22]&searchTokenString=%5Brevenue%5D&executeSearch=true&useLastSelectedSources=false&isSearchEmbed=true#/embed/search-bar-embed`,
+                `http://${thoughtSpotHost}/?hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}&authType=None&blockNonEmbedFullAppAccess=true&hideAction=[%22${Action.ReportError}%22]&overrideConsoleLogs=true&clientLogLevel=ERROR&dataSources=[%22test%22]&searchTokenString=%5Brevenue%5D&executeSearch=true&useLastSelectedSources=false&isSearchEmbed=true#/embed/search-bar-embed`,
             );
         });
     });

package/src/types.ts

@@ -546,6 +546,21 @@ export interface EmbedConfig {
      * @version SDK: 1.26.2 | ThoughtSpot: *
      */
     suppressErrorAlerts?: boolean;
+
+    /**
+     * Log level for the SDK.
+     * @default LogLevel.ERROR
+     *
+     * @example
+     * ```js
+     * init({
+     *   ...embedConfig,
+     *   logLevel: LogLevel.SILENT
+     * })
+     * ```
+     * @version SDK: 1.26.3 | ThoughtSpot: 9.10.0.cl
+     */
+    logLevel?: LogLevel;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -2817,6 +2832,8 @@ export enum Param {
     HideSearchBarTitle = 'hideSearchBarTitle',
     HideSageAnswerHeader = 'hideSageAnswerHeader',
     HideSearchBar = 'hideSearchBar',
+    ClientLogLevel = 'clientLogLevel',
+    OverrideNativeConsole = 'overrideConsoleLogs',
 }
 
 /**
@@ -3745,3 +3762,12 @@ export interface CustomActionPayload {
     session: SessionInterface;
     vizId?: string;
 }
+
+export enum LogLevel {
+  SILENT = 'SILENT',
+  ERROR = 'ERROR',
+  WARN = 'WARN',
+  INFO = 'INFO',
+  DEBUG = 'DEBUG',
+  TRACE = 'TRACE',
+}

package/src/utils/authService/authService.spec.ts

@@ -7,6 +7,7 @@ import {
     verifyTokenService,
     EndPoints,
 } from '.';
+import { logger } from '../logger';
 
 const thoughtSpotHost = 'http://10.79.135.124:3000';
 
@@ -74,14 +75,14 @@ describe('Unit test for authService', () => {
     });
 
     test('log error on API failures', async () => {
-        jest.spyOn(global.console, 'error').mockImplementation(() => undefined);
+        jest.spyOn(logger, 'error').mockImplementation(() => undefined);
         global.fetch = jest.fn(() => Promise.resolve({
             text: () => Promise.resolve('error'),
             status: 500,
             ok: false,
         }));
         await fetchSessionInfoService(authVerificationUrl);
-        expect(global.console.error).toHaveBeenCalledWith('Failure', 'error');
+        expect(logger.error).toHaveBeenCalledWith('Failure', 'error');
     });
 
     test('verifyTokenService', async () => {

package/src/utils/authService/authService.ts

@@ -1,3 +1,5 @@
+import { logger } from '../logger';
+
 export const EndPoints = {
     AUTH_VERIFICATION: '/callosum/v1/session/info',
     SAML_LOGIN_TEMPLATE: (targetUrl: string) => `/callosum/v1/saml/login?targetURLPath=${targetUrl}`,
@@ -18,7 +20,7 @@ export const EndPoints = {
 function failureLoggedFetch(url: string, options: RequestInit = {}): Promise<Response> {
     return fetch(url, options).then(async (r) => {
         if (!r.ok && r.type !== 'opaqueredirect' && r.type !== 'opaque') {
-            console.error('Failure', await r.text?.());
+            logger.error('Failure', await r.text?.());
         }
         return r;
     });
@@ -45,7 +47,7 @@ export async function verifyTokenService(
         });
         return res.ok;
     } catch (e) {
-        console.error(`Token Verification Service failed : ${e.message}`);
+        logger.error(`Token Verification Service failed : ${e.message}`);
     }
 
     return false;

package/src/utils/authService/tokenizedAuthService.ts

@@ -1,4 +1,5 @@
 import { tokenizedFetch } from '../../tokenizedFetch';
+import { logger } from '../logger';
 import { EndPoints } from './authService';
 
 /**
@@ -9,7 +10,7 @@ import { EndPoints } from './authService';
 function tokenisedFailureLoggedFetch(url: string, options: RequestInit = {}): Promise<Response> {
     return tokenizedFetch(url, options).then(async (r) => {
         if (!r.ok && r.type !== 'opaqueredirect' && r.type !== 'opaque') {
-            console.error('Failure', await r.text?.());
+            logger.error('Failure', await r.text?.());
         }
         return r;
     });

package/src/utils/logger.spec.ts

@@ -0,0 +1,67 @@
+let logger: any;
+let LogLevel: any;
+let setGlobalLogLevelOverride: any;
+
+const consoleErrorSpy = jest.spyOn(console, 'error');
+const consoleWarnSpy = jest.spyOn(console, 'warn');
+const consoleInfoSpy = jest.spyOn(console, 'info');
+const consoleDebugSpy = jest.spyOn(console, 'debug');
+const consoleTraceSpy = jest.spyOn(console, 'trace');
+
+describe('Logger', () => {
+    beforeAll(async () => {
+        const a = await import('./logger');
+        logger = a.logger;
+        LogLevel = a.LogLevel;
+        setGlobalLogLevelOverride = a.setGlobalLogLevelOverride;
+    });
+
+    beforeEach(() => {
+        // Reset the logger's log level before each test
+        setGlobalLogLevelOverride(LogLevel.TRACE);
+        logger.setLogLevel(LogLevel.ERROR);
+
+        consoleErrorSpy.mockRestore();
+        consoleWarnSpy.mockRestore();
+        consoleInfoSpy.mockRestore();
+        consoleDebugSpy.mockRestore();
+        consoleTraceSpy.mockRestore();
+    });
+
+    it('should set the log level correctly', () => {
+        logger.setLogLevel(LogLevel.INFO);
+        expect(logger.getLogLevel()).toBe(LogLevel.INFO);
+
+        logger.setLogLevel(LogLevel.DEBUG);
+        expect(logger.getLogLevel()).toBe(LogLevel.DEBUG);
+    });
+
+    it('should log messages based on the log level', () => {
+        logger.setLogLevel(LogLevel.ERROR);
+        logger.error('Error message');
+        expect(consoleErrorSpy).toHaveBeenCalledWith('Error message');
+
+        logger.warn('Warning message');
+        expect(consoleTraceSpy).not.toHaveBeenCalled();
+
+        logger.setLogLevel(LogLevel.WARN);
+        logger.error('Warning message');
+        logger.warn('Warning message');
+        expect(consoleErrorSpy).toHaveBeenCalledWith('Warning message');
+        expect(consoleWarnSpy).toHaveBeenCalledWith('Warning message');
+    });
+
+    it('should log messages with the global log level override', () => {
+        setGlobalLogLevelOverride(LogLevel.WARN);
+
+        logger.error('Error message');
+        logger.warn('Warn message');
+        logger.info('Info message');
+        logger.trace('Trace message');
+        expect(consoleErrorSpy).toHaveBeenCalledWith('Error message');
+        expect(consoleWarnSpy).toHaveBeenCalledWith('Warn message');
+        expect(consoleInfoSpy).not.toHaveBeenCalled();
+        expect(consoleDebugSpy).not.toHaveBeenCalled();
+        expect(consoleTraceSpy).not.toHaveBeenCalled();
+    });
+});

package/src/utils/logger.ts

@@ -0,0 +1,87 @@
+import { isUndefined, noop } from 'lodash';
+import { LogLevel } from '../types';
+
+const logFunctions: {
+    [key: string]: (...args: any[]) => void;
+} = {
+    [LogLevel.SILENT]: noop,
+    [LogLevel.ERROR]: console.error,
+    [LogLevel.WARN]: console.warn,
+    [LogLevel.INFO]: console.info,
+    [LogLevel.DEBUG]: console.debug,
+    [LogLevel.TRACE]: console.trace,
+};
+
+let globalLogLevelOverride: LogLevel = LogLevel.TRACE;
+const setGlobalLogLevelOverride = (logLevel: LogLevel): void => {
+    globalLogLevelOverride = logLevel;
+};
+
+const logLevelToNumber: { [key: string]: number } = {
+    [LogLevel.SILENT]: 0,
+    [LogLevel.ERROR]: 1,
+    [LogLevel.WARN]: 2,
+    [LogLevel.INFO]: 3,
+    [LogLevel.DEBUG]: 4,
+    [LogLevel.TRACE]: 5,
+};
+const compareLogLevels = (logLevel1: LogLevel, logLevel2: LogLevel): number => {
+    const logLevel1Index = logLevelToNumber[logLevel1];
+    const logLevel2Index = logLevelToNumber[logLevel2];
+    return logLevel1Index - logLevel2Index;
+};
+
+class Logger {
+    private logLevel: LogLevel = LogLevel.ERROR;
+
+    public setLogLevel = (newLogLevel: LogLevel): void => {
+        this.logLevel = newLogLevel;
+    };
+
+    public getLogLevel = (): LogLevel => this.logLevel;
+
+    public canLog(logLevel: LogLevel): boolean {
+        if (logLevel === LogLevel.SILENT) return false;
+        if (!isUndefined(globalLogLevelOverride)) {
+            return compareLogLevels(globalLogLevelOverride, logLevel) >= 0;
+        }
+        return compareLogLevels(this.logLevel, logLevel) >= 0;
+    }
+
+    public logMessages(args: any[], logLevel: LogLevel): void {
+        if (this.canLog(logLevel)) {
+            const logFn = logFunctions[logLevel];
+            if (logFn) {
+                logFn(...args);
+            }
+        }
+    }
+
+    public log(...args: any[]): void {
+        this.info(args);
+    }
+
+    public info(...args: any[]): void {
+        this.logMessages(args, LogLevel.INFO);
+    }
+
+    public debug(...args: any[]): void {
+        this.logMessages(args, LogLevel.DEBUG);
+    }
+
+    public trace(...args: any[]): void {
+        this.logMessages(args, LogLevel.TRACE);
+    }
+
+    public error(...args: any[]): void {
+        this.logMessages(args, LogLevel.ERROR);
+    }
+
+    public warn(...args: any[]): void {
+        this.logMessages(args, LogLevel.WARN);
+    }
+}
+
+const logger = new Logger();
+
+export { LogLevel, logger, setGlobalLogLevelOverride };