PowerBI Embedded report hangs on loading when rendered by Javascript API

[coriben]

Hello, I'm trying to embed a PowerBI report into my web app, that is running locally in my dev server, with the Javascript API. I know everything is working since I succesfully rendered the desired report in their Playground, so it can't be a problem with the Embedded Server or Azure. In my console window there are multiple warnings and errors of external resources blocked by the same origin policy, and an `uncaught exception: [object Object]` error probably related to the PBI Javascript API that i can't decipher. The report just loads forever, displaying the animated PowerBI logo. Is anybody else experiencing this issue while trying to embed a report locally? Here's the code responsible for rendering:

    var embedContainer = $("#container");
    var models = window.['powerbi-client'].models;

        var config= {
            type: 'report',
            tokenType: models.TokenType.Embed,
            accessToken: ginormous embed token,
            embedUrl: https://app.powerbi.com/reportEmbed?reportId=ommited_for_privacy&groupId=ommited_for_privacy,
            id: the_report_id,
            permissions: models.Permissions.All,
            settings: {
                    filterPaneEnabled: true,
                    navContentPaneEnabled: true
            }
        };

        // Embed the report and display it within the div container.
        var report = powerbi.embed(embedContainer.get(0), config);

Here are all the console errors:

    uncaught exception: [object Object]

    Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://dc.services.visualstudio.com/v2/track. (Reason: CORS request did not succeed).

    Source map error: request failed with status 404
    Resource URL: http://localhost:3000/temp/scripts/App.js

    Source Map URL: powerbi.js.map
    Source map error: request failed with status 404
    Resource URL: https://app.powerbi.com/13.0.5314.162/scripts/ai.0.js

    Source Map URL: ai.0.js.map
    Source map error: request failed with status 404
    Resource URL: https://app.powerbi.com/13.0.5314.162/scripts/reportembed.externals.bundle.min.js

    Source Map URL: interact.min.js.map

  Thanks!

[Anonymous]

Hi @coriben,

do you use Application insights? There is a Cors issue there ar your code. You may want to give a look here https://docs.microsoft.com/en-us/azure/application-insights/app-insights-separate-resources or temporarily

remove it.

Hope it helps.

Regards,

Thanos

[coriben · Accepted solution]

Hello, I don't know what that is but I got it to work. I was able to see the exception text in Chrome's console (I use Firefox) and it turned out to be a typo in the tokenType parameter. Thanks anyway!

[coriben]

I'm trying to embed a PowerBI report into my web app, that is running locally in my dev server, with the Javascript API. I know everything is working since I succesfully rendered the desired report in the Playground, so it can't be a problem with the Embedded Server or Azure. In my console window there are multiple warnings and errors of external resources blocked by the same origin policy, and an uncaught exception: [object Object] error probably related to the PBI Javascript API that i can't decipher. The report just loads forever, displaying the animated PowerBI logo. Is anybody else experiencing this issue while trying to embed a report locally? Here's the code responsible for rendering:

    var embedContainer = $("#container");
    var models = window.['powerbi-client'].models;

        var config= {
            type: 'report',
            tokenType: models.TokenType.Embed,
            accessToken: ginormous embed token,
            embedUrl: https://app.powerbi.com/reportEmbed?reportId=ommited_for_privacy&groupId=ommited_for_privacy,
            id: the_report_id,
            permissions: models.Permissions.All,
            settings: {
                    filterPaneEnabled: true,
                    navContentPaneEnabled: true
            }
        };

        // Embed the report and display it within the div container.
        var report = powerbi.embed(embedContainer.get(0), config);

Here are all the console errors:

    uncaught exception: [object Object]

    Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://dc.services.visualstudio.com/v2/track. (Reason: CORS request did not succeed).

    Source map error: request failed with status 404
    Resource URL: http://localhost:3000/temp/scripts/App.js

    Source Map URL: powerbi.js.map
    Source map error: request failed with status 404
    Resource URL: https://app.powerbi.com/13.0.5314.162/scripts/ai.0.js

    Source Map URL: ai.0.js.map
    Source map error: request failed with status 404
    Resource URL: https://app.powerbi.com/13.0.5314.162/scripts/reportembed.externals.bundle.min.js

    Source Map URL: interact.min.js.map