Aura Component Debugging Simplified

Suppose you have written some amazing aura components for your project and it was working perfectly when you unit tested it.

However, when it went to QA, a bug was reported and was asked you to look upon.

Let’s take the below aura component for this example:

<aura:component controller="MyAmazingApexController">
    <aura:attribute name="message" type="String" default="Click on the button to validate your Federation Id" />

    <lightning:card title="AwesomeAuraComponent">
        <aura:set attribute="actions">
            <lightning:button label="Click Me!" onclick="{!c.validateFedId}"/>
        </aura:set>

        <p class="slds-p-horizontal_small">
            <p>{!v.message}</p>
        </p>
    </lightning:card>
</aura:component>	

({
    validateFedId : function(component, event, helper) {

        var defaultMessage = component.get("v.message");
        var action = component.get("c.getCurrentUserWithFedId"); // referring to apex controller method.

        action.setCallback(this, function (response) { 
            var state = response.getState();
            if (state === 'SUCCESS') {
                // Code when Success
                var result = response.getReturnValue();
                var obj = JSON.parse(result);
                console.log(obj);
                var name = obj[0].Name;
                var fedId = obj[0].FederationIdentifier;
                console.log(result);
                if(fedId != '') {
                    component.set('v.message', 'Hello ' + name + ', You have your federation Id set.'); // setting attribute value with the fetched results.
                }
            } else if (state === 'INCOMPLETE') {
                // Code when Imcomplete
            } else if (state === 'ERROR') {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " + errors[0].message);
                    }
                } else {
                        console.log("Unknown error");
                }
            }
        });
        $A.enqueueAction(action); // Invoking the action
        
    }
})

public with sharing class MyAmazingApexController {
    @AuraEnabled
    public static String getCurrentUserWithFedId() {

        List<User> u = [SELECT Name, FederationIdentifier FROM User WHERE Id = :UserInfo.getUserId() AND FederationIdentifier != null];
        return JSON.serialize(u);

    }
}

Please preview the above component in an aura app.

You would be getting the below output:

When you click on the button ‘Click Me’, you will encounter an error as in the below screenshot:

If you don’t get this error in your org, please write down a comment below. Will share why it worked 🙂

If you are getting this, let’s start our discussion on how to debug it and correct this error.

Debugging Aura Components Using Chrome DevTools:

To debug this aura component, we would be using Chrome DevTools.

Assuming you have already opened the Google Chrome browser to preview this component.

Please right-click on the browser > Click on Inspect > Click on the Source tab

Now enter Cmd + P (Mac) or Ctrl + P (Windows)

Type MyAmazingComponent(Name of the aura component created above) and from the drop-down select the MyAmazingComponent.js file.

Now let’s set a breakpoint at Line 12 inside the validateFedId() method. (To set the breakpoint, just click at the 12 as in the below screenshot)

We have set a breakpoint just at the start of the validateFedId() method because this is the method that will be fired from the click of the button in our aura component.

Please right-click on the browser page and click on Reload.

Please click on the Click Me! button.

You will notice that the browser loads in debug mode and is paused at line 12 at the initial breakpoint which proves that our handler method is atleast called.

Now let’s set another breakpoint at line 19 to check whether the server-side apex is returning a response properly.

Now let’s click on the resume script execution button.

As you click on the Resume script execution button the execution is paused at line 19 which proves that the server-side is returning without any errors.

Now click on the Step button.

If the control is moved in some different file such as aura_prod.js you can move out by clicking on the “Step out of the current function” button.

Now we will analyze one line at a time by clicking on the Step button.

Please click on the Step button so that script execution is moved to the next line from line 20.

As the script execution is moved at line 21, please hover on the obj variable at line 20 to analyze what value this variable holds.

As you can see obj variable is an array and it’s empty.

At line 22 obj[0].name will lead to an error as the obj is an empty array. Thus, as a fix, we have to add a check before accessing array members whether it’s a non-empty array.

You can click on the Step button to move the script execution to the next lines.

As soon as line 22 is executed you will see the error message on the screen confirming that line 22 is the root cause of this error.

Using Console.log() to debug Aura Components:

You can also add the console.log() method in your script to see the values in the variable in the Console and to confirm till what lines script execution is happening.

In this aura component, we have added two console logs. One at line 21 & the other at line 24.

Please right-click on the browser > Click on Inspect > Click on Console tab

Preview this aura component and click on the “Click Me!” button.

As you can see in the console logs only Line 21 logs appear and the value in the obj variable has an empty array which will cause an error at line 22.

If an error occurred due to Apex Controller then you can debug this by going through Apex Debugging.

You can refer to this Google article to know more about debugging Javascript using Chrome DevTools

In this debugging example, we have only used a single aura component to demonstrate how to debug aura components.

However, in the project, you may work on the lightning pages having multiple aura components so in order to debug you may have to first drill down to find the component from where the error is occurring and later identify the root cause.

Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂