Apex errors in Lightning

VanillaJs For Better Performance of Lightning Components

Posted on Updated on

Hi All,

Lightning is all about components. You can build applications by assembling components created by you and other developers. A component can contain other components, as well as HTML, CSS, JavaScript, or any other Web-enabled code.

If you have multiple Lightning Components on a Lightning Page/App with 3rd party libraries like jQuery,Bootstrap etc, you may face performance issues like slow loading, code conflicts, many others you don’t know.

Problems you may face while working with 3rd party libraries :

If you have 2 Lightning Components with different version of Libraries, they may conflict with each other.
If you are using same version, they may put unnecessary weight on Components which in turn load your component slowly.

So what could be the solution? The solution is to ensure that you really need to load 3rd party libraries or not.

Basically you should always avoid use of jQuery for very small things like getting element Id, Class, DOM manipulation and many others. To do these small things you have to import jQuery file in you component. Which will put unnecessary weight on your component.

Instead of this you can use getter setter methods provided by Framework or you can use VanillaJs.

You might be thinking what is “VanillaJs”?
Vanilla JavaScript is a fancy name developers have given to the core JavaScript and DOM API combined, and it is used to distinguish it from libraries such as jQuery.

VanillaJs is very easy to use, it is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications. You can read more about here.

VanillaJs is faster than jQuery see below comparison.

vanilla

I know you may have to write few more lines of code in comparison to jQuery, but it is better than putting unnecessary weight on components by importing library.

Comparison of jQuery and Vanilla JS for basic DOM manipulation.

Class selectors

// jQuery
$('.myClass');

// VanillaJs 
document.getElementsByClassName('myClass');

ID selectors

// jQuery
$('#myID');

// VanillaJs
document.getElementById('myID');

Tags

// jQuery
$('div');

// VanillaJs
document.getElementsByTagName('div');

Add and Remove Class

// jQuery
$('div').addClass('myClass');

// VanillaJs
var div = document.querySelector('div');
div.classList.add('myClass');

// jQuery
$('div').removeClass('myClass');

// VanillaJs
var div = document.querySelector('div');
div.classList.remove('myClass');

Add and Remove Attribute

// jQuery
$('.myClass').attr('disabled', true);

// VanillaJs
document.querySelector('.myClass').setAttribute('disabled', true);

// jQuery
$('.myClass').removeAttr('disabled');

// VanillaJs
document.querySelector('.myClass').removeAttribute('disabled');

Hope you will find VanillaJs better than jQuery with Lightning Components.

Thanks 🙂

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 🙂