TypeError: Cannot read properties of undefined (reading 'loggerCallback')

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.21.0

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

2.1.0

Description

The application breaks if loggerOptions is set to undefined explicitly.

Error Message

TypeError: Cannot read properties of undefined (reading 'loggerCallback')

Minified vendor chunk (error reference)

...
function y(m, v, E) {
  this.level = o.Info,
  this.localCallback = m.loggerCallback || function() {}, // <-- this line, according to types the variable m can be undefined
  this.piiLoggingEnabled = m.piiLoggingEnabled || !1,
  this.level = "number" == typeof m.logLevel ? m.logLevel : o.Info,
  this.correlationId = m.correlationId || "",
  this.packageName = v || s.gT.EMPTY_STRING,
  this.packageVersion = E || s.gT.EMPTY_STRING
}
...

Msal Logs

No response

MSAL Configuration

const msalInstanceFactory = (environment?: IWebClientEnvironment): IPublicClientApplication => {
  return new PublicClientApplication({
    auth: {
      clientId: environment?.msal.clientId ?? 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
      authority: environment?.msal.authority ?? 'https://login.microsoftonline.com/common',
      redirectUri: environment?.msal.redirectUri ?? 'http://localhost:4200',
      postLogoutRedirectUri: '/',
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE,
    },
    system: {
      tokenRenewalOffsetSeconds: 300,
      loggerOptions:
        environment?.production === true
          ? void 0 // <-- This breaks the application
          : {
              loggerCallback,
              logLevel: LogLevel.Info,
              piiLoggingEnabled: false,
            },
    },
  });
};

Relevant Code Snippets

Borwser system options type declaration in the library

export declare type BrowserSystemOptions = SystemOptions & {
    loggerOptions?: LoggerOptions; // <-- seems like it can be undefined
    networkClient?: INetworkModule;
    navigationClient?: INavigationClient;
    windowHashTimeout?: number;
    iframeHashTimeout?: number;
    loadFrameTimeout?: number;
    navigateFrameWait?: number;
    redirectNavigationTimeout?: number;
    asyncPopups?: boolean;
    allowRedirectInIframe?: boolean;
};

Msal instance factory with loggerOptions set to undefined for the production environment

const msalInstanceFactory = (environment?: IWebClientEnvironment): IPublicClientApplication => {
  return new PublicClientApplication({
    auth: {
      clientId: environment?.msal.clientId ?? 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
      authority: environment?.msal.authority ?? 'https://login.microsoftonline.com/common',
      redirectUri: environment?.msal.redirectUri ?? 'http://localhost:4200',
      postLogoutRedirectUri: '/',
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE,
    },
    system: {
      tokenRenewalOffsetSeconds: 300,
      loggerOptions:
        environment?.production === true
          ? void 0 // <-- This breaks the application
          : {
              loggerCallback,
              logLevel: LogLevel.Info,
              piiLoggingEnabled: false,
            },
    },
  });
};

Reproduction Steps

1. configure application to use msal-angular;
2. set system.loggerOptions to undefined in the configuration explicitly;
3. start the application locally;
4. open a browser and the browser devtools (console);
5. load the application url;
6. the error should be there;

Expected Behavior

According to existing types shipped with the library, nothing should be broken when loggerOptions is set to undefined.

Seems like either types shipped with the library should be fixed, or there should be explicit checks in the library code like

if (typeof system.loggerOptions !== 'undefined') {
  // do something
}

Identity Provider

Azure AD / MSA

Browsers Affected (Select all that apply)

Chrome, and possibly all other browsers, but I have tested only in Chrome.

I am sorry, I don’t have bandwidth to test in all available browsers.

Regression

No response

Source

External (Customer)

[jo-arroyo]

@rfprod Thanks for opening this issue. We have been able to reproduce this error and will investigate a fix.

[msftbot[bot]]

This issue requires attention from the MSAL.js team and has not seen activity in 5 days. @hectormmg please follow up.