How do I handle client side error handling?

Question

I am creating a lightning component that will have a button that, when pressed, will update the record being viewed and send an email alert. I have managed to get the functionality working as it should be, but I am not sure how to best display error alerts to the user.

As currently designed, my Apex controller returns an Integer value 0, 1, or 2, and based on the number being returned, I would like to display an alert message to the user that states success or failure, and what the failure appears to be.

My problem is that once I pass my return value from my Apex controller function, I am at a loss for what to do with it next.

I first attempted to do a check in the java script controller. I only know how to access the return variable through a callback, so I attempted to set my var to the return value and do the check from there, but was unsuccessful. Code is below-

    var confMessage;
    action.setCallback(this, function(response){
        confMessage = response.getReturnValue();
        component.set("v.retCode", confMessage);
    });
    $A.enqueueAction(action);
    $A.get('e.force:refreshView').fire();

    if(confMessage == 0){
        alert("Success");
    }else{
        alert("Fail");
    }

When I put the variable in the alert itself to see what the js was reading from it, it displayed undefined, so clearly something is amiss there, and I suspect what may be the crux of the issue.

I also attempted to pass it back to the cmp file by setting up an aura attribute named retCode, and was considering setting up an aura:if statement that calls back to the js to display the alert, but as this is my first time doing a button, I cannot figure out how to get the aura to fire the check and call the javascript only after the button is pressed, or how I would do so outside of the init handler or button that can call on click.

I suspect that the issue is my javascript and that I should be able to read the return variable without passing it back to to the component, but some confirmation on this would be great. If this is not the case, an example of how to best pass the code into the lightning component and then using that to call an alert from the JS would be very helpful.

Answer 1

Your if/else block needs to be inside your callback function. Right now, your code is firing the action, and immediately moving to the if/else block...so it's firing before you're getting a response from the server. That's why confMessage is undefined.

var confMessage;
action.setCallback(this, function(response){
    confMessage = response.getReturnValue();
    component.set("v.retCode", confMessage);

    if(confMessage == 0){
        alert("Success");
    }else{
        alert("Fail");
    }
});
$A.enqueueAction(action);
$A.get('e.force:refreshView').fire();