Skip to content

Getting maximum call stack exceeded on backend.js when rendering many elements. #16501

Closed
Closed
Getting maximum call stack exceeded on backend.js when rendering many elements.#16501
Assignees
bvaughn
Labels
Component: Developer ToolsType: Bug

Description

@ryan-rushton
ryan-rushton
opened on Aug 20, 2019

Details

Using version 4.0.2 (8/15/2019) I am getting a maximum call stack size exceeded when my app starts up. While my app using this is a little different I have replicated the issue using a fresh create-react-app. I will include the App.js code below.

Steps to reproduce

  1. Create a new app using version 3.0.1 of create-react-app
  2. Replace the code in App.js with the code listed below
  3. Inspect the console, there should be a stack trace from a maximum call stack exceeded error

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

const createDivs = num => {
    const rtn = [];
    for(let i = 0; i < num; i++) {
        const key = `div-${i}`;
        rtn.push(<div className={key} key={key} />)
    }
    return rtn;
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="/api/browser/proxy?url=https%3A%2F%2Freactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <div>
        {createDivs(15000)}
      </div>
    </div>
  );
}

export default App;

Call Stack

backend.js:formatted:2097 Uncaught RangeError: Maximum call stack size exceeded 
    at ge (backend.js:formatted:2097)
    at Ge (backend.js:formatted:2435)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
ge @ backend.js:formatted:2097
Ge @ backend.js:formatted:2435
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
postMessage (async)
r @ contentScript.js:1
88 @ contentScript.js:1
n @ contentScript.js:1
(anonymous) @ contentScript.js:1
(anonymous) @ contentScript.js:1
Show 170 more frames

This was not an issue in the previous version of react-devtools.

Activity

  1. bvaughn
    added
    Component: Developer Tools
    Type: Bug
    on Aug 20, 2019

  2. omar-aguilar commented on Aug 20, 2019

    @omar-aguilar
    omar-aguilar
    on Aug 20, 2019

    Is kind of annoying having the backend.js loaded in your page and getting executed on top of all your code all the time.

      // the prototype stuff is in case document.createElement has been modified
  (function () {
    var script = document.constructor.prototype.createElement.call(document, 'script');
    script.src = "chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js";
    script.charset = "utf-8";
    document.documentElement.appendChild(script);
    script.parentNode.removeChild(script);
  })()

  3. gaearon commented on Aug 20, 2019

    @gaearon
    gaearon
    on Aug 20, 2019
    Contributor

    Thanks for the report. This looks like a bug and we’ll investigate it shortly.

    Is kind of annoying having the backend.js loaded in your page and getting executed on top of all your code all the time.

    This is how DevTools always worked, we don’t really have other options.

    I’m sorry it broke now, but it’s been a big rewrite, and things will take another week or two to fully stabilize. Sorry for the trouble.

  4. ryan-rushton commented on Aug 20, 2019

    @ryan-rushton
    ryan-rushton
    on Aug 20, 2019
    Author

    Thanks @gaearon and @bvaughn, if it’s something you’d like a hand with I’d be happy to make a contribution. Just let me know if that’s the case.

  5. bvaughn commented on Aug 24, 2019

    @bvaughn
    bvaughn
    on Aug 24, 2019
    Contributor

    I think this PR fixes the extreme deep and wide tree cases:
    bvaughn/react-devtools-experimental#385

    As a note, 15k divs is still not recommended 😄

  6. bvaughn
    self-assigned this
    on Aug 24, 2019

  7. MVMS1994 commented on Apr 12, 2020

    @MVMS1994
    MVMS1994
    on Apr 12, 2020

    Is there any updates on this thread? I'm facing the exact problem. And in my case, it's 20K table rows.
    I know it's a bad practice to have so many elements and pagination is recommended. But as a platform, I'd like to fix this before introducing pagination to my code.

    Edit: I would like to lend a hand to close this issue. :)

  8. ryan-rushton commented on Apr 12, 2020

    @ryan-rushton
    ryan-rushton
    on Apr 12, 2020
    Author

    @MVMS1994 it was fixed at one point but I haven't opened up the app I built which has a lot of divs in a while. Maybe this is a regression?

  9. bvaughn commented on Apr 13, 2020

    @bvaughn
    bvaughn
    on Apr 13, 2020
    Contributor

    Is there any updates on this thread?

    If there were an update, it would be on the the issue.

    I did a little investigation into this (via #16627) but it turned out to be pretty complicated to get right in all of the methods, and it hasn't been a priority yet.

  10. markbmullins commented on May 17, 2020

    @markbmullins
    markbmullins
    on May 17, 2020

    Just wanted to report the same issue using version 4.6.0.

     1 of 1 unhandled error

Unhandled Runtime Error
RangeError: Maximum call stack size exceeded

Call Stack
ye
chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js (6:16636)
He
chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js (6:21203)
He
chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js (6:21869)
He
chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js (6:21869)
He
chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js (6:21803)
He
chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js (6:21803)
He
chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js (6:21869)
He
...

  11. bladerunner2020 commented on Jan 8, 2021

    @bladerunner2020
    bladerunner2020
    on Jan 8, 2021

    Encountered this issue while using an SVG image with many paths (in my case the 4631 paths are rendered ok, but when I add one more I got the dev tools error).

    react_devtools_backend.js:5158 Uncaught RangeError: Maximum call stack size exceeded
    at shouldFilterFiber (react_devtools_backend.js:5158)
    at mountFiberRecursively (react_devtools_backend.js:5820)
    at mountFiberRecursively (react_devtools_backend.js:5880)
    at mountFiberRecursively (react_devtools_backend.js:5880)
    at mountFiberRecursively (react_devtools_backend.js:5880)

    I import the svg using: import { ReactComponent as Map } from './map.svg';

  12. asumaran commented on Jan 14, 2021

    @asumaran
    asumaran
    on Jan 14, 2021

    I think the same issue is happening to me:

    react_devtools_backend.js:5158 Uncaught RangeError: Maximum call stack size exceeded
    at shouldFilterFiber (react_devtools_backend.js:5158)
    at mountFiberRecursively (react_devtools_backend.js:5820)
    at mountFiberRecursively (react_devtools_backend.js:5871)
    at mountFiberRecursively (react_devtools_backend.js:5871)
    at mountFiberRecursively (react_devtools_backend.js:5880)
    at mountFiberRecursively (react_devtools_backend.js:5880)
    at mountFiberRecursively (react_devtools_backend.js:5880)
    at mountFiberRecursively (react_devtools_backend.js:5880)
    at mountFiberRecursively (react_devtools_backend.js:5880)
    at mountFiberRecursively (react_devtools_backend.js:5880)

    I'm rendering (among other things) about 10k very small react elements

    function PlaceholderRow() {
  return (
    <tr className="candidate-row">
      <td colSpan="10"></td>
    </tr>
  );
}

    React Developer Tools 4.10.1 (12/4/2020)

  13. FSM1 commented on Mar 15, 2021

    @FSM1
    FSM1
    on Mar 15, 2021

    Also getting this error rendering 2 complex SVG's on the page. Any advice in resolving would be appreciated.

  14. gaearon commented on Mar 15, 2021

    @gaearon
    gaearon
    on Mar 15, 2021
    Contributor

    To be clear, the error is coming from React DevTools. While it's unfortunate and would be nice to fix, you can always disable the extension if it's interfering with your work.

  15. FSM1 commented on Mar 16, 2021

    @FSM1
    FSM1
    on Mar 16, 2021

    @gaearon absolutely understood. Got around this by rendering the SVG as an <img src={SVG}/> instead of a React component

  16. bvaughn
    closed this as completedon Apr 28, 2021

  17. jasekiw commented on Apr 15, 2024

    @jasekiw
    jasekiw
    on Apr 15, 2024

    To be clear, the error is coming from React DevTools. While it's unfortunate and would be nice to fix, you can always disable the extension if it's interfering with your work.

    Hi @gaearon, I was able to reproduce this error when rendering a large datalist - 5000 options. I disabled the extension and am still seeing this error. It seems the error is happening during a hot reload but the exception is coming from react-dom_client.js. So it appears at least now this issue is no longer contained to just the dev tools.

    I created a reproduceable demo below. let me know if it is reproduceable for you.

    https://github.com/jasekiw/scheduleFibersWithFamiliesRecursivelyBug

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Component: Developer ToolsType: Bug

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions