Error handling in lightning component

Today in this blog post we will be going to see how we can handle page errors and field errors based on input from user.

For this we will be going to create a Lightning Component for creating contact and we will be placing this component on Account record detail page for creating contact related to the Account.

ContactInformation.cmp

<aura:component controller="ContactInsertClass" implements="flexipage:availableForAllPageTypes,force:hasRecordId">

    <aura:attribute name="firstName" type="string"/>

    <aura:attribute name="lastName" type="string"/>

    <aura:attribute name="email" type="string"/>

    <lightning:input label="Enter First Name" value="{!v.firstName}"/>

    <lightning:input label="Enter Last Name" value="{!v.lastName}"/>

    <lightning:input label="Enter Email" value="{!v.email}"/>

    <lightning:button label="Add contact" onclick="{!c.addContact}"/>

</aura:component>

ContactInformationController.js

({
    addContact: function(component, event, helper) {
        //alert('1111');
        var fName = component.get("v.firstName");
        var lName = component.get("v.lastName");
        var action = component.get('c.insertContact');
        var recordID=component.get("v.recordId");
        action.setParams({
            parentAccountId:recordID,
            firstName1:component.get("v.firstName"),
            lastName1:component.get("v.lastName"),
            email:component.get("v.email")
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                alert('Contact inserted successfully');
            } else if (state === "INCOMPLETE") {
                alert("Server Error, check you internet connection");
            } else if (state === "ERROR") {
                var toastEvent = $A.get("e.force:showToast");
                var errorMessageToDisplay = '';
                var errors = response.getError();
                if (errors) {
                 
                    for (var j = 0; j < errors.length; j++) {
                        if (errors[j].pageErrors) {
                            for (var i = 0; i < errors[j].pageErrors.length; i++) {
                                errorMessageToDisplay += (errorMessageToDisplay.length > 0 ? '\n' : '') + errors[j].pageErrors[i].message;
                            }
                        }
                        if (errors[j].fieldErrors) {
                            for (var fieldError in errors[j].fieldErrors) {
                                var thisFieldError = errors[j].fieldErrors[fieldError];
                                for (var k = 0; k < thisFieldError.length; k++) {
                                    errorMessageToDisplay += (errorMessageToDisplay.length > 0 ? '\n' : '') + thisFieldError[k].message;
                                }
                            }
                        }
                    }
                    toastEvent.setParams({
                        title: 'Error',
                        type: 'error',
                        message: errorMessageToDisplay
                    });
                    toastEvent.fire();
                }
            }
        });
        $A.enqueueAction(action);
    }
})

ContactInsertClass.apxc

public class ContactInsertClass {
@AuraEnabled
public static contact insertContact(string parentAccountId,string firstName1,string lastName1,string email)
{
    system.debug('Test');
    contact con=new contact();
    con.firstName=firstName1;
    con.lastName=lastName1;
    con.email=email;
    con.accountid=parentAccountId;
    insert con;
    return con;
 
}
}