microsoft / powerbi-client-react

Power BI for React which provides components and services to enabling developers to easily embed Power BI reports into their applications.
MIT License
305 stars 96 forks source link

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

Open sanyam01 opened 2 weeks ago

sanyam01 commented 2 weeks ago

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 refresh the report every 1 minute using refresh 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 commented 6 days ago

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.