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.
<aura:component access="global" implements="flexipage:availableForAllPageTypes" > <aura:attribute access="private" name="messageToSend" type="String" default=""/> <aura:attribute access="private" name="messageReceived" type="String" default=""/> <aura:attribute access="private" name="error" type="String" default=""/> <div> <lightning:input name="messageToSend" value="{!v.messageToSend}" label="Message to send to React app: "/><lightning:button label="Send" onclick="{!c.sendMessage}"/> <br/> <lightning:textarea name="messageReceived" value="{!v.messageReceived}" label="Message received from React app: "/> <br/> <aura:if isTrue="{! !empty(v.error)}"> <lightning:textarea name="errorMessage" value="{!v.error}" label="Error: "/> </aura:if> <lightning:container aura:id="ReactApp" src="{!$Resource.SendReceiveMessages + '/index.html'}" onmessage="{!c.handleMessage}" onerror="{!c.handleError}"/> </div> </aura:component>
This is the component’s controller.
({ sendMessage : function(component, event, helper) { var msg = { name: "General", value: component.get("v.messageToSend") }; component.find("ReactApp").message(msg); }, handleMessage: function(component, message, helper) { var payload = message.getParams().payload; var name = payload.name; if (name === "General") { var value = payload.value; component.set("v.messageReceived", value); } else if (name === "Foo") { // A different response } }, handleError: function(component, error, helper) { var description = error.getParams().description; component.set("v.error", description); } })
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.