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

[IsgBi]

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.

[IsgBi]

The  thing is this exact same code was  working 2 days ago and i was  able to see the report list in my app  and in the Chrome console i could see the list of reports  and the individual pages  as well in the sidebar. But now in the exact same code after a couple of days  , the API call isnt going out and the code just freezes after getting the token and nothing renders in the sidebar.I am  100% sure there is no problem with the code syntax but something is blocking me from making the API request . Requesting your help  and any would be appreciated . Also  my PowerBi license type is Premium per user .Here is a SS of how my app looks with the sidebar that has the list of reports that I get from hitting the Get reports in Group API and then based on the link i click that particular page renders in the div   : 

[Anonymous]

Hi, @IsgBi 

According to you, the first few days worked fine, so we have the following solution:

1.First, check whether the API rate limit and token expire:

The Power BI API has rate limits to prevent overuse of resources. You can check out Power BI's rate limiting documentation to learn about the specific limits1. If you exceed these limits, Power BI returns HTTP status code 429 (Too Many Requests) and includes a Retry-After HTTP header in the response indicating how many seconds you need to wait before you can make the request again.

Here's a screenshot of the documentation:

Here are the relevant documents:

Power BI REST APIs for embedded analytics and automation - Power BI REST API | Microsoft Learn
 

2.Second, confirm that you have sufficient permissions to access the Power BI APIs. Make sure your Azure AD application has the correct permissions.
 

3.Then, check to see if there is a proxy server or firewall blocking your request.

Here are the relevant documents:

Troubleshoot sign-in issues in Power BI Desktop - Power BI | Microsoft Learn
 

4.Finally, using Azure Log Analytics can help you view your activity logs for Power BI. You can configure Log Analytics to connect to your Power BI subscription to collect and analyze log data. This can help you determine if an API call is blocked or if there are other issues.

Using Azure Log Analytics in Power BI - Power BI | Microsoft Learn

Of course, if you have any new ideas, you are welcome to contact us.
 

Best Regards,

Leroy Lu

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.