Error: "Commit tree does not contain fiber 256. This is a bug in React DevTools." #18831

RickeyWard · 2020-05-05T18:01:22Z

Describe what you were doing when the bug occurred:

Profiling a slow component
In a component that rendered 5000 pre tags with single lines of text in them, that has an unrelated controlled text box is the same component that was typed into while profiling. App hung a while and, when it rendered again the error was in the profiler.

Please do not remove the text below this line

DevTools version: 4.6.0-6cceaeb67

Call stack: at j (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:162825)
at N (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:161628)
at e.getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:164582)
at ec (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:339280)
at ci (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:59620)
at Ll (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:109960)
at qc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:102381)
at Hc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:102306)
at Vc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:102171)
at Tc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:98781)

Component stack: in ec
in div
in div
in div
in So
in Unknown
in n
in Unknown
in div
in div
in rl
in Ze
in fn
in Ga
in _s

bvaughn · 2020-05-07T23:35:24Z

Are you able to repro this? If so, can you share a repro case with us?

adaschevici · 2020-05-13T09:38:20Z

@bvaughn
hi, I received a similar error while working with a very large list that is slow to render
Repo is here: https://github.com/adaschevici/goodreads-v2/tree/05-continuous-integration
FYI: it has submodules so you should clone with them

Setup:
npm run bootstrap

Run app:
npm run start:app

Navigate to Login
Start Profiling
Navigate to Dashboard
Stop profiling

When its done gathering the results it errors out.

Stacktrace i got:

DevTools version: 4.6.0-6cceaeb67

Call stack: at j (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:162825)
    at N (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:161628)
    at e.getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:164582)
    at ec (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:339280)
    at ci (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:59620)
    at nl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:69923)
    at Ll (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:110996)
    at qc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:102381)
    at Hc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:102306)
    at Vc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:102171)

Component stack: in ec
    in div
    in div
    in div
    in So
    in Unknown
    in n
    in Unknown
    in div
    in div
    in rl
    in Ze
    in fn
    in Ga
    in _s

Sorry was not able to get a more isolated test case, just came across it

Also was not able to reliably reproduce, feels like its related to garbage collection

bvaughn · 2020-05-13T16:20:42Z

@adaschevici Thanks for sharing repro instructions!

~~I'm a little confused about how to run it though. There's no bootstrap or start:app commands in the repo you linked me to. (None of the packages define scripts by that name.)~~ Oops, I just noticed that your link specified a branch name as well.

npm run start:app fails for me though:

$ npm run start:app

> @goodreads-v2/root@1.0.0 start:app /Users/bvaughn/Downloads/goodreads-v2
> npm-run-all --parallel start:server start:goodreads


> @goodreads-v2/root@1.0.0 start:server /Users/bvaughn/Downloads/goodreads-v2
> lerna exec npm run server:dev --scope=jungle-jim


> @goodreads-v2/root@1.0.0 start:goodreads /Users/bvaughn/Downloads/goodreads-v2
> lerna exec npm start --scope=@goodreads-v2/goodreads

lerna notice cli v3.21.0
lerna notice cli v3.21.0
lerna notice filter including "jungle-jim"
lerna info filter [ 'jungle-jim' ]
lerna notice filter including "@goodreads-v2/goodreads"
lerna info filter [ '@goodreads-v2/goodreads' ]
lerna ERR! EFILTER No packages remain after filtering [ 'jungle-jim' ]
lerna info Executing command in 1 package: "npm start"
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @goodreads-v2/root@1.0.0 start:server: `lerna exec npm run server:dev --scope=jungle-jim`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @goodreads-v2/root@1.0.0 start:server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/bvaughn/.npm/_logs/2020-05-13T16_23_56_797Z-debug.log
ERROR: "start:server" exited with 1.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @goodreads-v2/root@1.0.0 start:app: `npm-run-all --parallel start:server start:goodreads`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @goodreads-v2/root@1.0.0 start:app script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/bvaughn/.npm/_logs/2020-05-13T16_23_56_869Z-debug.log

Any chance you could just deploy this app somewhere I could look at it already running?

adaschevici · 2020-05-13T17:04:13Z

@bvaughn the error you are seeing is most likely caused by the fact that the git module for the jungle-jim is not automatically cloned.
git clone --recurse-submodules should fix that

bvaughn · 2020-05-13T17:57:39Z

Ah, I think my git client was not new enough to support the --recurse-submodules flag. Had to update it.

bvaughn · 2020-05-13T17:58:15Z

That being said, once the app started, I see another error (in the browser this time):

Failed to compile.

./src/index.js
Module not found: Can't resolve '@goodreads-v2/component-library' in '/Users/bvaughn/Downloads/goodreads-v2/packages/goodreads/src'

Again, any chance you could just deploy this app somewhere I could look at it already running? 😅

adaschevici · 2020-05-13T18:21:23Z

ugh. Yeah, not sure if i can deploy it it needs the mocked API and some extra config i'm not able to do fast enough.
I'll see what i can do and update. Thanks!

bvaughn · 2020-05-13T18:22:53Z

No problem. Keep me posted! I'm happy to try something else on the local checkout if you have additional suggestions for resolving the latest compilation error too. Getting a repro of this would be very helpful.

adaschevici · 2020-05-13T19:53:43Z

oh, right so you also need to run
npm run build:components
then npm run start:app
Overlooked that, my bad

bvaughn · 2020-05-15T16:57:00Z

Cool. Thanks @adaschevici. I can run the app locally now.

How frequently can you reproduce it? Every other time? One in ten times? (I haven't seen it yet so I'm just wondering if I'm doing something wrong.)

Also, when you see it- is it immediately after stopping profiling? Or do you click around or do anything else?

adaschevici · 2020-05-15T17:06:09Z

I haven't seen it since the first time i tried profiling the app.

After that i did a hard refresh with clearing cache in chrome and have not seen it since.
I profiled the page about ~20 times after that

What i did when i did see it:

navigate to login
start profiling
go back to dashboard
stop profiling (took a while)

Actual: the error previously mentioned

RickeyWard · 2020-05-15T17:27:48Z

I was unable to reproduce it since I posted the issue.

bvaughn · 2020-05-15T17:37:06Z

stop profiling (took a while)

This sounds...unexpected. Makes me think something else was going on. Especially for such a small app, stop profiling should seem to be nearly instant.

loia5tqd001 · 2020-07-14T02:16:41Z

Reproduction of the issue:

First, give a peek at this video, which is reproduction steps in video based.

Reproduction steps:

Go to this repo.
1.1 Clone the repo.
1.2 Run the project with yarn and yarn start.
When the project is launched, do the same as the video above, which are:
2.1 Navigate to BASE_URL/staff/merchants
2.2 Start the profiler
2.3 Click on the blue "Thêm mới đối tác" button
2.4 Stop profiling
2.5 (If the error don't appear instantly, click through the most expensive commits on the profiler window - sometimes the error appear instantly when stop profiling, sometimes it needs we to go extra miles to see it, just playing around)

Any requirement for extra information are welcome!

bvaughn · 2020-07-14T13:54:05Z

@loia5tqd001 Thank you for the repro! Can confirm it repros on my end. This is a huge help! I'll dig in this morning.

bvaughn · 2020-07-14T15:35:08Z

I think I've paired the repro down to this Code Sandbox

bvaughn · 2020-07-14T16:10:47Z

Unfortunately this looks like another recent regression 😦 because this bug doesn't manifest in v4.7

Still good to have a repro for, and I'm investigating a fix today. I don't think it will fix the longer standing (much less harder to find a repro for) issue.

bvaughn · 2020-07-14T16:17:17Z

Bisecting shows that this regression also occurred in 8f05f2b, as the result of #19108

bvaughn · 2020-07-14T20:01:39Z

FYI I've reduced the failure case to the following test:

it('should not crash during route transitions with Suspense', () => {
  const RouterContext = React.createContext();

  function App() {
    return (
      <Router>
        <Switch>
          <Route path="/"><Home /></Route>
          <Route path="/about"><About /></Route>
        </Switch>
      </Router>
    );
  }

  const Home = () => {
    return (
      <React.Suspense>
        <Link path="/about">Home</Link>
      </React.Suspense>
    );
  };

  const About = () => <div>About</div>;

  // Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Router.js
  function Router({children}) {
    const [path, setPath] = React.useState('/');
    return (
      <RouterContext.Provider value={{ path, setPath }}>
        {children}
      </RouterContext.Provider>
    );
  }

  // Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Switch.js
  function Switch({ children }) {
    return (
      <RouterContext.Consumer>
        {context => {
          let element = null;
          React.Children.forEach(children, child => {
            if (context.path === child.props.path) {
              element = child.props.children;
            }
          });
          return element
            ? React.cloneElement(element)
            : null;
        }}
      </RouterContext.Consumer>
    );
  }

  // Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Route.js
  function Route({ children, path }) {
    return null;
  }

  const linkRef = React.createRef();

  // Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js
  function Link({ children, path }) {
    return (
      <RouterContext.Consumer>
        {context => {
          return (
            <button ref={linkRef} onClick={() => context.setPath(path)}>{children}</button>
          );
        }}
      </RouterContext.Consumer>
    );
  }

  const container = document.createElement('div');
  utils.act(() => ReactDOM.render(<App />, container));
  expect(container.textContent).toBe('Home');
  utils.act(() => Simulate.click(linkRef.current));
  expect(container.textContent).toBe('About');
});

The error being thrown is when the Link component gets unmounted from its parent Suspense component. It looks like the mount code path is incorrectly. skipping over the Link component to the Context.Consumer beneath it.

bvaughn · 2020-07-15T17:10:24Z

Version 4.8.2 has just been published to NPM and submitted to Chrome/Edge/Firefox stores with a fix for this issue.

Browsers sometimes take a few hours to approve a new extension version, but once the new version goes live this should be resolved. Sorry for the inconvenience.

adaschevici · 2020-07-15T17:16:43Z

@bvaughn
that's cool Brian, thanks for the fix

bvaughn assigned RickeyWard May 7, 2020

bvaughn added Component: Developer Tools Resolution: Needs More Information Type: Bug labels May 7, 2020

bvaughn mentioned this issue May 7, 2020

Error: "Commit tree does not contain fiber 3204. This is a bug in React DevTools." #18754

Closed

This was referenced May 18, 2020

Error: "Commit tree does not contain fiber 97. This is a bug in React DevTools." #18903

Closed

Error: "Commit tree does not contain fiber 3661. This is a bug in React DevTools." #18923

Closed

bvaughn mentioned this issue Jun 10, 2020

Error: "Commit tree does not contain fiber 35. This is a bug in React DevTools." #19107

Closed

This was referenced Jul 4, 2020

Error: "Commit tree does not contain fiber 21163. This is a bug in React DevTools." #19255

Closed

Error: "getCommitTree(): Unable to reconstruct tree for root "1" and commit 36" #19292

Closed

bvaughn self-assigned this Jul 14, 2020

bvaughn removed the Resolution: Needs More Information label Jul 14, 2020

bvaughn mentioned this issue Jul 14, 2020

Error: "Commit tree does not contain fiber 11930. This is a bug in React DevTools." #19351

Closed

bvaughn unassigned RickeyWard Jul 14, 2020

This was referenced Jul 15, 2020

Fix Suspense-wrapping heuristic #19368

Closed

Error: "Commit tree does not contain fiber 9869. This is a bug in React DevTools." #19359

Closed

Fix Suspense-wrapping heuristic (and bump version numbers) #19373

Merged

bvaughn closed this as completed in #19373 Jul 15, 2020

bvaughn mentioned this issue Jul 16, 2020

Error: "Commit tree does not contain fiber 3716. This is a bug in React DevTools." #19383

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error: "Commit tree does not contain fiber 256. This is a bug in React DevTools." #18831

Error: "Commit tree does not contain fiber 256. This is a bug in React DevTools." #18831

RickeyWard commented May 5, 2020

bvaughn commented May 7, 2020

adaschevici commented May 13, 2020 •

edited

Loading

bvaughn commented May 13, 2020 •

edited

Loading

adaschevici commented May 13, 2020

bvaughn commented May 13, 2020

bvaughn commented May 13, 2020

adaschevici commented May 13, 2020

bvaughn commented May 13, 2020

adaschevici commented May 13, 2020

bvaughn commented May 15, 2020 •

edited

Loading

adaschevici commented May 15, 2020

RickeyWard commented May 15, 2020

bvaughn commented May 15, 2020 •

edited

Loading

loia5tqd001 commented Jul 14, 2020 •

edited

Loading

bvaughn commented Jul 14, 2020

bvaughn commented Jul 14, 2020 •

edited

Loading

bvaughn commented Jul 14, 2020

bvaughn commented Jul 14, 2020

bvaughn commented Jul 14, 2020 •

edited

Loading

bvaughn commented Jul 15, 2020

adaschevici commented Jul 15, 2020

Error: "Commit tree does not contain fiber 256. This is a bug in React DevTools." #18831

Error: "Commit tree does not contain fiber 256. This is a bug in React DevTools." #18831

Comments

RickeyWard commented May 5, 2020

Please do not remove the text below this line

bvaughn commented May 7, 2020

adaschevici commented May 13, 2020 • edited Loading

bvaughn commented May 13, 2020 • edited Loading

adaschevici commented May 13, 2020

bvaughn commented May 13, 2020

bvaughn commented May 13, 2020

adaschevici commented May 13, 2020

bvaughn commented May 13, 2020

adaschevici commented May 13, 2020

bvaughn commented May 15, 2020 • edited Loading

adaschevici commented May 15, 2020

RickeyWard commented May 15, 2020

bvaughn commented May 15, 2020 • edited Loading

loia5tqd001 commented Jul 14, 2020 • edited Loading

bvaughn commented Jul 14, 2020

bvaughn commented Jul 14, 2020 • edited Loading

bvaughn commented Jul 14, 2020

bvaughn commented Jul 14, 2020

bvaughn commented Jul 14, 2020 • edited Loading

bvaughn commented Jul 15, 2020

adaschevici commented Jul 15, 2020

adaschevici commented May 13, 2020 •

edited

Loading

bvaughn commented May 13, 2020 •

edited

Loading

bvaughn commented May 15, 2020 •

edited

Loading

bvaughn commented May 15, 2020 •

edited

Loading

loia5tqd001 commented Jul 14, 2020 •

edited

Loading

bvaughn commented Jul 14, 2020 •

edited

Loading

bvaughn commented Jul 14, 2020 •

edited

Loading