Log messages are gibberish

[vvolodin]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

5.3.0

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

none

Public or Confidential Client?

Public

Description

Log messages are minified in the output source code, example from EventHandler.mjs:

this.logger.verbose("1cnec4", "");

How do I decode these?

Error Message

No response

MSAL Logs

No response

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

const msalConfig = {
    auth: {
        clientId: serverVars.clientId,
        authority: 'https://login.microsoftonline.com/common',
        redirectUri: serverVars.redirectUri,
        clientCapabilities: ['CP1'] // This lets the resource server know that this client can handle claim challenges.
    },
    cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: false
    }
}

Relevant Code Snippets

export function loggerCallback(level: LogLevel, message: string, containsPii: boolean) {
    console.log(message);
}

Reproduction Steps

1. Use msal-browser
2. Enable logging
3. Get minified messages

Expected Behavior

1. Use msal-browser
2. Enable logging
3. Be able to read and understand log messages

Identity Provider

Entra ID (formerly Azure AD) / MSA

Browsers Affected (Select all that apply)

Chrome

Regression

No response

[sameerag]

log minification is introduced in msal-v5 by design. Please check: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/v4-migration.md#console-logging-changes

[vvolodin]

so it's impossible to debug in the browser's console window now?

[tsulli]

I too was unhappy about this new log minification Microsoft introduced because it makes debugging significantly harder. Not to mention the script provided for decoding the logs didn't work out of the box. My ultimate solution was to create a script to copy the log-strings-mapping.json files from my local node_modules to a public folder that I can access while running my development server. Then I created a logger service in my app that loads the mappings and creates a custom logger callback to parse them. I set the loggerCallback in my MSAL config to use this new custom logger callback, and now I get human readable logs in the browser again.

Happy to share code if it would help.

[parched]

@sameerag Not everyone is upgrading from v4, some are reading the current docs which I can't seem to find mentioned anywhere.
E.g., https://learn.microsoft.com/en-us/entra/msal/javascript/browser/configuration#using-the-config-object
or even https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/logging.md