コンテナのエラーの処理
コンポーネントのコントローラでメソッドを使用して Lightning コンテナのエラーを処理します。
この例は、「サードパーティフレームワークの使用」および「Lightning コンテナコンポーネントからのメッセージの送信」の例と同じコードを使用します。
このコンポーネントでは、lightning:container の onerror 属性で handleError をエラー処理メソッドとして指定します。エラーを表示するために、コンポーネントのマークアップは条件ステートメントと、エラーメッセージを保持するための別の属性 (error) を使用します。
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>コンポーネントのコントローラを次に示します。
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})Lightning コンテナアプリケーションがエラーが発生すると、エラー処理関数は error 属性を設定します。次に、コンポーネントのマークアップ内の条件式で error 属性が空かどうかを確認します。空でない場合、コンポーネントは、error に保存されたエラーメッセージを lightning:textarea 要素に設定します。