Lightning Component Callback Issue - Perpetual Spinner

Question

How can I solve this intermittent issue?

I have a user that is having an issue with a spinner staying on the page. I have a callback with if else seen below. The issue is intermittent. I have yet to be able to reproduce the issue.

Here is my JS Controller

var spas = $A.get("e.c:spinner");
    var opps = cmp.get("v.quotes");
    var action = cmp.get("c.updateopps");
    action.setParams({"opps": cmp.get("v.quotes")
                     });
    action.setCallback(this, function(data) {
        var rslt = data.getState();
        if (rslt === "SUCCESS"){
            //toggle spinner
            spas.fire();
            var resultsToast = $A.get("e.force:showToast");
            resultsToast.setParams({
                "title": "Resubission Request Submitted",
                "message": "Request was sent to bid desk",
                "type" : "success",
                "key" : "approval"
            });
            resultsToast.fire();
            $A.get('e.force:refreshView').fire();
        }else{
            $A.get('e.force:refreshView').fire();
            spas.fire(); 
            alert('There Were some Errors. Please Contact Admin');

        }
    });
    $A.enqueueAction(action);

and for my apex class

@AuraEnabled
public static List<sObject> updateopps(List<SObject> opps)
{
    system.debug(opps);
    update opps;
    //database.update(opps,false);
    return opps;
}

Since this is a list which often has only one record being updated,I am curious if this is part of the issue or if it is something completely different. Or should I just use a try catch in the apex class? My concert with try catch is that the error could be on a record they are not updating and do not want to cause confusion by telling them unneeded information.

Any help would be awesome.

Answer 1

The problem is scope - spa is not reachable at the callback, especially if it was triggered outside of component itself (for example - from a library loaded from static resource).

Firstly, you should wrap your callback: action.setCallback(this, $A.getCallback(function(data) {

Secondly, toggle your spinner by getting the event directly: $A.get("e.c:spinner").fire()

Then, fire your spinner event immediately in the callback, rather than in somewhere deeper in code - you are at greater risk of encountering exceptions and leaving user blocked from recovering from them.

Finally, in doing last step you don't need to write the same redundant code in your else block, just report the error to user.

You should definitely do try/catch in your apex and report those exceptions using throw new AuraHandledException(dmlException.getMessage()). Also instead of returning records directly, requery the records so user sees modifications that has happened via triggers, process builder, workflows, etc.