+ Start a Discussion
MedhanieHabteMedhanieHabte 

Getting a "We can’t find 'reduceErrors' imported into contactList.js." in the Handle Server Error Trailhead

Hi all, I am working on the Handle Server Error part in Trailhead as part of the Lightning Web Components and Salesforce Data Module

https://trailhead.salesforce.com/en/content/learn/modules/lightning-web-components-and-salesforce-data/handle-server-errors?trail_id=build-lightning-web-components

I am attempting to allow for error handling and write my code as follows

ContactList.js
import { LightningElement, wire } from 'lwc';
import {
    reduceErrors
} from 'c/ldsUtils';
import getContactList from '@salesforce/apex/ContactController.getContactList';

export default class ContactList extends LightningElement {
    @wire(getContactList) contacts;

    handleSelect(event) {
        // 1. Prevent default behavior of anchor tag click which is to navigate to the href url
        event.preventDefault();
        // 2. Create a custom event that bubbles. Read about event best practices at http://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.events_best_practices
        const selectEvent = new CustomEvent('contactselect', {
            detail: { contactId: event.currentTarget.dataset.contactId }
        });
        // 3. Fire the custom event
        this.dispatchEvent(selectEvent);
    }
    get errors() {
        return (this.accounts.error) ?
            reduceErrors(this.accounts.error) : [];
    }
}



contactList.html
<template>
    <template if:true={contacts.data}>
        <template if:true={errors}>
            <p>{errors}</p>
        </template>
        <template for:each={contacts.data} for:item="contact">
            <a
                href="#"
                key={contact.Id}
                data-contact-id={contact.Id}
                onclick={handleSelect}
            >
                <lightning-layout>
                    <lightning-layout-item>
                        <img src={contact.Picture__c} alt="Profile photo" />
                    </lightning-layout-item>
                    <lightning-layout-item padding="horizontal-small">
                        <p>{contact.Name}</p>
                    </lightning-layout-item>
                </lightning-layout>
            </a>
        </template>
    </template>
</template>

ContactController.cls
public with sharing class ContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContactList() {
        throw new AuraHandledException('Forced error');
        /*return [
            SELECT Id, Name, Title, Phone, Email, Picture__c
            FROM Contact
            WHERE Picture__c != null
            WITH SECURITY_ENFORCED
            LIMIT 10
        ];*/
    }

    @AuraEnabled(cacheable=true)
    public static List<Contact> findContacts(String searchKey) {
        String key = '%' + searchKey + '%';
        return [
            SELECT Id, Name, Title, Phone, Email, Picture__c
            FROM Contact
            WHERE Name LIKE :key AND Picture__c != null
            WITH SECURITY_ENFORCED
            LIMIT 10
        ];
    }

    @AuraEnabled(cacheable=true)
    public static Contact getSingleContact() {
        return [
            SELECT Id, Name, Title, Phone, Email, Picture__c
            FROM Contact
            WITH SECURITY_ENFORCED
            LIMIT 1
        ];
    }
}




But I get this error We can’t find 'reduceErrors' imported into contactList.js. Any steps I need to take here.

 
SwethaSwetha (Salesforce Developers) 
HI ,
We have a separate Trailhead team who can help you with these issues. So, can you please use the below link to reach out to them so that one of the Engineers will get in touch with you.
Support: https://trailhead.salesforce.com/en/help?support=home

Please mark this answer as best if it helps so that others facing the same issue will find it useful. Thanks
Adelchi PelizzoAdelchi Pelizzo
Hi did you by any chance get an error similar to this one during this test?
Challenge not yet complete, reference ID: XKRQFLHI. Error: Restforce::UnauthorizedError. Message: INVALID_AUTH_HEADER: INVALID_HEADER_TYPE
MedhanieHabteMedhanieHabte
@adelchi, Haven't seen that error.
SwethaSwetha (Salesforce Developers) 
@adelchi, The error code you are seeing is something like GACK Id in salesforce that needs digging into backend logs, and hence you need to reach out to Trailhead support for assistance.

See related post: https://trailblazers.salesforce.com/answers?id=9063A000000ldsbQAA. You might want to try the approach mentioned in this post i.e., "When you goto hands-on-org from your profile icon you need to select disconnect option to disconnect the org your doing the challenge in, and if that org has a label i.e. name for the org, then do not give a name after re-connecting, leave label blank...refresh then logout and login to check it's ok."

Thanks
Cameron BechtloffCameron Bechtloff
I just had the same issue. the import statement for reduceErrors needs to all be on one line to pass the challenge
Marcelo da Silva VelameMarcelo da Silva Velame
have you managed to solve this challenge? Could you share with us how you managed to do it?
Marcelo da Silva VelameMarcelo da Silva Velame
I did the challenge that way and it worked.
Follow my code:

HTML

<template>
<lightning-card>
<template if:true={contacts.data}>
<template if:true={errors}>
<p>{errors}</p>
</template>
<lightning-datatable
key-field="Id"
data={contacts.data}
columns={columns}
>
</lightning-datatable>
</template>
</lightning-card>
</template>

==========================================================================
JAVASCRIPT

import { LightningElement, wire } from 'lwc';
import CONTACT_FIRSTNAME from '@salesforce/schema/Contact.FirstName';
import CONTACT_LASTNAME from '@salesforce/schema/Contact.LastName';
import CONTACT_EMAIL from '@salesforce/schema/Contact.Email';
import getContacts from '@salesforce/apex/ContactController.getContacts';
import { reduceErrors } from 'c/ldsUtils';
const COLUMNS = [
{ label: 'First Name',fieldName: CONTACT_FIRSTNAME.fieldApiName, type: 'text' },
{ label: 'Last Name', fieldName: CONTACT_LASTNAME.fieldApiName, type: 'text' },
{ label: 'Email', fieldName: CONTACT_EMAIL.fieldApiName, type: 'email' }
];
export default class ContactList extends LightningElement {
columns = COLUMNS;
@wire(getContacts)
contacts;
error;
wiredContacts({ error, data }) {
if (data) {
this.contacts = data;
this.error = undefined;
} else if (error) {
this.error = error;
this.contacts = undefined;
}
}
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>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle


=============================================================================
APEX CLASS

public with sharing class ContactController {
@AuraEnabled(cacheable=true)
public static List<Contact> getContacts() {
throw new AuraHandledException('Forced error');
/* return [
SELECT FirstName, LastName, Email
FROM Contact
WITH SECURITY_ENFORCED
ORDER BY Name
];*/
}
}




In the case to see it working if you want to search for contacts just uncomment the code.

: D
 
Juan Pablo Rodriguez M 5Juan Pablo Rodriguez M 5

Hi everyone!

@MedhanieHabte you can see this projects for complete the example in trailhead.

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

My code is the next: 

------------- HTML ------------------

<template>
<lightning-card>
<template if:true={contacts.data}>
<lightning-datatable
key-field="id"
data={contacts.data}
columns={columns}
></lightning-datatable>
</template>
<template if:true={errors}>
<p>{errors}</p>
</template>
</lightning-card>
</template>


----------------- JS -----------------

import { LightningElement, api, wire } from 'lwc';
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';
import { reduceErrors } from 'c/ldsUtils';
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: 'text' }
];
export default class ContactList extends LightningElement {
columns = COLUMNS; // Set columns to show
@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>50.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>


------------------- APEX ---------------------

public with sharing class ContactController {
// Constructor by default
public ContactController() { }
@AuraEnabled(cacheable=true)
public static List<Contact> getContacts() {
List<Contact> lstCon = new List<Contact>();
try {
lstCon = [SELECT FirstName, LastName, Email FROM Contact WITH SECURITY_ENFORCED ORDER BY FirstName];
} catch (Exception e) {
throw new AuraHandledException('An error ocurred: ', e);
} finally {
// Don't send errors
// throw new AuraHandledException('Forced error ...');
}
return lstCon;
}
//Handler Exception Class
public class AuraHandledException extends Exception { }
}


Good luck!!! 

 

Terry UlanchTerry Ulanch
1. ) Obtained the ldsUtils  component from   https://github.com/trailheadapps/lwc-recipes/tree/master/force-app/main/default/lwc/ldsUtils
      NOTE: your getting/creating  a "component"
2.) Create a  create a LWC component named "ldsUtils" in the org you where need this this component.  Creating a LWC component using VisualStudio's right mouse action will by default create ldsUtils.html, ldsUtils.js and ldsUtils.js-meta.xml automatically.
3.) Replace the default  ldsUtils.js and ldsUtils.js-meta.xml files with the files from the github.