Error: "Uncaught RangeError: Maximum call stack size exceed" in new version of Chrome (91.0.4472.77)

HieuHoang

I'm using Jquery version 3.1.1 and Datatables version 1.10.23. Recently, I have updated new version of Chrome (from 90.0.4430.212 to 91.0.4472.77).

My issue is as follows:

• I use socketio in web client to listen an event "update" from the server.
• When I receive event "update", I create a row string:
  row = '<tr><td>1</td><td>2</td><td>3</td><td></td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>'
• Then I use row.add() to add a new row to the table
  table.row.add($(row)).draw();

• The table is created as follows:

    var table = $('#list_callLegs').DataTable({
      order: [[1,"asc"]],
      columnDefs: [
        { width: "1%", targets: [0,1,2,3] },
        { orderable: false, targets: [0,3,7] },
        { targets: [8], visible: false},
        { targets: '_all', visible: true }
      ],
      aLengthMenu: [
        [10, 25, 50, 100, 200, 500, -1],
        [10, 25, 50, 100, 200, 500, "All"]
      ],
      iDisplayLength: -1,
      "drawCallback": function(){
        feather.replace()
      },
      "scrollY": "390px",
      "scrollCollapse": true,
      "scrollX": true,
    });
  

• The brower is paused a few second then I see the error:

  Uncaught RangeError: Maximum call stack size exceeded
      at String.replace (<anonymous>)
      at Function.ga [as find] (jquery-3.1.1.min.js:2)
      at r.fn.init.find (jquery-3.1.1.min.js:2)
      at _fnCalculateColumnWidths (jquery.dataTables.js:5628)
      at _fnAdjustColumnSizing (jquery.dataTables.js:2169)
      at _fnScrollDraw (jquery.dataTables.js:5288)
      at _fnAdjustColumnSizing (jquery.dataTables.js:2179)
      at _fnScrollDraw (jquery.dataTables.js:5288)
      at _fnAdjustColumnSizing (jquery.dataTables.js:2179)
      at _fnScrollDraw (jquery.dataTables.js:5288)
  

So anyone have similar problem? How to solve it?

Many thanks!

kthorngren

I use socketio in web client to listen an event "update" from the server.

Sounds like this event handler is called in a recursive fashion causing the Maximum call stack size exceeded error. Can you post a link to your page or a test case replicating the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

HieuHoang

I have found out the reason. Many thanks.

madesh

Hi HieuHoang,
I am also facing the same issue. Can you please share the root cause and how did you solve the issue?

HieuHoang

I am also facing the same issue. Can you please share the root cause and how did you solve the issue?

In my case, I'm using:

"scrollY": "390px",
"scrollCollapse": true,
"scrollX": true,
"fixedColumns": true,
"fixedHeader": true,

The issue happen when I exist >10 rows, then I search and exactly 10 rows match (with 390px). I have disabled scrollX, fixedColumns, fixedHeader and the issue is not happen again.
I don't know the root case but the issue is solved.
If you are using them too, please check it.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

markvanber

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.