Forum Discussion

coriben's avatar
coriben
Helper I
8 years ago
Solved

PowerBI Embedded report hangs on loading when rendered by Javascript API

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!

  • coriben's avatar
    coriben
    8 years ago

    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!

3 Replies

  • 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

     

    • coriben's avatar
      coriben
      Helper I

      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!