Memory Leak or Heap Size Increase in app.powerbi.com: report Embed ultimately resulting in blank page

[sanyam01]

Issue

We are experiencing a continuous increase in heap size when embedding Power BI reports using the PowerBIEmbed component from the powerbi-client-react library. The issue is particularly noticeable in the heap size of app.powerbi.com:reportEmbed, where memory usage grows over time, leading to blank page.

Steps to Reproduce:

1. Embed a Power BI report using the PowerBIEmbed component and reload the report every 1 minute using reload api.
2. Observe the heap size in the browser's developer tools (Memory). Record the data for around 3 hours.
3. Notice that the heap size continues to increase without releasing memory.

Expected Behavior:

The memory usage should stabilize after the report is fully loaded and rendered. It should not continuously increase, indicating a potential memory leak.

Actual Behavior:

Memory usage in app.powerbi.com:reportEmbed increases over time, causing a continuous growth in heap size and ultimately resulting in blank page.

Environment:

powerbi-client-react version: 1.3.5 React version: 18.2.0 Browser: Chrome

Additional Context:

I have implemented cleanup functions for event handlers and the embedded report, but the issue persists. This problem may originate from the client library or how it interacts with the Power BI service.

Code for embedding, reload, and refresh:

<PowerBIEmbed embedConfig={reportConfig} eventHandlers={eventHandlersMap} cssClassName={"report-style-class"} getEmbeddedComponent={(embedObject: Embed) => { reportRef.current = embedObject; }} />

useEffect(() => {
  if (reloadMinutes > 0) {
    const reloadInterval = setInterval(() => {
      if (reportRef.current) reportRef.current.reload();
    }, reloadMinutes * 60 * 1000);

    return () => clearInterval(reloadInterval);
  }
}, [reloadMinutes]);

// Refresh the report
useEffect(() => {
  if (refreshMinutes > 0) {
    const refreshInterval = setInterval(() => {
      if (reportRef.current) reportRef.current.refresh();
    }, refreshMinutes * 60 * 1000);

    return () => clearInterval(refreshInterval);
  }
}, [refreshMinutes]);

[v-MadhavC]

Thank you for reporting this issue. We will reproduce it in our environment and will update you on our findings within the next few weeks.

[v-MadhavC]

We monitored the heap size by taking heap snapshots after each refresh and recorded memory allocation for over 3 hours. We didn’t observe any significant increase in memory usage, and the report displayed correctly without blank screens.

Could you share more details on what happens after the blank screen appears, such as any errors or browser behavior?

[sanyam01]

Thanks for taking a look at the issue.

Okay, so I have changed the "refresh" in issue with "reload".

I've observed that when using the "reload" API, the memory size increases much more significantly compared to using the "refresh" API. While the increase during a refresh isn't as large, over time—even with small increments—it adds up significantly, especially after 4-5 days of continuous usage.

I suggest combining the "reload" and "refresh" APIs for testing. For example, refresh every 20 seconds and reload every 30 seconds, and then monitor the heap size over a 3-hour period. You will likely see a significant increase in memory usage during this time.

Here’s the suggested testing setup:

Set the reload interval to 30 seconds. Set the refresh interval to 20 seconds. Use a report that is complex and contains many components. Browser Behavior: Our clients use reports that are rendered in the browser via this app, and they run continuously for 3-4 days. What we’ve noticed is that after running for multiple days, the browser becomes unresponsive. Below is a screenshot showing this behavior.