Around 5-6 seconds delay in the response for Power BI embed report using React Native and Node

[ShaniK]

Dear Team,

We have implemented one functionality in React Native application to show Power BI report inside React Native web view for which we have implemented the server side logic to return the embedded URL through power bi client in server side and we are successfully able to lead the report in React Native web view but we are getting 5-6 seconds of delay to load the complete report in Web view which impact the user experience. Please find the below code for your reference-

// ----------------------------------------------------------------------------

// Copyright (c) Microsoft Corporation.

// Licensed under the MIT license.

// ----------------------------------------------------------------------------

let models = window["powerbi-client"].models;

let reportContainer = $("#report-container").get(0);

// Initialize iframe for embedding report

powerbi.bootstrap(reportContainer, {

  type: "report",

  settings: {

    filterPaneEnabled: false,

    navContentPaneEnabled: false,

    layoutType: models.LayoutType.MobilePortrait,

  },

});

// AJAX request to get the report details from the API and pass it to the UI

$.ajax({

  type: "GET",

  url: "/getEmbedToken",

  dataType: "json",

  success: function (embedData) {

    // Create a config object with type of the object, Embed details and Token Type

    let reportLoadConfig = {

      type: "report",

      tokenType: models.TokenType.Embed,

      accessToken: embedData.accessToken,

      // Use other embed report config based on the requirement. We have used the first one for demo purpose

      embedUrl: embedData.embedUrl[0].embedUrl,

      settings: {

        filterPaneEnabled: false,

        navContentPaneEnabled: false,

        layoutType: models.LayoutType.MobilePortrait,

      },

    };

    // Use the token expiry to regenerate Embed token for seamless end user experience

    // Refer https://aka.ms/RefreshEmbedToken

    tokenExpiry = embedData.expiry;

    // Embed Power BI report when Access token and Embed URL are available

    let report = powerbi.embed(reportContainer, reportLoadConfig);

    // Clear any other loaded handler events

    report.off("loaded");

    // Triggers when a report schema is successfully loaded

    report.on("loaded", function () {

      console.log("Report load successful");

    });

    // Clear any other rendered handler events

    report.off("rendered");

    // Triggers when a report is successfully embedded in UI

    report.on("rendered", function () {

      console.log("Report render successful");

    });

    // Clear any other error handler events

    report.off("error");

    // Handle embed errors

    report.on("error", function (event) {

      let errorMsg = event.detail;

      console.error(errorMsg);

      return;

    });

  },

  error: function (err) {

    // Show error container

    let errorContainer = $(".error-container");

    $(".embed-container").hide();

    errorContainer.show();

    // Get the error message from err object

    let errMsg = JSON.parse(err.responseText)["error"];

    // Split the message with \r\n delimiter to get the errors from the error message

    let errorLines = errMsg.split("\r\n");

    // Create error header

    let errHeader = document.createElement("p");

    let strong = document.createElement("strong");

    let node = document.createTextNode("Error Details:");

    // Get the error container

    let errContainer = errorContainer.get(0);

    // Add the error header in the container

    strong.appendChild(node);

    errHeader.appendChild(strong);

    errContainer.appendChild(errHeader);

    // Create <p> as per the length of the array and append them to the container

    errorLines.forEach((element) => {

      let errorContent = document.createElement("p");

      let node = document.createTextNode(element);

      errorContent.appendChild(node);

      errContainer.appendChild(errorContent);

    });

  },

});

Please check and do let me know if we can add anything else in the configuration to reduce the responce time or do we have any other solutions. Would really appreciate if anyone can address this issue.

[v-linyulu-msft · Accepted solution]

Hi, @ShaniK 

Regarding the issue you raised, my solution is as follows:

1.Firstly, besides disabling the filterPane and navContentPane, you might consider disabling other unnecessary settings:

For instance,If the bookmark feature is not required, you can disable bookmarks.

settings: {
  bookmarksPaneEnabled: false,
}

If there are page-level visual objects in the report, consider disabling these objects or reducing their number.

2.Secondly, if possible, try preloading some data before the user requests the report. This can reduce the waiting time for users. Here are some relevant documents that might be helpful:

rel=preload - HTML: HyperText Markup Language | MDN (mozilla.org)
How To Use Preload and Prefetch in HTML to Load Assets | DigitalOcean
 

3.Next, checking server performance, optimising database queries, and using caching are key steps to enhance application performance. Here are some relevant documents that might be helpful:

4.Finally, use asynchronous loading techniques and fetch for API calls.

Asynchronous JavaScript - Learn web development | MDN (mozilla.org)
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.