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);
}
);
},