London SF Developers: Custom Lightning Component Error Handling
3 likes1,603 views
The document provides a comprehensive guide on error handling in Salesforce Lightning components, detailing the best practices for debugging, validation, and managing server errors. It covers specific techniques such as using aurahandledexception for graceful error management and emphasizes the importance of creating reusable error components for consistency. Key lessons include handling callback states and validating inputs efficiently to enhance user experience.
![Lesson 2 - Validation is 2 Step!
● Depending on the component library you use:
○ For <ui:inputXXXXX /> use
inputCmp.set("v.errors", [{message:"your msg"}]);
See Validating Fields
○ For <lightning:input/select/textarea > use
inputCmp.showHelpMessageIfInvalid();](https://image.slidesharecdn.com/lonsfdevugcustomlightningcomponenterrorhandling-180201230608/85/London-SF-Developers-Custom-Lightning-Component-Error-Handling-8-320.jpg)
London SF Developers: Custom Lightning Component Error Handling
- 2. Head of Salesforce Engineering, Provar • Developing Salesforce.com relationship • Defining Salesforce integration roadmap • Accelerate new development • Increase functional coverage • SFDC SME Background • 10y Salesforce.com • 3x DF speaker • 5 AppExchange & 3 ISV Apps • Co-organiser London SF Developer’s Meetup • Former CTO makepositive & Brightgen • 2x former Provar customer! Richard Clark Twitter/LinkedIn: @RichClark808 http://provartesting.com About Me
- 3. About Provar Point and click test creation Runs UI and API steps in the same test Highly maintainable test cases Aligned to the Salesforce roadmap Provar is the only automated testing tool for Salesforce. @Provar http://ProvarTesting.com
- 4. References… (eh, already?) Independent Blogs/Forums 1. How to Handle Apex Errors for Lightning 2. Exception Handling in Lightning 3. Testing AuraHandledExceptions 4. Lightning Error Handler 5. Best practice catching errors in Lightning Official Salesforce 1. Throwing & Handling Errors 2. Set an Error Response 3. ui:inputDefaultError 4. Validating Fields 5. Returning Errors from Apex 6. Validating Fields 7. lightning:notificationsLibrary 8. Lightning Messaging Framework
- 5. 1. Todd’s Browser Dev Tool Debugging like a Unicorn-Ninja-Cat-Rockstar 2. debugger keyword 3. Lightning Chrome Extension 4. Setup -> Lightning Components -> Enable Debug Mode ? 5. Refresh page, refresh page, refresh page and refresh page... Lesson 1 - Debugging...
- 6. <lightning:input aura:id="contactField" name="firstName" label="First Name" value="{!v.simpleNewContact.FirstName}" required="true"/> <lightning:input aura:id="contactField" type="phone" name="phone" label="Phone" pattern="^(1?(-?d{3})-?)?(d{3})(-?d{4})$" messageWhenPatternMismatch="The phone number must contain 7, 10, or 11 digits. Hyphens optional." value="{!v.simpleNewContact.Phone}" required="true"/> Question: Which of these enforce field validation ?
- 7. Demo - Let’s see...
- 8. Lesson 2 - Validation is 2 Step! ● Depending on the component library you use: ○ For <ui:inputXXXXX /> use inputCmp.set("v.errors", [{message:"your msg"}]); See Validating Fields ○ For <lightning:input/select/textarea > use inputCmp.showHelpMessageIfInvalid();
- 9. Helper: validateForm: function(component) { var valid = true; // Show error messages if field validation fails var uiValid = component.find('contactField').reduce( function (validFlds, inCmp) { inCmp.showHelpMessageIfInvalid(); return validFlds && inCmp.get('v.validity').valid; }, true); if (uiValid) { // Do any client side validation e.g. Account isActive } return(valid); } lightning:input In your Component Controller: handleSave: function(comp, evt, hlpr) { if (hlpr.validateForm(comp)) { //do stuff }
- 10. ● Public examples rarely handle server errors ○ console.log() and //Do something is not enough! ● Demo: Validation Rule on Contact ● Demo: DML, Server and Dupe Warnings ● Demo: Handling the Validation Rule properly Lesson 3 - Silent but Deadly...
- 11. ● Use console.error(); instead of console.log(); unless it’s a warning ● Display something (next lesson) ● response.getState(), has 4 states - deal with them all a. SUCCESS b. DRAFT (if using LDS and Local Cache) c. ERROR d. INCOMPLETE (offline/session expired) What does ‘properly’ mean
- 12. Lesson 4 - How do you eat yours?
- 13. ● throw new Error(“Arghhh!”); ● console.log() / console.error() ● <ui:outputText /> ● <ui:message ... /> ● $A.get("e.force:showToast"); ● <lightning:notificationsLibrary/> ● Spring 18: <lightning:messages/> (coming up...) Consider both desktop and mobile user experiences. Choose your weapon!
- 14. Demo - Anyone for toast ?
- 15. showToast vs notificationsLibrary var resultsToast = $A.get("e.force:showToast"); resultsToast.setParams({ "title": "Contact Saved", "message": "The new contact was created." }); resultsToast.fire(); <!-- Component markup --> <lightning:notificationsLibrary aura:id="notifLib"/> // JS Controller component.find('notifLib').showToast({ "variant" : “success”, "title": "Contact Saved", "message": "The new contact was created" });
- 16. Spring 18: lightning:messages ● Spring18 (API 42.0) ○ <lightning:messages/> ○ No, it wasn’t in the release notes! See here ○ And it doesn’t appear in ./componentReference/suite.app ○ But it is in other examples in the Lightning Components Dev Guide Demo (from Spring 18: Interactive Forms article) ○ It avoids silent failures and is ‘plumbing free’ ○ Doesn’t (yet) support duplicate warnings ○ Doesn’t provide any message details (s.t. docs) ○ Keep an eye on it for the future, great catch-all for now
- 17. ● If creating components for LightningOut/Visualforce… ○ UI Validation does work ○ showToast not supported in VF (Classic or LEX) ○ So use ui:outputtext/ui:message ● Make your error handling Environmentally Friendly! ○ What & Why: Lightning Messaging Overview ○ How: http://bobbuzzard.blogspot.co.uk/2015/11/context-is-everything.html Lesson 5 - LightningOut
- 18. ● UI Validation ● Duplicate Rules ● Data Model Validation Rules ● Apex DMLExceptions ● Other Apex Exceptions (e.g. NullPointer, Custom) ● Salesforce Platform Errors/Limits Recap - Errors to handle
- 19. Three areas to check within your JS error handler: ● pageErrors: e.g. Apex Exceptions, Dupe Rules, Validation ● fieldErrors: e.g. Field validation ● potentialDuplicates:* TBC! Expect multiple errors and display them all (as appropriate). Lesson 6 - Server Errors
- 20. Three areas to check within your JS error handler: ● pageErrors: e.g. Apex Exceptions, Dupe Rules, Validation ● fieldErrors: e.g. Field validation ● potentialDuplicates:* TBC! Expect multiple errors and display them all (as appropriate). Lesson 6 - Server Errors
- 21. // What does the user see? Account a = new Account(); insert a; // Whoops, I broke Salesforce? Lesson 7 - AuraHandledException Apex Custom Controller method using @AuraEnabled
- 22. // What does the user see? try { Account a = new Account(); insert a; } catch (Exception ex) { AuraHandledException ahe = new AuraHandledException(“Unexpected Error: ”+ex.getMessage()); ahe.setMessage(“Err in accCreate:”+ex.getStackTrace()); throw ahe; } Lesson 7 - AuraHandledException Apex Custom Controller method using @AuraEnabled
- 24. Lesson 7 (cont’d) Lightning Components Developer Guide: “The benefit of throwing AuraHandledException, instead of letting a system exception be returned, is that you have a chance to handle the exception more gracefully in your client code” Some quirks to be aware of: ● catch (DMLException) & throw AuraHandledException: ○ message is less readable than throwing DMLException ○ or parse out the ugly message ● catch (Exception) & throw AuraHandledException ○ Avoids “Internal Server Error” ● AuraHandledException.setMessage() for meaningful messages in debug logs instead of “Script thrown exception”
- 25. ● Develop your own re-usable custom error component ○ Consistency across your application ○ Single point of change ○ Easy to implement ● Don’t forget i18n for your messages: ○ $A.get(“$Label.c.labelName”); ○ $A.get(“$Label.namespace.labelName”); ● Here’s a useful starting point: Lightning Error Handler plus <lightning:notificationsLibrary/> Final Lesson - Error Component
- 26. Putting it all together...
- 27. Summary ● Learn to debug Lightning ● Refresh/reload page or markup versions ● 2-step UI validation ● Handle all 4 callback states ● Apex AuraHandledException ● Custom reusable error/message component ○ Environment aware ○ Multi-component aware ○ Custom labels ○ Start small ● Spring 18: <lightning:messages/> during dev?