2

I have recently been working on embedding power bi into a salesforce LWC, as outlined here: https://github.com/PowerBiDevCamp/SalesforceAppOwnsDataEmbedding. Pretty cool stuff, but the particular use case may be beside the point. I am having some sort of rendering issues with the lightning web component. Here it is:

import { LightningElement, api, wire } from 'lwc';
import getEmbeddingDataForReport from '@salesforce/apex/PowerBiEmbedManager.getEmbeddingDataForReport';
import powerbijs from '@salesforce/resourceUrl/powerbijs';
import { loadScript } from 'lightning/platformResourceLoader';

export default class PowerBiReport extends LightningElement {
  @api WorkspaceId = '';
  @api ReportId = '';
  @api recordId;
   
  @wire(getEmbeddingDataForReport,{
    WorkspaceId: "$WorkspaceId",
    ReportId: "$ReportId"
  }) report;
    renderedCallback() {
      Promise.all([ loadScript(this, powerbijs ) ]).then(() => {
        if(this.report.data){
              if(this.report.data.embedUrl && this.report.data.embedToken){
                const reportContainer = this.template.querySelector('[data-id="embed-container"');
                const reportId = this.report.data.reportId;

                const embedUrl = this.report.data.embedUrl;
                const token = this.report.data.embedToken;

                var visualConfig = {
                  accessToken: token,
                  embedUrl: embedUrl,
                  id: reportId,
                  pageName: 'ReportSection',
                  tokenType: 1,
                  type: 'visual',
                  visualName: '1837fab00804802016c6',
                  settings: {
                    panes: {
                      filters: { expanded: false, visible: true },
                      pageNavigation: { visible: false}
                    }
                  }
                }
                // Embed the report and display it within the div container.
                var report = powerbi.embed(reportContainer, visualConfig); 
              }
              else {
                console.log('no embedUrl or embedToken');
              }
                
              }
              else{
                  console.log('no report.data yet');
              }
        });
    }
}

Now this works fine and as intended. The getEmbeddingDataForReport returns all the necessary data (embed url, token, etc...), and I have the chart embedding and showing up (mostly) properly. I have the lightning web component on a lightning record page. But here's the problem. Occasionally when the page loads, I get an error message: enter image description here

After occasionally getting this error pop-up, I did some digging and noticed that I ALWAYS get it if I click on 'Edit Page' to pull up the lightning page where the LWC is embedded. When opening the console, I see this error message duplicated about 4 or 5 times: "Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Window': # could not be cloned." enter image description here

After logging at some random places, I noticed that I do not get this error if I comment out the line where powerbi.embed uses the configurations and selected html id to embed the actual report. So, there is either something wrong with this line:

var report = powerbi.embed(reportContainer, visualConfig);

or this line:

const reportContainer = this.template.querySelector('[data-id="embed-container"');

I am pretty stumped on this. I don't have the slightest idea why this could be happening. I read a couple things online that indicated this error often relates to embedding a LWC in a context that doesn't support LWCs and that the solution would be to wrap the LWC in an Aura component; however, I don't believe that applies here because the LWC is embedded in a lightning record page, which clearly supports LWCs. So, somethings is going on under the hood here relating to one of those two lines I pointed out...any ideas what is happening here? Please help!!

Luke Sharon
  • 140
  • 1
  • 7
  • 22

1 Answers1

-1

Will be hard to give you meaningful answers without a free, simple to setup power bi environment.

Have you tried enabling "light dom" for your component (https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_light_dom) or enabling Lightning Web Security (careful with that one, it's a switch for whole org, not just single component): https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.security_lwsec_intro. (and give it some time! When I was playing with vis.js implementation not everything worked on my LWC + vis chart. I enabled LWS, didn't notice any immediate changes... but after ~30 mins something flipped, caches expired or something and the chart started to behave better)

And enable Setup -> Debug Mode for your user if haven't done it already, you may get better error messages.

Note the versions on the sample Aura and LWC components, 39 and 46 respectively. This likely means they had to cheat when they made the Aura version of the component. Maybe the Aura version of the mashup has all features but the LWC one is limited? If you don't want to enable LWS for whole org - try downgrading version in Setup -> Session Settings (if you have Aura implementation of this thing at all). You'd need to read up about Locker Service, Salesforce's way of disabling dangerous javascript. (In olden days you chose Locker version per component not for the whole org, that's why I'm suspicious about that "39")

Another thing you could try is doing the implementation as Visualforce page (they run in iframe and served from different domain so Salesforce doesn't have to be so restrictive about the javascript, stuff is unlikely to spill over to parent page) or as aura:container embed

eyescream
  • 18,088
  • 2
  • 34
  • 46