On a visualforce page, I have lightning components running inside lightning out container. When a user without permission to the component logs in and goes to this page, there is an error message at the bottom of the page.

Cause: This is because the container div for the error message is not being inserted in the right place in the DOM, as the visualforce pages are iframed in lightning experience.

This is where the auraErrorMessage div is in the DOM, in the parent document's body, as a placeholder, so salesforce can show errors here.

<div class="" id="auraErrorMask">
  <div class="auraErrorBox" id="auraError">
     <span><a class="close" id="dismissError">×</a></span>
     <div id="auraErrorMessage"></div>
     <div id="auraErrorStack"></div>
      <div class="auraErrorFooter">
        <a href="someURL" id="auraErrorReload">Refresh</a>

But, when I interact with a lightning component, a permission related error happened but the error message below is being inserted into a brand new auraErrorMessage div in the iframed document's body of my visualforce page

<div id="auraErrorMessage">This page has an error. You might just need to refresh it.
Error in $A.getCallback() [[object Object]]
Callback failed: serviceComponent://ui.interaction.runtime.components.controllers.FlowRuntimeController/ACTION$runInterview
Callback failed: serviceComponent://ui.interaction.runtime.components.controllers.FlowRuntimeController/ACTION$runInterview
Failing descriptor: {js://flowruntime:utils.action}

Obviously, this wont show up correctly, as it is in the wrong place.

I tried a simple solution from this SO question where sfdcfox is styling the div with custom css - How to display Aura JS Errors Lightning Out

But this only fixes the styles, but not the behavior, such as closing the popup.

Also, I tried using mutation observer on that target div, but I cannot setup an observer to start with, as this tag does not exist, unless I interact with the component on the page, because the permission error shows up only on interaction.

To me it looks like a bug on the salesforce aura component rendering, where it should insert the div on the parent document's body.

Any help or workaround?

  • Ended up adding my own <div id="auraErrorMessage"></div> to my Visualforce page, so this div is available to start with. I am observing that, and using an alert service to show a toast for the error message – Amudh Feb 6 at 0:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.