Uncaught RangeError: Maximum call stack size exceeded when adding task to gannt chart

[Joe Robe]

Using the simplest demo from the page and adding the toolbar along with aloing of edit and add, when adding a new task it takes a long time and in the dev console logs below error. Full code below (it has the observable for the task list from code where I opened another topic as this does not work either)

Adding a SECOND item does not add anything and NOTHING works anymore, expand/collapse buttons result in tons of errors logged.

Uncaught RangeError: Maximum call stack size exceeded

    at e (blazor.webassembly.js:1)

    at Object.e [as removeLogicalChild] (blazor.webassembly.js:1)

    at e.applyEdits (blazor.webassembly.js:1)

    at e.updateComponent (blazor.webassembly.js:1)

    at Object.t.renderBatch (blazor.webassembly.js:1)

    at Object.window.Blazor._internal.renderBatch (blazor.webassembly.js:1)

    at Object.w [as invokeJSFromDotNet] (blazor.webassembly.js:1)

    at _mono_wasm_invoke_js_blazor (dotnet.5.0.4.js:1)

    at wasm_invoke_iiiiii (:wasm-function[5611]:0xdda7f)

    at ves_pinvoke_method (:wasm-function[5708]:0xdfb62)

Uncaught RangeError: Maximum call stack size exceeded

    at e (blazor.webassembly.js:1)

    at Object.e [as removeLogicalChild] (blazor.webassembly.js:1)

    at e.applyEdits (blazor.webassembly.js:1)

    at e.updateComponent (blazor.webassembly.js:1)

    at Object.t.renderBatch (blazor.webassembly.js:1)

    at Object.window.Blazor._internal.renderBatch (blazor.webassembly.js:1)

    at Object.w [as invokeJSFromDotNet] (blazor.webassembly.js:1)

    at _mono_wasm_invoke_js_blazor (dotnet.5.0.4.js:1)

    at wasm_invoke_iiiiii (:wasm-function[5611]:0xdda7f)

    at ves_pinvoke_method (:wasm-function[5708]:0xdfb62)

Uncaught (in promise) RangeError: Maximum call stack size exceeded

    at Function.[Symbol.hasInstance] ()

    at Object.E (blazor.webassembly.js:1)

    at JSON.stringify ()

    at h (blazor.webassembly.js:1)

    at e.invokeMethodAsync (blazor.webassembly.js:1)

    at e.close (sf-dialog-698eca.min.js:1)

    at e.blazorCallback (syncfusion-blazor.min.js:1)

    at e.notify (syncfusion-blazor.min.js:1)

    at e.trigger (syncfusion-blazor.min.js:1)

    at e.hide (popup-698eca.min.js:1)

@using Syncfusion.Blazor.Gantt

@using Syncfusion.Blazor.Data

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor

@using Syncfusion.Blazor.Popups

@using System.Collections.ObjectModel;

@page "/Foo"

<button @onclick="Add">Add</button><span>@TaskCollection?.Count</span>

<div class="col-lg-12 control-section">

<div class="content-wrapper">

<div class="row">

<SfGantt @ref="Gantt" DataSource="@TaskCollection" Toolbar="toolbar" Height="450px" Width="100%" HighlightWeekends="true"

ProjectStartDate="@ProjectStart" ProjectEndDate="@ProjectEnd">

<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress"

Dependency="Predecessor" ParentID="ParentId"></GanttTaskFields>

<GanttEditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true"></GanttEditSettings>

<GanttLabelSettings LeftLabel="TaskName" TValue="TaskData"> </GanttLabelSettings>

<GanttSplitterSettings Position="30%"> </GanttSplitterSettings>

</SfGantt>

</div>

</div>

</div>

@code{

public DateTime ProjectStart = new DateTime(2019, 3, 24);

public DateTime ProjectEnd = new DateTime(2019, 7, 6);

public ObservableCollection<TaskData> TaskCollection { get; set; }

List<string> toolbar = new List<string>()

{ "Add", "Cancel", "CollapseAll", "Delete", "Edit", "ExpandAll", "NextTimeSpan", "PrevTimeSpan", "Search", "Update", "Indent", "Outdent" };

public SfGantt<TaskData> Gantt { get; set; }

async Task Add()

{

var taskData = new TaskData()

{

TaskId = TaskCollection.Count + 1,

TaskName = "Added:" + TaskCollection.Count + 1,

StartDate = new DateTime(2019, 04, 02),

EndDate = new DateTime(2019, 04, 08),

Duration = "5days"

};

TaskCollection.Add(taskData);

//await Gantt.AddRecord(taskData);

await Gantt.Refresh();

}

protected override void OnInitialized()

{

this.TaskCollection = new ObservableCollection<TaskData>()

{

new TaskData() {

TaskId = 1,

TaskName = "Product concept ",

StartDate = new DateTime(2019, 04, 02),

EndDate = new DateTime(2019, 04, 08),

Duration = "5days"

},

new TaskData() {

TaskId = 2,

TaskName = "Defining the product usage",

StartDate = new DateTime(2019, 04, 02),

EndDate = new DateTime(2019, 04, 08),

Duration = "3",

Progress = 30,

ParentId = 1,

BaselineStartDate = new DateTime(2019, 04, 02),

BaselineEndDate = new DateTime(2019, 04, 02),

}

};

}

public class TaskData

{

public int TaskId { get; set; }

public string TaskName { get; set; }

public DateTime? StartDate { get; set; }

public DateTime? EndDate { get; set; }

public DateTime? BaselineStartDate { get; set; }

public DateTime? BaselineEndDate { get; set; }

public string Duration { get; set; }

public int Progress { get; set; }

public string Predecessor { get; set; }

public object ResourceId { get; set; }

public string Notes { get; set; }

public string TaskType { get; set; }

public int? ParentId { get; set; }

}

}

[Monisha Sivanthilingam]

Hi Joe, 

 

Greetings from Syncfusion support. 

 

We were able to replicate the issue you reported. We will analyse it and provide you with further details within two business days(June 22, 2021). 

 

We appreciate your patience until then. 

 

Regards, 

Monisha. 

[Monisha Sivanthilingam]

Hi Joe, 

 

Thank you for your patience. 

 

We have confirmed the issue with adding new records through the AddRecord method as a bug and have logged a bug report for it. You can track its status from the below feedback link. 

 

Feedback: https://www.syncfusion.com/feedback/26380/issue-when-adding-a-new-record-through-method 

 

The fix will be provided in the patch release scheduled for the second week of July, 2021. 

 

Regards, 

Monisha. 

[germyrinn]

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.

How to fix

Wrap your recursive function call into a -

• setTimeout
• setImmediate or
• process.nextTick

Also, you can localize the issue by setting a breakpoint on RangeError type of exception , and then adjust the code appropriately. Moreover, you can managed to find the point that was causing the error by check the error details in the Chrome dev toolbar console , this will give you the functions in the call stack, and guide you towards the recursion that's causing the error.

[Monisha Sivanthilingam]

Hi Joe, 

 

The reported issue “Issue when adding a new record through method” has been fixed. The below code snippets demonstrate the solution. 

 

Index.razor 

 

async Task Add() 

{ 

  var taskData = new TaskData() 

  { 

    TaskId = TaskCollection.Count + 1, 

    TaskName = "Added:" + (Convert.ToInt32(TaskCollection.Count) + 1), 

    StartDate = new DateTime(2019, 04, 02), 

    EndDate = new DateTime(2019, 04, 08), 

    Duration = "5days" 

  }; 

  await Gantt.AddRecordAsync(taskData, 2); 

} 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/166472/ze/F166472-244962740 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha.