How to display 401 errors from Apex class as toast message in lightning component

Question

 HttpRequest req1 = new HttpRequest();
                    req1.setMethod ('GET');
                    req1.setHeader ('Authorization', 'Bearer ' + accessToken);
                    req1.setEndpoint (cs1.getEndpoint());
                    req1.setTimeout (GS_CustomSettingIntegration.callout_Timeout_in_MilliSeconds());
                    
                    Http http1 = new Http();
                           
                    HttpResponse res1 = new HttpResponse();
                     res1 = http1.send (req1);
                   
                    
                 if (res1.getStatusCode() != 200 && res1.getStatusCode() != 206) 
                    {
                       
                    DisplayMessage ='Unable to retrieve system configuration.';
                    } 

When i send HTTP request if i get access token then i will return values to the component. If i get error then i should display the message in lightning component How to display the message in lightning component if the HTTp response is nor 200 or 206

Answer 1

The standard way to propagate server errors to Aura and Lightning Web Components is by throwing an AuraHandledException. An example:

/** APEX **/
if (res1.getStatusCode() != 200 && res1.getStatusCode() != 206) {
    throw new AuraHandledException('Your error message here, perhaps include the ' 
        + res1.getStatus());
}

Then in your Aura JS callback, the error will cause the server response to have an ERROR state:

/** AURA **/
action.setCallback(this, function(response) {
    var state = response.getState();

    if(state === 'SUCCESS') {
        // handle success
    } else if(state === 'ERROR') {
        var errorMessage = 'Unknown error';
        var errors = response.getError();

        if(errors && errors[0] && errors[0].message) { // errors come back in an array
            errorMessage = errors[0].message;
            // additional logging as desired
        }

        // fire a toast event to show the error
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": "Error during callout",
            "message": errorMessage
        });
        toastEvent.fire();
    }
});

It's a bit more succinct with Lightning Web Components. Just remember to import the right modules.

/** LWC **/
// wire import here
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class MyComponent extends LightningElement {
    error;

    @wire(yourWireMethod)
    methodResults({ error, data }) {
        if (data) {
            // handle success
            this.error = undefined;
        } else if (error) {
            // handle error
            this.error = error;
            const evt = new ShowToastEvent({
                title: 'ERROR',
                message: this.error,
                variant: 'error',
            });
            this.dispatchEvent(evt);
        }
    }
}

References:

1. Error handling best practices
2. LWC Toast Events
3. Calling Apex methods from LWC