Viewing PowerBI embedded in IFrame and the report keeps refreshing every 5 seconds or so

[kcross2000]

Hello,

I have an issue where I'm showing a PowerBI report in our custom Angular 8 web application in an IFrame.  This was working fine a couple days ago, but now the reports are refreshing/reloading every 10 seconds or so and I cannot figure out why.  We have  a PBI Premium capacity account and I've looked at every setting possible in app.powerbi.com and on the reports in PBI desktop to no avail.  Can anyone thing of a network or application setting that would cause the reports to keep reloading?  Thanks so much for any help. 

[MattCalderwood]

Hi @kcross2000 

I can't think of any embedding settings that would cause this.
I am not familiar with Angular enough to know if it is the cause - but is it possible it is something in your application that is causing the parent component to re-render?

Otherwise, this comes to mind... https://docs.microsoft.com/en-us/power-bi/create-reports/desktop-automatic-page-refresh
Might be worth checking?

[kcross2000]

I do have "Page Refresh" off for both reports.  I've also still yet to find the issue, but I do think it's something in the web app that's causing this reload/refresh behavior.   I know that even in the older version of the web app, if you resize or move a browser window the report would reload.  Is there a way to prevent that behavior some how?  If so, maybe I can give that a try.  

[MattCalderwood · Accepted solution]

I cant confirm that the same would work in an Angular project... but a React project I have worked on, relied on the component hosting the Embedded Report (IFrame) tracking its own state.

Then, when re-render events occur, the component decides IF the call to embed needs to be made.
By tracking the current report ID/URL and the state of the embedded object (PreLoad/Loading/Rendered) - I could determine if a reload was required. It sounds as though some external events are causing your component to refresh/re-render - and your code is calling back into the embed function - even though it has already completed and doesn't need to be done again.

Wiki page for tracking events is here: https://github.com/microsoft/PowerBI-JavaScript/wiki/Handling-Events

It's difficult to know for sure without seeing the code - but maybe some verbose debugging/console outputs willl help track it down?

[kcross2000]

I think you are exactly right.  I think the new signalR events that are occuring in the background of the web app are triggering some onchange events to the IFrame in which I'm showing the PBI embedded reports.  I was able to fix this in Angular by using the changeDetection: ChangeDetectionStrategy.OnPush component option and basically ignoring all event changes in the report component that houses the IFrame.   I've attached my code in case anyone else runs in to this.  Hope it helps someone.  I've bolded the code that is relevant to this issue. 

import { Component, ChangeDetectionStrategy, ChangeDetectorRef, AfterViewInit} from '@angular/core';

import {ActivatedRoute} from '@angular/router';

import { Router } from '@angular/router';

import { SafeUrl, DomSanitizer } from '@angular/platform-browser';

Component code:  

@Component({

    selector: 'dep-request-detail-report',

    changeDetection: ChangeDetectionStrategy.OnPush,

    templateUrl: './request-detail-report.component.html',

    styleUrls: ['./request-detail-report.component.scss']

})

export class RequestDetailReportComponent implements AfterViewInit {

    public url: any;

    constructor(

        private ref: ChangeDetectorRef,

        private readonly router: Router, 

        private route: ActivatedRoute,

        private sanitizer: DomSanitizer) {

        // Get the Url parameter from the activated route

        this.url = this.router.getCurrentNavigation().extras.state.url;

    }

    cleanURL(oldURL: string 😞 any {

        // Sanitize Url

        return this.sanitizer.bypassSecurityTrustResourceUrl(oldURL);

    }

    ngAfterViewInit() {

       // Ignore/detach from the change detection for this component

        this.ref.detach();

    }

}

HTML code:

<iframe style="margin-top:15px;" width="1140" height="641.25" [src]='cleanURL(this.url)' frameborder="0" allowFullScreen="true"></iframe>

[MattCalderwood]

Excellent - glad you managed to find the fix. 😀