DevTools Profiler: "getCommitTree(): Unable to reconstruct tree for root "…" and commit …"

[morfioce]

Describe what you were doing when the bug occurred:
1.
2.
3.

---

Please do not remove the text below this line

DevTools version: 4.4.0-f749045a5

Call stack: at N (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:154255)
at e.getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157019)
at yl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:320890)
at ei (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:58864)
at Mi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:67500)
at yl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:108161)
at kc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:99474)
at wc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:99399)
at fc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:96173)
at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:45937

Component stack: in yl
in div
in div
in div
in vo
in Unknown
in n
in Unknown
in div
in div
in Qi
in Ve
in nn
in Da
in Yc

[bvaughn]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. Screenshots or videos can also be helpful if they help provide context on how to repro the bug.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[esvyridov]

@bvaughn Looks like the issue is still reproducible after a PR which was done in #16412 . I can try to reproduce the steps from #16412 if it'll help somehow.

[bvaughn]

@esvyridov Help fixing this would certainly be appreciated.

[esvyridov]

@bvaughn I'll try to help and fix that issue. Thank you

[esvyridov]

@bvaughn I was able to reproduce the error here https://codesandbox.io/s/getcommittree-gsqzl. There you will see really strange code :) I think this error could happen because of codebase. No steps required just click on "reload and start profiling" and navigate through commit tree. I'll continue try to reproduce the error with more real world code.

Also during my investigation I saw this error "An error was thrown: "Commit tree does not contain fiber 19. This is a bug in React DevTools."" Let me know if I need to create a sandbox for that error too.

getCommitTree.json.zip
fiber.json.zip

[bvaughn]

Sweet. Thanks for the update! 😄 Any interest in digging into the underlying DevTools code to see if you can find a fix?

If not, that's okay. Having a more reliable way to reproduce the problem will be helpful to whoever looks into fixing it regardless!

[esvyridov]

@bvaughn I'll try but it could take time for digging into the code and debugging. Thank you

[bvaughn]

Of course 🙇 We're appreciate for anything you're able to do. No worries either way.

[jyash97]

Hey @bvaughn

I was looking into the same issue and I encountered these bug: An error was thrown: "Cannot read property '2' of null". And digging into the same issue I found we aren't taking into account if operations[commitIndex] exists over this line: https://github.com/facebook/react/blob/master/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js#L85.

These results in an error on accessing an index from undefined or null: https://github.com/facebook/react/blob/master/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js#L171

Do we want to add a check for this? I am happy to create PR for the same.

Also, another feature/request: Is it possible to reload the Profiler view when there is an error. Currently, we need to reload the whole page. Happy to work on this feature.