Angular App Freezes on Power BI API Call (get reports in group)After Access Token Retrieval

Hi everyone,

I’m working on an Angular application that integrates with Power BI using MSAL (Microsoft Authentication Library) for authentication. The app was functioning fine until recently, when it started freezing after successfully retrieving the access token and trying to make a GET request to the Power BI API.

Background:

The application uses Azure AD for authentication and retrieves an access token, which is then used to call the Power BI REST API to fetch reports. The process involves the following steps:

1. User Authentication: The user logs in via a popup using their Azure AD credentials.
2. Token Retrieval: After successful authentication, an access token is obtained using the acquireTokenSilent method.
3. API Call: The token is used to make a GET request to the Power BI API to fetch reports from a specified workspace.

Code Snippets:

1. Authentication Service:

async login(): Promise<void> {
  await this.initialized; // Wait for MSAL initialization to complete

  const codeVerifier = generateCodeVerifier();
  try {
    const codeChallenge = await generateCodeChallenge(codeVerifier);
    const loginRequest = {
      scopes: ['openid', 'profile', 'User.Read'],
      extraQueryParameters: {
        code_challenge: codeChallenge,
        code_challenge_method: 'S256'
      },
      prompt: 'consent'
    };

    sessionStorage.setItem('pkce_code_verifier', codeVerifier);

    const account = this.msalInstance.getActiveAccount();
    if (account) {
      console.log('User is already logged in');
      return;
    }

    try {
      const response: AuthenticationResult = await this.msalInstance.loginPopup(loginRequest);
      this.msalInstance.setActiveAccount(response.account);
      this.storeAccountInSession(response.account!);
      console.log('Login success', response);
    } catch (error) {
      if (error instanceof BrowserAuthError && error.errorCode === 'user_cancelled') {
        console.warn('User cancelled the login flow.');
      } else {
        console.error('Login error', error);
      }
      throw error;
    }
  } catch (error) {
    console.error('Error generating PKCE code challenge:', error);
  }
}

 2. Token Retrieval:

private async getTokenPromise(): Promise<string> {
  await this.initialized; // Wait for initialization to complete

  const codeVerifier = sessionStorage.getItem('pkce_code_verifier');
  if (!codeVerifier) {
    throw new Error('PKCE code verifier not found.');
  }

  const tokenRequest = {
    scopes: ['https://analysis.windows.net/powerbi/api/.default'],
    extraQueryParameters: {
      code_verifier: codeVerifier,
    }
  };

  try {
    const response: AuthenticationResult = await this.msalInstance.acquireTokenSilent(tokenRequest);
    return response.accessToken;
  } catch (error) {
    if (error instanceof BrowserAuthError && error.errorCode === 'user_login_required') {
      await this.login();
      return this.getTokenPromise(); // Retry token acquisition after login
    } else {
      console.error('Token acquisition error', error);
      throw error;
    }
  }
}

3. Component Logic (where the issue occurs):

ngOnInit() {
  this.authService.login().then(() => {
    console.log('Login successful');
    this.loadReports(); // Load reports after successful login
  }).catch(err => {
    console.error('Login failed:', err);
  });
}

loadReports() {
  this.authService.getToken().subscribe({
    next: (token) => {
      this.accessToken = token;
      console.log(this.accessToken);

      const workspaceId = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
      this.powerBiService.getReports(workspaceId).subscribe((res: any) => {
        this.reports = res.value || [];

        this.reports.forEach((report) => {
          this.powerBiService.getPages(report.id).subscribe((pages: any) => {
            console.log('Pages object:', pages);
            if (pages && pages.value) {
              this.reportPages[report.id] = this.filterHiddenPages(pages.value);
            }
          });
        });
      });
    },
    error: (err) => {
      console.error('Error retrieving token:', err);
    }
  });
}

The Problem:

The app freezes after printing the access token when attempting to call the getReports method to fetch reports from a specified workspace. It was working fine until recently, and I haven’t made any code changes.

Troubleshooting Steps:

• Checked the Access Token: The token is being successfully retrieved.
• Inspecting API Calls: The freeze happens just before making the GET request to the Power BI API.
• Suspected API Rate Limits: I’m concerned that my account might be blocked due to exceeding API rate limits or making too many requests.
• Potential Blocking: I suspect my account might have been blocked from making GET requests to the Power BI API.

Questions:

1. Rate Limits: How can I check if I’ve been blocked due to exceeding API rate limits? Where can I see the rate limits for Power BI?
2. Account Blocking: What types of accounts are blocked from making API requests? How can I determine if my account has been blocked?
3. Logs and Diagnostics: Where can I find logs or diagnostics to confirm if the API calls are being blocked or if there are other issues at play?

Any guidance on how to resolve this issue or further troubleshoot would be greatly appreciated.