Getting callBack error in Aura

Question

Hello i am trying to show toast message in aura but i am unable to do so .Can you please review my code and tell me whats the problem .

component.cmp

<aura:component >
    <lightning:button label="showToast" onclick="{!c.toaster}"/>
    
</aura:component>

controller.js

({
    toaster : function(component, event, helper) {
        var toastSuccess = $A.get("e.force:showToast");
        toastSuccess.setParams({
            title : 'Success',
            message: 'Record saved successfully',
            duration:' 5000',
            key: 'info_alt',
            type: 'success',
            mode: 'pester'
        });
        toastSuccess.fire();
    }
})

and i am getting error like

This page has an error. You might just need to refresh it. Action failed: c:validation2$controller$toaster [Cannot read properties of undefined (reading 'setParams')] Failing descriptor: {c:validation2$controller$toaster}

Answer 1

i created an aura component with your code and i don't have this issue. The code run without any issue .

Aura.cmp 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
   <lightning:button label="showToast" onclick="{!c.toaster}"/>
</aura:component>

controller.js

({
    toaster: function (component, event, helper) {
        var toastSuccess = $A.get("e.force:showToast");
        toastSuccess.setParams({
            title: "Success",
            message: "Record saved successfully",
            duration: 5000,
            key: "info_alt",
            type: "success",
            mode: "pester",
        });
        toastSuccess.fire();
    },
})

test:

remember by default the duration is 5000ms. Use duration only if you want a duration less than 5000 ms. see the documentation : https://developer.salesforce.com/docs/component-library/bundle/force:showToast/specification

Answer 2

I think you preview the component through <aura:application extends="force:slds">.

then e.force:showToast will not work in Lightning Standalone App.

You can drag this same component in the lightning Home page or Record Pages via app builder then it will work.

Component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">    
    <div>    
        <lightning:button label="Information"    
                          variant="brand"    
                          onclick="{!c.showInfo}"/>    
        <lightning:button label="Error"    
                          variant="destructive"    
                          onclick="{!c.showError}"/>    
        <lightning:button label="Warning"    
                          variant="neutral"    
                          onclick="{!c.showWarning}"/>    
        <lightning:button label="Success"    
                          variant="success"    
                          onclick="{!c.showSuccess}"/>    
    </div>     
</aura:component>

Component JS Controller:

({    
    showInfo : function(component, event, helper) {    
        var toastEvent = $A.get("e.force:showToast");    
        toastEvent.setParams({    
            title : 'Info',    
            message: 'This is an information message.',    
            duration:' 5000',    
            key: 'info_alt',    
            type: 'info',    
            mode: 'dismissible'    
        });    
        toastEvent.fire();    
    },    
    showSuccess : function(component, event, helper) {    
        var toastEvent = $A.get("e.force:showToast");    
        toastEvent.setParams({    
            title : 'Success',    
            message: 'This is a success message',    
            duration:' 5000',    
            key: 'info_alt',    
            type: 'success',    
            mode: 'pester'    
        });    
        toastEvent.fire();    
    },    
    showError : function(component, event, helper) {    
        var toastEvent = $A.get("e.force:showToast");    
        toastEvent.setParams({    
            title : 'Error',    
            message:'This is an error message',    
            duration:' 5000',    
            key: 'info_alt',    
            type: 'error',    
            mode: 'pester'    
        });    
        toastEvent.fire();    
    },
    showWarning : function(component, event, helper) {    
        var toastEvent = $A.get("e.force:showToast");    
        toastEvent.setParams({    
            title : 'Warning',    
            message: 'This is a warning message.',    
            duration:' 5000',    
            key: 'info_alt',    
            type: 'warning',    
            mode: 'sticky'    
        });    
        toastEvent.fire();    
    }    
})