Best practice for catching and displaying action errors in Lightning components

Question

There are zillion of ways to handle or ignore errors thrown from actions calls in Lightning controllers.

var action = cmp.get("c.controllerMethod");
action.setCallback(this, function(response) {
    if(cmp.isValid() && response.getState() === "SUCCESS") {

    }
    else {
         // <WHAT TO ADD HERE>
    }
});

$A.enqueueAction(action); 

If you search the web and SFSE you find all kind of solutions

1. Simply not handling and displaying it
2. Using console.log()
3. Showing toast windows
4. Writing the message to a that only displays on error
5. ...

What I am looking for a best practise recommended by Salesforce.com and other experts. Important for me is:

• Uses minimal code
• Uses existing UI concepts from the Design System or even Base components
• Works in all context and types of Lightning components

Answer 1

What I use is a component which handles those calls and turns errors into toasts:

ToastErrorHandler.cmp:

<aura:component >
    <aura:method name="handleResponse" action="{!c.handleResponse}">
        <aura:attribute name="response" type="Object" />
        <aura:attribute name="successHandler" type="Object" />
        <aura:attribute name="errorHandler" type="Object" />
    </aura:method>
</aura:component>

ToastErrorHandlerController.js

({
    handleResponse : function(component, event) {
        var params = event.getParam('arguments');
        var response = params.response;
        var successHandler = params.successHandler;
        var errorHandler = params.errorHandler;

        var state = response.getState();

        if(state == 'SUCCESS') {
            successHandler(response);
        } else {
            var toastEvent = $A.get("e.force:showToast");
            var message = '';

            if (state === "INCOMPLETE") {
                message = 'Server could not be reached. Check your internet connection.';
            } else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    for(var i=0; i < errors.length; i++) {
                        for(var j=0; errors[i].pageErrors && j < errors[i].pageErrors.length; j++) {
                            message += (message.length > 0 ? '\n' : '') + errors[i].pageErrors[j].message;
                        }
                        if(errors[i].fieldErrors) {
                            for(var fieldError in errors[i].fieldErrors) {
                                var thisFieldError = errors[i].fieldErrors[fieldError];
                                for(var j=0; j < thisFieldError.length; j++) {
                                    message += (message.length > 0 ? '\n' : '') + thisFieldError[j].message;
                                }
                            }
                        }
                        if(errors[i].message) {
                            message += (message.length > 0 ? '\n' : '') + errors[i].message;
                        }
                    }
                } else {
                    message += (message.length > 0 ? '\n' : '') + 'Unknown error';
                }
            }

            toastEvent.setParams({
                title: 'Error',
                type: 'error',
                message: message
            });

            toastEvent.fire();
            if(errorHandler) {
                errorHandler(response);
            }
        }
    }
})

In a component where I want to use it, I just include the <c:ToastErrorHandler aura:id="toastErrorHandler" /> in the component. And then instead of directly writing a handler for the callback of an action, I call the method from ToastErrorHandler:

    var saveValuesAction = component.get("c.saveValues");       

    saveValuesAction.setParams({
        'formDescriptionId' : component.get('v.formDescriptionId'),
        'values' : JSON.stringify(values)
    });

    var toastErrorHandler = component.find('toastErrorHandler');

    saveValuesAction.setCallback(this, function(response){
        toastErrorHandler.handleResponse(
        response, 
        function(response){
            var toastEvent = $A.get("e.force:showToast");
            toastEvent.setParams({
                "title": $A.get("$Label.c.Form_Save_Success_Title"),
                "message": $A.get("$Label.c.Form_Save_Success_Message"),
                "type": "success"
            });
            toastEvent.fire();
        })
    });

    $A.enqueueAction(saveValuesAction);

This allows me to share consistent error handling around all of my server-calls. It's probably not the perfect solution yet, but I think something like this works pretty well.

Answer 2

To be honest, this seems like more of a UX issue than a coding issue.

1. Showing a toast

   I would typically use this if something essential to the component has failed, or if the success action would have been to show a toast, since the user would already be expecting to see something there.

2. Printing an error message where the content should have been

   If the action that failed was not essential to the component, having a toast pop up can be too intrusive, and a failure message where content should have been would be an indicator to the user to try again.

3. Print an error message to the console

   If the content on success is really not that essential, you might just want to leave that spot on the page blank rather than have an ugly error message there. I suppose you could just ignore the error, but a message in the console would make it easier to debug.

   This is particularly useful if apex is throwing an error due to data not existing or a lack of user permissions.