Why I can't see my error msg from apex in lightning component?

Question

What is wrong here? I see only Error on toast.

    let toastEvent = $A.get("e.force:showToast");

    action.setCallback(this,function(a){
        let state = a.getState();      
        if(state == "SUCCESS"){
            ---------  //some actions
            toastEvent.setParams({
                title: "Success",
                message: "Congratulations!",
                type: "success"
            });
            toastEvent.fire();
        } else if(state == "ERROR"){
            let errors = a.getError();
            toastEvent.setParams({
                title: "Error",
                message: errors,
                type: "error"
            });
            toastEvent.fire();
        }
    });

Apex part:

} else{
    throw new AuraHandledException('You already have this record!');
}

Answer 1

You need to ask the server's response for the actual message, rather than just passing the error object to your Toast event.

There are some great, thorough examples on the Salesforce Developer Blog. Here's their example of how to handle an error return via a Toast message, in a helper function:

handleErrors : function(errors) {
    // Configure error toast
    let toastParams = {
        title: "Error",
        message: "Unknown error", // Default error message
        type: "error"
    };
    // Pass the error message if any
    if (errors && Array.isArray(errors) && errors.length > 0) {
        toastParams.message = errors[0].message;
    }
    // Fire error toast
    let toastEvent = $A.get("e.force:showToast");
    toastEvent.setParams(toastParams);
    toastEvent.fire();
}

The critical element is that they do

toastParams.message = errors[0].message;

to obtain the textual message that's supplied to the AuraHandledException in Apex. That's what you need to do here.

Answer 2

It seems you have manage the correct error handling. Please make sure you Enqueue the action so that the framework processes it.

$A.enqueueAction(action);