How to display Aura JS Errors Lightning Out

Question

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

Answer 1

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.