PowerBI Dashboard Embed iframe src Circular structure console error

[KCChan]

Hi, with this iframe src: https://app.powerbi.com/dashboardEmbed?dashboardId={id}, intermittently when the iframe is loaded, it will get into console error, and the visuals are not displaying. Anyone has any idea on this? Thank you

powerbi-client npm v2.18.0

Intermittent issue:

Expected result:

ERROR Error: Uncaught (in promise): TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'i'
    |     property '_zoneDelegate' -> object with constructor 's'
    --- property '_zone' closes the circle
TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'i'
    |     property '_zoneDelegate' -> object with constructor 's'
    --- property '_zone' closes the circle
    at JSON.stringify (<anonymous>)
    at dashboardEmbed.min.js:1:5723167
    at s.invoke (powerbiportal.externals.bundle.min.js:5:6994)
    at Object.onInvoke (dashboardEmbed.min.js:158:1784672)
    at s.invoke (powerbiportal.externals.bundle.min.js:5:6934)
    at i.run (powerbiportal.externals.bundle.min.js:5:2315)
    at powerbiportal.externals.bundle.min.js:5:26516
    at s.invokeTask (powerbiportal.externals.bundle.min.js:5:7612)
    at Object.onInvokeTask (dashboardEmbed.min.js:158:1784475)
    at s.invokeTask (powerbiportal.externals.bundle.min.js:5:7533)
    at JSON.stringify (<anonymous>)
    at dashboardEmbed.min.js:1:5723167
    at s.invoke (powerbiportal.externals.bundle.min.js:5:6994)
    at Object.onInvoke (dashboardEmbed.min.js:158:1784672)
    at s.invoke (powerbiportal.externals.bundle.min.js:5:6934)
    at i.run (powerbiportal.externals.bundle.min.js:5:2315)
    at powerbiportal.externals.bundle.min.js:5:26516
    at s.invokeTask (powerbiportal.externals.bundle.min.js:5:7612)
    at Object.onInvokeTask (dashboardEmbed.min.js:158:1784475)
    at s.invokeTask (powerbiportal.externals.bundle.min.js:5:7533)
    at P (powerbiportal.externals.bundle.min.js:5:25747)
    at powerbiportal.externals.bundle.min.js:5:26572
    at s.invokeTask (powerbiportal.externals.bundle.min.js:5:7612)
    at Object.onInvokeTask (dashboardEmbed.min.js:158:1784475)
    at s.invokeTask (powerbiportal.externals.bundle.min.js:5:7533)
    at i.runTask (powerbiportal.externals.bundle.min.js:5:2941)
    at y (powerbiportal.externals.bundle.min.js:5:9610)
    at invokeTask (powerbiportal.externals.bundle.min.js:5:8688)
    at invoke (powerbiportal.externals.bundle.min.js:5:8561)
    at r.args.<computed> (powerbiportal.externals.bundle.min.js:5:20660)

[KCChan]

I’ve tried the recommended approach, including updating to the latest version of the powerbi-client package and ensuring that the dashboard viewer options are correctly parsed. Unfortunately, the issue still occurs intermittently.

const clonedOptions = JSON.parse(JSON.stringify(plainOptions));
        this.dashboardViewerOptions = clonedOptions;

The issue appears to originate within the Power BI script, where a circular object is being passed and causes the JSON to be rejected.

[v-kpoloju-msft · Accepted solution]

Hi @KCChan,

Thanks for the follow-up and for confirming that you have already implemented deep cloning and updated to the latest Power BI client version.

Since the issue is still occurring intermittently, it is possible that certain elements in the runtime environment such as Angular-specific services, observables, or context-bound callbacks might be unintentionally introducing circular references into your embed configuration. Here are a few suggestions to help further isolate the issue:

• Create a fresh embedConfig object for each embed attempt, especially after rerenders.
• Avoid passing Angular services or zone related logic directly into the embed configuration or event handlers, as these may introduce hidden circular references.
• Ensure that the embed logic only runs after the component view is fully initialized, in line with Angular lifecycle best practices.
• If you’re using a custom wrapper for the embedding logic, double-check for side effects or reused references that could be contributing to the problem.

If you've reviewed all the above and the issue still persists especially given that your stack trace points to Power BI SDK internals it would be a good idea to How to create a Fabric and Power BI Support ticket - Power BI | Microsoft Learn This will allow the engineering team to investigate further and provide a more targeted resolution.

If this post helps, please give it a thumbs up Kudos and consider marking it as a solution so it can assist other community members as well.

Thank you for using the Microsoft Community Forum.

[v-kpoloju-msft]

Hi @KCChan ,

We are following up once again regarding your query. Could you please confirm if the issue has been resolved through the support ticket with Microsoft?

If the issue has been resolved, we kindly request you to share the resolution or key insights here to help others in the community. If we don’t hear back, we’ll go ahead and close this thread.

Should you need further assistance in the future, we encourage you to reach out via the Microsoft Fabric Community Forum and create a new thread. We’ll be happy to help.

Thank you for your understanding and participation.

[v-kpoloju-msft]

Hi @KCChan, 
Thank you for reaching out to the Microsoft fabric community forum. As a troubleshooting steps:

1) Double check your embedConfig object, make sure you're not passing DOM elements, events, Angular services, or anything with circular refs.

2) JSON doesn't accept circular objects - objects which reference themselves.  You will get an error if you come across this.

3) Update to the latest Power BI-client or Power BI embed libraries, older versions may be more prone to logging these circular structures internally. Please check this article

Troubleshoot Power BI embedded analytics application - Power BI | Microsoft Learn

Which talks about how to troubleshoot your embedded application.

Based on the images you shared, I feel you are using Angular. Please check this article:
How to embed Power BI content in an Angular app | Microsoft Learn
and see if you are doing any point incorrectly which may inadvertently cause an error.

If this post helps, then please give us ‘Kudos’ and consider Accept it as a solution to help the other members find it more quickly.

Thank you for using Microsoft Community Forum.

[v-kpoloju-msft]

Hi @KCChan,

May I ask if you have resolved this issue? If so, please mark the helpful reply and accept it as the solution. This will be helpful for other community members who have similar problems to solve it faster.

Thank you.