+ Start a Discussion
Anthony Wheeler 1Anthony Wheeler 1 

Maximum call stack size exceeded

I've been running into an issue for the past couple days with a custom Lightning component. I'm trying to create a "Note" component where the user/admin in Lightning App Builder selects an Object and a Record to add the note too. Once I click the lightning button to Save, it throws the following error:

Uncaught AuraClientService.postProcess: error in processing [Maximum call stack size exceeded]
throws at https://jeppesen--anthonydev.lightning.force.com/auraFW/javascript/H9Yiy9uuE9726-4_PM7fkQ/aura_prod.js:34:15.


Here is my component and the controller/helper/Apex methods that are running when the error is thrown.

Markup
<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="Lightning_Note_Controller"> 
        <aura:attribute name="note" type="Lightning_Note__c"/> 
        <aura:attribute name="recordId" type="String"/> 
        <aura:attribute name="objectType" type="String"/> 
        <aura:attribute name="editNote" type="Boolean" default="false"/> 

        <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> 

        <aura:if isTrue="{!and(v.note.Id == null, !v.editNote)}"> 
                <lightning:button label="Add Note" title="Add Note" onclick="{!c.addNote}"/> 
                <aura:set attribute="else"> 
                        <aura:if isTrue="{!v.editNote}"> 
                                <lightning:button label="Save Note" title="Save Note" onclick="{!c.saveNote}"/> 
                                <lightning:inputRichText value="{!v.note.Note__c}"/> 
                                <aura:set attribute="else"> 
                                        <lightning:button label="Edit Note" title="Edit Note" onclick="{!c.editNote}"/> 
                                        <lightning:formattedRichText value="{!v.note.Note__c}"/> 
                                </aura:set> 
                        </aura:if> 
                </aura:set> 
        </aura:if> 
</aura:component>

Controller
saveNote : function(component, event, helper){
        helper.save(component, event, helper); 
}

Helper
//Saves note record 
save : function(component, event, helper){
        var saveNoteAction = component.get("c.saveNote"); 
        saveNoteAction.setParams({ 
                note : JSON.stringify(component.get("v.note")) 
        }); 
        saveNoteAction.setCallback(this, function(response2) { 
                var responseState2 = response2.getState(); 
                if (responseState2 == "SUCCESS") { 
                        var note = response2.getReturnValue(); 
                        component.set("v.note", note); 
                        component.set("v.editNote", false); 
                } 
        }); 
        $A.enqueueAction(saveNoteAction); 
}

Apex Controller
@AuraEnabled 
public static Lightning_Note__c saveNote(String note){ 
        Lightning_Note__c noteObject = (Lightning_Note__c)JSON.deserialize(note, Lightning_Note__c.class); 
        upsert noteObject; 
        System.debug('Upserted Note: ' + noteObject); 
        return noteObject; 
}

The Apex never shows up in the debug log whenever I check. Also, if I try to insert console log statements in my JS methods, the error is not displayed. Instead, all the console.log() statments repeatedly display in the console and take up all my CPU til I force quit my browser. It's as if the method is running recursively, but I don't see how this could be happening. 

Any help is greatly appreciated.
Best Answer chosen by Anthony Wheeler 1
Khan AnasKhan Anas (Salesforce Developers) 
Hi Anthony,

I trust you are doing very well.

As per the Salesforce document, it is recommended to use different names for the client side and server side methods.

Use unique names for client-side and server-side actions in a component. A JavaScript function (client-side action) with the same name as a server-side action (Apex method) can lead to hard-to-debug issues.

You have saveNote method in Apex and in JavaScript also. So, you need to change the name of either one method.


I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Anthony,

I trust you are doing very well.

As per the Salesforce document, it is recommended to use different names for the client side and server side methods.

Use unique names for client-side and server-side actions in a component. A JavaScript function (client-side action) with the same name as a server-side action (Apex method) can lead to hard-to-debug issues.

You have saveNote method in Apex and in JavaScript also. So, you need to change the name of either one method.


I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.

Thanks and Regards,
Khan Anas
This was selected as the best answer
Anthony Wheeler 1Anthony Wheeler 1
That worked!
Thank you Khan!