Apex is throwing error but LWC is not catching and displaying the correct Toast message

Question

I have created a validation rule on Order Product Object, it is working as expected on the record page. While making changes from LWC, error message is not shown, instead a success message is showing from the toast event.

Apex Class :

@AuraEnabled
    public static String updateOrderItems(Object data) {
        system.debug('Data?>>>' +data);
        List<OrderItem> orderItemsForUpdate = new List<OrderItem>();
        List<OrderItem> orderItemsList = (List<OrderItem>) JSON.deserialize(JSON.serialize(data),List<OrderItem>.class);
        try {
            for(OrderItem oi : orderItemsList ) {
                if(oi.blng__HoldBilling__c == 'True') {
                    oi.blng__HoldBilling__c = 'Yes';
                } else {
                    oi.blng__HoldBilling__c = 'No';
                }
                 orderItemsForUpdate.add(oi);
            }
            update orderItemsForUpdate ;
            return 'Success: Order Items updated successfully';
        }
        catch (Exception e) {
            System.debug('Inside Catch');
            return 'The following exception has occurred: ' + e.getMessage();
        }
    }

LWC:

updateOrderItems({data: updatedFields})
        .then(result => {
            console.log(JSON.stringify("Apex update result: "+ result));
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Order Item updated', // This message is shown on page, even do Apex is throwing error
                    variant: 'success'
                })
            );
            this.draftValues = [];

        })
        .catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error updating or refreshing records',
                    message: error.body.output.errors[0].errorCode + '-' + error.body.output.errors[0].errorCode, //error.body.message
                    variant: 'error'
                })
            );
        });

Below is the console output of the result of the lwc method

"Apex update result: The following exception has occurred: Update failed. First exception on row 0 with id 8020h000001mTwXAAU; first error: FIELD_CUSTOM_VALIDATION_EXCEPTION, Please enter the reason for Hold Billing: [BillingHold__c]"

Answer 1

You have to actually throw the exception all the way to the top of the stack.

Option 1: Let The Exception Be Thrown

Any exception that reaches the top of the stack will be handled by the client. This is the only way to cause an exception in the client JavaScript from Apex.

@AuraEnabled
public static String updateOrderItems(Object data) {
    system.debug('Data?>>>' +data);
    List<OrderItem> orderItemsForUpdate = new List<OrderItem>();
    List<OrderItem> orderItemsList = (List<OrderItem>) JSON.deserialize(JSON.serialize(data),List<OrderItem>.class);
    for(OrderItem oi : orderItemsList ) {
        if(oi.blng__HoldBilling__c == 'True') {
            oi.blng__HoldBilling__c = 'Yes';
        } else {
            oi.blng__HoldBilling__c = 'No';
        }
         orderItemsForUpdate.add(oi);
    }
    update orderItemsForUpdate ;
    return 'Success: Order Items updated successfully';
}

Option 2: Throw an AuraHandledException

The documented way to signal the client is to specifically throw (and do not catch), an AuraHandledException.

@AuraEnabled

public static String updateOrderItems(Object data) {
    system.debug('Data?>>>' +data);
    List<OrderItem> orderItemsForUpdate = new List<OrderItem>();
    List<OrderItem> orderItemsList = (List<OrderItem>) JSON.deserialize(JSON.serialize(data),List<OrderItem>.class);
    try {
        for(OrderItem oi : orderItemsList ) {
            if(oi.blng__HoldBilling__c == 'True') {
                oi.blng__HoldBilling__c = 'Yes';
            } else {
                oi.blng__HoldBilling__c = 'No';
            }
             orderItemsForUpdate.add(oi);
        }
        update orderItemsForUpdate ;
        return 'Success: Order Items updated successfully';
    }
    catch (Exception e) {
        System.debug('Inside Catch');
        throw new AuraHandledException(e.getMessage());
    }
}