We've created a base component in Lightning and I want to add a custom "Notification" component, which is just a simple Toast wrapper. The notification component listens for a "Notification" app event and fires a Toast when received.
We now want to add this to our base component, which is extended by other components. The base component has a handleError helper method that fires the app event:
handleError : function(errorStringOrObject) {
var errorMessage = 'My custom error message';
$A.get("e.c:NotificationEvent").setParams({"errorMessage" : errorMessage }).fire();
},
This is called by the inheriting component like helper.handleError(myError). The problem is, when it tries to setParams, it throws this error:
Uncaught (in promise) TypeError: Cannot read property 'setParams' of undefined
at Object.handleError (CommunityBase.js:54)
at helper.promise1.then.then.then.catch (ChainedPromiseExample.js:36)
If I call the base handleError function from another function within the base component, all works fine and the Toast message pops.
It seems that the inheriting components do not inherit the event registration and possibly the c:Notification component.
So, I tried adding the event registration and c:Notification component to inheriting component, and I still get the same error: Cannot read property 'setParams' of undefined.
Why does the base errorHandler component not have access to the event registration and possibly the c:Notification component when the handleError function is called from an inheriting component?
ComponentBase.cmp:
<aura:component description="Community Base" extensible="true">
<aura:registerEvent name="notificationEvent" type="c:NotificationEvent"/>
{!v.body}
<c:Notification />
</aura:component>
ComponentBaseHelper.js (relevant bits):
handleError : function(errorMessage) {
$A.get("e.c:NotificationEvent").setParams({"errorMessage" : errorMessage }).fire();
},
Inheriting Component .js (relevant bits):
initialize : function (component, helper) {
//debugger;
helper.promise1(component, helper)
.then(
() => {
return helper.promise2(component, helper);
}
)
.then(
() => {
return helper.promise3(component, helper);
}
)
.then(
() => {
return helper.promise4(component, helper);
}
)
.catch(
(errorMessage) => {
console.log("An error has occurred in the promise chain: " + errorMessage);
helper.handleError(errorMessage);
}
);
},
