Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

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 from the Lightning Container Component.

In this 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, 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>

This is the component’s controller.

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.getParams().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 description = error.getParams().description;
25        component.set("v.error", description);
26    }
27})

If the Lightning container application throws an error, the error handling function sets the error attribute. Then, in the component markup, the conditional expression checks if the error attribute is empty. If it isn’t, the component populates a lightning:textarea element with the error message stored in error.

Lightning Aura Components Developer Guide

Handling Errors in Your Container

See Also