Skip to content

Commit

Permalink
- Allow overriding log level and PII setting with local storage key-v…
Browse files Browse the repository at this point in the history
…alues.
  • Loading branch information
konstantin-msft committed Dec 5, 2023
1 parent f0d87e3 commit 812bff9
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 25 deletions.
57 changes: 39 additions & 18 deletions lib/msal-browser/docs/logging.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand All @@ -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);

```

Expand All @@ -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.
85 changes: 78 additions & 7 deletions lib/msal-browser/src/operatingcontext/BaseOperatingContext.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -24,20 +29,86 @@ export abstract class BaseOperatingContext {
protected available: boolean;
protected browserEnvironment: boolean;

protected static LOGGER_CALLBACKS: Map<number, ILoggerCallback> = 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,
* 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 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;
}

Expand Down
3 changes: 3 additions & 0 deletions lib/msal-browser/src/utils/BrowserConstants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";

0 comments on commit 812bff9

Please sign in to comment.