Etydhv

I know I can wrap in a try / catch but the goal here is to display a useful error in cases where one was not expected..(programming error)

A basic lightning component displayed in a VF page using the standard app and component.

The only thing on the component is a lightning:spinner. The component has an init handler and the sole job of the init JS is to hide the spinner.

<aura:component description="test">
 <aura:handler name="init" value="!this" action="!c.doInit"/>
 <lightning:spinner variant="brand" aura:id="test_spinner"/>
</aura:component>

The controller

(
 doInit : function(component,event,helper)
 console.log('init');
 helper.donothing(); //This does not exist and causes an error
 $A.util.addClass(component.find("test_spinner"),'slds-hide');
 
)

Now when this runs it causes a framework error. The problem is that the user sees nothing. The spinner does not get hidden and the page just stalls...

Is there any way to display a message to the user instead of the entire component just stalling?

For some reason I seem to recall a component that could be used to display framework errors but I cannot seem to find it or I am just remembering incorrectly

There is a display element; it shows up at the very bottom of the page. This happens in Lightning Out automatically. It's not styled by default, as far as I can tell, so you might want to add some style to it. The message is in a div#auraErrorMessage element. Try starting with this:

<style>
 div#auraErrorMessage 
 position: fixed;
 text-align: center;
 white-space: pre-line;
 padding-top: calc(25vh - 3em);
 height: 50vh;
 top: 25vh;
 left: 25vw;
 right: 25vw;
 z-index: 1000;
 border: 5px solid red;
 
</style>

You could attach a DOM mutation event to this element to detect new messages, etc as well.

I'm not aware of a specific way to otherwise handle errors in Lightning Out; this is normally handled by the App (e.g. one.app), but it's not documented how/if we can do this externally.