After reading this article - Error Handling Best Practices for Lightning and Apex, I got a general picture of best practices regarding error handling for Lightning and Apex.
Yet I still didn't get it how to handle errors for Apex when a server-side action is triggered by the init
event. Let me explain it with an example.
MyComponent.cmp
<aura:component controller="ApexController">
<aura:attribute name="dataList1" type="String[]" default="[]"/>
<aura:attribute name="dataList2" type="String[]" default="[]"/>
<aura:handler name="init" value="{! this }" action="{! c.onInit }" />
<lightning:select aura:id="select1" label="Select 1" >
<aura:iteration items="{! v.dataList1 }" var="item">
<option text="{! item }" value="{! item }" />
</aura:iteration>
</lightning:select>
<lightning:select aura:id="select2" label="Select 2" >
<aura:iteration items="{! v.dataList2 }" var="item">
<option text="{! item }" value="{! item }" />
</aura:iteration>
</lightning:select>
</aura:component>
MyComponentController.js
({
onInit: function(component, event, helper) {
helper.loadDataForSelect1(component);
helper.loadDataForSelect2(component);
},
});
MyComponentHelper.js
({
loadDataForSelect1: function(component) {
const action = component.get("c.getdData1");
action.setCallback(this, function(response) {
const state = response.getState();
if (state === "SUCCESS") {
component.set("v.dataList1", response.getReturnValue());
} else {
let errors = response.getError();
let message = 'Unknown error'; // Default error message
// Retrieve the error message sent by the server
if (errors && Array.isArray(errors) && errors.length > 0) {
message = errors[0].message;
}
// Display the message
console.error(message);
}
});
$A.enqueueAction(action);
},
loadDataForSelect2: function(component) {
const action = component.get("c.getdData2");
action.setCallback(this, function(response) {
const state = response.getState();
if (state === "SUCCESS") {
component.set("v.dataList2", response.getReturnValue());
} else {
let errors = response.getError();
let message = 'Unknown error'; // Default error message
// Retrieve the error message sent by the server
if (errors && Array.isArray(errors) && errors.length > 0) {
message = errors[0].message;
}
// Display the message
console.error(message);
}
});
$A.enqueueAction(action);
}
})
ApexController.cls
public with sharing class ApexController
{
@AuraEnabled
public static List<String> getdData1()
{
try {
return new List<String> {'One', 'Two', 'Three'};
}
catch(Exception ex) {
throw new AuraHandledException(ex.getMessage());
}
}
@AuraEnabled
public static List<String> getdData2()
{
try {
return new List<String> {'Red', 'Green', 'Blue'};
}
catch(Exception ex) {
throw new AuraHandledException(ex.getMessage());
}
}
}
Now assume that either getdData1()
or getdData2()
or both apex methods end up in error which is handled by the respective helper methods in the lightning component.
In the aforementioned blog article it is said:
Reporting the error in the console is a start, but the end goal is to display it to the user.
For me it's obvious that results of all user-initiated actions should be displayed to the user. For example, the user presses the button and if error occurs, we will display a toast with an error message.
But in case of data initialization process, should the user be notified at all when an error occurs? Or is console.error() enough here?
More generally speaking, how is it done in such cases?