Error:Maximum call stack size exceeded

I am getting this error everytime i rebind my diagram div

Uncaught RangeError: Maximum call stack size exceeded
at V.M.replaceJsonObjects.M.ku (eval at globalEval (main_LayoutAccelerator.js?v=v-0.2345-beta:2), :346:55)
at V.M.replaceJsonObjects.M.ku (eval at globalEval (main_LayoutAccelerator.js?v=v-0.2345-beta:2), :346:207)
at V.M.replaceJsonObjects.M.ku (eval at globalEval (main_LayoutAccelerator.js?v=v-0.2345-beta:2), :346:145)
at V.M.replaceJsonObjects.M.ku (eval at globalEval (main_LayoutAccelerator.js?v=v-0.2345-beta:2), :346:207)
at V.M.replaceJsonObjects.M.ku (eval at globalEval (main_LayoutAccelerator.js?v=v-0.2345-beta:2), :346:207)
at V.M.replaceJsonObjects.M.ku (eval at globalEval (main_LayoutAccelerator.js?v=v-0.2345-beta:2), :346:207)
at V.M.replaceJsonObjects.M.ku (eval at globalEval (main_LayoutAccelerator.js?v=v-0.2345-beta:2), :346:207)
at V.M.replaceJsonObjects.M.ku (eval at globalEval (main_LayoutAccelerator.js?v=v-0.2345-beta:2), :346:207)
at V.M.replaceJsonObjects.M.ku (eval at globalEval (main_LayoutAccelerator.js?v=v-0.2345-beta:2), :346:207)
at V.M.replaceJsonObjects.M.ku (eval at globalEval (main_LayoutAccelerator.js?v=v-0.2345-beta:2), :346:207)

//--------------------------------------------------------------------------//

 var diagramData = {
                "class": "go.GraphLinksModel",
                "linkFromPortIdProperty": "fromPort",
                "linkToPortIdProperty": "toPort",
                "nodeDataArray": nodeDataArray,
                "linkDataArray": linkDataArray  //{ "from": "1", "to": "2", "fromPort": "B", "toPort": "T" }
            };
            $scope.myDiagram.clear();
            $scope.myDiagram.model = go.Model.fromJson([]); //Rebuilding / reloading diagram by emptying model
            $scope.myDiagram.model = go.Model.fromJson(diagramData); // Error occurs here

Model.fromJson cannot handle circular data structures.
https://gojs.net/latest/api/symbols/model.html

But i am not giving any circular data structures
I have a button when i click that button my code successfully run for first click but when i click same button again and bind same data to model it throws me error

Nevertheless, that is what the error message and stack trace say.

Where is this button, and what does it do?

Could you show us the data before the first click, after the first click, and before the second click and after the second click?

Node Data Array

[
{
“key”: “StartKey”,
“category”: “Start”,
“text”: “Start”,
“eventType”: 1,
“eventDimension”: 1,
“item”: “start”
},
{
“category”: “subprocess”,
“text”: “bc str- Copy (1)”,
“item”: “generic task”,
“taskType”: 0,
“isGroup”: true,
“isSubProcess”: true,
“key”: “0232697d-7d80-439a-a2d1-4f8cf0d48012”,
“Step_ID”: “0232697d-7d80-439a-a2d1-4f8cf0d48012”,
“DB_ID”: “5b251286-40d6-4a9d-b2be-401fd0b6f968”,
“ParentStep_ID”: “b96b22b6-0832-466d-abc3-65353bac6569”,
“Step_MD5”: “C5-5D-97-D6-17-09-7B-7F-65-A5-92-1B-1C-11-BB-33”,
“ComponentType”: “Component”
},
{
“key”: “ForKeyGroup4b3e2941-d615-4258-b4c9-b7ec8ea6d398”,
“category”: “subprocess”,
“text”: “Looping\nActivity”,
“item”: “generic task”,
“taskType”: 0,
“isGroup”: true,
“isSubProcess”: true,
“isLoop”: true,
“group”: “0232697d-7d80-439a-a2d1-4f8cf0d48012”
},
{
“key”: “ForKey4b3e2941-d615-4258-b4c9-b7ec8ea6d398”,
“category”: “For”,
“text”: “For”,
“item”: “start”,
“taskType”: 0,
“group”: “ForKeyGroup4b3e2941-d615-4258-b4c9-b7ec8ea6d398”,
“gatewayType”: 4,
“eventType”: 1,
“eventDimension”: 1,
“Step_ID”: “4b3e2941-d615-4258-b4c9-b7ec8ea6d398”,
“DB_ID”: “0512dfc1-8943-4595-bb2e-a0228ea828d3”,
“ParentStep_ID”: “0232697d-7d80-439a-a2d1-4f8cf0d48012”,
“Step_MD5”: “7F-BF-01-F4-77-19-8B-FE-5C-FD-9F-AB-1C-62-B2-26”,
“ComponentType”: “ControlFlowConstruct”
},
{
“category”: “activity”,
“text”: “StringConcat”,
“item”: “generic task”,
“taskType”: 0,
“group”: “ForKeyGroup4b3e2941-d615-4258-b4c9-b7ec8ea6d398”,
“key”: “b2963ce7-50d1-4358-b801-4550d4f66826”,
“Step_ID”: “b2963ce7-50d1-4358-b801-4550d4f66826”,
“DB_ID”: “ed59db46-c739-420e-abbf-a7dfd1b0920a”,
“ParentStep_ID”: “0232697d-7d80-439a-a2d1-4f8cf0d48012”,
“Step_MD5”: “0A-6D-F8-B3-F1-5F-7C-EC-DC-89-D3-4B-96-AB-00-3A”,
“ComponentType”: “SystemKeyword”
},
{
“key”: “NextKey7705d704-d82f-4d10-82ff-0ccf5cd965cc”,
“category”: “Next”,
“text”: “Next”,
“item”: “end”,
“taskType”: 0,
“eventType”: 1,
“eventDimension”: 8,
“group”: “ForKeyGroup4b3e2941-d615-4258-b4c9-b7ec8ea6d398”,
“Step_ID”: “7705d704-d82f-4d10-82ff-0ccf5cd965cc”,
“DB_ID”: “0cc20a66-a0dc-405c-b325-0f6e4c2c2f50”,
“ParentStep_ID”: “0232697d-7d80-439a-a2d1-4f8cf0d48012”,
“Step_MD5”: “4E-9A-DC-DF-43-10-A5-DB-D2-7E-E3-95-F4-69-A5-1E”,
“ComponentType”: “ControlFlowConstruct”
},
{
“key”: “EndKey”,
“category”: “End”,
“text”: “End”,
“eventType”: 1,
“eventDimension”: 1,
“item”: “start”
}
]

Link Data Array

[
{
“from”: “StartKey”,
“to”: “0232697d-7d80-439a-a2d1-4f8cf0d48012”
},
{
“from”: “ForKey4b3e2941-d615-4258-b4c9-b7ec8ea6d398”,
“to”: “b2963ce7-50d1-4358-b801-4550d4f66826”
},
{
“from”: “b2963ce7-50d1-4358-b801-4550d4f66826”,
“to”: “NextKey7705d704-d82f-4d10-82ff-0ccf5cd965cc”
},
{
“fromPort”: “B”,
“from”: “0232697d-7d80-439a-a2d1-4f8cf0d48012”,
“to”: “EndKey”
}
]

Same code run both time but second time it gives error

You didn’t say what the button does and which data it operates on.

What is the data just before you try loading it the second time?

i have custom button which initialize flow chart and load data

I load data using this method

  var diagramData = {
                "class": "go.GraphLinksModel",
                "linkFromPortIdProperty": "fromPort",
                "linkToPortIdProperty": "toPort",
                "nodeDataArray": nodeDataArray,
                "linkDataArray": linkDataArray  //{ "from": "1", "to": "2", "fromPort": "B", "toPort": "T" }
            };
        $scope.myDiagram.model =new  go.Model.fromJson([]); //Rebuilding / reloading diagram by emptying model
        $scope.myDiagram.model =new  go.Model.fromJson(diagramData);

And i have provided you with data for nodeDataArray and linkDataArray above

What are the results of calling JSON.stringify on the diagramData just before the failing call to Model.fromJson?

I am reloading same data again and again (data i have shown you above)

I’m sorry, but if you are getting an exception the second time, clearly something has changed in the data.

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. 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

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.