Error RangeError: Maximum call stack size exceeded

[Rama]

Hi,

We are working on integrating Scheduler control in following manner -

<ScheduleComponent

          key="ScheduleComponent"

          timezone="America/New_York"

          cssClass="timeline-resource-grouping"

          width="100%"

          ref={schedule => scheduleComponentInstance = schedule}

          actionComplete={onActionComplete}

          selectedDate={today}

          currentView="TimelineDay"

          minDate={min}

          eventSettings={{ dataSource: viewModel }}

          group={{ resources: ["Users"] }}

        >

          <ResourcesDirective>

            <ResourceDirective

              field="UserId"

              title="Users"

              name="Users"

              allowMultiple={true}

              dataSource={props.users}

              textField="name"

              idField="userId"

              colorField="color"

            />

          ResourcesDirective>

          <ViewsDirective>

            <ViewDirective option="TimelineDay" />

            <ViewDirective option="TimelineWeek" />

            <ViewDirective option="TimelineMonth" />

          ViewsDirective>

          <Inject

            services={[

              TimelineViews,

              TimelineMonth,

              Resize,

              DragAndDrop

            ]}

          />

        ScheduleComponent>

As you can see data being bound is coming as props. We are using React-Redux

Apart from this - we have a drop down and button - User selects item from dropdown and clicks button which loads data from server. Data is passed to control using props.

We get " RangeError: Maximum call stack size exceeded" if we do following steps

1. User selects item from drop down

2. User clicks load data button

3. Data is displayed properly

4. User changes date using "Calendar" control in top left corner of the scheduler. This is the calendar control that comes by default in the schedular component.

5. User clicks "load data" button

Entire browser freezes for some time and then I can see following error in console.

"RangeError: Maximum call stack size exceeded

    at String.match ()↵    

    at Function.DateParser.internalDateParse (http://localhost:3000/static/js/7.chunk.js:5817:25)

    at http://localhost:3000/static/js/7.chunk.js:5691:35

    at Internationalization.parseDate (http://localhost:3000/static/js/7.chunk.js:4944:38)

    at CalendarBase.renderDays (http://localhost:3000/static/js/7.chunk.js:15588:33)

    at Calendar.renderDays (http://localhost:3000/static/js/7.chunk.js:17356:48)

    at CalendarBase.renderMonths (http://localhost:3000/static/js/7.chunk.js:15538:21)

    at Calendar.renderMonths (http://localhost:3000/static/js/7.chunk.js:17352:35)

    at CalendarBase.createContentBody (http://localhost:3000/static/js/7.chunk.js:15161:14)

at CalendarBase.onPropertyChanged (http://localhost:3000/static/js/7.chunk.js:16199:16)

at Calendar.onPropertyChanged (http://localhost:3000/static/js/7.chunk.js:17531:46)

at Calendar.Base.dataBind (http://localhost:3000/static/js/7.chunk.js:1179:12)

at Calendar.Component.dataBind (http://localhost:3000/static/js/7.chunk.js:2254:31)

at HeaderRenderer.setCalendarMinMaxDate (http://localhost:3000/static/js/7.chunk.js:135125:27)

at HeaderRenderer.previousNextIconHandler (http://localhost:3000/static/js/7.chunk.js:135605:10)

at TimelineViews.ViewBase.getRenderDates (http://localhost:3000/static/js/7.chunk.js:139547:32)

at Render.initializeLayout (http://localhost:3000/static/js/7.chunk.js:136917:28)

at Render.render (http://localhost:3000/static/js/7.chunk.js:136829:10)

at ScheduleComponent.Schedule.initializeView (http://localhost:3000/static/js/7.chunk.js:121583:23)

at Observer. (http://localhost:3000/static/js/7.chunk.js:121779:19)

at Observer.notify (http://localhost:3000/static/js/7.chunk.js:9200:24)

at ScheduleComponent.ComponentBase.trigger (http://localhost:3000/static/js/7.chunk.js:109005:26)

at Observer. (http://localhost:3000/static/js/7.chunk.js:121769:15)

at Observer.notify (http://localhost:3000/static/js/7.chunk.js:9200:24)

at ScheduleComponent.ComponentBase.trigger (http://localhost:3000/static/js/7.chunk.js:109005:26)

at ScheduleComponent.Schedule.changeDate (http://localhost:3000/static/js/7.chunk.js:121760:10)

at HeaderRenderer.calendarChange (http://localhost:3000/static/js/7.chunk.js:135424:19)

at Observer.notify (http://localhost:3000/static/js/7.chunk.js:9218:21)

at Calendar.Base.trigger (http://localhost:3000/static/js/7.chunk.js:1264:37)

at Calendar.changeEvent (http://localhost:3000/static/js/7.chunk.js:17700:12)

at Calendar.triggerChange (http://localhost:3000/static/js/7.chunk.js:17716:12)

at Calendar.changeHandler (http://localhost:3000/static/js/7.chunk.js:17328:13)

at Calendar.renderTemplate (http://localhost:3000/static/js/7.chunk.js:17392:10)

at CalendarBase.renderMonths (http://localhost:3000/static/js/7.chunk.js:15546:12)

at Calendar.renderMonths (http://localhost:3000/static/js/7.chunk.js:17352:35)

at CalendarBase.createContentBody (http://localhost:3000/static/js/7.chunk.js:15161:14)

at CalendarBase.onPropertyChanged (http://localhost:3000/static/js/7.chunk.js:16199:16)

at Calendar.onPropertyChanged (http://localhost:3000/static/js/7.chunk.js:17531:46)

at Calendar.Base.dataBind (http://localhost:3000/static/js/7.chunk.js:1179:12)

at Calendar.Component.dataBind (http://localhost:3000/static/js/7.chunk.js:2254:31)

at HeaderRenderer.setCalendarMinMaxDate (http://localhost:3000/static/js/7.chunk.js:135125:27)

at HeaderRenderer.previousNextIconHandler (http://localhost:3000/static/js/7.chunk.js:135605:10)

at TimelineViews.ViewBase.getRenderDates (http://localhost:3000/static/js/7.chunk.js:139547:32)

at Render.initializeLayout (http://localhost:3000/static/js/7.chunk.js:136917:28)

at Render.render (http://localhost:3000/static/js/7.chunk.js:136829:10)

at ScheduleComponent.Schedule.initializeView (http://localhost:3000/static/js/7.chunk.js:121583:23)

at Observer. (http://localhost:3000/static/js/7.chunk.js:121779:19)

at Observer.notify (http://localhost:3000/static/js/7.chunk.js:9200:24)

at ScheduleComponent.ComponentBase.trigger (http://localhost:3000/static/js/7.chunk.js:109005:26)

at Observer. (http://localhost:3000/static/js/7.chunk.js:121769:15)"

[Balasubramanian Sattanathan]

Hi Rama, 

 

Greetings from Syncfusion Support. 

 

We have validated the reported “RangeError: Maximum call stack size exceeded” problem at our side by preparing a sample using the below code snippet. Since we couldn’t reproduce it at our end. In the below sample, additional data will be added to the resources when we click the add button, the Scheduler date has been changed based on the Calendar value. 

 

<ButtonComponent id='add' title='Add' cssClass='e-info' onClick={this.onClickAdd.bind(this)}>Add</ButtonComponent> 

<ScheduleComponent ref={t => this.scheduleObj = t} cssClass='timeline-resource-grouping' width='100%' height='650px' selectedDate={new Date(2018, 3, 4)} currentView='TimelineDay' timezone="America/New_York" eventSettings={{ dataSource: this.data }} group={{ resources: ['Categories'] }} > 

  <ResourcesDirective> 

    <ResourceDirective field='TaskId' title='Category' name='Categories' allowMultiple={true} dataSource={this.categoryData} textField='text' idField='id' groupIDField='groupId' colorField='color'> 

    </ResourceDirective> 

  </ResourcesDirective> 

  <ViewsDirective> 

    <ViewDirective option='TimelineDay' /> 

    <ViewDirective option='TimelineWeek' /> 

    <ViewDirective option='TimelineMonth' /> 

  </ViewsDirective> 

  <Inject services={[TimelineViews, TimelineMonth, Resize, DragAndDrop]} /> 

</ScheduleComponent> 

 

Sample: https://stackblitz.com/edit/react-hrle5g-bgwwxt?file=index.js 

 

Kindly try the above sample and get back to us with the below details, if the issue is not resolved at your end. 

• Share the video demo with the issue replication or
• Replicate your problem in the above sample or
• Share the issue replication sample (If possible) for serve you better

 

Regards, 

Balasubramanian S

[Rama]

Hello Support,

We were able to fix the issue by not setting any value of SelectedDate, minDate value. 

[Vengatesh Maniraj]

Hi Rama, 

Thanks for the update. 

We are happy that you have found the solution at your end. 

Please get back to us if you need any further assistance. 

Regards, 

Vengatesh  

[markaldo]

This error is almost always means you have a problem with recursion in JavaScript code, as there isn't any other way in JavaScript to consume lots of stack. Sometimes calling a recursive function over and over again, causes the browser to send you Maximum call stack size exceeded error message as the memory that can be allocated for your use is not unlimited.

 

 Be considerate while calling functions , also dry run is the best practice to prevent them. It's possible to cause infinite recursion in a fully promisified code, too. That can happen if the promises in a chain don't actually perform any asynchronous execution , in which case control never really returns to the event loop, even though the code otherwise appears to be asynchronous. That's when it's useful to wrap your recursive function call into a -

• setTimeout
• setImmediate or
• process.nextTick

In some programming languages this can be solved with tail call optimization, where the recursion call is transformed under the hood into a loop so no maximum stack size reached error exists. 

[Balasubramanian Sattanathan]

Hi Rama,  

  

Thanks for your update.  

  

We have validated the reported “This error is almost always means you have a problem with recursion in JavaScript code” problem at our side and let you know that we can overcome this problem by increasing the memory size, by removing unwanted packages. So we would suggest you to remove the unwanted packages and increase the memory size. 

 

Kindly try the above solution and get back to us with the below details, if the issue is not resolved at your end.  

• Share the video demo with the issue replication or
• Replicate your problem in the above sample or
• Share a sample (If possible) illustrating the problem which would help us to proceed further.

  

Regards,  

Balasubramanian S 

[Lu Tuan Dat]

Hi Rama,  

  

Thanks for your update.  

  

We have validated the reported “This error is almost always means you have a problem with recursion in JavaScript code” problem at our side and let you know that we can overcome this problem by increasing the memory size, by removing unwanted packages. So we would suggest you to remove the unwanted packages and increase the memory size. 

 

Kindly try the above solution and get back to us with the below details, if the issue is not resolved at your end.  

• Share the video demo with the issue replication or
• Replicate your problem in the above sample or
• Share a sample (If possible) illustrating the problem which would help us to proceed further.

  

Regards,  

Balasubramanian S 

I have the same issue with SidebarPlugin in Vue component.

[Balasubramanian Sattanathan]

Hi Lu Tuan Dat, 

Thanks for the reply. 

We have checked the reported problem in the below sample and let you know that the sample is working properly without any error. So kindly try the below sample and get back to us with the below details, if the issue is not resolved at your end.  

• Share the video demo with the issue replication or
• Replicate your problem in the below sample or
• Share the issue replication sample (If possible) which would help us to provide prompt solution

Sample: https://stackblitz.com/edit/react-ej2-sidebar?file=index.js  

Regards, 

Balasubramanian S 

[Muslim]

This kind of Maximum call stack size exceeded error usually points to an unintended re-render or recursive update loop. In your case, it looks like changing the date via the built-in Calendar and then reloading data through props may be triggering repeated internal updates between the Scheduler and Calendar components. One thing worth checking is whether updating the data source or selectedDate in Redux causes the Scheduler to reinitialize the view each time. You might want to memoize the data passed via props, or ensure that the load-data action does not also reset selectedDate or minDate. Also, verify that actionComplete or other lifecycle callbacks aren’t dispatching Redux actions that indirectly cause the Scheduler to refresh again. Reducing unnecessary prop changes often helps prevent this kind of stack overflow.

[Archana Jayakumar]

Hi Muslim,

Thank you:)

Regards,
Archana