diff --git a/lib/msal-browser/docs/logging.md b/lib/msal-browser/docs/logging.md index 3f06681a4b..b46e707a99 100644 --- a/lib/msal-browser/docs/logging.md +++ b/lib/msal-browser/docs/logging.md @@ -2,7 +2,7 @@ These are steps needed to enable MSAL JS logging for your applications: -1. In the MSAL [Configuration](./configuration.md) object, you can enable logging to collect msal js logs. We enable different levels of logging and an appropriate level can be chosen as needed. +1. In the MSAL [Configuration](./configuration.md) object, you can enable logging to collect msal js logs. We enable different levels of logging and an appropriate level can be chosen as needed. 2. The logger options can be set as below, the example chooses `LogLevel.Trace` @@ -21,26 +21,26 @@ const msalConfig = { loggerOptions: { logLevel: LogLevel.Trace, loggerCallback: (level, message, containsPii) => { - if (containsPii) { - return; + if (containsPii) { + return; } - switch (level) { - case LogLevel.Error: - console.error(message); - return; - case LogLevel.Info: - console.info(message); - return; - case LogLevel.Verbose: - console.debug(message); - return; - case LogLevel.Warning: - console.warn(message); - return; + switch (level) { + case LogLevel.Error: + console.error(message); + return; + case LogLevel.Info: + console.info(message); + return; + case LogLevel.Verbose: + console.debug(message); + return; + case LogLevel.Warning: + console.warn(message); + return; default: console.log(message); return; - } + } } } }, @@ -48,7 +48,7 @@ const msalConfig = { ... } -const msalInstance = new PublicClientApplication(msalConfig); +const msalInstance = new PublicClientApplication(msalConfig); ``` @@ -59,5 +59,26 @@ An example usage in a sample can be accessed [here](https://github.com/AzureAD/m ![browser console](./images/BrowserLogEnablement.png) +## Override log level and PII setting + +These are the steps to override MSAL log level and PII settings to troubleshoot errors in non-dev environments: + +### Navigate to local storage + +1. Open developer tools by pressing F12 +2. Navigate to `Application` tab +3. Click `Storage` and expand `Local Storage` +4. Select target domain + +Additional details can be found [here](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/storage/localstorage). + +### Override log level + +Add `msal.browser.log.level` key to `Local Storage`, set it's value to the desired log level (`Verbose`, for example) and refresh the page. +Check `LogLevel` enum for the available options [here](../../msal-common/src/logger/Logger.ts). + +### Override PII log setting +Add `msal.browser.log.pii` key to `Local Storage`, set it's value to `true` or `false` and refresh the page. +**_NOTE:_** Make sure to remove the log keys from `Local Storage` once troubleshooting is done. diff --git a/lib/msal-browser/src/operatingcontext/BaseOperatingContext.ts b/lib/msal-browser/src/operatingcontext/BaseOperatingContext.ts index 776ecee32c..ed883a8dee 100644 --- a/lib/msal-browser/src/operatingcontext/BaseOperatingContext.ts +++ b/lib/msal-browser/src/operatingcontext/BaseOperatingContext.ts @@ -3,13 +3,18 @@ * Licensed under the MIT License. */ -import { Logger } from "@azure/msal-common"; +import { ILoggerCallback, Logger, LogLevel } from "@azure/msal-common"; import { BrowserConfiguration, buildConfiguration, Configuration, } from "../config/Configuration"; import { version, name } from "../packageMetadata"; +import { + BrowserCacheLocation, + LOG_LEVEL_CACHE_KEY, + LOG_PII_CACHE_KEY, +} from "../utils/BrowserConstants"; /** * Base class for operating context @@ -24,6 +29,34 @@ export abstract class BaseOperatingContext { protected available: boolean; protected browserEnvironment: boolean; + protected static LOGGER_CALLBACKS: Map = new Map([ + [ + LogLevel.Error, + // eslint-disable-next-line no-console + (level: LogLevel, message: string) => console.error(message), + ], + [ + LogLevel.Warning, + // eslint-disable-next-line no-console + (level: LogLevel, message: string) => console.warn(message), + ], + [ + LogLevel.Info, + // eslint-disable-next-line no-console + (level: LogLevel, message: string) => console.info(message), + ], + [ + LogLevel.Verbose, + // eslint-disable-next-line no-console + (level: LogLevel, message: string) => console.debug(message), + ], + [ + LogLevel.Trace, + // eslint-disable-next-line no-console + (level: LogLevel, message: string) => console.trace(message), + ], + ]); + constructor(config: Configuration) { /* * If loaded in an environment where window is not available, @@ -31,13 +64,51 @@ export abstract class BaseOperatingContext { * This is to support server-side rendering environments. */ this.browserEnvironment = typeof window !== "undefined"; - this.config = buildConfiguration(config, this.browserEnvironment); - this.logger = new Logger( - this.config.system.loggerOptions, - name, - version - ); + + let localStorage: Storage | undefined; + try { + localStorage = window[BrowserCacheLocation.LocalStorage]; + // Mute errors if it's a non-browser environment or cookies are blocked. + } catch (e) {} + + const logLevelKey = localStorage?.getItem(LOG_LEVEL_CACHE_KEY); + const piiLoggingEnabled = + localStorage?.getItem(LOG_PII_CACHE_KEY)?.toLowerCase() === "true"; + + if (logLevelKey || piiLoggingEnabled) { + const logLevel = + logLevelKey && Object.keys(LogLevel).includes(logLevelKey) + ? LogLevel[logLevelKey] + : undefined; + const loggerCallback = + logLevelKey && + BaseOperatingContext.LOGGER_CALLBACKS.has(LogLevel[logLevelKey]) + ? BaseOperatingContext.LOGGER_CALLBACKS.get( + LogLevel[logLevelKey] + ) + : undefined; + const loggerOptions = this.config.system.loggerOptions; + + this.logger = new Logger( + { + correlationId: loggerOptions.correlationId, + loggerCallback: + loggerCallback || loggerOptions.loggerCallback, + piiLoggingEnabled: + piiLoggingEnabled || loggerOptions.piiLoggingEnabled, + logLevel: logLevel || loggerOptions.logLevel, + }, + name, + version + ); + } else { + this.logger = new Logger( + this.config.system.loggerOptions, + name, + version + ); + } this.available = false; } diff --git a/lib/msal-browser/src/utils/BrowserConstants.ts b/lib/msal-browser/src/utils/BrowserConstants.ts index 1f15799a6f..c493507f0f 100644 --- a/lib/msal-browser/src/utils/BrowserConstants.ts +++ b/lib/msal-browser/src/utils/BrowserConstants.ts @@ -239,3 +239,6 @@ export const CacheLookupPolicy = { } as const; export type CacheLookupPolicy = (typeof CacheLookupPolicy)[keyof typeof CacheLookupPolicy]; + +export const LOG_LEVEL_CACHE_KEY = "msal.browser.log.level"; +export const LOG_PII_CACHE_KEY = "msal.browser.log.pii";