Handling Errors in Your Container

Handle errors in Lightning container with a method in your component’s controller.

This example uses the same code as the examples in Using a Third-Party Framework and Sending Messages to and from the App, with the addition of the handleError method.

1({    
2    sendMessage : function(component, event, helper) {
3        
4        var msg = {
5            name: "General",
6            value: component.get("v.messageToSend")
7        };
8        component.find("ReactApp").message(msg);
9    },
10    
11    handleMessage: function(component, message, helper) {
12        var payload = message.payload;
13        var name = payload.name;
14        if (name === "General") {
15            var value = payload.value;
16            component.set("v.messageReceived", value);
17        }
18        else if (name === "Foo") {
19            // A different response
20        }
21    },
22    
23    handleError: function(component, error, helper) {
24        var e = error;
25    }
26})

In the component, the onerror attribute of lightning:container specifies handleError as the error handling method. To display the error, the component markup uses a conditional statement with aura:if, and another attribute, error, for holding an error message.

1<aura:component access="global" implements="flexipage:availableForAllPageTypes" >
2    
3    <aura:attribute access="private" name="messageToSend" type="String" default=""/>
4    <aura:attribute access="private" name="messageReceived" type="String" default=""/>
5    <aura:attribute access="private" name="error" type="String" default=""/>
6    
7    <div>
8        <lightning:input name="messageToSend" value="{!v.messageToSend}" label="Message to send to React app: "/><lightning:button label="Send" onclick="{!c.sendMessage}"/>
9        
10        <br/>
11        
12        <lightning:textarea name="messageReceived" value="{!v.messageReceived}" label="Message received from React app: "/>
13        
14        <br/>
15        
16        <aura:if isTrue="{! !empty(v.error)}">
17            <lightning:textarea name="errorMessage" value="{!v.error}" label="Error: "/>
18        </aura:if>
19    
20        <lightning:container aura:id="ReactApp"
21                             src="{!$Resource.SendReceiveMessages + '/index.html'}"
22                             onmessage="{!c.handleMessage}"
23                             onerror="{!c.handleError}"/>
24    </div>
25    
26</aura:component>

If the Lightning container application throws an error, the error handling function sets the error attribute. The aura:if conditional checks if the error attribute is empty. If it is, the component populates a lightning:textarea element with the error message stored in error.

Lightning Components Developer Guide

Handling Errors in Your Container

See Also: