question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DevTools crashes (`levelChildren` is undefined) when selecting a component in Flamegraph view

See original GitHub issue

Do you want to request a feature or report a bug? Bug

What is the current behavior? React DevTools crashes in the code below because levelChildren is undefined.

https://github.com/facebook/react/blob/7dc9745427046d462506e9788878ba389e176b8a/packages/react-debug-tools/src/ReactDebugHooks.js#L456-L462

callstack is:

backend.js:formatted:6593 Uncaught TypeError: Cannot read property 'push' of undefined
    at S (backend.js:formatted:6593)
    at _ (backend.js:formatted:6638)
    at inspectHooksOfFiber (backend.js:formatted:6682)
    at rt (backend.js:formatted:2372)
    at Object.inspectElement (backend.js:formatted:2753)
    at t.<anonymous> (backend.js:formatted:3484)
    at t.r.emit (backend.js:formatted:978)
    at backend.js:formatted:7407
    at t (backend.js:formatted:4954)

I haven’t been able to reproduce this yet outside my app, but here’s the steps that trigger the crash in my app:

  1. open dev tools
  2. start profiling
  3. stop profiling
  4. select the CalendarMiddle component in the Flamegraph view
  5. crash!

What is the expected behavior? no crash

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? I’m running:

  • React 16.12
  • RDT 4.2.1 (11/27/2019) revision 3816ae7c3
  • Chrome 79.0.3945.88 (Official Build) (64-bit)
  • MacOS Catalina 10.15.2 (19C57)

I’ve never seen this crash before today. Interestingly, the crash only happens when I select some components in the flamegraph, but doesn’t happen when I select other components. I haven’t figured out the pattern yet of which components will trigger a crash.

I know that this repro isn’t particularly actionable at this point, but I’m hoping that someone who knows the RDT code better than I do might have an idea about why this might be happening.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:18 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
bvaughncommented, Dec 21, 2019

Thanks for the repro info.

Even if this crash is caused by why-did-you-render, the crash callstack is all Dev Tools, which will probably make you an issue magnet next time some other package figures out a way to make devtools crash.

Perhaps! I think this is a pretty unique situation though. Hot-patching React APIs is not something we encourage because it can break things (like DevTools). It’s hard to write code that can withstand parts of it being overridden in unexpected ways 😄I’ll keep this in mind and reevaluate if it comes up again though!

Thanks for the follow up @justingrant and the quick fix @vzaidman! I’m going to close this issue because I don’t think DevTools needs to make any changes at the moment in response to this issue.

1reaction
vzaidmancommented, Dec 21, 2019

fixed on version 3.5 of @welldone-software/why-did-you-render

Read more comments on GitHub >

github_iconTop Results From Across the Web

Hover on undefined variable in Developer Tools causes tab ...
Open Developer Tools (e.g. Ctrl+Shift+I) 3. Select the Scripts tab 4. Expand the XHR Breakpoints heading 5. If necessary, add a blank XHR...
Read more >
javascript - Chrome dev-tools crashes when debugging iframe ...
I'm trying to debug an iframe's contentWindow , but every time i try to view the contentWindow object on chrome 59 dev-tools the...
Read more >
Interacting with the flame graph - Profiler - Google Cloud
Cloud Profiler displays profiling data by using flame graphs. For a conceptual introduction, see Flame graphs. The flame graph is composed of frames....
Read more >
https://patch-diff.githubusercontent.com/raw/faceb...
Component { + render() { + return 'StrictModeChild'; + } + } + apps.push( + <Feature ... from 'react-devtools-shared/src/devtools/views/Components/types'; + ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found