Handling Apex errors from the setCallBack function

Question

Is there any better way to handle errors that comeback from the setCallBack function for Apex calls in Aura components?

Maybe a better way to get rid of some of the elses I have in in my logic?

action.setCallback(this, function(response) {
       component.set("v.Spinner", false);
       var state = response.getState();
       if (state === "SUCCESS") {
           var record = response.getReturnValue();
           var message = "The record has been created successfully: "+record.Name;
           component.find('notifLib').showToast({
               "variant":"success",
               "title": "Record clone.",
               "mode":"pester",
               "message": message
           });
           var navEvt = $A.get("e.force:navigateToSObject");
           navEvt.setParams({
               "recordId": record.Id
           });
           navEvt.fire();
       } 
       else if (state === "ERROR") {
           var errors = response.getError();
           if (errors) {
               if (errors[0] && errors[0].message) {

                   var resultsToast = $A.get("e.force:showToast");
                   resultsToast.setParams({
                       title : "Record clone.",
                       type : "error",
                       message :" Error message: " + errors[0].message
                   });
                   resultsToast.fire();
               }
               else {
                   console.log("Unknown error");
               }
           } 
           else {
               console.log("Unknown error");
           }
       }
       else {
           console.log("Unknown problem, response state: " + state);
       }
   });

Answer 1

+1 on the use of console.error().

You do still want the checks on errors[0] and errors[0].message, though. Either of those could be null or undefined, which would through a new exception if you accessed them. You could could combine ifs, for a modest improvement: if (errors && errors[0] && errors[0].message) {.

The best way to handle this, though, would be to create a simple component with a shared handleCallbackError(response, errorTitle) method. This method would check the conditions and display the toast. That way you'd only have this code in a single place, which all your components could leverage (DRY!).

Your code then becomes something like this:

action.setCallback(this, function(response) {
  component.set("v.Spinner", false);
  const state = response.getState();
  if (!globalHelper.handleCallbackError(response, 'Record clone.') && (state === "SUCCESS")) {
    // ... handle success condition
  }
}

Answer 2

You can probably remove the 2nd if statement if (errors[0] && errors[0].message) considering the first if statement if(error) should leave you covered. That can help remove one if/else pair.

Otherwise, this blog post on error handling best practices can help show you're doing the right structure in terms of client error handling. However, there's more to error handling than just the client-side so it's important to think of how you're handling it on the server side (in your apex) as well.

From that post, they give the basic layout (which you have)

// Server-side action callback
function(response) {
    // Checking the server response state
    let state = response.getState();
    if (state === "SUCCESS") {
        // Process server success response
        let returnValue = response.getReturnValue();
    }
    else if (state === "ERROR") {
        // Process error returned by server
    }
    else {
        // Handle other reponse states
    }
}

The other interesting thing it mentions, is to use console.error() instead of console.log(). Again, this is really just another tip to make it easier to find this in your browser's developer tools.