Exception in LWC

-

How to Throw an exception in LWC:

Using:

  1. Handling Errors on Wired Properties
  2. wireApexFunction.js
  3. callApexImperative.js

Use: ldsUtils provide by salesforce.

The reduceErrors helper function in this example comes from the ldsUtils module of the LWC Recipes sample app. LWC Recipes contains easy-to-digest examples of common patterns implemented as Lightning web components. Feel free to copy the ldsUtils module into your project, and use the reduceErrors function.

Create a component with :

https://github.com/trailheadapps/lwc-recipes/tree/master/force-app/main/default/lwc/ldsUtils

**Make is Expose true in Meta.xml

Example to Show how to use the 'AuraHandledException' in LWC:

Apex class:

AccountController.cls

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        throw new AuraHandledException('Forced error  LWC------->');
        //we are commenting return Statment. Throw exception.
    }
}


accountList.html

<template>
    <lightning-card>
        <template if:true={errors}>           
                <p>{errors}</p>            
        </template>
    </lightning-card>
</template>


accountList.js

import { LightningElement, wire } from 'lwc';
import { reduceErrors } from 'c/ldsUtils';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import REVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';
const COLUMNS = [
    { label: 'Account Name', fieldName: NAME_FIELD.fieldApiName, type: 'text' },
    { label: 'Annual Revenue', fieldName: REVENUE_FIELD.fieldApiName, type: 'currency' },
    { label: 'Industry', fieldName: INDUSTRY_FIELD.fieldApiName, type: 'text' }
];
export default class AccountList extends LightningElement {
    columns = COLUMNS;
    @wire(getAccounts)
    accounts;

    get errors(){
        return (this.accounts.error) ?
            reduceErrors(this.accounts.error) : [];
    }
    
}


xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="<http://soap.sforce.com/2006/04/metadata>">
   <apiVersion>45.0</apiVersion>
   <isExposed>true</isExposed>
   <targets>
       <target>lightning__AppPage</target>
       <target>lightning__RecordPage</target>
       <target>lightning__HomePage</target>
   </targets>
</LightningComponentBundle>

Output:

for details of each line : https://trailhead.salesforce.com/content/learn/modules/lightning-web-components-and-salesforce-data/handle-server-errors

Syntax:

1.Handling Errors on Wired Properties

import { LightningElement, api, wire } from 'lwc';
import { reduceErrors } from 'c/ldsUtils';
import getRelatedContacts from '@salesforce/apex/AccountController.getRelatedContacts';
export default class WireApexProperty extends LightningElement {
    @api recordId;
    @wire(getRelatedContacts, { accountId: '$recordId' })
    contacts;
    get errors() {
        return (this.contacts.error) ?
            reduceErrors(this.contacts.error) : [];

2.wireApexFunction.js

import { LightningElement, api, wire } from 'lwc';
import { reduceErrors } from 'c/ldsUtils';
import getRelatedContacts from '@salesforce/apex/AccountController.getRelatedContacts';
export default class WireApexFunction extends LightningElement {
    @api recordId;
    errors;
    @wire(getRelatedContacts, { accountId: '$recordId' })
    wiredContacts({data, error}) {
        if (error)
            this.errors = reduceErrors(error);
    }
}

3.callApexImperative.js
import { LightningElement, api, wire } from 'lwc';
import { reduceErrors } from 'c/ldsUtils';
import getRelatedContacts from '@salesforce/apex/AccountController.getRelatedContacts';
export default class CallApexImperative extends LightningElement {
    @api recordId;
    errors;
    handleButtonClick() {
        getRelatedContacts({
            accountId: '$recordId'
        })
            .then(contacts => {
                // code to execute if the promise is resolved
            })
            .catch(error => {
                this.errors = reduceErrors(error); // code to execute if the promise is rejected
            });
    }
}


HTML

<template>
    <template if:true={errors}>
        <p>{errors}</p>
    </template>
</template>


The solution to Trailhead Module :

Handle errors in a component.

In the contactList component, use the reduceErrors function to handle errors and display error messages in the component markup.

Tip: Remember that JavaScript is a case-sensitive programming language. Be careful to use uppercase and lowercase letters correctly.

  • Show errors in the contactList markup
  • Add the ldsUtils component from LWC recipes to your project
  • Define a getter for a property named errors and use the reduceErrors function in the getter
  • Force the Apex class to throw an AuraHandledException to see an error on the contactList component
  • Deploy the changes to your Trailhead Playground


Create 
ContactList.html
<template>
    <lightning-card>
        <template if:true={errors}>
            <template if:true={errors}>           
                <p>{errors}</p>            
            </template>
        </template>
    </lightning-card>
</template>

ContactList.js
import { LightningElement, wire } from 'lwc';
import { reduceErrors } from 'c/ldsUtils';
import FIRSTNAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LASTNAME_FIELD from '@salesforce/schema/Contact.LastName';
import EMAIL_FIELD from '@salesforce/schema/Contact.Email';
import getContacts from '@salesforce/apex/ContactController.getContacts';
const COLUMNS = [
    { label: 'First Name', fieldName: FIRSTNAME_FIELD.fieldApiName, type: 'text' },
    { label: 'Last Name', fieldName: LASTNAME_FIELD.fieldApiName, type: 'text' },
    { label: 'Email', fieldName: EMAIL_FIELD.fieldApiName, type: 'Email' }
];
export default class ContactList extends LightningElement {
    columns = COLUMNS;
    @wire(getContacts)
    Contacts;

    get errors(){
        return (this.Contacts.error) ?
            reduceErrors(this.Contacts.error) : [];
    }

}


xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
   <apiVersion>45.0</apiVersion>
   <isExposed>true</isExposed>
   <targets>
       <target>lightning__AppPage</target>
       <target>lightning__RecordPage</target>
       <target>lightning__HomePage</target>
   </targets>
</LightningComponentBundle>

create apex class to throw the exception:
ContactController.cls
public with sharing class ContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContacts() {
       throw new AuraHandledException('Trailhead Module Solution @Force Exception throw');
       /* return [
            SELECT FirstName, LastName, Email
            FROM Contact
            WITH SECURITY_ENFORCED
            ORDER BY firstName
        ];*/
    }
}





Deploy:
1. Class then  ldsUtils then  ContactList by right click on folder. follow steps given ontrailhead

Output:

                             







Comments

Post a Comment

Popular posts from this blog

LearnSalesforce

-
Image
Triggers in Salesforce: Chapter 1. Never Ever Give Up Basics of trigger Did you google(d) this sentence.....! Okay, hurry here is the answer. Let me start with very basic & practical example -Here  Adam & Harry are having the same discussion Adam says: In Salesforce, we use the trigger to implement custom business logic with help of code to execute some simple & complex logic.  Harry says:  GotchU!!! But man Why the only trigger ? can't you do this with Workflow or process builder or Salesforce in-built functionality? Adam says: Buddy, You are correct, Going good but let me recall what you can do with workflow & what extra we need in these- You can not create a new record with help of Workflow. Deletion of record is not possible. Update from parent to child is not possible.Only child to parent record can be updated. Multiple rules need to write for multiple functionalities.  Adam says: Still, you are confused why I nee...
Read more

LWC Interview Questions Part-1

-
Image
Why LWC: The first thing we will know about what web components are. Web Components consist of  four separate technologies  that are used together: **Custom Elements:**The HTML elements with custom templates, tag names like and behaviours are made with a set of JavaScript APIs. HTML Living Standard specification has definitions of these Custom Elements. **Shadow DOM:**We use this for isolating CSS and JavaScript which could be like. Living Standard DOM specification has the definitions of this. **HTML templates:**User-defined templates in HTML are rendered only when called upon. HTML Living Standard specification has the definition of the tag. **ES Modules:**The ES Modules specification defines the inclusion and reuse of JS documents in a standard-based, modular, performant way. Before diving in LWC, we should know about JavaScript Origin. Usage of Modern JavaScript Why do you go for LWC instead of existing Aura Components? Easy to Learn: ...
Read more

Lightning Web Component

-
Image
Lightning Web Component salesforce 🌩 : What is Lightning Web component? ·          Latest Programming Model for Building lightning component. ·          Built using  custom HTML and modern JavaScript ·          SuperLight Weight and highly Performant (less over Head). ·          Template, Shadow DOM(Encapsulation CSS effect, NO override ) For Documentation:         ·          https://developer.salesforce.com/docs/component-library/documentation/en/lwc       ·          https://developer.salesforce.com/docs/component-library/bundle       ·          https://github.com/salesforce/lwc       ·        ...
Read more