Allow overriding log level and PII setting with session storage key-values

change/@azure-msal-browser-4528d6eb-771f-4813-aa74-7303829ecc70.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Allow overriding log level and PII setting with session storage key-values #6704",
+  "packageName": "@azure/msal-browser",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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,34 +21,34 @@ 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;
-                }    
+                }
             }
         }
     },
 
     ...
 }
 
-const msalInstance = new PublicClientApplication(msalConfig);      
+const msalInstance = new PublicClientApplication(msalConfig);
 
 ```
 
@@ -59,5 +59,36 @@ 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 session storage
+
+1. Open browser developer tools
+   - Edge, Chrome and Firefox browsers: press F12
+   - Safari: go into Safari's preferences (`Safari Menu` > `Preferences`), select the `Advanced Tab` and enable `Show features for web developers`. Once that menu is enabled, you will find the developer console by clicking on `Develop` > `Show Javascript Console`
+2. Navigate to `Session Storage`:
+   - [Edge](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/storage/sessionstorage)
+   - [Chrome](https://developer.chrome.com/docs/devtools/storage/sessionstorage)
+   - [Firefox](https://firefox-source-docs.mozilla.org/devtools-user/storage_inspector/local_storage_session_storage)
+   - Safari: navigate to `Storage` tab and expand `Session Storage`
+3. Select target domain
+
+### Override log level
+
+Add `msal.browser.log.level` key to `Session Storage`, set it's value to the desired log level (`Verbose`, for example), refresh the page and retry the sign-in operation.
+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 `Session Storage`, set it's value to `true` or `false`, refresh the page and retry the sign-in operation.
 
+### Retrieve captured logs
 
+1. Navigate to the console tab:
+   - [Edge](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console)
+   - [Chrome](https://developer.chrome.com/docs/devtools/console)
+   - [Firefox](https://firefox-source-docs.mozilla.org/devtools-user/browser_console)
+   - Safari: open JavaScript console and navigate to `Console`
+2. Please review the logs to ensure they do not contain sensitive data before sharing them

lib/msal-browser/src/operatingcontext/BaseOperatingContext.ts

@@ -3,13 +3,18 @@
  * Licensed under the MIT License.
  */
 
-import { Logger } from "@azure/msal-common";
+import { 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,20 +29,72 @@ export abstract class BaseOperatingContext {
     protected available: boolean;
     protected browserEnvironment: boolean;
 
+    protected static loggerCallback(level: LogLevel, message: string): void {
+        switch (level) {
+            case LogLevel.Error:
+                // eslint-disable-next-line no-console
+                console.error(message);
+                return;
+            case LogLevel.Info:
+                // eslint-disable-next-line no-console
+                console.info(message);
+                return;
+            case LogLevel.Verbose:
+                // eslint-disable-next-line no-console
+                console.debug(message);
+                return;
+            case LogLevel.Warning:
+                // eslint-disable-next-line no-console
+                console.warn(message);
+                return;
+            default:
+                // eslint-disable-next-line no-console
+                console.log(message);
+                return;
+        }
+    }
+
     constructor(config: Configuration) {
         /*
          * If loaded in an environment where window is not available,
          * set internal flag to false so that further requests fail.
          * 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 sessionStorage: Storage | undefined;
+        try {
+            sessionStorage = window[BrowserCacheLocation.SessionStorage];
+            // Mute errors if it's a non-browser environment or cookies are blocked.
+        } catch (e) {}
+
+        const logLevelKey = sessionStorage?.getItem(LOG_LEVEL_CACHE_KEY);
+        const piiLoggingKey = sessionStorage
+            ?.getItem(LOG_PII_CACHE_KEY)
+            ?.toLowerCase();
+
+        const piiLoggingEnabled =
+            piiLoggingKey === "true"
+                ? true
+                : piiLoggingKey === "false"
+                ? false
+                : undefined;
+        const loggerOptions = { ...this.config.system.loggerOptions };
+
+        const logLevel =
+            logLevelKey && Object.keys(LogLevel).includes(logLevelKey)
+                ? LogLevel[logLevelKey]
+                : undefined;
+        if (logLevel) {
+            loggerOptions.loggerCallback = BaseOperatingContext.loggerCallback;
+            loggerOptions.logLevel = logLevel;
+        }
+        if (piiLoggingEnabled !== undefined) {
+            loggerOptions.piiLoggingEnabled = piiLoggingEnabled;
+        }
+
+        this.logger = new Logger(loggerOptions, name, version);
         this.available = false;
     }
 

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";