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

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

HieuHoangHieuHoang Posts: 6Questions: 3Answers: 0

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!

Answers

  • kthorngrenkthorngren Posts: 13,606Questions: 25Answers: 3,204

    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

  • HieuHoangHieuHoang Posts: 6Questions: 3Answers: 0
    edited June 25

    I have found out the reason. Many thanks.

  • madeshmadesh Posts: 1Questions: 0Answers: 0

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

  • HieuHoangHieuHoang Posts: 6Questions: 3Answers: 0

    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.

  • colincolin Posts: 12,481Questions: 0Answers: 2,117

    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

Sign In or Register to comment.