topic powerbi javascript DataCloneError exception while embedding report in Developer

powerbi javascript DataCloneError exception while embedding report

francotiveron — Sun, 17 Sep 2017 01:43:57 GMT

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.

Re: powerbi javascript DataCloneError exception while embedding report

Eric_Zhang — Wed, 20 Sep 2017 08:40:04 GMT

@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();

Re: powerbi javascript DataCloneError exception while embedding report

francotiveron — Wed, 20 Sep 2017 21:35:30 GMT

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 ()