Understanding Server Side Errors In Lightning

Posted on Updated on

Hi All,

Every Salesforce developer might have faced server-side/apex errors or exceptions while running VF pages or Lightning Components. I have also faced errors while running VF pages and Lightning Components. It is easy to understand and handle errors on VF page but there is difference when you are working with Lightning Components.

If there is any error on VF page, it will show you user friendly or appropriate error message with line number, when you are not handling it. And if you are handling this exception, you can easily show them using or .

When you are running Lightning Components and if there is any server side error occur it will not show you error on browser. I don’t know why, maybe Lightning is still improving that’s why.

Run below code in your org.

//Apex Controller
public class DemoExceptionController{

    @AuraEnabled
    public static String getServerErrorMessage(){
		//DML Exception
        contact con = new contact();
        insert con;
		
		return 'anything';
	}
}
//ExceptionDemo.cmp
<aura:component controller="DemoExceptionController">
    
    <aura:attribute name="message" type="String"/>
	
    <ui:button label="Show Error" press="{!c.showError}"/>
    <br/>
	Error Message :<ui:outputText value="{!v.message}"/>
	
</aura:component>
//ExceptionDemoController.js
({
	showError : function(component, event, helper) {
		var action = component.get("c.getServerErrorMessage");
		
        action.setCallback(this, function(a) {
            component.set("v.message", a.getReturnValue());
		});
		$A.enqueueAction(action);
	}
})

When you click on “Show Error” button a DML exception will occur on server. This error should be shown on browser by system but it is not shown. I modified ExceptionDemoController.js to manually show server side errors.

({
	showError : function(component, event, helper) {
		var action = component.get("c.getServerErrorMessage");
		
        action.setCallback(this, function(a) {
            component.set("v.message", a.getReturnValue());
            
			if (a.getState() === "SUCCESS") {
				component.set("v.message", a.getReturnValue());
			} else if (a.getState() === "ERROR"){
                console.log(a.getError());
                var errors = a.getError();
				if(errors[0] && errors[0].pageErrors)
					component.set("v.message", errors[0].pageErrors[0].message);    
			}
			
        });
		$A.enqueueAction(action);
	}
})

Now when you click on “Show Error” button it will show you user friendly error message.

Now modify Apex Controller and ExceptionDemoController.js to show different type of error.

//Apex Controller
public class DemoExceptionController{

    @AuraEnabled
    public static String getServerErrorMessage(){
		//List Exception        
        List<Integer> li = new List<Integer>();
        li.add(15);
        Integer i2 = li[1]; // Causes a ListException
	}
}

//ExceptionDemoController.js
({
	showError : function(component, event, helper) {
		var action = component.get("c.getServerErrorMessage");
		
        action.setCallback(this, function(a) {
            component.set("v.message", a.getReturnValue());
            
			if (a.getState() === "SUCCESS") {
				component.set("v.message", a.getReturnValue());
			} else if (a.getState() === "ERROR"){
                console.log(a.getError());
                var errors = a.getError();
                if(errors[0] && errors[0].message)// To show other type of exceptions
                    component.set("v.message", errors[0].message);
                if(errors[0] && errors[0].pageErrors) // To show DML exceptions
            		component.set("v.message", errors[0].pageErrors[0].message);    
			}
        });
		$A.enqueueAction(action);
	}
})

Now when you click on “Show Error” button, this time it will not show you correct user friendly message instead of this “An internal server error has occurred” message will be shown. I tried with other type of exceptions to see the cases in which “An internal server error has occurred” message will be shown and in which correct user friendly message will be shown. In every case “An internal server error has occurred” message is shown except DML exception.

If you want to show appropriate error message you can handle exception to return appropriate error message.

//Apex Controller
public class DemoExceptionController{

    @AuraEnabled
    public static String getServerErrorMessage(){
		try{
            List<Integer> li = new List<Integer>();
            li.add(15);
            Integer i2 = li[1]; // Causes a ListException
        }catch(Exception e){
            return e.getMessage();
            
        }
	}
}

I know this is not a right way to show error message but I am just giving you an idea to show appropriate error message. You can write your own logic according to your requirement.

Thanks 🙂

Advertisements

One thought on “Understanding Server Side Errors In Lightning

    […] Source: Understanding Server Side Errors In Lightning […]

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s