From 1263f6d7079ea4d4f9950d8360e2a4fc26232a00 Mon Sep 17 00:00:00 2001 From: Kangxuan Ye Date: Thu, 26 Sep 2024 00:08:31 -0700 Subject: [PATCH 1/6] check in with function to create debugger --- packages/teams-js/src/internal/globalVars.ts | 1 + packages/teams-js/src/internal/telemetry.ts | 66 +++++++++++++++++++- 2 files changed, 66 insertions(+), 1 deletion(-) diff --git a/packages/teams-js/src/internal/globalVars.ts b/packages/teams-js/src/internal/globalVars.ts index da630650e6..034418822a 100644 --- a/packages/teams-js/src/internal/globalVars.ts +++ b/packages/teams-js/src/internal/globalVars.ts @@ -9,4 +9,5 @@ export class GlobalVars { public static hostClientType: string | undefined = undefined; public static clientSupportedSDKVersion: string; public static printCapabilityEnabled = false; + public static turnOnConsoleLog = false; } diff --git a/packages/teams-js/src/internal/telemetry.ts b/packages/teams-js/src/internal/telemetry.ts index 6338e8e7a6..da845324f8 100644 --- a/packages/teams-js/src/internal/telemetry.ts +++ b/packages/teams-js/src/internal/telemetry.ts @@ -1,5 +1,6 @@ import { debug as registerLogger, Debugger } from 'debug'; +import { GlobalVars } from './globalVars'; import { UUID } from './uuidObject'; // Each teamsjs instance gets a unique identifier that will be prepended to every log statement @@ -12,7 +13,70 @@ registerLogger.formatArgs = function (args) { originalFormatArgsFunction.call(this, args); }; -const topLevelLogger = registerLogger('teamsJs'); +const createDebuggerFunction = (namespace: string): Debugger => { + let internalDebugger: Debugger = registerLogger(namespace); + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const func = function (formatter: any, ...args: any[]): void { + if (GlobalVars.turnOnConsoleLog) { + console.log(formatter, args); + } + internalDebugger(formatter, args); + } as Debugger; + + Object.assign(func, { + color: { + get() { + return internalDebugger.color; + }, + set(value: string) { + internalDebugger.color = value; + }, + }, + diff: { + get() { + return internalDebugger.diff; + }, + set(value: number) { + internalDebugger.diff = value; + }, + }, + enabled: { + get(): boolean { + return internalDebugger.enabled; + }, + set(enabled: boolean) { + internalDebugger.enabled = enabled; + }, + }, + namespace: { + get(): string { + return internalDebugger.namespace; + }, + set(namespace: string) { + internalDebugger.namespace = namespace; + }, + }, + extend: { + value(namespace: string, delimiter?: string) { + internalDebugger = internalDebugger.extend(namespace, delimiter); + return this; + }, + }, + log: { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + value(...args: any[]) { + internalDebugger.log(args); + }, + }, + }); + + return func; +}; + +const topLevelLogger = createDebuggerFunction('teamsJs'); + +// const topLevelLogger = registerLogger('teamsJs'); /** * @internal From 8e7a9e771e21ce325ab809c6b1a69c2b728440d3 Mon Sep 17 00:00:00 2001 From: Kangxuan Ye Date: Thu, 26 Sep 2024 01:48:25 -0700 Subject: [PATCH 2/6] workable version but has problem in extend function on internalDebugger --- packages/teams-js/src/internal/telemetry.ts | 72 ++++++++++----------- 1 file changed, 33 insertions(+), 39 deletions(-) diff --git a/packages/teams-js/src/internal/telemetry.ts b/packages/teams-js/src/internal/telemetry.ts index da845324f8..3300e28cc6 100644 --- a/packages/teams-js/src/internal/telemetry.ts +++ b/packages/teams-js/src/internal/telemetry.ts @@ -13,6 +13,7 @@ registerLogger.formatArgs = function (args) { originalFormatArgsFunction.call(this, args); }; +// eslint-disable-next-line @typescript-eslint/no-unused-vars const createDebuggerFunction = (namespace: string): Debugger => { let internalDebugger: Debugger = registerLogger(namespace); @@ -25,56 +26,49 @@ const createDebuggerFunction = (namespace: string): Debugger => { } as Debugger; Object.assign(func, { - color: { - get() { - return internalDebugger.color; - }, - set(value: string) { - internalDebugger.color = value; - }, + get color() { + return internalDebugger.color; }, - diff: { - get() { - return internalDebugger.diff; - }, - set(value: number) { - internalDebugger.diff = value; - }, + set color(value: string) { + internalDebugger.color = value; }, - enabled: { - get(): boolean { - return internalDebugger.enabled; - }, - set(enabled: boolean) { - internalDebugger.enabled = enabled; - }, + get diff() { + return internalDebugger.diff; }, - namespace: { - get(): string { - return internalDebugger.namespace; - }, - set(namespace: string) { - internalDebugger.namespace = namespace; - }, + set diff(value: number) { + internalDebugger.diff = value; }, - extend: { - value(namespace: string, delimiter?: string) { - internalDebugger = internalDebugger.extend(namespace, delimiter); - return this; - }, + get enabled(): boolean { + return internalDebugger.enabled; }, - log: { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - value(...args: any[]) { - internalDebugger.log(args); - }, + set enabled(enabled: boolean) { + internalDebugger.enabled = enabled; }, + get namespace(): string { + return internalDebugger.namespace; + }, + set namespace(namespace: string) { + internalDebugger.namespace = namespace; + }, + extend(namespace: string, delimiter?: string): Debugger { + internalDebugger = internalDebugger.extend(namespace, delimiter); + return this; + }, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + log(...args: any[]) { + internalDebugger.log(args); + }, + // destroy: { + // value(): boolean { + // return true; + // }, + // }, }); return func; }; -const topLevelLogger = createDebuggerFunction('teamsJs'); +const topLevelLogger: Debugger = createDebuggerFunction('teamsJs'); // const topLevelLogger = registerLogger('teamsJs'); From 2be11ab483c9ba966704984da48f7cbdc4dfcdd9 Mon Sep 17 00:00:00 2001 From: Kangxuan Ye Date: Thu, 26 Sep 2024 10:35:30 -0700 Subject: [PATCH 3/6] fix extend function --- packages/teams-js/src/internal/telemetry.ts | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/teams-js/src/internal/telemetry.ts b/packages/teams-js/src/internal/telemetry.ts index 3300e28cc6..034efdddcd 100644 --- a/packages/teams-js/src/internal/telemetry.ts +++ b/packages/teams-js/src/internal/telemetry.ts @@ -15,7 +15,7 @@ registerLogger.formatArgs = function (args) { // eslint-disable-next-line @typescript-eslint/no-unused-vars const createDebuggerFunction = (namespace: string): Debugger => { - let internalDebugger: Debugger = registerLogger(namespace); + const internalDebugger: Debugger = registerLogger(namespace); // eslint-disable-next-line @typescript-eslint/no-explicit-any const func = function (formatter: any, ...args: any[]): void { @@ -51,18 +51,12 @@ const createDebuggerFunction = (namespace: string): Debugger => { internalDebugger.namespace = namespace; }, extend(namespace: string, delimiter?: string): Debugger { - internalDebugger = internalDebugger.extend(namespace, delimiter); - return this; + return createDebuggerFunction(internalDebugger.extend(namespace, delimiter).namespace); }, // eslint-disable-next-line @typescript-eslint/no-explicit-any log(...args: any[]) { internalDebugger.log(args); }, - // destroy: { - // value(): boolean { - // return true; - // }, - // }, }); return func; From 2b22c7d1632cbd708abd7ed30efd8cc5cfb5cc53 Mon Sep 17 00:00:00 2001 From: Kangxuan Ye Date: Thu, 26 Sep 2024 13:56:42 -0700 Subject: [PATCH 4/6] update anonymous function for log --- .../src/components/LoggerAPIs.tsx | 33 +++++++++++++++++++ apps/teams-test-app/src/pages/TestApp.tsx | 2 ++ packages/teams-js/src/internal/telemetry.ts | 2 +- packages/teams-js/src/public/index.ts | 1 + packages/teams-js/src/public/logger.ts | 21 ++++++++++++ 5 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 apps/teams-test-app/src/components/LoggerAPIs.tsx create mode 100644 packages/teams-js/src/public/logger.ts diff --git a/apps/teams-test-app/src/components/LoggerAPIs.tsx b/apps/teams-test-app/src/components/LoggerAPIs.tsx new file mode 100644 index 0000000000..7bfad27250 --- /dev/null +++ b/apps/teams-test-app/src/components/LoggerAPIs.tsx @@ -0,0 +1,33 @@ +import { logger } from '@microsoft/teams-js'; +import React, { ReactElement } from 'react'; + +import { ApiWithoutInput } from './utils'; +import { ModuleWrapper } from './utils/ModuleWrapper'; + +const TurnOnConsoleLog = (): React.ReactElement => + ApiWithoutInput({ + name: 'turnOnConsoleLog', + title: 'Turn On Console Log', + onClick: async () => { + logger.turnOnConsoleLog(); + return 'true'; + }, + }); + +const TurnOffConsoleLog = (): React.ReactElement => + ApiWithoutInput({ + name: 'turnOffConsoleLog', + title: 'Turn Off Console Log', + onClick: async () => { + logger.turnOffConsoleLog(); + return 'true'; + }, + }); +const LoggerAPIs = (): ReactElement => ( + + + + +); + +export default LoggerAPIs; diff --git a/apps/teams-test-app/src/pages/TestApp.tsx b/apps/teams-test-app/src/pages/TestApp.tsx index f8264834ae..a2394e5da2 100644 --- a/apps/teams-test-app/src/pages/TestApp.tsx +++ b/apps/teams-test-app/src/pages/TestApp.tsx @@ -22,6 +22,7 @@ import GeoLocationAPIs from '../components/GeoLocationAPIs'; import HostEntityTabAPIs from '../components/HostEntityTabAPIs'; import Links from '../components/Links'; import LocationAPIs from '../components/LocationAPIs'; +import LoggerAPIs from '../components/LoggerAPIs'; import LogAPIs from '../components/LogsAPIs'; import MailAPIs from '../components/MailAPIs'; import MarketplaceAPIs from '../components/MarketplaceAPIs'; @@ -124,6 +125,7 @@ export const TestApp: React.FC = () => { + diff --git a/packages/teams-js/src/internal/telemetry.ts b/packages/teams-js/src/internal/telemetry.ts index 034efdddcd..44879af321 100644 --- a/packages/teams-js/src/internal/telemetry.ts +++ b/packages/teams-js/src/internal/telemetry.ts @@ -20,9 +20,9 @@ const createDebuggerFunction = (namespace: string): Debugger => { // eslint-disable-next-line @typescript-eslint/no-explicit-any const func = function (formatter: any, ...args: any[]): void { if (GlobalVars.turnOnConsoleLog) { + internalDebugger(formatter, args); console.log(formatter, args); } - internalDebugger(formatter, args); } as Debugger; Object.assign(func, { diff --git a/packages/teams-js/src/public/index.ts b/packages/teams-js/src/public/index.ts index 49193f2cf3..313047345d 100644 --- a/packages/teams-js/src/public/index.ts +++ b/packages/teams-js/src/public/index.ts @@ -119,3 +119,4 @@ export { settings } from './settings'; export { tasks } from './tasks'; export { liveShare, LiveShareHost } from './liveShareHost'; export { marketplace } from './marketplace'; +export { logger } from './logger'; diff --git a/packages/teams-js/src/public/logger.ts b/packages/teams-js/src/public/logger.ts new file mode 100644 index 0000000000..6086b94680 --- /dev/null +++ b/packages/teams-js/src/public/logger.ts @@ -0,0 +1,21 @@ +import { GlobalVars } from '../internal/globalVars'; + +export namespace logger { + /** + * todo: doc + * @returns bool + */ + export function turnOnConsoleLog(): boolean { + GlobalVars.turnOnConsoleLog = true; + return GlobalVars.turnOnConsoleLog; + } + + /** + * todo: doc + * @returns bool + */ + export function turnOffConsoleLog(): boolean { + GlobalVars.turnOnConsoleLog = false; + return GlobalVars.turnOnConsoleLog; + } +} From 8ae5c7b020828007ac368f8fd8fa80f6515cba48 Mon Sep 17 00:00:00 2001 From: Kangxuan Ye Date: Thu, 26 Sep 2024 15:44:10 -0700 Subject: [PATCH 5/6] improve anonymous function --- packages/teams-js/src/internal/telemetry.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/teams-js/src/internal/telemetry.ts b/packages/teams-js/src/internal/telemetry.ts index 44879af321..da9735eaa1 100644 --- a/packages/teams-js/src/internal/telemetry.ts +++ b/packages/teams-js/src/internal/telemetry.ts @@ -19,10 +19,11 @@ const createDebuggerFunction = (namespace: string): Debugger => { // eslint-disable-next-line @typescript-eslint/no-explicit-any const func = function (formatter: any, ...args: any[]): void { - if (GlobalVars.turnOnConsoleLog) { - internalDebugger(formatter, args); - console.log(formatter, args); + if (GlobalVars.turnOnConsoleLog && localStorage.getItem('debug') != 'teamsJs.*') { + args.unshift(`color: ${internalDebugger.color}`); + console.log(`${internalDebugger.namespace}: ${formatter}`, args); } + internalDebugger(formatter, args); } as Debugger; Object.assign(func, { From 2e98a6317e92f029e95bab061c88dc4161973815 Mon Sep 17 00:00:00 2001 From: Kangxuan Ye Date: Thu, 26 Sep 2024 16:49:47 -0700 Subject: [PATCH 6/6] add changefile --- ...soft-teams-js-65d123d3-bbbc-4e7e-abc8-7396d65b2950.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@microsoft-teams-js-65d123d3-bbbc-4e7e-abc8-7396d65b2950.json diff --git a/change/@microsoft-teams-js-65d123d3-bbbc-4e7e-abc8-7396d65b2950.json b/change/@microsoft-teams-js-65d123d3-bbbc-4e7e-abc8-7396d65b2950.json new file mode 100644 index 0000000000..2b7e799e25 --- /dev/null +++ b/change/@microsoft-teams-js-65d123d3-bbbc-4e7e-abc8-7396d65b2950.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Added a capability for better logging discoverability", + "packageName": "@microsoft/teams-js", + "email": "kangxuanye@microsoft.com", + "dependentChangeType": "patch" +}