Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

Reply
francotiveron
Regular Visitor

powerbi javascript DataCloneError exception while embedding report

 This is the function called

 

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}

#reportContainer {
height: 100%;
}
</style>
<script src="https://npmcdn.com/es6-promise@3.2.1"></script>
<!--
<link rel="stylesheet" type="text/css" href="~/Content/style/style.css">
-->
<script src="scripts/powerbi.js"></script>
</head>
<body>
<div id="reportContainer"></div>
<script>
...
function init(title, embed_config) { var reportContainer = document.getElementById('reportContainer'); var reportFrame = powerbi.embed(reportContainer, embed_config); reportFrame.fullscreen(); document.title = title; }
...
</script>
</body>
</html>

where embed_config is:

-		embed_config	{...}	Object
		accessToken	"H4sIAAAAAAAEAB2WNw7sCA5E7_JTLSCp5ReYQN57r0wt770d7N23ZzIGBAg-ssj6-4-VPv2U5n_---dCdqd-gU71iDr0Clo2uF2pD9JULrF0Hl_C_TjKE7GZODksDphx_ShfGDng88bXP7pOp-n9gZ3HZSyIFrlClSzP9BGZ-qxjPFnflbtCQhEgyqBQiiJgGpN4bCqijMYXiG8pKVnsKVPVFvb9r1wHFJK0rtKeheZMLqCLZsKjPlGWmuOcHcZPRvD6sM89UjgBEGa6p65lZmW6LS_4D27Fxblwsx0HetMsN6bua1ZwHxzD4nLjnTUjrT26XZtCVqWxIGccUw6yHVXPWCTqNq3BAQZnE5JSl0aPyFCKe4veQgUyXY4Wa3yn8K6JRytQT6odtoZARCFLgux5fU0iXcPrw_4zEm64RLE065hGVnh-VrKEKZ1p-V7f-FaiKN8VEACPU1L7VCD9TJLksnfR8I7sO9CJmpKWvQeYs68-7spOTZgVCE_RJhDz5iL7icIwuREcodyDlFxdpZzCONexVe1fUvn6MG19iuw7kzsdZF-zwT8j8zWEe3RqnzBRBxBVoJQ_jNyJgs9wG1iBkW-9SnoJD4Q3M8jrwy-W74M3HcLQSDKODyOZbEjvevzq7MoGu3tPypTVPoMS7Fkkm6a1cFpg1uRr76fejZ8vv13VsVKlaB43-aMaygLegeiO1Id3XYjCpKThuLACXiL2SYjkySwHYRFzp0gB_RihjUoZN2KtEYRhHuLYI4_GdCpyV7708AG444SDXoX6ufQtZb67lYAYgzezmOEjb-sY0aOFgQZPTiOyQ-ISTttkGw-0yD6Zq3G5VWyTj3hRxRKmH7V4yapl95R8ZQBC9gDp9q3eh4OH0AAzsc6gaqRDrMiNb_zqRVyvcDaOr4i2QO59tHvBU6feLR5Am6AU3JojAdl9LebF2U8yqi5vWgoBmiEXhoKzogNWqbV40tPGj3r0Zdak4-VPqKX88NntHO75Fk5Yqf3N3tpI49y2wpiWbss68VZHlhPkKQ_YBUOsKrfHT7L8Vq8vSNT2CYmbJISApQ7E1j500F3yP6z7NTLMS5Jh0HWnopEj5ziQV_iFyffOtmUFzUZCSdYbK9KmSOvEEYGnNKclGsANE2pyHTE_x6g2BaKtEjb9QyBYdhQIp19rvJCZ5nr0RFaiuMZO0aHBR4BISygySVEouRwHIc4qLuzy1Y2lwnRFzEapvaRMl7Ca7nDDh21aK0NaMWb0z-p4xXpzqGtlD3TOnbFtv0Kkr9Qfu3I--DwILaYWNUXM7PqANP0E9HG-mF37Bhze4vmuyL5shL40SOqoAEKwqN3l_BNIbsTLJJENI-weBbwc8yX2mhMwMzi2q6KEADShLdt5s--P9Vvv9cqMetnOEOD6vYBcMvxaMzqs0qoZpB7lMph7gFg0eid7ekJh0W0finUXMr_CDMMOF7UM5Qi8IGzIhfVygA7fomVSHwMgJ3S0fQ6SE-MWBH9ElVI7qOt6NC_CwkEq57KArCubMPmrrVMJkCs9Mf21TBgCGoYBpD0C582rsB4m71B0DhZBWdK8NMeV8PTi0HIZ4NaetdG4iGyXR1hdimcvN0Y3v83oXhxrP98ujtdt3FdIffaVLyL62UhyxJRUN9iM8wU69PNsDbCg0_OWhqJpxAdPcVsvM0WjGQRy6M1bj_3wEomJM18nmIGZgb84foydglEqOI4fhOnGaKyXlIdAS8pN0IuZfk8GumXnfDEJjOmxbAkfAwcl6vt84Gw-IUYZoKipcyvi9g7h8hnkAtZDnr3O9IbllW8JxxC7-KNo6A74U66gGRVIEaf45MfvJ1izzLdxvLjJiY0ZISf-CvSmvEjeyVNhFE7aFrXh0C9D9lPHRlKGuQBDrGXMmptipYw-oH3b-c1Crgg-B1IscBFRCNRuQl35OH6ZvtICs8d6oMRFjM5ex6FCuRsYQhvY3pnuT0L2BhfPZmOnAYrtBqRUlWskmvBjSp39cY6fmd7oOwtUbm6x7zUTQUrVB9iLmIEI7_7AZd9Wj2zYniFAroZvoMRqjP20tYJlRvTpXoyeuTwhMmNGWAAZadQJ7vIz3Crf5_iNOVrNL346GJHITo2yRjp412KjRnEKNR90SHmL_uZ-B-6ngaPuCKNhEpddrF4Qj18HHY2rRoAU_0bb9aqT5a6t4MzHRNSQ5P35z5-fAud9UovnZyc6gY7M35kWqYEIF1fFBzQMQMPcBttBl8ggtOiZeI_z5itxsBTaXaIe-1dV8n15UELEfi2Sur5MhNQDhmNzcxp3UgMMIEhJPpSOv8e1ZVnyrQSSE70LgNpD59hl9VZZUsoDrefvXrPzu8FvbryFiQdp34FB0LTGLVKcnkmyN5TG00sB7ZsGvgc4DbwsjtI4J5HODRF7IGMNJFXJFyLQGO8OhntNuIom9uybdHwUjHTOBHtRZQolbXX9yjq3KBIgZJH2V24uTlt8J4mC76Fdo8l-mLoZBgUxTSJpeZhX3M4URFES2p4KnSbDJvarRCfRFxQh1W8ClbGsebpPAV9o0Ad28aq__voH8zPXxSoHP8pxz5736jFilWeMHrWu2RL79W-W21Rjuh9r8Uv7vmjN1RD_9g8lRaVc3Uq7njXh_XzF7tU0rWU6SVP3iGWY5TQnUZ9MzhUJozSBAfK-ZZtA8qBX9W128LZjE_C_I1P-vNXaqmidqZaxG_wApPa2n-6wulVlBWk7tsNjqadD4Ez8CrfpRshtRamlnb-Oe36ZcDzTBR1PV7zDajSbu1KdjKZ5itpGWT3Bv2XuHwcdyrLU99bRGOfiiUxtVEo7Xvpp4WllbHT_0DdFUvY5BPjZw-R4LMxUbm9ox6uo6WyWgOx2fl-gLoEcxRDYCpddFktkqyunb7KJdEIpo6FvNy_riA6LS52X26ETDFHqCOA_daK2mNeG-ag9yxq423UnIdI_zP_7P0BMnlxCCwAA"	String
		embedUrl	"https://app.powerbi.com/reportEmbed?reportId=81fd7b7f-1876-41b4-be4f-f47e93efa83f&groupId=41019ecf-7d22-46ee-9fcf-745ec8d40d05"	String
		id	"81fd7b7f-1876-41b4-be4f-f47e93efa83f"	String
		permissions	7	Number
-		settings	{...}	Object
		filterPaneEnabled	true	Boolean
		navContentPaneEnabled	true	Boolean
		tokenType	1	Number
		type	"report"	String

 

in powerbi.embed(...) at runtime, an exception

0x800a139e - JavaScript runtime error: DataCloneError occurred

is generated at this library code line:

 

/*! powerbi-client v2.3.4 | (c) 2016 Microsoft Corporation MIT */
(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')

...

		     * Post message to target window with tracking properties added and save deferred object referenced by tracking id.
		     */
		    WindowPostMessageProxy.prototype.postMessage = function (targetWindow, message) {
		        // Add tracking properties to indicate message came from this proxy
		        var trackingProperties = { id: WindowPostMessageProxy.createRandomString() };
		        this.addTrackingProperties(message, trackingProperties);
		        if (this.logMessages) {
		            console.log(this.name + " Posting message:");
		            console.log(JSON.stringify(message, null, '  '));
		        }
		        targetWindow.postMessage(message, "*"); DataCloneError
		        var deferred = WindowPostMessageProxy.createDeferred();
		        this.pendingRequestPromises[trackingProperties.id] = deferred;
		        return deferred.promise;
		    };

 with this message content:

message	[object]
 __proto__	[object]
 body	[object]
  __proto__	[object]
  accessToken	"H4sIAAAAAAAEAC3WxQrtgAEE0H952xTiVugiduPu2cXdPaX_3kfpflYHhpl__7HSd5jT4s8__0Rchno0SnxMInO358zZ_vBKoFTIAJJCSOuRA3E_GBSfwmT0cK6qgMQXvI70r4GVsQ1lbaS5Drrd_hFdrwftQcoajSsbjhN50KC-094qe1AQI-KX0PO6e9_tCe_yFxks7CdB99cqVoYuBDQDI2CiKH2m2SHmGDdg-O48cS7fRZKVkQRuy-c-LFpVYzN7X_FLRj9Z4g37lDB7SmTVAr-iRyS1RTt0J7LiallKs_mBLvaH-933hNSpmnnYyR1nYMSKyHllszEJj_mm7FsTcP2VHCu20mf0hPdKuuzDy84NculOxXdn1CQAsR18Y5WWd2OHRK5CM7HcwsrBppuxXmpYucs2USYjMgCrBa2gduJuDa5g2zMkXk6llChhOknJX0l6pXwkrAnl0vogOf5a98-7FbalaRoNOCfhPeHA5_w7ildZrFGVzxNCkJKe9IkFHNq-AzPyXkzhWxPNUvw-Gc6rkdqrahFqaOGqfKhJipSWdX705SnmeoYuxkqFBw1N8yx6iOZrP6LtxooFqr1-ePmyxxjW1ex7QIDazEcJ_9gqYoEgq1o7mIziglf1mqpIi9I8Ooco3xFjuRXsTdVWfiQ3JmBcTzLcFCW_DgkSBw1felT6VwqQeLyCLB8LfC8ELYuTaPQbN7wCuL5OGAYDOBdSSsqWEDco-1tq4h2nXD432s6NT0W45NPqHobbbdKdigG2Zk1_B_cbYWbQGcu7Uvf0yAP8VRPK4DITNIdLnPVifggTr20up2x0UPOcg8L7Kw0w9yswVRzg4gREA_id245efOhvlef0Ugx7O5RkM7F3uYxOdnLvWc1jjVClJW6cB5d-KVpe3LVn8wBu5Sep97KxJXijFpoWGC3qtOoF0gkdhlyHuLQVXUwbzhuwCJ_p59i8YTXUj3TzDs5W5SbYqtdZ1ep2dQUVmIVQDOO31WzqEvE3De70J8K8YmEl0VDvVih5G1NTZqetA5OeQrZ9zKNBiQQq5XFOUpBMKAX9w8gjUgcjhs0OQu3-ElbmyehqmyanignKYb5CqgnBQn1UzEHZl1akY7fCG_os7oz5eJWm2Z-OackEwRdezo7WPoVQG5cUQ1S6Im2f7FexARmPkzrkPUWWsJZ9nk2kgcS2EMpdcCqjD9-UWZHhkM-thIbD5t0fZ_YtW_nbOe54PRGQgRSz3izXyM5r2W06agOpFPDxCchPk6SCxFVkBXCL1k1Sd4-FU68n0cx6Ki0QASAiL2wj69tyWFQXWYmQSNktGHw1GlyYWtVCkh13o4dc5ljnfe7AMlbnox5Z8uvEpdEhxl-zPtb3nyT6OMNTzMlELAFK2rcCdBQMVkh-ePYQMvbVyDMFp65DYExmIZUrb5Ui4BGIHtyPNvZo_rqqM81KNGANWh7WZ7vja5zrlK0ZZTJ4i60mrPBt9UHHCOCAmbUGlqU7eIIklbSHyndnVnM4tv4keUp8e1clBHJrDaj58jlMAKQeLSYwSdZhGYlo9vjXV-t4fCwRO5ZeFG7Ri0ktkgMc-0IFgvwBW_I5ZRL0Wp7p8IzkOWLsK2EDmS0NrWWtktE4sgciuVUHMLmr3f7QJiLj74yD-Z0K8CE1vQW32CkLd27CHXQx1ChjpMftF6bv1Uo_xCO4VWAKwdcWOM6BgfdTC3IgnGCuiAK3DUNaFVJ-eMEQTjSRoYCoUihU43lXS8thmONgqJLhvlPEh0n-vhlt9f6ct9uu3I0TAI7MXwyP_batjwNjCyxUI4dMqVInaASo-JVtS15yIdeePh8mf6KIGAVRqsdsZH7w-uOvW1KJmyjpBQq5c7dJW5LGI52-4T4W33B-HH9fzJuYQCsSSJG5vfEHTHG20y2ZNuUzJUjVL3ozJdPEWZwlk7stXKbnDN6ZNvKrCIKrvdtRhfymogpensQFLUiXboDj3wth08xqePkCG-G9txzghe0ehfseUqti7ZqEQ6m1m77T171C6WkbpETGHCfsuzXiAYLynZbdOhUktEh-eT6V8GXi4Luy5JxBnJY-SKVJKd-gSNl3AscsIXRLyFT_7ZReKfV2OT3wLp6vSt1zVbhsF3gaRq5nnZ92QmU1dV5ipo9Mu4hy1hCNRhWrkcfKz0SkJnCeim55Dz6JBuA-rXGgg7S9pSlsd_puODFGcj_mX__6848_3PYux6yW79-b8eu1yp3nyLl4XESRyVLf-alm8lZc0KdNzhkiJtmNhx4F8AsF5SMe2Hq7fTH8MApHRgb2Z15VvcAOlDz0bc4zqYbl3PmVawCwLBy1BGcLbPCVcT3UKo93RszotoM8HA7Yn_QSVx6LUvB96BoyMzqAEW15aTZg9QT_cITLIisQkXNNtaSu64p1R0BZfPtHqPYcWo5t44tw-sPFn7e_AE8TAYhZSywo7IK3H7mS9eKgeaSK1D7GnlMl9yvLsn2ykPCtEk59TDP-dyeLeKfGY7SYPerTDWvwXHAnk-GjGXNkE-RyEe0rvtEOdfpMib1zm2vJExo308aILzqwSK0dB6XjW4b_z_wuTbnJwV_lMAlX6Iw99YBO6skmZgE76f5fym3rKT3Orfwb83JgTL4eWRm2wnmR6K644QJDkuwLMN6hUGIZJuHgrajTQZ8mEHYylRn3PmnX0_Wu2FMar73PZVrDchDLUiSKeaegRXQM1cB0UEuxCEnvhSQriYxmJde9dPU4Qj-jOY9SBL0BNntjmqvI4VfcKwRyIO-f67z03ZxOz1brJAijBaLgAaPSPu61Fzev2qO_c2ByY3G_CcRn6PKL9FMg_kKnpWkUSn5mbmYhWGILNIrKZY1akbBvn3drv5v5AGyD7pJWmJtX0F73CRj0IChvT3LhdoDbpcpIJbiR4CzUZ4jhhm2sz5LwDGikBEbYqtOviPJkuXry-ytv9Ru29QlttH3Ziqn_Mv_nv0Gzfi9aCwAA"
embedUrl "https://app.powerbi.com/reportEmbed?reportId=81fd7b7f-1876-41b4-be4f-f47e93efa83f&groupId=41019ecf-7d22-46ee-9fcf-745ec8d40d05"
id "81fd7b7f-1876-41b4-be4f-f47e93efa83f"
permissions 7
settings [object]
filterPaneEnabled true
navContentPaneEnabled true
tokenType 1
type "report"
uniqueId "a9n8zm"
headers [object]
__proto__ [object]
id "asg402"
uid "a9n8zm"
x-sdk-type "js"
x-sdk-version "2.3.4"
method "POST"
url "/report/load"

 Note that the init function is called by a different web page which creates the target page with this javascript;

 

Client.openReport=function(name,embedUrl,reportId,embedToken)
 {
  var powerbi_settings,r,powerbi_conf,r$1,html,view;
  powerbi_settings=(r={},r.filterPaneEnabled=true,r.navContentPaneEnabled=true,r);
  powerbi_conf=(r$1={},r$1.type="report",r$1.tokenType=1,r$1.accessToken=embedToken,r$1.embedUrl=embedUrl,r$1.id=reportId,r$1.permissions=7,r$1.settings=powerbi_settings,r$1);
  html=Global.jQuery("#embedReportHtml").text();
  view=Global.open();
  view.document.write(html);
  view.init(name,powerbi_conf);
 };

If the embed_config object is created directly in the target page, then no error.

2 REPLIES 2
Eric_Zhang
Employee
Employee


@francotiveron wrote:

 This is the function called

 

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}

#reportContainer {
height: 100%;
}
</style>
<script src="https://npmcdn.com/es6-promise@3.2.1"></script>
<!--
<link rel="stylesheet" type="text/css" href="~/Content/style/style.css">
-->
<script src="scripts/powerbi.js"></script>
</head>
<body>
<div id="reportContainer"></div>
<script>
...
function init(title, embed_config) { var reportContainer = document.getElementById('reportContainer'); var reportFrame = powerbi.embed(reportContainer, embed_config); reportFrame.fullscreen(); document.title = title; }
...
</script>
</body>
</html>

where embed_config is:

-		embed_config	{...}	Object
		accessToken	"H4sIAAAAAAAEAB2WNw7sCA5E7_JTLSCp5ReYQN57r0wt770d7N23ZzIGBAg-ssj6-4-VPv2U5n_---dCdqd-gU71iDr0Clo2uF2pD9JULrF0Hl_C_TjKE7GZODksDphx_ShfGDng88bXP7pOp-n9gZ3HZSyIFrlClSzP9BGZ-qxjPFnflbtCQhEgyqBQiiJgGpN4bCqijMYXiG8pKVnsKVPVFvb9r1wHFJK0rtKeheZMLqCLZsKjPlGWmuOcHcZPRvD6sM89UjgBEGa6p65lZmW6LS_4D27Fxblwsx0HetMsN6bua1ZwHxzD4nLjnTUjrT26XZtCVqWxIGccUw6yHVXPWCTqNq3BAQZnE5JSl0aPyFCKe4veQgUyXY4Wa3yn8K6JRytQT6odtoZARCFLgux5fU0iXcPrw_4zEm64RLE065hGVnh-VrKEKZ1p-V7f-FaiKN8VEACPU1L7VCD9TJLksnfR8I7sO9CJmpKWvQeYs68-7spOTZgVCE_RJhDz5iL7icIwuREcodyDlFxdpZzCONexVe1fUvn6MG19iuw7kzsdZF-zwT8j8zWEe3RqnzBRBxBVoJQ_jNyJgs9wG1iBkW-9SnoJD4Q3M8jrwy-W74M3HcLQSDKODyOZbEjvevzq7MoGu3tPypTVPoMS7Fkkm6a1cFpg1uRr76fejZ8vv13VsVKlaB43-aMaygLegeiO1Id3XYjCpKThuLACXiL2SYjkySwHYRFzp0gB_RihjUoZN2KtEYRhHuLYI4_GdCpyV7708AG444SDXoX6ufQtZb67lYAYgzezmOEjb-sY0aOFgQZPTiOyQ-ISTttkGw-0yD6Zq3G5VWyTj3hRxRKmH7V4yapl95R8ZQBC9gDp9q3eh4OH0AAzsc6gaqRDrMiNb_zqRVyvcDaOr4i2QO59tHvBU6feLR5Am6AU3JojAdl9LebF2U8yqi5vWgoBmiEXhoKzogNWqbV40tPGj3r0Zdak4-VPqKX88NntHO75Fk5Yqf3N3tpI49y2wpiWbss68VZHlhPkKQ_YBUOsKrfHT7L8Vq8vSNT2CYmbJISApQ7E1j500F3yP6z7NTLMS5Jh0HWnopEj5ziQV_iFyffOtmUFzUZCSdYbK9KmSOvEEYGnNKclGsANE2pyHTE_x6g2BaKtEjb9QyBYdhQIp19rvJCZ5nr0RFaiuMZO0aHBR4BISygySVEouRwHIc4qLuzy1Y2lwnRFzEapvaRMl7Ca7nDDh21aK0NaMWb0z-p4xXpzqGtlD3TOnbFtv0Kkr9Qfu3I--DwILaYWNUXM7PqANP0E9HG-mF37Bhze4vmuyL5shL40SOqoAEKwqN3l_BNIbsTLJJENI-weBbwc8yX2mhMwMzi2q6KEADShLdt5s--P9Vvv9cqMetnOEOD6vYBcMvxaMzqs0qoZpB7lMph7gFg0eid7ekJh0W0finUXMr_CDMMOF7UM5Qi8IGzIhfVygA7fomVSHwMgJ3S0fQ6SE-MWBH9ElVI7qOt6NC_CwkEq57KArCubMPmrrVMJkCs9Mf21TBgCGoYBpD0C582rsB4m71B0DhZBWdK8NMeV8PTi0HIZ4NaetdG4iGyXR1hdimcvN0Y3v83oXhxrP98ujtdt3FdIffaVLyL62UhyxJRUN9iM8wU69PNsDbCg0_OWhqJpxAdPcVsvM0WjGQRy6M1bj_3wEomJM18nmIGZgb84foydglEqOI4fhOnGaKyXlIdAS8pN0IuZfk8GumXnfDEJjOmxbAkfAwcl6vt84Gw-IUYZoKipcyvi9g7h8hnkAtZDnr3O9IbllW8JxxC7-KNo6A74U66gGRVIEaf45MfvJ1izzLdxvLjJiY0ZISf-CvSmvEjeyVNhFE7aFrXh0C9D9lPHRlKGuQBDrGXMmptipYw-oH3b-c1Crgg-B1IscBFRCNRuQl35OH6ZvtICs8d6oMRFjM5ex6FCuRsYQhvY3pnuT0L2BhfPZmOnAYrtBqRUlWskmvBjSp39cY6fmd7oOwtUbm6x7zUTQUrVB9iLmIEI7_7AZd9Wj2zYniFAroZvoMRqjP20tYJlRvTpXoyeuTwhMmNGWAAZadQJ7vIz3Crf5_iNOVrNL346GJHITo2yRjp412KjRnEKNR90SHmL_uZ-B-6ngaPuCKNhEpddrF4Qj18HHY2rRoAU_0bb9aqT5a6t4MzHRNSQ5P35z5-fAud9UovnZyc6gY7M35kWqYEIF1fFBzQMQMPcBttBl8ggtOiZeI_z5itxsBTaXaIe-1dV8n15UELEfi2Sur5MhNQDhmNzcxp3UgMMIEhJPpSOv8e1ZVnyrQSSE70LgNpD59hl9VZZUsoDrefvXrPzu8FvbryFiQdp34FB0LTGLVKcnkmyN5TG00sB7ZsGvgc4DbwsjtI4J5HODRF7IGMNJFXJFyLQGO8OhntNuIom9uybdHwUjHTOBHtRZQolbXX9yjq3KBIgZJH2V24uTlt8J4mC76Fdo8l-mLoZBgUxTSJpeZhX3M4URFES2p4KnSbDJvarRCfRFxQh1W8ClbGsebpPAV9o0Ad28aq__voH8zPXxSoHP8pxz5736jFilWeMHrWu2RL79W-W21Rjuh9r8Uv7vmjN1RD_9g8lRaVc3Uq7njXh_XzF7tU0rWU6SVP3iGWY5TQnUZ9MzhUJozSBAfK-ZZtA8qBX9W128LZjE_C_I1P-vNXaqmidqZaxG_wApPa2n-6wulVlBWk7tsNjqadD4Ez8CrfpRshtRamlnb-Oe36ZcDzTBR1PV7zDajSbu1KdjKZ5itpGWT3Bv2XuHwcdyrLU99bRGOfiiUxtVEo7Xvpp4WllbHT_0DdFUvY5BPjZw-R4LMxUbm9ox6uo6WyWgOx2fl-gLoEcxRDYCpddFktkqyunb7KJdEIpo6FvNy_riA6LS52X26ETDFHqCOA_daK2mNeG-ag9yxq423UnIdI_zP_7P0BMnlxCCwAA"	String
		embedUrl	"https://app.powerbi.com/reportEmbed?reportId=81fd7b7f-1876-41b4-be4f-f47e93efa83f&groupId=41019ecf-7d22-46ee-9fcf-745ec8d40d05"	String
		id	"81fd7b7f-1876-41b4-be4f-f47e93efa83f"	String
		permissions	7	Number
-		settings	{...}	Object
		filterPaneEnabled	true	Boolean
		navContentPaneEnabled	true	Boolean
		tokenType	1	Number
		type	"report"	String

 

in powerbi.embed(...) at runtime, an exception

0x800a139e - JavaScript runtime error: DataCloneError occurred

is generated at this library code line:

 

/*! powerbi-client v2.3.4 | (c) 2016 Microsoft Corporation MIT */
(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')

...

		     * Post message to target window with tracking properties added and save deferred object referenced by tracking id.
		     */
		    WindowPostMessageProxy.prototype.postMessage = function (targetWindow, message) {
		        // Add tracking properties to indicate message came from this proxy
		        var trackingProperties = { id: WindowPostMessageProxy.createRandomString() };
		        this.addTrackingProperties(message, trackingProperties);
		        if (this.logMessages) {
		            console.log(this.name + " Posting message:");
		            console.log(JSON.stringify(message, null, '  '));
		        }
		        targetWindow.postMessage(message, "*"); DataCloneError
		        var deferred = WindowPostMessageProxy.createDeferred();
		        this.pendingRequestPromises[trackingProperties.id] = deferred;
		        return deferred.promise;
		    };

 with this message content:

message	[object]
 __proto__	[object]
 body	[object]
  __proto__	[object]
  accessToken	"H4sIAAAAAAAEAC3WxQrtgAEE0H952xTiVugiduPu2cXdPaX_3kfpflYHhpl__7HSd5jT4s8__0Rchno0SnxMInO358zZ_vBKoFTIAJJCSOuRA3E_GBSfwmT0cK6qgMQXvI70r4GVsQ1lbaS5Drrd_hFdrwftQcoajSsbjhN50KC-094qe1AQI-KX0PO6e9_tCe_yFxks7CdB99cqVoYuBDQDI2CiKH2m2SHmGDdg-O48cS7fRZKVkQRuy-c-LFpVYzN7X_FLRj9Z4g37lDB7SmTVAr-iRyS1RTt0J7LiallKs_mBLvaH-933hNSpmnnYyR1nYMSKyHllszEJj_mm7FsTcP2VHCu20mf0hPdKuuzDy84NculOxXdn1CQAsR18Y5WWd2OHRK5CM7HcwsrBppuxXmpYucs2USYjMgCrBa2gduJuDa5g2zMkXk6llChhOknJX0l6pXwkrAnl0vogOf5a98-7FbalaRoNOCfhPeHA5_w7ildZrFGVzxNCkJKe9IkFHNq-AzPyXkzhWxPNUvw-Gc6rkdqrahFqaOGqfKhJipSWdX705SnmeoYuxkqFBw1N8yx6iOZrP6LtxooFqr1-ePmyxxjW1ex7QIDazEcJ_9gqYoEgq1o7mIziglf1mqpIi9I8Ooco3xFjuRXsTdVWfiQ3JmBcTzLcFCW_DgkSBw1felT6VwqQeLyCLB8LfC8ELYuTaPQbN7wCuL5OGAYDOBdSSsqWEDco-1tq4h2nXD432s6NT0W45NPqHobbbdKdigG2Zk1_B_cbYWbQGcu7Uvf0yAP8VRPK4DITNIdLnPVifggTr20up2x0UPOcg8L7Kw0w9yswVRzg4gREA_id245efOhvlef0Ugx7O5RkM7F3uYxOdnLvWc1jjVClJW6cB5d-KVpe3LVn8wBu5Sep97KxJXijFpoWGC3qtOoF0gkdhlyHuLQVXUwbzhuwCJ_p59i8YTXUj3TzDs5W5SbYqtdZ1ep2dQUVmIVQDOO31WzqEvE3De70J8K8YmEl0VDvVih5G1NTZqetA5OeQrZ9zKNBiQQq5XFOUpBMKAX9w8gjUgcjhs0OQu3-ElbmyehqmyanignKYb5CqgnBQn1UzEHZl1akY7fCG_os7oz5eJWm2Z-OackEwRdezo7WPoVQG5cUQ1S6Im2f7FexARmPkzrkPUWWsJZ9nk2kgcS2EMpdcCqjD9-UWZHhkM-thIbD5t0fZ_YtW_nbOe54PRGQgRSz3izXyM5r2W06agOpFPDxCchPk6SCxFVkBXCL1k1Sd4-FU68n0cx6Ki0QASAiL2wj69tyWFQXWYmQSNktGHw1GlyYWtVCkh13o4dc5ljnfe7AMlbnox5Z8uvEpdEhxl-zPtb3nyT6OMNTzMlELAFK2rcCdBQMVkh-ePYQMvbVyDMFp65DYExmIZUrb5Ui4BGIHtyPNvZo_rqqM81KNGANWh7WZ7vja5zrlK0ZZTJ4i60mrPBt9UHHCOCAmbUGlqU7eIIklbSHyndnVnM4tv4keUp8e1clBHJrDaj58jlMAKQeLSYwSdZhGYlo9vjXV-t4fCwRO5ZeFG7Ri0ktkgMc-0IFgvwBW_I5ZRL0Wp7p8IzkOWLsK2EDmS0NrWWtktE4sgciuVUHMLmr3f7QJiLj74yD-Z0K8CE1vQW32CkLd27CHXQx1ChjpMftF6bv1Uo_xCO4VWAKwdcWOM6BgfdTC3IgnGCuiAK3DUNaFVJ-eMEQTjSRoYCoUihU43lXS8thmONgqJLhvlPEh0n-vhlt9f6ct9uu3I0TAI7MXwyP_batjwNjCyxUI4dMqVInaASo-JVtS15yIdeePh8mf6KIGAVRqsdsZH7w-uOvW1KJmyjpBQq5c7dJW5LGI52-4T4W33B-HH9fzJuYQCsSSJG5vfEHTHG20y2ZNuUzJUjVL3ozJdPEWZwlk7stXKbnDN6ZNvKrCIKrvdtRhfymogpensQFLUiXboDj3wth08xqePkCG-G9txzghe0ehfseUqti7ZqEQ6m1m77T171C6WkbpETGHCfsuzXiAYLynZbdOhUktEh-eT6V8GXi4Luy5JxBnJY-SKVJKd-gSNl3AscsIXRLyFT_7ZReKfV2OT3wLp6vSt1zVbhsF3gaRq5nnZ92QmU1dV5ipo9Mu4hy1hCNRhWrkcfKz0SkJnCeim55Dz6JBuA-rXGgg7S9pSlsd_puODFGcj_mX__6848_3PYux6yW79-b8eu1yp3nyLl4XESRyVLf-alm8lZc0KdNzhkiJtmNhx4F8AsF5SMe2Hq7fTH8MApHRgb2Z15VvcAOlDz0bc4zqYbl3PmVawCwLBy1BGcLbPCVcT3UKo93RszotoM8HA7Yn_QSVx6LUvB96BoyMzqAEW15aTZg9QT_cITLIisQkXNNtaSu64p1R0BZfPtHqPYcWo5t44tw-sPFn7e_AE8TAYhZSywo7IK3H7mS9eKgeaSK1D7GnlMl9yvLsn2ykPCtEk59TDP-dyeLeKfGY7SYPerTDWvwXHAnk-GjGXNkE-RyEe0rvtEOdfpMib1zm2vJExo308aILzqwSK0dB6XjW4b_z_wuTbnJwV_lMAlX6Iw99YBO6skmZgE76f5fym3rKT3Orfwb83JgTL4eWRm2wnmR6K644QJDkuwLMN6hUGIZJuHgrajTQZ8mEHYylRn3PmnX0_Wu2FMar73PZVrDchDLUiSKeaegRXQM1cB0UEuxCEnvhSQriYxmJde9dPU4Qj-jOY9SBL0BNntjmqvI4VfcKwRyIO-f67z03ZxOz1brJAijBaLgAaPSPu61Fzev2qO_c2ByY3G_CcRn6PKL9FMg_kKnpWkUSn5mbmYhWGILNIrKZY1akbBvn3drv5v5AGyD7pJWmJtX0F73CRj0IChvT3LhdoDbpcpIJbiR4CzUZ4jhhm2sz5LwDGikBEbYqtOviPJkuXry-ytv9Ru29QlttH3Ziqn_Mv_nv0Gzfi9aCwAA"
embedUrl "https://app.powerbi.com/reportEmbed?reportId=81fd7b7f-1876-41b4-be4f-f47e93efa83f&groupId=41019ecf-7d22-46ee-9fcf-745ec8d40d05"
id "81fd7b7f-1876-41b4-be4f-f47e93efa83f"
permissions 7
settings [object]
filterPaneEnabled true
navContentPaneEnabled true
tokenType 1
type "report"
uniqueId "a9n8zm"
headers [object]
__proto__ [object]
id "asg402"
uid "a9n8zm"
x-sdk-type "js"
x-sdk-version "2.3.4"
method "POST"
url "/report/load"

 Note that the init function is called by a different web page which creates the target page with this javascript;

 

Client.openReport=function(name,embedUrl,reportId,embedToken)
 {
  var powerbi_settings,r,powerbi_conf,r$1,html,view;
  powerbi_settings=(r={},r.filterPaneEnabled=true,r.navContentPaneEnabled=true,r);
  powerbi_conf=(r$1={},r$1.type="report",r$1.tokenType=1,r$1.accessToken=embedToken,r$1.embedUrl=embedUrl,r$1.id=reportId,r$1.permissions=7,r$1.settings=powerbi_settings,r$1);
  html=Global.jQuery("#embedReportHtml").text();
  view=Global.open();
  view.document.write(html);
  view.init(name,powerbi_conf);
 };

If the embed_config object is created directly in the target page, then no error.


@francotiveron

I don't know below syntax, could you post the whole html that can help reproduce this issue? 

  html=Global.jQuery("#embedReportHtml").text();
  view=Global.open();

 

The main page is generated by websharper templating and javascript translator, from the following 5 files:

 

//Main.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NCF.BPP - Main</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script></head>
<body>
    <div class="container">
        <div ws-replace="Body">
        </div>
    </div>
    <script ws-replace="scripts"></script>
</body>
</html>
//Rep.html
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }

        #reportContainer {
            height: 100%; 
        }
    </style>
    <script src="https://npmcdn.com/es6-promise@3.2.1"></script>
<!--
    <link rel="stylesheet" type="text/css" href="~/Content/style/style.css">
-->
    <script src="scripts/powerbi.js"></script>
</head>
<body>
    <div id="reportContainer"></div>
    <script>
        function init(title, embed_config) {
            var reportContainer = document.getElementById('reportContainer');
            var reportFrame = powerbi.embed(reportContainer, embed_config);    
            reportFrame.fullscreen();
            document.title = title;
       }
    </script>
</body>
</html>
//Main.fs
namespace NCF.BPP

open WebSharper
open WebSharper.Sitelets
open WebSharper.UI.Next
open WebSharper.UI.Next.Server
open System.IO

type EndPoint =
    | [<EndPoint "/">] Home
    | [<EndPoint "/about">] About

module FrontEnd =
    open WebSharper.UI.Next.Html
    open State

    let private f1 _ = ()

    let private renderReport groupId (r:Report) : Doc =
        divAttr 
            [
                attr.``data-`` "groupId" groupId
                attr.``data-`` "reportId" r.id
                attr.``data-`` "embedUrl" r.embedUrl
            ]
            [
                aAttr [attr.href "#"; on.click <@ Client.reportClicked @>]  [text r.name]
            ] 
            😆 Doc

    let private renderReports groupId (reports:Map<string, Report>) = 
        reports 
        |> Map.toSeq
        |> Seq.map (fun (_, r) -> renderReport groupId r)
        |> Doc.Concat

    let private renderWorkspace i (w:Workspace) : Doc = 
        divAttr 
            [attr.``class`` "panel panel-default"]
            [divAttr 
                [attr.``class`` "panel-heading"]
                [h4Attr
                    [attr.``class`` "panel-title"]
                    [aAttr
                        [attr.``data-`` "toggle" "collapse"; attr.``data-`` "parent" "#accordion"; attr.href (sprintf "#collapse%d" (i + 1))]
                        [text w.name]
                    ]
                ]
            ;divAttr
                [attr.``class`` "panel-collapse collapse"; attr.id (sprintf "collapse%d" (i + 1))]
                [divAttr
                    [attr.``class`` "panel-body"]
                    [w.reports |> renderReports w.id]
                ]
            ]
            😆 Doc

    let private renderWorkspaces (workspaces:Workspaces) =
        workspaces 
        |> Map.toSeq
        |> Seq.mapi (fun i (_, w) -> renderWorkspace i w)
        |> Doc.Concat

    let Main (workspaces:Workspaces) =
        divAttr 
            [attr.``class`` "container"]
            [divAttr 
                [attr.``class`` "panel-group"; attr.id "accordion"]
                [workspaces |> renderWorkspaces]
            ]

    let body w h : Doc list =
        [
            divAttr [attr.id "embedReportHtml"; attr.hidden "true"] [text h]
            Main w
            div [client <@ Client.Main() @>]
        ]


module Templating =
    open WebSharper.UI.Next.Html

    type MainTemplate = Templating.Template<"Main.html">

    let Main w h =
        Content.Page(     
            MainTemplate()
                .Body(FrontEnd.body w h)
                .Doc())
 
module Site =
    let private HomePage (ctx: Context<EndPoint>) =
        let path = sprintf "%sRep.html" ctx.RootFolder
        Templating.Main (State.getWorkspaces()) (File.ReadAllText(path))
        

    //let AboutPage ctx =
    //    Templating.Main ctx EndPoint.About () "About" [
    //        h1 [text "About"]
    //        p [text "This is a template WebSharper client-server application."]
    //    ]

    [<Website>]
    let Main =
        Application.MultiPage (fun ctx endpoint ->
            match endpoint with
            | EndPoint.Home -> HomePage ctx
            | EndPoint.About -> HomePage ctx
        )
//Client.fs
namespace NCF.BPP

open WebSharper

[<JavaScript>]
module Client =
    open WebSharper.UI.Next
    open WebSharper.UI.Next.Html
    open WebSharper.JavaScript
    open WebSharper.JQuery
    open WebSharper.UI.Next.Client.Attr
    open WebSharper.UI.Next.Client.HtmlExtensions
    open NCF.BPP.PowerBI.JSExtension
    open Microsoft.PowerBI.Api.V2.Models
    open WebSharper.UI.Next.Client.HtmlExtensions

    type Permissions = Read = 0 | ReadWrite = 1 | Copy = 2 | Create = 4 | All = 7
    type TokenType = Aad = 0 | Embed = 1

    let private openReport name embedUrl reportId embedToken =
        let powerbi_settings = PowerBISettings(FilterPaneEnabled = true, NavContentPaneEnabled = true)
        
        let powerbi_conf = 
            PowerBIConfig(
                Type = "report", 
                TokenType = int TokenType.Embed,
                AccessToken = embedToken, 
                EmbedUrl = embedUrl,
                Id = reportId,
                Permissions = int Permissions.All,
                Settings = powerbi_settings)

        let html = JQuery("#embedReportHtml").Text()
        let view = JS.Window.Open() :?> PowerBIView
        view.Document.Write(html)
        view.Init("NCF.BPP - " + name, powerbi_conf)

    let private getEmbedToken gId rId =
        async { return! Server.getEmbedTokenAsync gId rId }

    let reportClicked (e:Dom.Element) _ =
       async {
            let div = e.ParentElement
            let gId, rId, embedUrl = div.GetAttribute("data-groupId"), div.GetAttribute("data-reportId"), div.GetAttribute("data-embedUrl")
            JQuery("*").Css("cursor", "progress").Ignore
            let! token = getEmbedToken gId rId
            JQuery("*").Css("cursor", "default").Ignore
            match token with
            | Ok embedToken -> openReport e.TextContent embedUrl rId embedToken
            | Error message -> JS.Alert message
        } |> Async.Start

    let f _ (e:Dom.Element) =
        let gId, rId = e.GetAttribute("data-groupId"), e.GetAttribute("data-reportId")
        e.TextContent <- sprintf "%s - %s" gId rId

    let init _ =
        //JQuery.Of("[data-reportId]").Text("Pippo").Ignore
        JQuery.Of("[data-reportId]").Each(f).Ignore
   
    let Main () =
        //JS.Document.
        divAttr [(*OnAfterRender init*)] []
        //JQuery.Of(init)
//WIG Extension
namespace NCF.BPP.PowerBI.JSExtension

open WebSharper
open WebSharper.JavaScript
open WebSharper.InterfaceGenerator

module Definition =

    let PowerBIView = 
        Class "PowerBIView" |=> Inherits T<Window>

    let PowerBISettings =
        Pattern.Config "PowerBISettings" {
            Required = []
            Optional =
                [
                    "filterPaneEnabled" , T<bool>             
                    "navContentPaneEnabled", T<bool>
               ]
        }

    let PowerBIConfig =
        Pattern.Config "PowerBIConfig" {
            Required = []
            Optional =
                [
                    "type", T<string>
                    "tokenType", T<int>
                    "accessToken" , T<string>
                    "embedUrl", T<string>
                    "id", T<string>  
                    "permissions", T<int>
                    "settings", PowerBISettings.Type
                ]
        }

    let PowerBIViewClass = 
            PowerBIView |+> Instance [ "init" => T<string>?title * PowerBIConfig?embed_config ^-> T<unit>]

    let Assembly =
        Assembly [
            Namespace "NCF.BPP.PowerBI.JSExtension" [
                PowerBIConfig
                PowerBISettings
                PowerBIViewClass
                ]
        ]

[<Sealed>]
type Extension() =
    interface IExtension with
        member ext.Assembly =
            Definition.Assembly

[<assembly: Extension(typeof<Extension>)>]
do ()

Helpful resources

Announcements
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

Check out the April 2024 Power BI update to learn about new features.

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.