Handling Server Errors in Lightning Components

The communication between Lightning Components and Apex can at first seem a little unwieldy when compared to the close coupling between Apex and Visualforce.

With a little coaxing and massaging however, Apex can be brought to obey your beautiful Lightning stylings even when it throws a nasty exception. I found myself frustrated by the murky handling of errors in my try — catch blocks at first. That was until I discovered the beauty of throw new AuraHandledException()!

I had already wired up my modal to let the user know their query had returned no data but until discovery of the AuraHandledException I was not finding a friendly way to insert the likes of callout errors (500, 400, etc) into my pretty modal. I guess I should not have been surprised when throw new AuraHandledException() did exactly what it said it did! In my data handling helper I was already trying to catch the error in the response but because my errors were unhandled they were creating those ugly red Lightning error pop-ups generated by the system.

Turn this:

Into this:

The code below is not a complete implementation but is intended to give you a sense of the important parts which are:

1. In your try – catch block on your server call use throw new AuraHandledException()!

2. Wherever you are processing your response, in my case the FetchDataHelper handle your error by passing it to your display prompt/modal.

3. I am creating a modal dynamically in the parent component, the dataDisplayHelper creates the modal with the appropriate error. Credit to Mike Topalovich for the modal code(not included) and the dataFetch code!. You can find lots of examples online for modal creation — it is fairly straightforward.

4. Ultimately what you end up with is graceful error handling which makes your users happy and not stressed out by your application. Also, it makes troubleshooting much friendlier should someone log a defect (and hopefully add a screenshot) after you go to production…. that never happens.